i have a code that should reverse the CanvasJS graph , But when i give reversed : true for x-axis nothing changes.
Can anybody help me with this
<?php
$dataPoints1 = array(
array("label"=> "2006", "y"=> 3289)
);
$dataPoints2 = array(
array("label"=> "2006", "y"=> 1827)
);
$dataPoints3 = array(
array("label"=> "2006", "y"=> 355)
);
$dataPoints4 = array(
array("label"=> "2006", "y"=> 80)
);
$dataPoints5 = array(
array("label"=> "2006", "y"=> 1)
);
$dataPoints6 = array(
array("label"=> "2006", "y"=> 1108)
);
?>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "light2",
animationEnabled: true,
toolTip:{
shared: true,
reversed: true
},
axisX:{
gridThickness: 0,
tickLength: 0,
lineThickness: 0,
labelFormatter: function(){
return " ";
},
reversed:true
},
axisY:{
gridThickness: 0,
tickLength: 0,
lineThickness: 0,
labelFormatter: function(){
return " ";
},
includeZero: true
},
legend: {
cursor: "pointer",
itemclick: toggleDataSeries
},
data: [
{
type: "stackedColumn",
name: "Europe",
showInLegend: true,
yValueFormatString: "#,##0 MW",
dataPoints: <?php echo json_encode($dataPoints1, JSON_NUMERIC_CHECK); ?>
},{
type: "stackedColumn",
name: "Asia-Pacific",
showInLegend: true,
yValueFormatString: "#,##0 MW",
dataPoints: <?php echo json_encode($dataPoints2, JSON_NUMERIC_CHECK); ?>
},{
type: "stackedColumn",
name: "Americas",
showInLegend: true,
yValueFormatString: "#,##0 MW",
dataPoints: <?php echo json_encode($dataPoints3, JSON_NUMERIC_CHECK); ?>
},{
type: "stackedColumn",
name: "China",
showInLegend: true,
yValueFormatString: "#,##0 MW",
dataPoints: <?php echo json_encode($dataPoints4, JSON_NUMERIC_CHECK); ?>
},{
type: "stackedColumn",
name: "Middle East and Africa",
showInLegend: true,
yValueFormatString: "#,##0 MW",
dataPoints: <?php echo json_encode($dataPoints5, JSON_NUMERIC_CHECK); ?>
},{
type: "stackedColumn",
name: "Rest of the world",
showInLegend: true,
yValueFormatString: "#,##0 MW",
dataPoints: <?php echo json_encode($dataPoints6, JSON_NUMERIC_CHECK); ?>
}
]
});
chart.render();
function toggleDataSeries(e) {
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
e.chart.render();
}
}
</script>
<div id="chartContainer" style="height: 200px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
And the output am getting is
Output am Getting
So the main problem is am having vertical stacked bar graph , but what i need is horizontal stack graph