How to Make Serial Chart With JSON Data Using amChart

You can download and use all amCharts products for free. The only limitation of the free version is that a small link to this web site will be displayed in the top left corner of your charts.

You can download the free version from here

First of all, add a container on HTML page. I have added a div and provided an id.

  1. <body>  
  2. <div id="chartdiv"></div>  
  3. </body>  

 

Now add JavaScript library references in html tag.

  1. <script src="amcharts/amcharts.js"></script>  
  2. <script src="amcharts/serial.js"></script>  
  3. <script src="amcharts/plugins/dataloader/dataloader.min.js"></script>  

 

Now add a new JSON file and provide a name and add some dummy data like this.

  1. [  
  2.   {  
  3.     "articles": 60,  
  4.     "blogs": 15,  
  5.     "videos": 5,  
  6.     "year": 2003  
  7.   },  
  8.   {  
  9.     "articles": 35,  
  10.     "blogs": 10,  
  11.     "videos": 1,  
  12.     "year": 2004  
  13.   },  
  14.   {  
  15.     "articles": 10,  
  16.     "blogs": 3,  
  17.     "videos": 2,  
  18.     "year": 2005  
  19.   },  
  20.   {  
  21.     "articles": 18,  
  22.     "blogs": 11,  
  23.     "videos": 1,  
  24.     "year": 2006  
  25.   },  
  26.   {  
  27.     "articles": 6,  
  28.     "blogs": 2,  
  29.     "videos": 1,  
  30.     "year": 2007  
  31.   },  
  32.   {  
  33.     "articles": 13,  
  34.     "blogs": 7,  
  35.     "videos": 1,  
  36.     "year": 2008  
  37.   },  
  38.   {  
  39.     "articles": 19,  
  40.     "blogs": 10,  
  41.     "videos": 2,  
  42.     "year": 2009  
  43.   },  
  44.   {  
  45.     "articles": 12,  
  46.     "blogs": 3,  
  47.     "videos": 2,  
  48.     "year": 2010  
  49.   },  
  50.   {  
  51.     "articles": 22,  
  52.     "blogs": 9,  
  53.     "videos": 3,  
  54.     "year": 2011  
  55.   },  
  56.   {  
  57.     "articles": 15,  
  58.     "blogs": 9,  
  59.     "videos": 2,  
  60.     "year": 2012  
  61.   },  
  62.   {  
  63.     "articles": 23,  
  64.     "blogs": 7,  
  65.     "videos": 5,  
  66.     "year": 2013  
  67.   },  
  68.   {  
  69.     "articles": 14,  
  70.     "blogs": 10,  
  71.     "videos": 2,  
  72.     "year": 2014  
  73.   },  
  74.   {  
  75.     "articles": 8,  
  76.     "blogs": 2,  
  77.     "videos": 1,  
  78.     "year": 2015  
  79.   },  
  80.   {  
  81.     "articles": 10,  
  82.     "blogs": 3,  
  83.     "videos": 1,  
  84.     "year": 2016  
  85.   },  
  86.   {  
  87.     "articles": 7,  
  88.     "blogs": 2,  
  89.     "videos": 1,  
  90.     "year": 2017  
  91.   }  
  92. ]  

 

Now add amChart code inside script tag and pass your json path in data Loader URL attribute and other properties.

  1. <script>  
  2. var chart = AmCharts.makeChart("chartdiv", {  
  3. "type""serial",  
  4. "dataLoader": {  
  5. "url""json/article.json",  
  6. "format""json",  
  7. "showErrors"true,  
  8. "noStyles"true,  
  9. "async"true  
  10. },  
  11. "rotate"false,  
  12. "marginTop": 10,  
  13. "categoryField""year",  
  14. "categoryAxis": {  
  15. "gridAlpha": 0.07,  
  16. "axisColor""#DADADA",  
  17. "startOnAxis"false,  
  18. "title""Year",  
  19. "guides": [{  
  20. "category""2003",  
  21. "lineColor""#CC0000",  
  22. "lineAlpha": 1,  
  23. "dashLength": 2,  
  24. "inside"true,  
  25. "labelRotation": 90,  
  26. "label""productive year!"  
  27. }, {  
  28. "category""2013",  
  29. "lineColor""#CC0000",  
  30. "lineAlpha": 1,  
  31. "dashLength": 2,  
  32. "inside"true,  
  33. "labelRotation": 90,  
  34. "label""good year!"  
  35. }]  
  36. },  
  37. "valueAxes": [{  
  38. "stackType""regular",  
  39. "gridAlpha": 0.07,  
  40. "title""C# Corner Articles List"  
  41. }],  
  42. "graphs": [{  
  43. "id""g1",  
  44. "type""column",  
  45. "title""Articles",  
  46. "valueField""articles",  
  47. "bullet""round",  
  48. "lineAlpha": 0,  
  49. "fillAlphas": 0.6  
  50. }, {  
  51. "id""g2",  
  52. "type""column",  
  53. "title""Blogs",  
  54. "valueField""blogs",  
  55. "lineAlpha": 0,  
  56. "fillAlphas": 0.6  
  57. }, {  
  58. "id""g3",  
  59. "type""column",  
  60. "title""Videos",  
  61. "valueField""videos",  
  62. "lineAlpha": 0,  
  63. "fillAlphas": 0.6  
  64. }],  
  65. "legend": {  
  66. "position""bottom",  
  67. "valueText""[[value]]",  
  68. "valueWidth": 100,  
  69. "valueAlign""left",  
  70. "equalWidths"false,  
  71. "periodValueText""total: [[value.sum]]"  
  72. },  
  73. "chartCursor": {  
  74. "cursorAlpha": 0  
  75. },  
  76. "chartScrollbar": {  
  77. "color""FFFFFF"  
  78. }  
  79. });  
  80. </script>  

 

Everything is done. Now run the application.


If you move cursor on any part of a bar then you can see the counting of articles, blogs, aand videos like this.


All amCharts support responsive design, if you go with mobile ratio then chart look like this.


Conclusion

In this article, we have seen how to use amChart to display JSON data in Serial layout. If you have questions or comments, drop me a line in C# Corner comments section.

X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now