How to Make Serial Chart With JSON Data Using amChart

Introduction

 
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 the 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 the 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 the cursor on any part of a bar then you can see the counting of articles, blogs, and videos like this.
     

    All amCharts support responsive design if you go with a mobile ratio then the chart looks like this.
     

    Conclusion

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


    Similar Articles