Highcharts bar chart with negative and positive data - highcharts

Question

I am working on a script that displays a bar chart. I have this working to a degree.
What I am trying to do is to display the results of an MySQL query in the chart with the negative values on the left and the positive values on the right. The result values in the table are "1" or "2".
The code so far is:
$(function () {
var data =[<?php
mysql_select_db($database_test, $con);
$query_result = sprintf("SELECT COUNT(Condition), ConditionValue AS RC1 FROM FeedBack WHERE ConditionValue = 1 AND FeedBackDate BETWEEN '" . date("Y-m-d", strtotime($_POST['FromDate'])) . "' AND '". date("Y-m-d", strtotime($_POST['ToDate'])) . "'");
$result = mysql_query($query_result, $con) or die(mysql_error());
$totalRows_result_rc = mysql_num_rows($result);
while ($row_result = mysql_fetch_assoc($result)){
?>
[<?php echo $row_result['RC1'];?>]
<?php
}
?>
]
$('#container1').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Condition'
},
subtitle: {
text: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -20,
y: 34,
floating: false,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
plotOptions: {
series: {
shadow:false,
borderWidth:0,
dataLabels:{
enabled:true,
formatter: function() {
return this.y +'%';
}
}
}
},
xAxis:{
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickLength:3,
title:{
text:'<?php print $totalRows_result_rc;?> records'
},
},
yAxis:{
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickWidth:1,
tickLength:3,
gridLineColor:'#ddd',
title:{
text:'Between <?php print $_POST['FromDate'];?> and <?php print $_POST['ToDate'];?>',
rotation:0,
margin:50,
},
labels: {
formatter: function() {
return (this.isLast ? this.value + '%' : this.value);
}
}
},
series: [{
color: '#CC0000',
name: 'Conditione',
data: data,
maxPointWidth: 10,
index:0,
legendIndex:1,
exporting: {
filename: 'Ccondition'
}
}]
});
});
I have written this in a number of differnet way but can not getthe required result.
Can anyone point out where I am gong wrong. Many thanks in advance for the time you may spend helping.

Answer 1

This can by done by using two series: one contains the negative and one contains the positive values. They should (but not required depending on your needs) share the same xAxis value. Take a look at this example on the highcharts site. Note the use of two series:
series: [{
name: 'Male',
data: [-2.2, -2.2, -2.3, -2.5, -2.7, -3.1, -3.2,
-3.0, -3.2, -4.3, -4.4, -3.6, -3.1, -2.4,
-2.5, -2.3, -1.2, -0.6, -0.2, -0.0, -0.0]
}, {
name: 'Female',
data: [2.1, 2.0, 2.2, 2.4, 2.6, 3.0, 3.1, 2.9,
3.1, 4.1, 4.3, 3.6, 3.4, 2.6, 2.9, 2.9,
1.8, 1.2, 0.6, 0.1, 0.0]
}]
And the are linked to the same categories:
var categories = ['0-4', '5-9', '10-14', '15-19',
'20-24', '25-29', '30-34', '35-39', '40-44',
'45-49', '50-54', '55-59', '60-64', '65-69',
'70-74', '75-79', '80-84', '85-89', '90-94',
'95-99', '100 + '];
They do some formatting here such that the negative values are labeled as positive and some other yAxis label changes.