Populate Area Chart from database using jQuery amcharts plugin in ASP.Net

Last Reply one year ago By dharmendr

Posted one year ago

Hi ,

i want to bind am chart from database in c# asp.net ,below i code used to bind 

 

<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/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<style>
#chartdiv {
	width		: 100%;
	height		: 500px;
	font-size	: 11px;
}							
</style>
    <script>
var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "light",
    "marginRight":30,
    "legend": {
        "equalWidths": false,
        "periodValueText": "total: [[value.sum]]",
        "position": "top",
        "valueAlign": "left",
        "valueWidth": 100
    },
    "dataProvider": [{
        "year": 1994,
        "cars": 1587,
        "motorcycles": 650,
        "bicycles": 121
    }, {
        "year": 1995,
        "cars": 1567,
        "motorcycles": 683,
        "bicycles": 146
    }, {
        "year": 1996,
        "cars": 1617,
        "motorcycles": 691,
        "bicycles": 138
    }, {
        "year": 1997,
        "cars": 1630,
        "motorcycles": 642,
        "bicycles": 127
    }, {
        "year": 1998,
        "cars": 1660,
        "motorcycles": 699,
        "bicycles": 105
    }, {
        "year": 1999,
        "cars": 1683,
        "motorcycles": 721,
        "bicycles": 109
    }, {
        "year": 2000,
        "cars": 1691,
        "motorcycles": 737,
        "bicycles": 112
    }, {
        "year": 2001,
        "cars": 1298,
        "motorcycles": 680,
        "bicycles": 101
    }, {
        "year": 2002,
        "cars": 1275,
        "motorcycles": 664,
        "bicycles": 97
    }, {
        "year": 2003,
        "cars": 1246,
        "motorcycles": 648,
        "bicycles": 93
    }, {
        "year": 2004,
        "cars": 1318,
        "motorcycles": 697,
        "bicycles": 111
    }, {
        "year": 2005,
        "cars": 1213,
        "motorcycles": 633,
        "bicycles": 87
    }, {
        "year": 2006,
        "cars": 1199,
        "motorcycles": 621,
        "bicycles": 79
    }, {
        "year": 2007,
        "cars": 1110,
        "motorcycles": 210,
        "bicycles": 81
    }, {
        "year": 2008,
        "cars": 1165,
        "motorcycles": 232,
        "bicycles": 75
    }, {
        "year": 2009,
        "cars": 1145,
        "motorcycles": 219,
        "bicycles": 88
    }, {
        "year": 2010,
        "cars": 1163,
        "motorcycles": 201,
        "bicycles": 82
    }, {
        "year": 2011,
        "cars": 1180,
        "motorcycles": 285,
        "bicycles": 87
    }, {
        "year": 2012,
        "cars": 1159,
        "motorcycles": 277,
        "bicycles": 71
    }],
    "valueAxes": [{
        "stackType": "regular",
        "gridAlpha": 0.07,
        "position": "left",
        "title": "Traffic incidents"
    }],
    "graphs": [{
        "balloonText": "<img src='https://www.amcharts.com/lib/3/images/car.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>",
        "fillAlphas": 0.6,
        "hidden": true,
        "lineAlpha": 0.4,
        "title": "Cars",
        "valueField": "cars"
    }, {
        "balloonText": "<img src='https://www.amcharts.com/lib/3/images/motorcycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>",
        "fillAlphas": 0.6,
        "lineAlpha": 0.4,
        "title": "Motorcycles",
        "valueField": "motorcycles"
    }, {
        "balloonText": "<img src='https://www.amcharts.com/lib/3/images/bicycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>",
        "fillAlphas": 0.6,
        "lineAlpha": 0.4,
        "title": "Bicycles",
        "valueField": "bicycles"
    }],
    "plotAreaBorderAlpha": 0,
    "marginTop": 10,
    "marginLeft": 0,
    "marginBottom": 0,
    "chartScrollbar": {},
    "chartCursor": {
        "cursorAlpha": 0
    },
    "categoryField": "year",
    "categoryAxis": {
        "startOnAxis": true,
        "axisColor": "#DADADA",
        "gridAlpha": 0.07,
        "title": "Year",
        "guides": [{
            category: "2001",
            toCategory: "2003",
            lineColor: "#CC0000",
            lineAlpha: 1,
            fillAlpha: 0.2,
            fillColor: "#CC0000",
            dashLength: 2,
            inside: true,
            labelRotation: 90,
            label: "fines for speeding increased"
        }, {
            category: "2007",
            lineColor: "#CC0000",
            lineAlpha: 1,
            dashLength: 2,
            inside: true,
            labelRotation: 90,
            label: "motorcycle fee introduced"
        }]
    },
    "export": {
    	"enabled": true
     }
});
</script>

 

Posted one year ago

Hi venkatg,

Check this example. Now please take its reference and correct your code.

To populate from database you need to make ajax call and bind the result.

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link type="text/css" media="all" rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" />
<script type="text/javascript" src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<style type="text/css">
    #chartdiv
    {
        width: 100%;
        height: 500px;
        font-size: 11px;
    }
</style>
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: 'POST',
            url: "Default.aspx/GetChartData",
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            data: {},
            success: function (result) {
                var chart = AmCharts.makeChart("chartdiv", {
                    "type": "serial",
                    "theme": "light",
                    "marginRight": 30,
                    "legend": {
                        "equalWidths": false,
                        "periodValueText": "total: [[value.sum]]",
                        "position": "top",
                        "valueAlign": "left",
                        "valueWidth": 100
                    },
                    "dataProvider": result.d,
                    "valueAxes": [{
                        "stackType": "regular",
                        "gridAlpha": 0.07,
                        "position": "left",
                        "title": "Traffic incidents"
                    }],
                    "graphs": [{
                        "balloonText": "<img src='https://www.amcharts.com/lib/3/images/car.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>",
                        "fillAlphas": 0.6,
                        "hidden": true,
                        "lineAlpha": 0.4,
                        "title": "Cars",
                        "valueField": "cars"
                    }, {
                        "balloonText": "<img src='https://www.amcharts.com/lib/3/images/motorcycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>",
                        "fillAlphas": 0.6,
                        "lineAlpha": 0.4,
                        "title": "Motorcycles",
                        "valueField": "motorcycles"
                    }, {
                        "balloonText": "<img src='https://www.amcharts.com/lib/3/images/bicycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>",
                        "fillAlphas": 0.6,
                        "lineAlpha": 0.4,
                        "title": "Bicycles",
                        "valueField": "bicycles"
                    }],
                    "plotAreaBorderAlpha": 0,
                    "marginTop": 10,
                    "marginLeft": 0,
                    "marginBottom": 0,
                    "chartScrollbar": {},
                    "chartCursor": {
                        "cursorAlpha": 0
                    },
                    "categoryField": "year",
                    "categoryAxis": {
                        "startOnAxis": true,
                        "axisColor": "#DADADA",
                        "gridAlpha": 0.07,
                        "title": "Year",
                        "guides": [{
                            category: "2001",
                            toCategory: "2003",
                            lineColor: "#CC0000",
                            lineAlpha: 1,
                            fillAlpha: 0.2,
                            fillColor: "#CC0000",
                            dashLength: 2,
                            inside: true,
                            labelRotation: 90,
                            label: "fines for speeding increased"
                        }, {
                            category: "2007",
                            lineColor: "#CC0000",
                            lineAlpha: 1,
                            dashLength: 2,
                            inside: true,
                            labelRotation: 90,
                            label: "motorcycle fee introduced"
                        }]
                    },
                    "export": {
                        "enabled": true
                    }
                });
            },
            error: function (error) { alert(error.responseText); }
        });
    });        
</script>
<div id="chartdiv">
</div>

Namespaces

C#

using System.Data;

VB.Net

Imports System.Data

Code

C#

[WebMethod]
public static List<GraphData> GetChartData()
{
    // Get Data from Database.
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[] { 
                    new DataColumn("Year", typeof(int)),
                    new DataColumn("Cars", typeof(int)),
                    new DataColumn("Motorcycles",typeof(int)),
                    new DataColumn("Bicycles",typeof(int))});
    dt.Rows.Add(1994, 1587, 650, 121);
    dt.Rows.Add(1995, 1567, 683, 146);
    dt.Rows.Add(1996, 1617, 691, 138);
    dt.Rows.Add(1997, 1630, 642, 127);
    dt.Rows.Add(1998, 1660, 699, 105);
    dt.Rows.Add(1999, 1683, 721, 109);
    dt.Rows.Add(2000, 1691, 737, 112);
    dt.Rows.Add(2001, 1298, 680, 101);
    dt.Rows.Add(2002, 1275, 664, 97);
    dt.Rows.Add(2003, 1246, 648, 93);
    dt.Rows.Add(2004, 1318, 697, 111);
    dt.Rows.Add(2005, 1213, 633, 87);
    dt.Rows.Add(2006, 1199, 621, 79);
    dt.Rows.Add(2007, 1110, 210, 81);
    dt.Rows.Add(2008, 1165, 232, 75);
    dt.Rows.Add(2009, 1163, 201, 82);
    dt.Rows.Add(2010, 1180, 285, 87);
    dt.Rows.Add(2011, 1159, 277, 71);
    dt.Rows.Add(2012, 1587, 650, 121);
    List<GraphData> chartData = new List<GraphData>();
    foreach (DataRow dr in dt.Rows)
    {
        chartData.Add(new GraphData
        {
            year = Convert.ToInt32(dr["Year"]),
            cars = Convert.ToInt32(dr["Cars"]),
            motorcycles = Convert.ToInt32(dr["Motorcycles"]),
            bicycles = Convert.ToInt32(dr["Bicycles"])
        });
    }

    return chartData;
}

public class GraphData
{
    public int year { get; set; }
    public int cars { get; set; }
    public int motorcycles { get; set; }
    public int bicycles { get; set; }
}

VB.Net

<WebMethod()>
Public Shared Function GetChartData() As List(Of GraphData)
    ' Get Data from Database.
    Dim dt As DataTable = New DataTable()
    dt.Columns.AddRange(New DataColumn() {New DataColumn("Year", GetType(String)), New DataColumn("Cars", GetType(Integer)), New DataColumn("Motorcycles", GetType(Integer)), New DataColumn("Bicycles", GetType(Integer))})
    dt.Rows.Add(1994, 1587, 650, 121)
    dt.Rows.Add(1995, 1567, 683, 146)
    dt.Rows.Add(1996, 1617, 691, 138)
    dt.Rows.Add(1997, 1630, 642, 127)
    dt.Rows.Add(1998, 1660, 699, 105)
    dt.Rows.Add(1999, 1683, 721, 109)
    dt.Rows.Add(2000, 1691, 737, 112)
    dt.Rows.Add(2001, 1298, 680, 101)
    dt.Rows.Add(2002, 1275, 664, 97)
    dt.Rows.Add(2003, 1246, 648, 93)
    dt.Rows.Add(2004, 1318, 697, 111)
    dt.Rows.Add(2005, 1213, 633, 87)
    dt.Rows.Add(2006, 1199, 621, 79)
    dt.Rows.Add(2007, 1110, 210, 81)
    dt.Rows.Add(2008, 1165, 232, 75)
    dt.Rows.Add(2009, 1163, 201, 82)
    dt.Rows.Add(2010, 1180, 285, 87)
    dt.Rows.Add(2011, 1159, 277, 71)
    dt.Rows.Add(2012, 1587, 650, 121)
    Dim chartData As List(Of GraphData) = New List(Of GraphData)()

    For Each dr As DataRow In dt.Rows
        chartData.Add(New GraphData With {
            .year = Convert.ToInt32(dr("Year")),
            .cars = Convert.ToInt32(dr("Cars")),
            .motorcycles = Convert.ToInt32(dr("Motorcycles")),
            .bicycles = Convert.ToInt32(dr("Bicycles"))
        })
    Next

    Return chartData
End Function

Public Class GraphData
    Public Property year As Integer
    Public Property cars As Integer
    Public Property motorcycles As Integer
    Public Property bicycles As Integer
End Class

Screenshot