Highcharts not generating charts for ajx returned objects

StackOverflow https://stackoverflow.com/questions/19002439

Question

I have written a code which returns a JSON Object from mixpanel in the following format : 

**{"legend_size": 1, "data":  { "series": ["2013-09-25 14:00:00", "2013-09-25 15:00:00", "2013-09-25 16:00:00"], "values": { "Demoevent": {"2013-09-25 20:00:00": 0,  "2013-09-25 12:00:00": 44, "2013-09-25 15:00:00": 1, "2013-09-25 01:00:00": 0 }}}}**

The code processes this JSON object which is passed to the HighCharts Method to dynamically generate a chart.

Here is the code in its original format :

<html>
<head>

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js" />       
 <script type="text/javascript" src="jquery.md5.js"></script></script>
 <script type="text/javascript" src="mixpanelClient.js"></script></script>
 <script type="text/javascript" src="underscore-min.js"></script></script>
 <script type="text/javascript" src="md5.js"></script></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 <script src="http://code.highcharts.com/highcharts.js"></script>

<script> 

$(document).ready(function() {

  var eventToDisplay = "acall finished";
   var apiKey = "BigSecret1";
   var apiSecret = "BigSEcret2";

   var mpEvent = {
   'event': [eventToDisplay, ],
   'type': 'general',
   'unit': 'hour',
  }

var mpClient = MixpanelClient(apiKey, apiSecret);
var requestUrl = mpClient.getRequestUrl(['events'], mpEvent);
console.log("The RequestUrl is:", requestUrl);

var JsonData=null;


var options = {

chart: {
        renderTo: 'container',
        type: 'column'
       },
        title:{
         text: 'Total Calls Finished'
       },
       xAxis: {
        type: 'datetime',
        title: {
        text: "Date"
       },
    },
       yAxis: {
        title:{
           text: 'Count of Calls',
             },
            },

            series:[]
        };



$.ajax({

type:"GET", 
url: requestUrl, 
//The request url returns a JSON object.I have checked it on the console.Attached the   screenshot too.

success: function(data) { 

     JsonData=data;

     **options.series[0].data.values = JsonData.data.values["acall finished"];
     var chart = new Highcharts.Chart(options);** 
     alert("Chart Created");

}, 

  error: function(jqXHR, textStatus, errorThrown) {
  alert(jqXHR.status);
},

dataType: "jsonp"

});
});

</script>
</head>
<body>
 <div id="container"></div>
</body>
</html>

Now here is the screenshot of the console which clearly shows the JSON object on my console.

Console screenshot

The problem is that I am getting a blank chart. No columns, nothing. KINDLY HELP. I am pretty new to HighCharts.

Thanks Kavish

Was it helpful?

Solution

Check the fiddle. In success function of ajax, call the below functions. I think this will help you.

function buildChart(data){
    var seriesOptions = [],
        yAxisOptions = [],
        seriesCounter = 0,
        colors = Highcharts.getOptions().colors;

        dataLength = data[0].length;
        var today = data[0][dataLength-1][0];
        var namearray = new Array();
    for(var i = 0; i < data.length; i++){
        var dataarray = new Array();
        for(var j = 0; j < data[i].length; j++){
            dataarray[j] = new Array();
                dataarray[j][0] = data[i][j][0]; //TS
                dataarray[j][1] = data[i][j][2]; //END VALUE
                namearray[i] = data[i][j][data[i][j].length-2]; //DESCRIPTION
        }

        seriesOptions[i] = {
            name: namearray[i],
            data: dataarray
        };

        console.log(seriesOptions);
        // As we're loading the data asynchronously, we don't know what order it will arrive. So
        // we keep a counter and create the chart when all the data is loaded.
        seriesCounter++;

        if (seriesCounter == data.length) {
            createChart();
        }

    };

    // create the chart when all data is loaded
    function createChart() {
        var options = {
            chart: {
                renderTo: 'line'
            },

            title: {
                text: $(".item.selected td").first().text()
            },

            rangeSelector : {
                buttons: [{
                    type: 'month',
                    count: 1,
                    text: '1M'
                }, {
                    type: 'month',
                    count: 6,
                    text: '6M'
                }, {
                    type: 'year',
                    count: 1,
                    text: '1y'
                }, {
                    type: 'ytd',
                    text: 'YTD'
                }, {
                    type: 'all',
                    text: 'All'
                }],
                selected : 2 // year
            },
            xAxis: {
                type: 'datetime'
            },
            series: [{
                data: seriesOptions[0].data,
                type: "area"


            }]
        } 

        chart = new Highcharts.Chart(options);

        $.each(seriesOptions, function (itemNo, item) {
            chart.addSeries({                        
                name: item.name,
                data: item.data
            }, false);

        });
        chart.redraw();
};
};

var data = 
[[[1041375600000,28.95,28.95,28.95,28.95,0,"Quote"],[1041462000000,29,29.9,28.6,29.9,27300,"Quote"],[1041548400000,30.5,30,29.8,30.8,27700,"Quote"],[1041807600000,30.8,30.3,28.9,30.8,25600,"Quote"],[1041894000000,30.5,30.1,29.1,30.5,41700,"Quote"],[1041980400000,30.1,28.7,28.4,30.1,33400,"Quote"],[1042066800000,28.37,28.5,27.35,28.9,66900,"Quote"]],[[1041375600000,28.95,28.95,28.95,28.95,0,"series2"],[1041462000000,29,29.9,28.6,29.9,27300,"series2"],[1041548400000,30.5,30,29.8,30.8,27700,"series2"],[1041807600000,30.8,30.3,28.9,30.8,25600,"series2"],[1041894000000,30.5,30.1,29.1,30.5,41700,"series2"],[1041980400000,30.1,28.7,28.4,30.1,33400,"series2"],[1042066800000,28.37,28.5,27.35,28.9,66900,"series2"]]];

buildChart(data);
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top