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.
<body>
<div id="chartdiv"></div>
</body>
Now add JavaScript library references in HTML tag.
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script>
Now add a new JSON file and provide a name and add some dummy data like this.
[
{
"articles": 60,
"blogs": 15,
"videos": 5,
"year": 2003
},
{
"articles": 35,
"blogs": 10,
"videos": 1,
"year": 2004
},
{
"articles": 10,
"blogs": 3,
"videos": 2,
"year": 2005
},
{
"articles": 18,
"blogs": 11,
"videos": 1,
"year": 2006
},
{
"articles": 6,
"blogs": 2,
"videos": 1,
"year": 2007
},
{
"articles": 13,
"blogs": 7,
"videos": 1,
"year": 2008
},
{
"articles": 19,
"blogs": 10,
"videos": 2,
"year": 2009
},
{
"articles": 12,
"blogs": 3,
"videos": 2,
"year": 2010
},
{
"articles": 22,
"blogs": 9,
"videos": 3,
"year": 2011
},
{
"articles": 15,
"blogs": 9,
"videos": 2,
"year": 2012
},
{
"articles": 23,
"blogs": 7,
"videos": 5,
"year": 2013
},
{
"articles": 14,
"blogs": 10,
"videos": 2,
"year": 2014
},
{
"articles": 8,
"blogs": 2,
"videos": 1,
"year": 2015
},
{
"articles": 10,
"blogs": 3,
"videos": 1,
"year": 2016
},
{
"articles": 7,
"blogs": 2,
"videos": 1,
"year": 2017
}
]
Now add amChart code inside script tag and pass your JSON path in the data Loader URL attribute and other properties.
<script>
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataLoader": {
"url": "json/article.json",
"format": "json",
"showErrors": true,
"noStyles": true,
"async": true
},
"rotate": false,
"marginTop": 10,
"categoryField": "year",
"categoryAxis": {
"gridAlpha": 0.07,
"axisColor": "#DADADA",
"startOnAxis": false,
"title": "Year",
"guides": [{
"category": "2003",
"lineColor": "#CC0000",
"lineAlpha": 1,
"dashLength": 2,
"inside": true,
"labelRotation": 90,
"label": "productive year!"
}, {
"category": "2013",
"lineColor": "#CC0000",
"lineAlpha": 1,
"dashLength": 2,
"inside": true,
"labelRotation": 90,
"label": "good year!"
}]
},
"valueAxes": [{
"stackType": "regular",
"gridAlpha": 0.07,
"title": "C# Corner Articles List"
}],
"graphs": [{
"id": "g1",
"type": "column",
"title": "Articles",
"valueField": "articles",
"bullet": "round",
"lineAlpha": 0,
"fillAlphas": 0.6
}, {
"id": "g2",
"type": "column",
"title": "Blogs",
"valueField": "blogs",
"lineAlpha": 0,
"fillAlphas": 0.6
}, {
"id": "g3",
"type": "column",
"title": "Videos",
"valueField": "videos",
"lineAlpha": 0,
"fillAlphas": 0.6
}],
"legend": {
"position": "bottom",
"valueText": "[[value]]",
"valueWidth": 100,
"valueAlign": "left",
"equalWidths": false,
"periodValueText": "total: [[value.sum]]"
},
"chartCursor": {
"cursorAlpha": 0
},
"chartScrollbar": {
"color": "FFFFFF"
}
});
</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.
![Responsive Design]()
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.