Divide xKey to more than one attribute in Morris.js?

I am displaying MySQL values in a Bar graph generated by Morris.js using PHP. Currently I am displaying only one attribute in x axis and its values in y axis. Is it possible to divide the xkey into a number of attributes?

That is, for ID = BBAT102, the values of Wrongs, Rights and Percentage will be displayed. But instead I want Wrongs, Rights and Percentage to be mentioned in xKey so that each of these attributes have its own bar.

php:

while($row = mysqli_fetch_array($result))
{
$chart_data .= "{ ID:'".$row["ID"]."', Wrongs:".$row["Wrongs"].", Rights:".$row["Rights"]." , Age:".$row["Age"]. ", Percentage:'".$row["Percentage"]."'},";

}
echo $chart_data;

js:

<script>
$(document).ready(function () { 
 Morris.Bar({
  element: 'chart',
  data:[<?php echo $chart_data; ?>],
  xkey: 'ID',  //Currently displaying ID but I need 'Wrongs', 'Rights', 'Percentage' to be displayed
  ykeys: ['Wrongs', 'Rights', 'Percentage'],
  labels: ['Wrongs', 'Rights', 'Perecentage'],
    hideHover:true,
  stacked:true
  });
});
</script>

Answer

I had stacked all one on one which is why it was vertically getting stacked to each other. I recreated the script to support non-stacking;

<script>
$(document).ready(function () { 
var labelColor = jQuery('#chart').css('color');
 Morris.Bar({
  element: 'chart',
  data:[<?php echo $chart_data; ?>],
  xkey: 'ID',
  ykeys: ['Rights', 'Wrongs', 'Percentage'],
  labels: ['Rights','Wrongs', 'Percentage'],
  hideHover:true,
  gridTextColor: labelColor,
  barColors: jQuery('#chart').data('colors').split(',')
 // yLabelFormat: function(y) {return y = Math.round(y);}
  });
});
</script>

Advertisement

Answer