javascript - Asynchronous data input in highcharts -
i loading data mysql database using $.getjson method. data displayed in highcharts. there different buttons user can click in order change between datasets. problem when page first loaded, chart load empty. found out because $.getjson method using retrieving data asynchronous. not sure whether can resolved switching getjson method ajax method. have tried did not succeed. or whether javascript function switching chart data upon button-clicks problem. below code. fragments of code think responsible problem showed below. know might want jsfiddle since using database data know how display problem.
<script> var d = new date(); var pointstart = d.gettime(); //------------------------------------------------------- //set 'line' marker type use in bullet charts highcharts.renderer.prototype.symbols.vline = function(x, y, width, height) { return ['m', x, y + width / 2, 'l', x + height, y + width / 2]; }; highcharts.renderer.prototype.symbols.hline = function(x, y, width, height) { return ['m', x, y + height / 2, 'l', x + width, y + width / 2]; }; //------------------------------------------------------- highcharts.setoptions({ global: { useutc: false }, colors: [ 'rgba( 253, 99, 0, 0.9 )', //bright orange 'rgba( 40, 40, 56, 0.9 )', //dark 'rgba( 253, 0, 154, 0.9 )', //bright pink 'rgba( 154, 253, 0, 0.9 )', //bright green 'rgba( 145, 44, 138, 0.9 )', //mid purple 'rgba( 45, 47, 238, 0.9 )', //mid blue 'rgba( 177, 69, 0, 0.9 )', //dark orange 'rgba( 140, 140, 156, 0.9 )', //mid 'rgba( 238, 46, 47, 0.9 )', //mid red 'rgba( 44, 145, 51, 0.9 )', //mid green 'rgba( 103, 16, 192, 0.9 )' //dark purple ], chart: { alignticks: false, type: '', margin: [70, 100, 70, 90], //borderradius:10, //borderwidth:1, //bordercolor:'rgba(156,156,156,.25)', //backgroundcolor:'rgba(204,204,204,.25)', //plotbackgroundcolor:'rgba(255,255,255,1)', style: { fontfamily: 'abel,serif' }, events: { load: function() { this.credits.element.onclick = function() { window.open( '' ); } } } }, }); </script> <script> var chart, chartoptions = {}, chartdata = {}; chartoptions.chart1 = { chart: { type: 'column' }, title: { text: '<?php echo $companyname; ?>', style: { fontsize: '20px' } }, subtitle: { text: 'revenues', align: 'left', x: 55, style: { fontsize: '16px' } }, xaxis: { categories: [] }, yaxis: { title: { text: '<?php echo $unitcurr; ?>' } }, series: [{ name: 'revenues', color: '#006699', data: [] }] }; var tablename = '<?php echo $tablename; ?>' $.getjson("../../companies/charts/data.php", {id: escape(tablename)}, function(json) { chartoptions.chart1.xaxis.categories = json[0]['data']; chartoptions.chart1.series[0].data = json[1]['data']; }); chartoptions.chart2 = { chart: { type: 'column' }, title: { text: '<?php echo $companyname; ?>', style: { fontsize: '20px' } }, subtitle: { text: 'earnings before interest , taxes', align: 'left', x: 55, style: { fontsize: '16px' } }, xaxis: { categories: [] }, yaxis: { title: { text: '<?php echo $unitcurr; ?>' } }, series: [{ name: 'ebit', color: '#006699', data: [] }] }; var tablename = '<?php echo $tablename; ?>' $.getjson("../../companies/charts/data.php", {id: escape(tablename)}, function(json) { chartoptions.chart2.xaxis.categories = json[0]['data']; chartoptions.chart2.series[0].data = json[4]['data']; }); $(function() { //common options highcharts.setoptions({ chart: { marginright: 0 }, legend: { enabled: false }, plotoptions: { bar: { pointpadding: .01 }, column: { borderwidth: 0.5 }, line: { linewidth: 1 }, }, series: [{ color: '#027ff7', }] }); $('#container').highcharts(chartoptions.chart1); chart = $('#container').highcharts(); $(document).on('click', '.chart-update', function() { $('button').removeclass('selected'); $(this).addclass('selected'); chart.destroy(); $('#container').highcharts(chartoptions[$(this).data('chartname')]); chart = $('#container').highcharts(); }); }); </script> </head> <body> <span class="wrapper"> <span class="block chart"><div id="container" style="width:400px;height:300px;margin:1.5em 1em;float:left;"></div></span> <span class="block buttons"> <div><button class="chart-update selected" data-chart-name="chart1">chart1</button></div> <div><button class="chart-update" data-chart-name="chart2">chart2</button></div> </span> </span> </body> </html> so wondering whether of 2 segments below responsible problem:
var tablename = '<?php echo $tablename; ?>' $.getjson("../../companies/charts/data.php", {id: escape(tablename)}, function(json) { chartoptions.chart2.xaxis.categories = json[0]['data']; chartoptions.chart2.series[0].data = json[4]['data']; }); or
$('#container').highcharts(chartoptions.chart1); chart = $('#container').highcharts(); $(document).on('click', '.chart-update', function() { $('button').removeclass('selected'); $(this).addclass('selected'); chart.destroy(); $('#container').highcharts(chartoptions[$(this).data('chartname')]); chart = $('#container').highcharts(); }); i tried switch out json method using ajax method instead async set false. showed below (didn't work , no data displays upon clicking buttons).
var tablename = '<?php echo $tablename; ?>' $.ajax({ url: "../../companies/charts/data.php", data: {id: escape(tablename)}, datatype: "json", async: false, succes: function(data) { chartoptions.chart1.xaxis.categories = json[0]['data']; chartoptions.chart1.series[0].data = json[6]['data']; } }); thanks in advance help!
if use ajax, suppose there no need set async property false. also, seems have mispelled success on ajax call.
just declare highchart initialization when ajax call had returned success. basically, ajax method on top of highchart initialization.
Comments
Post a Comment