Post
Ask Question

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.

<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.


Similar Articles