It is currently Thu Nov 27, 2014 5:58 pm Advanced search

highchart stack bar chart loading insconsistently

Technical support for the Highcharts Stock package

highchart stack bar chart loading insconsistently

Postby harpreet » Wed Jan 25, 2012 5:49 pm

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.
Attachments
barchart.jpg
sample bar chart with normal stacking .
barchart.jpg (16.95 KiB) Viewed 1755 times
harpreet
 
Posts: 46
Joined: Wed Jan 18, 2012 11:25 pm

Re: highchart stack bar chart loading insconsistently

Postby hfrntt » Tue Jan 31, 2012 1:43 pm

Hi, sorry for late reply. Could you show the code that you're using to create charts? Jsfiddle demo will be even better.
Slawek Kolodziej
Highcharts support team
hfrntt
 
Posts: 6394
Joined: Mon Aug 30, 2010 10:41 am

Re: highchart stack bar chart loading insconsistently

Postby harpreet » Tue Feb 07, 2012 11:51 pm

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>
harpreet
 
Posts: 46
Joined: Wed Jan 18, 2012 11:25 pm

Re: highchart stack bar chart loading insconsistently

Postby hfrntt » Fri Feb 10, 2012 1:58 am

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.
Slawek Kolodziej
Highcharts support team
hfrntt
 
Posts: 6394
Joined: Mon Aug 30, 2010 10:41 am

Re: highchart stack bar chart loading insconsistently

Postby harpreet » Mon Feb 13, 2012 4:56 pm

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.....
harpreet
 
Posts: 46
Joined: Wed Jan 18, 2012 11:25 pm

Re: highchart stack bar chart loading insconsistently

Postby hfrntt » Sat Feb 18, 2012 2:15 am

Well it's rather php question. You can send back array containing two series options.
Slawek Kolodziej
Highcharts support team
hfrntt
 
Posts: 6394
Joined: Mon Aug 30, 2010 10:41 am

Re: highchart stack bar chart loading insconsistently

Postby harpreet » Mon Feb 20, 2012 6:43 pm

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!
harpreet
 
Posts: 46
Joined: Wed Jan 18, 2012 11:25 pm


Return to Highstock Usage

Who is online

Users browsing this forum: Yahoo [Bot] and 2 guests