How to bind dynamic data to highcharts basic area graph

0
votes

I have to create the following graph and i have to dynamically load data into it. Basic Area http://domoticx.com/wp-content/uploads/highcharts-area-basic-standaard.png

Could anyone please help me understanding how can it be done. Below is where i am able to reach.:

     $.ajax({
         url: 'EthicsData',
            dataType: "json",
            type: "GET",
            contentType: 'application/json; charset=utf-8',
            async: false,
            processData: false,
            cache: false,
            delay: 150,
            success: function (data) {
                var EthicReg = (data[0].regdet);
                var EthicComp = (data[0].compdet);
                var EthicsCompletions = new Array();
                var EthicsRegistration = new Array();
                for (var i in EthicReg) {
                    var serie = new Array(EthicReg[i].Value, EthicReg[i].year);
                    EthicsRegistration.push(serie);
                }
                for (var y in EthicComp) {
                    var series2 = new Array(EthicComp[y].value,                 
EthicComp[y].year);
                    EthicsCompletions.push(series2);
                }
                DrawEthicsAndCompl(EthicsCompletions, EthicsRegistration)
            },

            error: function (xhr) {
                alert('error');
            }
        });
    };
        function DrawEthicsAndCompl(EthicsCompletions, EthicsRegistration) {
     debugger;
     var chart = new Highcharts.Chart({

         chart: {
             //plotBackgroundColor: null,
             //plotBorderWidth: 1, //null,  
             //plotShadow: false,
             renderTo: 'container1',
             type: 'area'
         },
         title: {
                 text: 'US and USSR nuclear stockpiles'
     },
     subtitle: {
             text: 'something'
     },
     xAxis: {
         allowDecimals: false,
         labels: {
             formatter: function () {
                 return 10; // clean, unformatted number for year
             }
         }
     },
     yAxis: {
         title: {
             text: 'Nuclear weapon states'
         },
         labels: {
             formatter: function () {
                 return this.value;
             }
         }
     },
     tooltip: {
         pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
     },
     plotOptions: {
         area: {
             pointStart: 2010,
             marker: {
                 enabled: false,
                 symbol: 'circle',
                 radius: 2,
                 states: {
                     hover: {
                         enabled: true
                     }
                 }
             }
         }
     },
     series: [{
         name: 'Registration',
         data: [EthicsRegistration[0]]
     }, {
         name: 'Completions',
         data: [EthicsCompletions[0]]
     }]
     });
     }

Here is the link which demo's same but static data: (http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/area-basic/)

2
javascriptjqueryhighcharts

2 Answers

0
votes

Just change the order in which you are pushing items in array , means

Instead

var serie = new Array(EthicReg[i].Value, EthicReg[i].year);
                EthicsRegistration.push(serie);

Use

var serie = new Array(EthicReg[i].year, EthicReg[i].Value);
                EthicsRegistration.push(serie);

Also , If you are getting year's value don't use pointStart: 2010 instead leave it on the data you are getting from the response above.

0
votes

Thanks @Nishith for providing the right direction. I modified the code as below:

name: 'Registration',
     data:  [EthicsRegistration[0][1], EthicsRegistration[1][1], EthicsRegistration[2][1]]
 }, {
     name: 'Completions',
     data: [EthicsCompletions[0][1],EthicsCompletions[1][1],EthicsCompletions[2][1]]
 }]
 });