create column chart in highcharts dynamically from json data

Question

I have the following json data

var json= {
    "PFTs_likely_to_change": [
        [16]
    ],
    "PFTs_likely_to_remain_unchanged": [
        [2]
    ]
}

This data is coming through url

var data=$.getJSON('{% url "PFTpercentChange" %}');

then I parse the json data

var json = JSON.parse(data);

Now I want to create column chart using highcharts.The code is

$(document).ready(function() {
  $("#container").dialog({
    autoOpen: false,
    width: 600,
    height: 500

  });
  $("#btnclick").click(function() {
    $("#container").dialog("open");
    //var json = JSON.parse(data);
    var json = {
      "PFTs_likely_to_change": [
        [16]
      ],
      "PFTs_likely_to_remain_unchanged": [
        [2]
      ]
    };
    //var chart1; // globally available
    chart1 = new Highcharts.Chart({
      chart: {
        renderTo: 'container',
        type: 'column' // change with your choice
      },
      title: {
        text: 'Change in Plant Functional Types'
      },
      xAxis: {
        categories: ['Change in Plant Functional Types']
          // Should be replace with JSON
      },
      yAxis: {
        title: {
          text: 'Percentage(%)'
        }
      },
      series: [{ //Should be replace with JSON
        name: 'PFTs likely to change',
        data: [88]
      }, {
        name: 'PFTs likely to remain unchanged',
        data: [12]
      }]
    });
  });
});

How can I do this dynamically?

$.getJSON returns an jqXHR object. You're trying to JSON.parse that object and it's working? — Stryner
– Stryner, Commented Feb 4, 2016 at 16:41
No Im not using JSON.parse. I have shared the fiddle. I read in some docs that we need to parse JSON when using external data. My problem is how to do this dynamically? — Bruce
– Bruce, Commented Feb 4, 2016 at 16:43

Nishith Kant Chaturvedi · Accepted Answer · 2016-02-04 18:58:42Z

1

Update Fiddle with chart in dialog with dynamic json data

Here is working fiddle

have a separate div for popup/modal. Now put your highchart container div in it. change your code to get series data dynamically as below code :

 var json= {
"PFTs_likely_to_change": [
    [16]
],
"PFTs_likely_to_remain_unchanged": [
    [2]
]
 }
var seriesData=[];
$.each(json,function(key,val){
console.log(key+"----key----and value"+val);
seriesData.push({name:key,data:val}); //put seriesData in chart's series
});

edited Feb 4, 2016 at 18:58

answered Feb 4, 2016 at 18:34

Nishith Kant Chaturvedi

4,7892 gold badges18 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

create column chart in highcharts dynamically from json data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related