• I have problem in adding a flot chart as dashboard widget on my wordpress admin dashboard page.

    The chart is being displayed but i can’t drag/sort all dashboard widgets like there’s no built-in drag and sort function when i use the code below,

    function total_revenue_widget() {
        require_once($_SERVER['DOCUMENT_ROOT'] . '/wp-content/plugins/myplugin/admin/includes/database_tables.php');
              $days = array();
              for($i = 0; $i < 30; $i++) {
                $days[date('Y-m-d', strtotime('-'. $i .' days'))] = 0;
              }
        global $wpdb;
        $orders_query = mysql_query("select date_format(o.date_purchased, '%Y-%m-%d') as dateday, sum(ot.value) as total from " . $wpdb->prefix."orders o, ".$wpdb->prefix."orders_total ot where date_sub(curdate(), interval 30 day) <= o.date_purchased and o.orders_id = ot.orders_id and ot.class = 'ot_total' group by dateday");
              while ($orders = mysql_fetch_array($orders_query)) {
                $days[$orders['dateday']] = $orders['total'];
              }
    
              $days = array_reverse($days, true);
    
              $js_array = '';
              foreach ($days as $date => $total) {
                $js_array .= '[' . (mktime(0, 0, 0, substr($date, 5, 2), substr($date, 8, 2), substr($date, 0, 4))*1000) . ', ' . $total . '],';
              }
    
              if (!empty($js_array)) {
                $js_array = substr($js_array, 0, -1);
              }
    
              $chart_label = 'Total Revenue';
              $chart_label_link = get_bloginfo('wpurl').'/wp-admin/admin.php?page=store&submenu=orders';
              require($_SERVER['DOCUMENT_ROOT'] . '/wp-content/plugins/myplugin/admin/includes/classes/currencies.php');
              $currencies = new currencies();
              $output = <<<EOD
        <div id="d_total_revenue" style="width: 100%; height: 200px;"></div>
        <script type="text/javascript">
        $(function () {
          var plot30 = [$js_array];
          $.plot($('#d_total_revenue'), [ {
            label: '$chart_label',
            data: plot30,
            lines: { show: true, fill: true },
            points: { show: true },
            color: '#66CC33'
          }], {
            xaxis: {
              ticks: 4,
              mode: 'time'
            },
            yaxis: {
              ticks: 3,
              min: 0
            },
            grid: {
              backgroundColor: { colors: ['#fff', '#eee'] },
              hoverable: true
            },
            legend: {
              labelFormatter: function(label, series) {
                return '<a href="$chart_label_link">' + label + '</a>';
              }
            }
          });
        });
    
        function showTooltip(x, y, contents) {
          $('<div id="tooltip">' + contents + '</div>').css( {
            position: 'absolute',
            display: 'none',
            top: y + 5,
            left: x + 5,
            border: '1px solid #cccccc',
            padding: '2px',
            backgroundColor: '#ffffff',
            color: 'black',
            opacity: 0.80
          }).appendTo('body').fadeIn(200);
        }
    
        var monthNames = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ];
    
        var previousPoint = null;
        $('#d_total_revenue').bind('plothover', function (event, pos, item) {
          if (item) {
            if (previousPoint != item.datapoint) {
              previousPoint = item.datapoint;
    
              $('#tooltip').remove();
              var x = item.datapoint[0],
                  y = item.datapoint[1],
                  xdate = new Date(x);
    
              showTooltip(item.pageX, item.pageY, y + ' for ' + monthNames[xdate.getMonth()] + '-' + xdate.getDate());
            }
          } else {
            $('#tooltip').remove();
            previousPoint = null;
          }
        });
        </script>
        EOD;
        echo '<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="'.get_bloginfo('wpurl').'/wp-content/plugins/myplugin/ext/flot/jquery.flot.js"></script>';
        echo $output;
        }
        function add_dashboard_store_widgets() {
         if ( current_user_can('activate_plugins') ) {
               wp_add_dashboard_widget('total_revenue_dashboard_widget', 'Total Revenue', 'total_revenue_widget');
         }
        } ?>

    But when i modify the code above to the code below, the flot dashboard widget is being displayed but the chart inside it is not, like its empty and all dashboard widgets including the flot dashboard widget can be dragged and sort.

    <?php
        function my_scripts_method() {
            wp_register_script( 'flot', get_bloginfo('wpurl').'/wp-content/plugins/myplugin/ext/flot/jquery.flot.js', array('jquery'));
            wp_enqueue_script( 'flot' );
        }    
    
        add_action('admin_enqueue_scripts', 'my_scripts_method');
    
        add_filter( 'admin_print_footer_scripts', 'additional_admin_footer' );
        function additional_admin_footer() {
        ?>
        <script type="text/javascript">
        var $f = jQuery.noConflict();
        $f(function () {
          var plot30 = [$js_array];
          $.plot($f('#d_total_revenue'), [ {
            label: '$chart_label',
            data: plot30,
            lines: { show: true, fill: true },
            points: { show: true },
            color: '#66CC33'
          }], {
            xaxis: {
              ticks: 4,
              mode: 'time'
            },
            yaxis: {
              ticks: 3,
              min: 0
            },
            grid: {
              backgroundColor: { colors: ['#fff', '#eee'] },
              hoverable: true
            },
            legend: {
              labelFormatter: function(label, series) {
                return '<a href="$chart_label_link">' + label + '</a>';
              }
            }
          });
        });
    
        function showTooltip(x, y, contents) {
          $('<div id="tooltip">' + contents + '</div>').css( {
            position: 'absolute',
            display: 'none',
            top: y + 5,
            left: x + 5,
            border: '1px solid #cccccc',
            padding: '2px',
            backgroundColor: '#ffffff',
            color: 'black',
            opacity: 0.80
          }).appendTo('body').fadeIn(200);
        }
    
        var monthNames = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ];
    
        var previousPoint = null;
        var $q = jQuery.noConflict();
        $q('#d_total_revenue').bind('plothover', function (event, pos, item) {
          if (item) {
            if (previousPoint != item.datapoint) {
              previousPoint = item.datapoint;
    
              $q('#tooltip').remove();
              var x = item.datapoint[0],
                  y = item.datapoint[1],
                  xdate = new Date(x);
    
              showTooltip(item.pageX, item.pageY, y + ' for ' + monthNames[xdate.getMonth()] + '-' + xdate.getDate());
            }
          } else {
            $q('#tooltip').remove();
            previousPoint = null;
          }
        });
        </script>
        <?php
        }
        function total_revenue_widget() {
        require_once($_SERVER['DOCUMENT_ROOT'] . '/wp-content/plugins/myplugin/admin/includes/database_tables.php');
              $days = array();
              for($i = 0; $i < 30; $i++) {
                $days[date('Y-m-d', strtotime('-'. $i .' days'))] = 0;
              }
        global $wpdb;
        $orders_query = mysql_query("select date_format(o.date_purchased, '%Y-%m-%d') as dateday, sum(ot.value) as total from " . $wpdb->prefix."orders o, ".$wpdb->prefix."orders_total ot where date_sub(curdate(), interval 30 day) <= o.date_purchased and o.orders_id = ot.orders_id and ot.class = 'ot_total' group by dateday");
              while ($orders = mysql_fetch_array($orders_query)) {
                $days[$orders['dateday']] = $orders['total'];
              }
    
              $days = array_reverse($days, true);
    
              $js_array = '';
              foreach ($days as $date => $total) {
                $js_array .= '[' . (mktime(0, 0, 0, substr($date, 5, 2), substr($date, 8, 2), substr($date, 0, 4))*1000) . ', ' . $total . '],';
              }
    
              if (!empty($js_array)) {
                $js_array = substr($js_array, 0, -1);
              }
    
              $chart_label = 'Total Revenue';
              $chart_label_link = get_bloginfo('wpurl').'/wp-admin/admin.php?page=store&submenu=orders';
              require($_SERVER['DOCUMENT_ROOT'] . '/wp-content/plugins/myplugin/admin/includes/classes/currencies.php');
              $currencies = new currencies();
              $output = '<div id="d_total_revenue" style="width: 100%; height: 200px;"></div>';
        echo $output;
        }
            function add_dashboard_store_widgets() {
             if ( current_user_can('activate_plugins') ) {
                   wp_add_dashboard_widget('total_revenue_dashboard_widget', 'Total Revenue', 'total_revenue_widget');
             }
            } ?>

    I can’t find a solution for this.. Please help.

  • The topic ‘Adding a flot chart as dashboard widget in wordpress admin page’ is closed to new replies.