1
Answer

Unable to bind json content to echarts

Photo of prasanna p

prasanna p
6y
722
1 .NET
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
  1. var echartsConfig = function () {  
  2. var dataPoints = [];  
  3. function successFunc(jsondata) {  
  4. for (var i = 0; i < jsondata.length; i++) {  
  5. dataPoints.push({  
  6. x: jsondata[i].Label,  
  7. y: jsondata[i].Y  
  8. });  
  9. }  
  10. }  
  11. if ($('#e_chart_3').length > 0) {  
  12. var eChart_3 = echarts.init(document.getElementById('e_chart_3'));  
  13. //var mySeries = [];  
  14. //for (var i = 0; i < jsondata.length; i++) {  
  15. // mySeries.push([jsondata[i]]);  
  16. //}  
  17. var option2 = {  
  18. color: ['#3a55b1', '#536bbb', '#798cca', '#9caad8'],  
  19. tooltip: {  
  20. show: true,  
  21. trigger: 'axis',  
  22. backgroundColor: '#fff',  
  23. borderRadius: 6,  
  24. padding: 6,  
  25. axisPointer: {  
  26. lineStyle: {  
  27. width: 0,  
  28. }  
  29. },  
  30. textStyle: {  
  31. color: '#324148',  
  32. fontFamily: '"Nunito", sans-serif',  
  33. fontSize: 12  
  34. }  
  35. },  
  36. grid: {  
  37. top: '3%',  
  38. left: '3%',  
  39. right: '3%',  
  40. bottom: '3%',  
  41. containLabel: true  
  42. },  
  43. xAxis: [  
  44. {  
  45. type: 'category',  
  46. data: ['Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Sat', 'Sun'],  
  47. axisLine: {  
  48. show: false  
  49. },  
  50. axisTick: {  
  51. show: false  
  52. },  
  53. axisLabel: {  
  54. textStyle: {  
  55. color: '#5e7d8a'  
  56. }  
  57. }  
  58. }  
  59. ],  
  60. yAxis: [  
  61. {  
  62. type: 'value',  
  63. axisLine: {  
  64. show: false  
  65. },  
  66. axisTick: {  
  67. show: false  
  68. },  
  69. axisLabel: {  
  70. textStyle: {  
  71. color: '#5e7d8a'  
  72. }  
  73. },  
  74. splitLine: {  
  75. lineStyle: {  
  76. color: 'transparent',  
  77. }  
  78. }  
  79. }  
  80. ],  
  81. series: [  
  82. {  
  83. name: '1',  
  84. type: 'bar',  
  85. stack: 'st1',  
  86. barMaxWidth: 30,  
  87. data: dataPoints,  
  88. }  
  89. @*,  
  90. {  
  91. name: '4',  
  92. type: 'bar',  
  93. stack: 'st1',  
  94. barMaxWidth: 30,  
  95. data: [@Html.Raw(ViewBag.DataPoints2)],  
  96. itemStyle: {  
  97. normal: {  
  98. barBorderRadius: [6, 6, 0, 0],  
  99. }  
  100. },  
  101. }*@  
  102. ]  
  103. }  
  104. };  
  105. eChart_3.setOption(option2);  
  106. eChart_3.resize();  
  107. $.getJSON("/Home/Index", successFunc);  
  108. }  
Actual Static content script is :
  1. var echartsConfig = function() {  
  2. if( $('#e_chart_3').length > 0 ){  
  3. var eChart_3 = echarts.init(document.getElementById('e_chart_3'));  
  4. var option2 = {  
  5. color: ['#3a55b1', '#536bbb','#798cca','#9caad8'],  
  6. tooltip: {  
  7. show: true,  
  8. trigger: 'axis',  
  9. backgroundColor: '#fff',  
  10. borderRadius:6,  
  11. padding:6,  
  12. axisPointer:{  
  13. lineStyle:{  
  14. width:0,  
  15. }  
  16. },  
  17. textStyle: {  
  18. color: '#324148',  
  19. fontFamily: '"Nunito", sans-serif',  
  20. fontSize: 12  
  21. }  
  22. },  
  23. grid: {  
  24. top: '3%',  
  25. left: '3%',  
  26. right: '3%',  
  27. bottom: '3%',  
  28. containLabel: true  
  29. },  
  30. xAxis : [  
  31. {  
  32. type : 'category',  
  33. data : ['2011','2012','2013','2014','2015','2016','2017'],  
  34. axisLine: {  
  35. show:false  
  36. },  
  37. axisTick: {  
  38. show:false  
  39. },  
  40. axisLabel: {  
  41. textStyle: {  
  42. color: '#5e7d8a'  
  43. }  
  44. }  
  45. }  
  46. ],  
  47. yAxis : [  
  48. {  
  49. type : 'value',  
  50. axisLine: {  
  51. show:false  
  52. },  
  53. axisTick: {  
  54. show:false  
  55. },  
  56. axisLabel: {  
  57. textStyle: {  
  58. color: '#5e7d8a'  
  59. }  
  60. },  
  61. splitLine: {  
  62. lineStyle: {  
  63. color: 'transparent',  
  64. }  
  65. }  
  66. }  
  67. ],  
  68. series : [  
  69. {  
  70. name:'1',  
  71. type:'bar',  
  72. stack: 'st1',  
  73. barMaxWidth: 30,  
  74. data:[320, 332, 301, 334, 390, 330, 320],  
  75. },  
  76. {  
  77. name:'2',  
  78. type:'bar',  
  79. stack: 'st1',  
  80. barMaxWidth: 30,  
  81. data:[120, 132, 101, 134, 90, 230, 210],  
  82. },  
  83. itemStyle: {  
  84. normal: {  
  85. barBorderRadius: [6, 6, 0, 0] ,  
  86. }  
  87. },  
  88. }  
  89. ]  
  90. };  
  91. eChart_3.setOption(option2);  
  92. eChart_3.resize();  
  93. }  
  94. }  
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.

Answers (1)