Unable to bind json content to echarts

Question

Hi Friends,

 

I have two dynamic lists

 

ViewBag.DataPoints1 = JsonConvert.SerializeObject(dataPoints1);

ViewBag.DataPoints2 = JsonConvert.SerializeObject(dataPoints2);

 

I am trying to bind these json content into stacked column chart using e charts

I tried different ways every time the json result is priting but the data is not binding to echarts graph.

 

my script is

var echartsConfig = function () {
var dataPoints = [];
function successFunc(jsondata) {
for (var i = 0; i < jsondata.length; i++) {
dataPoints.push({
x: jsondata[i].Label,
y: jsondata[i].Y
});
}
}
if ($('#e_chart_3').length > 0) {
var eChart_3 = echarts.init(document.getElementById('e_chart_3'));
//var mySeries = [];
//for (var i = 0; i < jsondata.length; i++) {
// mySeries.push([jsondata[i]]);
//}
var option2 = {
color: ['#3a55b1', '#536bbb', '#798cca', '#9caad8'],
tooltip: {
show: true,
trigger: 'axis',
backgroundColor: '#fff',
borderRadius: 6,
padding: 6,
axisPointer: {
lineStyle: {
width: 0,
}
},
textStyle: {
color: '#324148',
fontFamily: '"Nunito", sans-serif',
fontSize: 12
}
},
grid: {
top: '3%',
left: '3%',
right: '3%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Sat', 'Sun'],
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#5e7d8a'
}
}
}
],
yAxis: [
{
type: 'value',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#5e7d8a'
}
},
splitLine: {
lineStyle: {
color: 'transparent',
}
}
}
],
series: [
{
name: '1',
type: 'bar',
stack: 'st1',
barMaxWidth: 30,
data: dataPoints,
}
@*,
{
name: '4',
type: 'bar',
stack: 'st1',
barMaxWidth: 30,
data: [@Html.Raw(ViewBag.DataPoints2)],
itemStyle: {
normal: {
barBorderRadius: [6, 6, 0, 0],
}
},
}*@
]
}
};
eChart_3.setOption(option2);
eChart_3.resize();
$.getJSON("/Home/Index", successFunc);
}

Actual Static content script is :

var echartsConfig = function() {
if( $('#e_chart_3').length > 0 ){
var eChart_3 = echarts.init(document.getElementById('e_chart_3'));
var option2 = {
color: ['#3a55b1', '#536bbb','#798cca','#9caad8'],
tooltip: {
show: true,
trigger: 'axis',
backgroundColor: '#fff',
borderRadius:6,
padding:6,
axisPointer:{
lineStyle:{
width:0,
}
},
textStyle: {
color: '#324148',
fontFamily: '"Nunito", sans-serif',
fontSize: 12
}
},
grid: {
top: '3%',
left: '3%',
right: '3%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['2011','2012','2013','2014','2015','2016','2017'],
axisLine: {
show:false
},
axisTick: {
show:false
},
axisLabel: {
textStyle: {
color: '#5e7d8a'
}
}
}
],
yAxis : [
{
type : 'value',
axisLine: {
show:false
},
axisTick: {
show:false
},
axisLabel: {
textStyle: {
color: '#5e7d8a'
}
},
splitLine: {
lineStyle: {
color: 'transparent',
}
}
}
],
series : [
{
name:'1',
type:'bar',
stack: 'st1',
barMaxWidth: 30,
data:[320, 332, 301, 334, 390, 330, 320],
},
{
name:'2',
type:'bar',
stack: 'st1',
barMaxWidth: 30,
data:[120, 132, 101, 134, 90, 230, 210],
},
itemStyle: {
normal: {
barBorderRadius: [6, 6, 0, 0] ,
}
},
}
]
};
eChart_3.setOption(option2);
eChart_3.resize();
}
}

my json result is :

 

[{"label":"Oct","y":79996.66},{"label":"Nov","y":1432849.78},{"label":"Dec","y":2598022.08},{"label":"Jan","y":4867890.04},{"label":"Feb","y":1505123.38},{"label":"Mar","y":2406027.22},{"label":"Apr","y":6401100.17},{"label":"May","y":9724432.84},{"label":"Jun","y":8285723.56},{"label":"Jul","y":4481837.85}]

 

I need to print x axis and y axis values dynamically

Please tell me how to achieve this.