3

I am using Highcharts to plot a graph. I need to make an AJAX call to get the data and then plot the graph using that data. I am using JQuery. Below is the code.

<html>
<head>
<title>Metrics info</title>
<script type="text/javascript" 
   src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>

<script type="text/javascript">
$(function () {

        var data = {
        };

        var v_series = [{
            data: []
        }], v_categories = []; 

        function ajaxcall() {
            $.ajax({
                url: "http://localhost:8080/metricgraph/helloWorld.do",
                type: "GET",
                async: false,
                dataType: 'text',
                success: function (response) {
                    var arr = response.split("|");

                    for (i = 0; i < arr.length; i++) { 
                        var temp = arr[i].split(",");
                        data[temp[0]] = Number(temp[1]);
                    } 

                     for(var category in data) {
                         var points = data[category];
                         v_categories.push(category);
                         v_series[0].data.push(points); 
                    }
                }
              });
        }

    $(document).ready(function () {
        ajaxcall();
        setInterval(ajaxcall,60000);

        $('#container').highcharts({
            chart: {
                type: 'spline',
                animation: Highcharts.svg,
                marginRight: 10,
            },
            title: {
                text: 'Live metrics data'
            },
            xAxis: {
                title: {
                    text: 'Time'
                },
                categories: v_categories,
                tickPixelInterval: 150
            },
            yAxis: {
                title: {
                    text: 'Value'
                },
                min:0,
                tickInterval: 10,
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function () {
                    return '<b>'+'Value: ' + '</b>' + Highcharts.numberFormat(this.y, 2)  + '<br/>' + '<b>' + 'Time: ' + '</b>' + this.x//Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x);
                }
            },
             legend: {
                enabled: false
            },
            series: v_series
        });
    });
});

</script> 

</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
</body>
</html>

First, time it is working fine. Graph is being populated correctly with the data got from AJAX call. But second time on wards, graph is not getting plotted with the new data. Instead, it is showing the old data only.

Can someone please let me know what I am doing wrong.

Anand
  • 20,708
  • 48
  • 131
  • 198
  • http://stackoverflow.com/questions/4210879/reload-chart-data-via-json-with-highcharts/8408466#8408466 According to this answer you should use the `setData()`method of the `series`property. Maybe you can give this a try. Here you can find the docs: http://api.highcharts.com/highcharts#Series.setData Hope this helps :) – LarsBauer Apr 06 '15 at 10:28
  • @QueryLars - As per my code, where should I do this change? Also, I am using v_series variable, so should I remove it? – Anand Apr 06 '15 at 10:48
  • Well, I would store the whole chart as a variable. Then you could change the series and after this simply call `chart.redraw()` as described here: http://api.highcharts.com/highcharts#Chart.redraw This approach is untested, but according to the docs this is the way to redraw the chart when values or options changed. – LarsBauer Apr 06 '15 at 10:56
  • @QueryLars - As I am very much new to this, can you please suggest your changes with code regarding the changes to be made? – Anand Apr 06 '15 at 11:18
  • Simply create chart (all code for the chart) inside `success` method - do it after the second `for (..) { }`. – Paweł Fus Apr 07 '15 at 08:57
  • @PawełFus - Since i am very new to it, can you please tell me with code sample? – Anand Apr 07 '15 at 09:08
  • Which part of my suggestion is hard for you? Move all code: `$('#container').highcharts({ ... })` into the `success` method, below this part: `for(var category in data) { ... }; $("#container").highcharts({ ... }); ` – Paweł Fus Apr 07 '15 at 09:14
  • Actually, I understood the same but thought of copying the initialization highcharts code so was thinking of code duplication..Now after your recent comment i got that it needs to be moved not copied. I have done the same now and it is working perfectly fine. Thanks for saving my day Pawel. You can provide your answer below so that I can accept it :) – Anand Apr 07 '15 at 09:28

0 Answers0