Highchart doesn't show the graph : error adding javascript array in series -
i plotting population information using bar graph in highchart. fetched data using ajax call , store them in array
$(document).ready(function(){ var url = 'zone.php'; var zone_name = []; var male_pop = []; var female_pop = []; $.getjson(url, function(data) { $.each(data, function(index, data) { zone_name.push(data.name); male_pop.push(parseint(data.pop_male)); female_pop.push(parseint(data.pop_female)); }); }); when use these data plot graph, graph doesn't show up.
$('#chart').highcharts({ chart: { type: 'bar' }, title: { text: 'popolution of nepal zone wise' }, subtitle: { text: 'source: cbs.gov.np' }, xaxis: { categories: zone_name, title: { text: null } }, yaxis: { min: 0, title: { text: 'population', align: 'high' }, labels: { overflow: 'justify' } }, tooltip: { valuesuffix: '' }, plotoptions: { bar: { datalabels: { enabled: true } } }, legend: { layout: 'vertical', align: 'right', verticalalign: 'top', x: -100, y: 100, floating: true, borderwidth: 1, backgroundcolor: '#ffffff', shadow: true }, credits: { enabled: false }, series: [{ name: 'male population', data: male_pop }, { name: 'female population', data: female_pop }, { name: 'total population', data: male_pop }] }); }); the error in series part. assignment data: male_pop not working. how can overcome error?
edit: output of male_pop array on console
0: 676960 1: 1122885 2: 990638 3: 1401822 4: 1939350 5: 1500452 6: 706243 7: 1344568 8: 241786 9: 195827 10: 831283 11: 679340 12: 754277 13: 463610
i guess problem due asyn nature of $.getjson, when call: $('#chart').highcharts({ right after that, response server not arrive yet. try changing to:
$.getjson(url, function(data) { $.each(data, function(index, data) { zone_name.push(data.name); male_pop.push(parseint(data.pop_male)); female_pop.push(parseint(data.pop_female)); }); // $('#chart').highcharts({ });
Comments
Post a Comment