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
