How to Make Serial Chart With JSON Data Using amChart

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

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.