The Data structure is the same as my response, but labels are showing correctly and the values are not showing please some one help me
$.ajax(
{
type: "POST",url: url1, dataType: "json",
success: function(response)
{
var areaBar = Morris.Bar({
element: 'ct_chart_2',
data: response,
xkey: 'year',
ykeys: ['BKG', 'BKM','CSD','others'],
labels: ['BKG', 'BKM', 'CSD','Others'],
gridLineColor: 'rgba(33,33,33,0.1)',
stacked: true,
hideHover: 'auto',
barColors: ['#00acf0','#d0d962','#d4d4d4','#E45TFS'],
resize: true,
gridTextColor:'#878787',
gridTextFamily:"Roboto",
parseTime: false,
fillOpacity:0.2
});
}
});
this is my ajax response result
[
{"year":"2004","BKG":"1211","BKM":"119","CSD":"334","others":"3"},
{"year":"2005","BKG":"1599","BKM":"168","CSD":"1586","others":"6"},
{"year":"2006","BKG":"1088","BKM":"161","CSD":"1213","others":"3"},
{"year":"2007","BKG":"1018","BKM":"118","CSD":"1552","others":"5"},
{"year":"2008","BKG":"1011","BKM":"335","CSD":"1406","others":"8"},
{"year":"2009","BKG":"912","BKM":"153","CSD":"1935","others":"3"},
{"year":"2010","BKG":"825","BKM":"214","CSD":"2012","others":"1"},
{"year":"2011","BKG":"727","BKM":"208","CSD":"2821","others":"12"},
{"year":"2012","BKG":"905","BKM":"301","CSD":"4336","others":"4"},
{"year":"2013","BKG":"731","BKM":"371","CSD":"3034","others":"6"},
{"year":"2014","BKG":"719","BKM":"506","CSD":"2354","others":"6"},
{"year":"2015","BKG":"571","BKM":"630","CSD":"2055","others":"6"},
{"year":"2016","BKG":"488","BKM":"641","CSD":"1650","others":"7"},
{"year":"2017","BKG":"5","BKM":"0","CSD":"0","others":"0"},
{"year":"2019","BKG":"1","BKM":"0","CSD":"0","others":"0"}
]
Please Help me ...
Thank You.
It will work if you specify the ykeys correctly like:
ykeys: ['BKG', 'BKM', 'CSD', 'others']
Note, you are using lowercase ykeys like bkg, bkm and csd on your code:
const data = [{"year":"2004","BKG":"1211","BKM":"119","CSD":"334","others":"3"},{"year":"2005","BKG":"1599","BKM":"168","CSD":"1586","others":"6"},{"year":"2006","BKG":"1088","BKM":"161","CSD":"1213","others":"3"},{"year":"2007","BKG":"1018","BKM":"118","CSD":"1552","others":"5"},{"year":"2008","BKG":"1011","BKM":"335","CSD":"1406","others":"8"},{"year":"2009","BKG":"912","BKM":"153","CSD":"1935","others":"3"},{"year":"2010","BKG":"825","BKM":"214","CSD":"2012","others":"1"},{"year":"2011","BKG":"727","BKM":"208","CSD":"2821","others":"12"},{"year":"2012","BKG":"905","BKM":"301","CSD":"4336","others":"4"},{"year":"2013","BKG":"731","BKM":"371","CSD":"3034","others":"6"},{"year":"2014","BKG":"719","BKM":"506","CSD":"2354","others":"6"},{"year":"2015","BKG":"571","BKM":"630","CSD":"2055","others":"6"},{"year":"2016","BKG":"488","BKM":"641","CSD":"1650","others":"7"},{"year":"2017","BKG":"5","BKM":"0","CSD":"0","others":"0"},{"year":"2019","BKG":"1","BKM":"0","CSD":"0","others":"0"}]
var areaBar = Morris.Bar({
element: 'ct_chart_2',
data: data,
xkey: 'year',
ykeys: ['BKG', 'BKM','CSD','others'],
labels: ['BKG', 'BKM', 'CSD','Others'],
gridLineColor: 'rgba(33,33,33,0.1)',
stacked: true,
hideHover: 'auto',
barColors: ['#00acf0','#d0d962','#d4d4d4','#fsddfs'],
resize: true,
gridTextColor:'#878787',
gridTextFamily:"Roboto",
parseTime: false,
fillOpacity:0.2
});#ct_chart_2 {
width: 500px;
height: 200px;
}<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<div id="ct_chart_2"></div>