WebChart Control Sample - Generating Column Charts
Sample of using multiple Columns
This sample shows:
- How you can display multiple columns and line charts in the same Chart Control.
- It also shows how you can set the maximum column width of a ColumnChart so it does not fills the whole space using MaxColumnWidth. This applies for each ColumnChart you add, so you can customize that some charts use more space than others.
This is how the chart looks like, just copy/paste the code into notepad and save it as .aspx:
C# Code
<%@ Page Language="C#" %>
<%@ Register TagPrefix="web" Namespace="WebChart" Assembly="WebChart" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Drawing" %> <script runat="server">
void Page_Load(object o, EventArgs e) {
CreateChart();
}
void CreateChart() {
DataSet ds = CreateDataSet();
ColumnChart chart = new ColumnChart();
chart.MaxColumnWidth = 10;
chart.Fill.Color = Color.FromArgb(50, Color.Red);
chart.Shadow.Visible = true;
chart.Legend = "Pri 0";
ColumnChart chart1 = new ColumnChart();
chart1.MaxColumnWidth = 10;
chart1.Fill.Color = Color.FromArgb(50, Color.Yellow);
chart1.Shadow.Visible = true;
chart1.Legend = "Pri 1";
LineChart chart5 = new LineChart();
chart5.Line.Color = Color.Green;
chart5.Fill.Color = Color.Green;
chart5.LineMarker = new DiamondLineMarker(8, Color.Green, Color.Yellow);
chart5.Legend = "Goal";
foreach(DataRow row in ds.Tables[0].Rows) {
chart.Data.Add(new ChartPoint(row["date"].ToString(), (int)row["pri0"]));
chart1.Data.Add(new ChartPoint(row["date"].ToString(), (int)row["pri1"]));
chart5.Data.Add(new ChartPoint(row["date"].ToString(), (int)row["goal"]));
}
chartControl1.Charts.Add(chart);
chartControl1.Charts.Add(chart1);
chartControl1.Charts.Add(chart5);
chartControl1.RedrawChart();
}
/// <summary>
/// Just generate some random data
/// </summary>
DataSet CreateDataSet() {
DataSet ds = new DataSet();
DataTable table = ds.Tables.Add("Table");
table.Columns.Add("date");
table.Columns.Add("pri0", typeof(int));
table.Columns.Add("pri1", typeof(int));
table.Columns.Add("pri2", typeof(int));
table.Columns.Add("pri3", typeof(int));
table.Columns.Add("total", typeof(int));
table.Columns.Add("goal", typeof(int));
Random rnd = new Random();
for (int i = 0; i < 15; i++) {
DataRow row = table.NewRow();
row["date"] = DateTime.Now.AddDays(i).ToString("mm/dd");
int pri0 = rnd.Next(200);
int pri1 = rnd.Next(200);
int pri2 = rnd.Next(200);
int pri3 = rnd.Next(200);
int sum = pri0 + pri1 + pri2 + pri3;
int goal = rnd.Next(sum);
row["pri0"] = pri0;
row["pri1"] = pri1;
row["pri2"] = pri2;
row["pri3"] = pri3;
row["total"] = sum;
row["goal"] = goal;
table.Rows.Add(row);
}
return ds;
}
</script>
<html>
<head>
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<web:ChartControl Runat="server" ID="chartControl1" ChartPadding="30" BottomChartPadding="20"
TopPadding="20" Padding="20" Width="800" Height="450" BorderStyle="outset" GridLines="Both"
Legend-Position="Bottom" Legend-Width="30">
<Background Type="LinearGradient" Color="#ccccff" EndPoint="900,900" />
<Border Color="#6699ff" />
<ChartTitle Text="My Product Bugs" Font="Tahoma, 12pt, style=Bold" ForeColor="White" />
<XAxisFont StringFormat="Near, Center, Character, DirectionVertical" />
<XTitle Text="Date" Font="Tahoma, 8pt, style=Bold" ForeColor="White" />
<YTitle Text="# Bugs" Font="Tahoma, 8pt, style=Bold" StringFormat="Near, Near, Character, DirectionVertical" />
</web:ChartControl>
</form>
</body>
</html>
<%@ Register TagPrefix="web" Namespace="WebChart" Assembly="WebChart" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Drawing" %> <script runat="server">
void Page_Load(object o, EventArgs e) {
CreateChart();
}
void CreateChart() {
DataSet ds = CreateDataSet();
ColumnChart chart = new ColumnChart();
chart.MaxColumnWidth = 10;
chart.Fill.Color = Color.FromArgb(50, Color.Red);
chart.Shadow.Visible = true;
chart.Legend = "Pri 0";
ColumnChart chart1 = new ColumnChart();
chart1.MaxColumnWidth = 10;
chart1.Fill.Color = Color.FromArgb(50, Color.Yellow);
chart1.Shadow.Visible = true;
chart1.Legend = "Pri 1";
LineChart chart5 = new LineChart();
chart5.Line.Color = Color.Green;
chart5.Fill.Color = Color.Green;
chart5.LineMarker = new DiamondLineMarker(8, Color.Green, Color.Yellow);
chart5.Legend = "Goal";
foreach(DataRow row in ds.Tables[0].Rows) {
chart.Data.Add(new ChartPoint(row["date"].ToString(), (int)row["pri0"]));
chart1.Data.Add(new ChartPoint(row["date"].ToString(), (int)row["pri1"]));
chart5.Data.Add(new ChartPoint(row["date"].ToString(), (int)row["goal"]));
}
chartControl1.Charts.Add(chart);
chartControl1.Charts.Add(chart1);
chartControl1.Charts.Add(chart5);
chartControl1.RedrawChart();
}
/// <summary>
/// Just generate some random data
/// </summary>
DataSet CreateDataSet() {
DataSet ds = new DataSet();
DataTable table = ds.Tables.Add("Table");
table.Columns.Add("date");
table.Columns.Add("pri0", typeof(int));
table.Columns.Add("pri1", typeof(int));
table.Columns.Add("pri2", typeof(int));
table.Columns.Add("pri3", typeof(int));
table.Columns.Add("total", typeof(int));
table.Columns.Add("goal", typeof(int));
Random rnd = new Random();
for (int i = 0; i < 15; i++) {
DataRow row = table.NewRow();
row["date"] = DateTime.Now.AddDays(i).ToString("mm/dd");
int pri0 = rnd.Next(200);
int pri1 = rnd.Next(200);
int pri2 = rnd.Next(200);
int pri3 = rnd.Next(200);
int sum = pri0 + pri1 + pri2 + pri3;
int goal = rnd.Next(sum);
row["pri0"] = pri0;
row["pri1"] = pri1;
row["pri2"] = pri2;
row["pri3"] = pri3;
row["total"] = sum;
row["goal"] = goal;
table.Rows.Add(row);
}
return ds;
}
</script>
<html>
<head>
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<web:ChartControl Runat="server" ID="chartControl1" ChartPadding="30" BottomChartPadding="20"
TopPadding="20" Padding="20" Width="800" Height="450" BorderStyle="outset" GridLines="Both"
Legend-Position="Bottom" Legend-Width="30">
<Background Type="LinearGradient" Color="#ccccff" EndPoint="900,900" />
<Border Color="#6699ff" />
<ChartTitle Text="My Product Bugs" Font="Tahoma, 12pt, style=Bold" ForeColor="White" />
<XAxisFont StringFormat="Near, Center, Character, DirectionVertical" />
<XTitle Text="Date" Font="Tahoma, 8pt, style=Bold" ForeColor="White" />
<YTitle Text="# Bugs" Font="Tahoma, 8pt, style=Bold" StringFormat="Near, Near, Character, DirectionVertical" />
</web:ChartControl>
</form>
</body>
</html>
VB.NET Code
<%@ Page Language="VB" %>
<%@ Register TagPrefix="web" Namespace="WebChart" Assembly="WebChart" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Drawing" %> <script runat='server'>
Private Sub Page_Load(ByVal o As Object, ByVal e As EventArgs)
CreateChart
End Sub
Private Sub CreateChart()
Dim ds As DataSet = CreateDataSet
Dim chart As ColumnChart = New ColumnChart
chart.MaxColumnWidth = 10
chart.Fill.Color = Color.FromArgb(50, Color.Red)
chart.Shadow.Visible = true
chart.Legend = "Pri 0"
Dim chart1 As ColumnChart = New ColumnChart
chart1.MaxColumnWidth = 10
chart1.Fill.Color = Color.FromArgb(50, Color.Yellow)
chart1.Shadow.Visible = true
chart1.Legend = "Pri 1"
Dim chart5 As LineChart = New LineChart
chart5.Line.Color = Color.Green
chart5.Fill.Color = Color.Green
chart5.LineMarker = New DiamondLineMarker(8, Color.Green, Color.Yellow)
chart5.Legend = "Goal"
For Each row As DataRow In ds.Tables(0).Rows
chart.Data.Add(New ChartPoint(row("date").ToString, CType(row("pri0"),Integer)))
chart1.Data.Add(New ChartPoint(row("date").ToString, CType(row("pri1"),Integer)))
chart5.Data.Add(New ChartPoint(row("date").ToString, CType(row("goal"),Integer)))
Next
chartControl1.Charts.Add(chart)
chartControl1.Charts.Add(chart1)
chartControl1.Charts.Add(chart5)
chartControl1.RedrawChart
End Sub
' <summary>
' Just generate some random data
' </summary>
Private Function CreateDataSet() As DataSet
Dim ds As DataSet = New DataSet
Dim table As DataTable = ds.Tables.Add("Table")
table.Columns.Add("date")
table.Columns.Add("pri0", GetType(System.Int32))
table.Columns.Add("pri1", GetType(System.Int32))
table.Columns.Add("pri2", GetType(System.Int32))
table.Columns.Add("pri3", GetType(System.Int32))
table.Columns.Add("total", GetType(System.Int32))
table.Columns.Add("goal", GetType(System.Int32))
Dim rnd As Random = New Random
Dim i As Integer = 0
Do While (i < 15)
Dim row As DataRow = table.NewRow
row("date") = DateTime.Now.AddDays(i).ToString("mm/dd")
Dim pri0 As Integer = rnd.Next(200)
Dim pri1 As Integer = rnd.Next(200)
Dim pri2 As Integer = rnd.Next(200)
Dim pri3 As Integer = rnd.Next(200)
Dim sum As Integer = (pri0 _
+ (pri1 _
+ (pri2 + pri3)))
Dim goal As Integer = rnd.Next(sum)
row("pri0") = pri0
row("pri1") = pri1
row("pri2") = pri2
row("pri3") = pri3
row("total") = sum
row("goal") = goal
table.Rows.Add(row)
i = i + 1
Loop
Return ds
End Function
</script>
<html>
<head>
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<web:ChartControl Runat="server" ID="chartControl1" ChartPadding="30" BottomChartPadding="20"
TopPadding="20" Padding="20" Width="800" Height="450" BorderStyle="outset" GridLines="Both"
Legend-Position="Bottom" Legend-Width="30">
<Background Type="LinearGradient" Color="#ccccff" EndPoint="900,900" />
<Border Color="#6699ff" />
<ChartTitle Text="My Product Bugs" Font="Tahoma, 12pt, style=Bold" ForeColor="White" />
<XAxisFont StringFormat="Near, Center, Character, DirectionVertical" />
<XTitle Text="Date" Font="Tahoma, 8pt, style=Bold" ForeColor="White" />
<YTitle Text="# Bugs" Font="Tahoma, 8pt, style=Bold" StringFormat="Near, Near, Character, DirectionVertical" />
</web:ChartControl>
</form>
</body>
</html>
<%@ Register TagPrefix="web" Namespace="WebChart" Assembly="WebChart" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Drawing" %> <script runat='server'>
Private Sub Page_Load(ByVal o As Object, ByVal e As EventArgs)
CreateChart
End Sub
Private Sub CreateChart()
Dim ds As DataSet = CreateDataSet
Dim chart As ColumnChart = New ColumnChart
chart.MaxColumnWidth = 10
chart.Fill.Color = Color.FromArgb(50, Color.Red)
chart.Shadow.Visible = true
chart.Legend = "Pri 0"
Dim chart1 As ColumnChart = New ColumnChart
chart1.MaxColumnWidth = 10
chart1.Fill.Color = Color.FromArgb(50, Color.Yellow)
chart1.Shadow.Visible = true
chart1.Legend = "Pri 1"
Dim chart5 As LineChart = New LineChart
chart5.Line.Color = Color.Green
chart5.Fill.Color = Color.Green
chart5.LineMarker = New DiamondLineMarker(8, Color.Green, Color.Yellow)
chart5.Legend = "Goal"
For Each row As DataRow In ds.Tables(0).Rows
chart.Data.Add(New ChartPoint(row("date").ToString, CType(row("pri0"),Integer)))
chart1.Data.Add(New ChartPoint(row("date").ToString, CType(row("pri1"),Integer)))
chart5.Data.Add(New ChartPoint(row("date").ToString, CType(row("goal"),Integer)))
Next
chartControl1.Charts.Add(chart)
chartControl1.Charts.Add(chart1)
chartControl1.Charts.Add(chart5)
chartControl1.RedrawChart
End Sub
' <summary>
' Just generate some random data
' </summary>
Private Function CreateDataSet() As DataSet
Dim ds As DataSet = New DataSet
Dim table As DataTable = ds.Tables.Add("Table")
table.Columns.Add("date")
table.Columns.Add("pri0", GetType(System.Int32))
table.Columns.Add("pri1", GetType(System.Int32))
table.Columns.Add("pri2", GetType(System.Int32))
table.Columns.Add("pri3", GetType(System.Int32))
table.Columns.Add("total", GetType(System.Int32))
table.Columns.Add("goal", GetType(System.Int32))
Dim rnd As Random = New Random
Dim i As Integer = 0
Do While (i < 15)
Dim row As DataRow = table.NewRow
row("date") = DateTime.Now.AddDays(i).ToString("mm/dd")
Dim pri0 As Integer = rnd.Next(200)
Dim pri1 As Integer = rnd.Next(200)
Dim pri2 As Integer = rnd.Next(200)
Dim pri3 As Integer = rnd.Next(200)
Dim sum As Integer = (pri0 _
+ (pri1 _
+ (pri2 + pri3)))
Dim goal As Integer = rnd.Next(sum)
row("pri0") = pri0
row("pri1") = pri1
row("pri2") = pri2
row("pri3") = pri3
row("total") = sum
row("goal") = goal
table.Rows.Add(row)
i = i + 1
Loop
Return ds
End Function
</script>
<html>
<head>
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<web:ChartControl Runat="server" ID="chartControl1" ChartPadding="30" BottomChartPadding="20"
TopPadding="20" Padding="20" Width="800" Height="450" BorderStyle="outset" GridLines="Both"
Legend-Position="Bottom" Legend-Width="30">
<Background Type="LinearGradient" Color="#ccccff" EndPoint="900,900" />
<Border Color="#6699ff" />
<ChartTitle Text="My Product Bugs" Font="Tahoma, 12pt, style=Bold" ForeColor="White" />
<XAxisFont StringFormat="Near, Center, Character, DirectionVertical" />
<XTitle Text="Date" Font="Tahoma, 8pt, style=Bold" ForeColor="White" />
<YTitle Text="# Bugs" Font="Tahoma, 8pt, style=Bold" StringFormat="Near, Near, Character, DirectionVertical" />
</web:ChartControl>
</form>
</body>
</html>
Colorized by: CarlosAg.CodeColorizer
Carlos Aguilar Mares © 2017