HTML 5

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.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs