highchart stack bar chart loading insconsistently

[harpreet]

I have a bar chart stack display where i show Student success/failed per day.

I am facing two issues :

1> i want to load the success bar first and then the unsuccessful. But when i keep refreshing the page my charts is displayed differently.
Sometimes Success bar comes first and sometimes Unsuccessful. I have color coded the two [Success,Unsuccess] and want to keep them consistent....Like always show Success bar at bottom and Unsuccessful bar at top of it.

[hfrntt]

Hi, sorry for late reply. Could you show the code that you're using to create charts? Jsfiddle demo will be even better.

[harpreet]

Hello i was out on vacation did not get a chance to see the reply....

here is my code : I am not sure how i can add this in jfiddle i am a newbee........

=======================================

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!-- BEGIN: load jquery -->
<script language="javascript" type="text/javascript"
src="resources/jquery-1.4.4.min.js"></script>
<!-- END: load jquery -->
<!-- BEGIN: load hightchart -->
<script src="resources/highcharts.js" type="text/javascript"></script>
<!-- <script type="text/javascript" src="js/themes/gray.js"></script> -->
<!-- 1b) Optional: the exporting module -->
<script type="text/javascript" src="resources/modules/exporting.js"></script>
<!-- END: load hightchart -->

<!-- BEGIN:script to invoke highchart -->
<script type="text/javascript">

$(document).ready( function(){//jquery start
//get current year
var currentYear = (new Date).getFullYear();
var date = (new Date).getDate();

//alert(date);

var options = {
chart: {
renderTo: 'midwest_installation',
//zoom option
zoomType: 'xy',
defaultSeriesType: 'column'
},
title: {
text: 'Tasks'
},
xAxis: {
categories: [],
labels: {
rotation: -90,
align: 'right'
}
},
yAxis:[ {lineWidth: 1,
title: {
text: 'Count Of Tasks'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'blue'
}
}

},
{ // Secondary yAxis
lineWidth: 1,
max: 100,
min: 0,


title: {
text: 'Success Rate',
style: {
color: '#4572A7'
}
},
labels: {
formatter: function() {
return this.value +'%';
},
style: {
color: '#4572A7'
}
},
opposite: true
}],
tooltip: {
formatter: function() {
var point = this.point,
s = this.x+'/'+currentYear+':<b>'+point.series.name+':<b>'+ this.y +'<br/>';

return s;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'White'
}
}
},

series: []


};


$.get('get_unsuccessful.php', function(data) {
var series = {
data: []
};

$.each(data, function(data, data) {
var cqi = data.Date;
var values = cqi.split("-");
var date = values[1]+"/"+values[2];
options.xAxis.categories.push(date);
series.name = 'Unsuccessful';
series.color='#8EB4E3';
var failed = data.failed;
var val = parseFloat(failed)
series.data.push(val);
});
options.series.push(series);
var chart = new Highcharts.Chart(options);

});

//call to get data.

$.get('get_successful.php', function(data) {
var series = {
data: []
};
$.each(data, function(data, data) {
var cqi = data.Date;
var values = cqi.split("-");
var date = values[1]+"/"+values[2];
var success = data.success;
options.xAxis.categories.push(date);
series.name = 'Successful ';
series.color='#953735';
var success = data.success;
var val = parseFloat(success)
series.data.push(val);
});
options.series.push(series);
var chart = new Highcharts.Chart(options);

});




});//end of jquery
</script>

<!--END: script to invoke highchart -->
<!-- 3. Add the midwest_installation -->

<div id="midwest_installation" style="width: 450; height: 350; margin: 0 auto"></div>

[hfrntt]

Well It happens because it depends which ajax request comes back first (sometimes it's successful, sometimes unsuccessful). It'd be much easier if you'll have just one ajax request and got both series data at the same time.

[harpreet]

the data is coming from two diff tables from db and have diff sql queries.... php script gets the data and send it as a json object to the front end ... how can i combine both in one ajax request.....

[hfrntt]

Well it's rather php question. You can send back array containing two series options.

[harpreet]

Hello hfrntt,
Finally i was able to resolve the issue...... Now i am able to control the loading of charts as per my need......
Had to add some controllers in PHP to make this happen... and then control the loading of the graphs at in the front end using jquery.....

Was quite a journey but it was worth it .......

Thank you!