使用yii2中的图表，每次都使用ajax刷新

Question

Am developing an application that uses yii2 and i would like to integrate miloschuman chart extension

By default i use

echo Highcharts::widget([
'scripts' => [
    'modules/exporting',
    'themes/grid-light',
],
'options' => [
    'title' => [
        'text' => 'Trucks chart',
    ],
    'xAxis' => [
        'categories' => ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums'],
    ],
    'labels' => [
        'items' => [
            [
                'html' => 'Total fruit consumption',
                'style' => [
                    'left' => '50px',
                    'top' => '18px',
                    'color' => new JsExpression('(Highcharts.theme && Highcharts.theme.textColor) || "black"'),
                ],
            ],
        ],
    ],
    'series' => [
        [
            'type' => 'column',
            'name' => 'Rejected trucks',
            'data' => [3, 2, 1, 3, 4],
        ],
        [
            'type' => 'column',
            'name' => 'Approved trucks',
            'data' => [2, 3, 5, 7, 6],
        ],
        [
            'type' => 'column',
            'name' => 'Joe',
            'data' => [4, 3, 3, 9, 0],
        ],
        /*[
            'type' => 'spline',
            'name' => 'Average',
            'data' => [3, 2.67, 3, 6.33, 3.33],
            'marker' => [
                'lineWidth' => 2,
                'lineColor' => new JsExpression('Highcharts.getOptions().colors[3]'),
                'fillColor' => 'white',
            ],
        ],*/
        [
            'type' => 'pie',
            'name' => 'Total trucks in pie chart',
            'data' => [
                [
                    'name' => 'Jane',
                    'y' => 13,
                    'color' => new JsExpression('Highcharts.getOptions().colors[0]'), // Jane's color
                ],
                [
                    'name' => 'John',
                    'y' => 23,
                    'color' => new JsExpression('Highcharts.getOptions().colors[1]'), // John's color
                ],
                [
                    'name' => 'Joe',
                    'y' => 19,
                    'color' => new JsExpression('Highcharts.getOptions().colors[2]'), // Joe's color
                ],
            ],
            'center' => [100, 80],
            'size' => 100,
            'showInLegend' => false,
            'dataLabels' => [
                'enabled' => false,
            ],
        ],
    ],
]

]);

This renders the data just fine but i would like to fetch the data with a custom javascript function with every 5 seconds refreshing the data. How do i go about it

I have a custom function

$this->registerJs('$.getJSON("//www.highcharts.com/samples/data/
jsonp.php?filename=aapl-c.json&callback=?",
myCallbackFunction);');

How do i change the data in the series to use an ajax function which returns a json

I have checked: this link but its not very helpful, Could someone guide me on the way forward, or probably other extensions which implements the yii2 charts with data from the server in ajax request

Answer 1

Your question doesn't give away a great deal about how much you're willing to do some trial and error yourself or if you're looking for full code for each change required. Let me know if you're looking for specifics rather than guidance on the changes required.

Hopefully this gets you where you want to be:

1. Move the data creation (the series part of the array in your code) to a method (static or otherwise) in a relevant Model.

For example if you're dealing with Trucks then you might create public static function getChartData(){ and then Truck::getChartData()

That method would return a php array. e.g:

[ 'type' => 'column', 'name' => 'Rejected trucks', 'data' => [3, 2, 1, 3, 4], ], [ 'type' => 'column', 'name' => 'Approved trucks', 'data' => [2, 3, 5, 7, 6], ],

That can be included in your existing code above, or converted with JSON::encode() or similar to be returned every 5 seconds when requested with ajax.

1. Use your new method in your code above. So:

'series' => Truck::getChartData()

1. Get the chart to request updated data every 5 seconds.

The page you link to has an example which is triggered on the load event of the chart and sends an ajax request every 5 seconds. It only appears to update the first series [0] but could be easily updated to switch all series. That should do nicely unless there is something specific about it which isn't working for you.

1. You need a new route in config to send the ajax requests above to, and then a new action in a relevant controller which returns the json encoded response from Truck::getChartData() so that method is reused.