|   Contact  
WebChartLogo

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:
Sample

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 0i < 15i++) {
            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 As ObjectByVal 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 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