How to Make Serial Chart With JSON Data Using amChart

Raj Kumar
8y
17.3k
0
7

Article

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.

<body>
<div id="chartdiv"></div>
</body>

Now add JavaScript library references in html tag.

<script src="amcharts/amcharts.js"></script>
<script src="amcharts/serial.js"></script>
<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.

[
{
"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 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 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.