Gallery

Gallery > Dashboards And InfoGrids

JS Green

Demonstrates a dashboard with JS charts.

Download Show C# Code Show VB Code

<%@ Import Namespace="System.Drawing" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script runat="server">

void Page_Load(Object sender,EventArgs e)
{
// Demonstrates using template and multiple charts on the same page.
chartDefaults(Chart1);
chartDefaults(Chart2);
chartDefaults(Chart3);
chartDefaults(Chart4);
chartDefaults(Chart5);
chartDefaults(Chart6);
chartDefaults(Chart7);
chartDefaults(Chart8);
chartDefaults(Chart9);
chartDefaults(Chart10);

chart1(Chart1);
chart2(Chart2);
chart3(Chart3);
chart4(Chart4);
chart5(Chart5);
chart6(Chart6);
chart7(Chart7);
chart8(Chart8);
chart9(Chart9);
chart10(Chart10);
}

void chartDefaults(Chart c){
c.Background.Color = Color.Transparent;

c.Palette = new Color[] {
(Color)System.Drawing.ColorTranslator.FromHtml("#86b300")

};
c.TempDirectory = "temp";
c.Debug = false;
c.YAxis.SpacingPercentage = 20;
c.JS.Enabled = true;
c.JS.Buttons.EnableExportButton = false;
c.JS.Buttons.EnablePrintButton = false;
c.LegendBox.Visible = false;
c.ChartArea.ClearColors();
c.ShadingEffectMode = ShadingEffectMode.Two;
}

void chart1(Chart c)
{
c.Type = ChartType.ComboHorizontal;

c.Width = 180;
c.Height = 125;

c.XAxis.ClearValues = true;

c.XAxis.DefaultTick.Label.Text = "";

c.YAxis.DefaultTick.Label.Font = new Font("Arial", 11, FontStyle.Bold);

Series s = new Series();
Element e = new Element();
e.YValue=15;
e.Name="15";
s.Elements.Add(e);
e = new Element();
e.YValue = 20;
e.Name = "20";
s.Elements.Add(e);
e = new Element();
e.YValue = 25;
e.Name = "25";
s.Elements.Add(e);
e = new Element();
e.YValue = 30;
e.Name = "30";

s.Elements.Add(e);
e = new Element();
e.YValue = 35;
e.Name = "35";

s.Elements.Add(e);
c.SeriesCollection.Add(s);

}

void chart2(Chart c)
{
c.Type = ChartType.Donuts;

c.Width = 180;
c.Height = 150;
c.ChartArea.Padding = 0;
Annotation an = new Annotation();
an.Label.Text = "12,457";
an.Label.Alignment = StringAlignment.Center;
an.ClearColors();
an.Position = new Point(65, 45);
c.Annotations.Add(an);

Annotation an2 = new Annotation();
an2.Label.Text = "Respondents";
an2.Label.Alignment = StringAlignment.Center;
an2.ClearColors();
an2.Position = new Point(50, 60);
c.Annotations.Add(an2);

c.ChartArea.ClearColors();
c.ShadingEffectMode = ShadingEffectMode.Three;
c.Palette = new Color[] {
(Color)System.Drawing.ColorTranslator.FromHtml("#86b300"),
(Color)System.Drawing.ColorTranslator.FromHtml("#a8e100"),
(Color)System.Drawing.ColorTranslator.FromHtml("#79a200"),
(Color)System.Drawing.ColorTranslator.FromHtml("#b7f400"),
(Color)System.Drawing.ColorTranslator.FromHtml("#d7f482")
};

Series s = new Series();
Element e = new Element();
e.YValue = 15;
e.Name = "A";
s.Elements.Add(e);
e = new Element();
e.YValue = 20;
e.Name = "B";
s.Elements.Add(e);
e = new Element();
e.YValue = 25;
e.Name = "C";
s.Elements.Add(e);
e = new Element();
e.YValue = 30;
e.Name = "D";
s.Elements.Add(e);
e = new Element();
e.YValue = 35;
e.Name = "E";
s.Elements.Add(e);

c.SeriesCollection.Add(s);

}
void chart3(Chart c)
{
c.Type = ChartType.Combo;
c.DefaultSeries.Type = SeriesType.AreaLine;

c.Width = 180;
c.Height = 150;

c.ChartArea.ClearColors();
c.ShadingEffectMode = ShadingEffectMode.Three;

c.YAxis.DefaultTick.Label.Font = new Font("Arial", 11, FontStyle.Bold);

c.XAxis.ClearValues = true;

c.XAxis.DefaultTick.Label.Text = "";
c.XAxis.DefaultMinorTick.Label.Text = "";

Series s = new Series();
Element e = new Element();
e.YValue = 29.9;
e.XDateTime = new DateTime(2010,1,1);
s.Elements.Add(e);
e = new Element();
e.YValue = 71.5;
e.XDateTime = new DateTime(2010, 2, 1);
s.Elements.Add(e);
e = new Element();
e.YValue = 96.4;
e.XDateTime = new DateTime(2010, 3, 1);
s.Elements.Add(e);
e = new Element();
e.YValue = 129.2;
e.XDateTime = new DateTime(2010, 4, 1);
s.Elements.Add(e);
e = new Element();
e.YValue = 169.2;
e.XDateTime = new DateTime(2010, 5, 1);
s.Elements.Add(e);

c.SeriesCollection.Add(s);

s = new Series();
e = new Element();
s.DefaultElement.Color = (Color)System.Drawing.ColorTranslator.FromHtml("#868686");

e.YValue = 56.9;
e.XDateTime = new DateTime(2010, 1, 1);
s.Elements.Add(e);
e = new Element();
e.YValue = 56.5;
e.XDateTime = new DateTime(2010, 2, 1);
s.Elements.Add(e);
e = new Element();
e.YValue = 56.4;
e.XDateTime = new DateTime(2010, 3, 1);
s.Elements.Add(e);
e = new Element();
e.YValue = 57;
e.XDateTime = new DateTime(2010, 4, 1);
s.Elements.Add(e);
e = new Element();
e.YValue = 75;
e.XDateTime = new DateTime(2010, 5, 1);
s.Elements.Add(e);

c.SeriesCollection.Add(s);

}

void chart4(Chart c)
{
c.Type = ChartType.ComboHorizontal;

c.Width = 200;
c.Height = 142;

c.XAxis.ClearValues = true;
c.XAxis.DefaultTick.Label.Text = "";

c.YAxis.DefaultTick.Label.Font = new Font("Arial", 10, FontStyle.Bold);

c.DefaultElement.ShowValue = true;

c.ChartArea.ClearColors();
c.ShadingEffectMode = ShadingEffectMode.Three;

c.YAxis.Clear();
c.XAxis.Clear();

Series s = new Series();
Element e = new Element();
e.YValue = 10;
e.Name = "duis";
s.Elements.Add(e);
e = new Element();
e.YValue = 20;
e.Name = "aute";
s.Elements.Add(e);
e = new Element();
e.YValue = 25;
e.Name = "irure";
s.Elements.Add(e);

e = new Element();
e.YValue = 30;
e.Name = "dolor";
s.Elements.Add(e);
e = new Element();
e.YValue = 35;
e.Name = "reprehen";
s.Elements.Add(e);
e = new Element();
e.YValue = 30;
e.Name = "derit";
s.Elements.Add(e);

c.SeriesCollection.Add(s);

}

void chart5(Chart c)
{
c.Type = ChartType.Pies;
c.Palette = new Color[] {
(Color)System.Drawing.ColorTranslator.FromHtml("#86b300"),
(Color)System.Drawing.ColorTranslator.FromHtml("#a8e100"),
(Color)System.Drawing.ColorTranslator.FromHtml("#868686"),
(Color)System.Drawing.ColorTranslator.FromHtml("#b7f400"),
(Color)System.Drawing.ColorTranslator.FromHtml("#d7f482")
};

c.Width = 155;
c.Height = 155;

c.DefaultElement.SmartLabel.Text = "%YValue";
c.ChartArea.ClearColors();
c.ChartArea.Padding = 3;

c.ShadingEffectMode = ShadingEffectMode.Three;
c.DefaultElement.ToolTip = "%Name<br>%YValue";
c.XAxis.ClearValues = true;
c.YAxis.ClearValues = true;
c.XAxis.DefaultTick.Label.Text = "";
c.YAxis.DefaultTick.Label.Text = "";
c.YAxis.Clear();
c.XAxis.Clear();

Series s = new Series();
Element e = new Element();
e.YValue = 52;
e.Name = "A";
s.Elements.Add(e);
e = new Element();
e.YValue = 38;
e.Name = "B";
s.Elements.Add(e);
e = new Element();
e.YValue = 10;
e.Name = "C";
s.Elements.Add(e);

c.SeriesCollection.Add(s);

}

void chart6(Chart c)
{
c.Type = ChartType.ComboHorizontal;

c.Width = 240;
c.Height = 235;

c.XAxis.ClearValues = true;
c.XAxis.DefaultTick.Label.Text = "";
c.YAxis.DefaultTick.Label.Alignment = StringAlignment.Near;

c.YAxis.DefaultTick.Label.Color = Color.White;
c.YAxis.DefaultTick.Label.Font = new Font("Arial", 10, FontStyle.Bold);
c.DefaultElement.SmartLabel.Font = new Font("Arial", 10, FontStyle.Bold);

c.JS.Settings.Add("xAxis.defaultTick.label.offset", "'10,6'");

c.DefaultElement.ShowValue = true;

c.ChartArea.ClearColors();

c.YAxis.Clear();
c.XAxis.Clear();

Series s = new Series();
Element e = new Element();
e.YValue = 15;
e.Name = "bike";
s.Elements.Add(e);
e = new Element();
e.YValue = 69;
e.Name = "car";
s.Elements.Add(e);
e = new Element();
e.YValue = 25;
e.Name = "bus";
s.Elements.Add(e);

e = new Element();
e.YValue = 30;
e.Name = "train";
s.Elements.Add(e);
e = new Element();
e.YValue = 47;
e.Name = "subway";
s.Elements.Add(e);
e = new Element();
e.YValue = 19;
e.Name = "ship";
s.Elements.Add(e);
e = new Element();
e.YValue = 24;
e.Name = "airplane";
s.Elements.Add(e);

c.SeriesCollection.Add(s);

}

void chart7(Chart c)
{
c.Type = ChartType.Combo;

c.Width = 120;
c.Height = 190;

c.XAxis.ClearValues = true;
c.YAxis.DefaultTick.Label.Text = "";

c.XAxis.DefaultTick.Label.Font = new Font("Arial", 10, FontStyle.Bold);
c.XAxis.TickLabelAngle = 90;
c.XAxis.TickLabelPadding = 5;
c.DefaultElement.SmartLabel.Font = new Font("Arial", 9);
c.DefaultElement.SmartLabel.ForceVertical = true;
c.DefaultElement.SmartLabel.Text = "{%percentOfSeries:n0}%";

c.DefaultElement.ShowValue = true;

c.ChartArea.ClearColors();

c.YAxis.Clear();
c.XAxis.Clear();

Series s = new Series();
Element e = new Element();
e.YValue = 32;
e.Name = "nuclear";
e.Color = Color.Gray;
s.Elements.Add(e);
e = new Element();
e.YValue = 23;
e.Name = "fossil";
e.Color = Color.Gray;
s.Elements.Add(e);
e = new Element();
e.YValue = 10;
e.Name = "solar";
s.Elements.Add(e);

e = new Element();
e.YValue = 11;
e.Name = "wind";
s.Elements.Add(e);
e = new Element();
e.YValue = 9;
e.Name = "water";
s.Elements.Add(e);

c.SeriesCollection.Add(s);

}

void chart8(Chart c)
{
c.Type = ChartType.Combo;

c.Width = 120;
c.Height = 190;

c.XAxis.ClearValues = true;
c.YAxis.DefaultTick.Label.Text = "";

c.XAxis.DefaultTick.Label.Font = new Font("Arial", 10, FontStyle.Bold);
c.XAxis.TickLabelAngle = 90;

c.DefaultElement.SmartLabel.Font = new Font("Arial", 9);
c.DefaultElement.SmartLabel.ForceVertical = true;
c.DefaultElement.SmartLabel.Text = "{%percentOfSeries:n0}%";

c.DefaultElement.ShowValue = true;

c.ChartArea.ClearColors();

c.YAxis.Clear();
c.XAxis.Clear();

Series s = new Series();
Element e = new Element();
e.YValue = 12;
e.Name = "nuclear";
e.Color = Color.Gray;
s.Elements.Add(e);
e = new Element();
e.YValue = 16;
e.Name = "fossil";
e.Color = Color.Gray;
s.Elements.Add(e);
e = new Element();
e.YValue = 18;
e.Name = "solar";
s.Elements.Add(e);

e = new Element();
e.YValue = 30;
e.Name = "wind";
s.Elements.Add(e);
e = new Element();
e.YValue =20;
e.Name = "water";
s.Elements.Add(e);

c.SeriesCollection.Add(s);

}
void chart9(Chart c)
{
c.Type = ChartType.Combo;

c.Width = 120;
c.Height = 190;

c.XAxis.ClearValues = true;
c.YAxis.DefaultTick.Label.Text = "";

c.XAxis.DefaultTick.Label.Font = new Font("Arial", 10, FontStyle.Bold);
c.XAxis.TickLabelAngle = 90;

c.DefaultElement.SmartLabel.Font = new Font("Arial", 9);
c.DefaultElement.SmartLabel.ForceVertical = true;
c.DefaultElement.SmartLabel.Text = "{%percentOfSeries:n0}%";

c.DefaultElement.ShowValue = true;

c.ChartArea.ClearColors();

c.YAxis.Clear();
c.XAxis.Clear();

Series s = new Series();
Element e = new Element();
e.YValue = 3;
e.Name = "nuclear";
e.Color = Color.Gray;
s.Elements.Add(e);
e = new Element();
e.YValue = 5;
e.Name = "fossil";
e.Color = Color.Gray;
s.Elements.Add(e);
e = new Element();
e.YValue = 30;
e.Name = "solar";
s.Elements.Add(e);

e = new Element();
e.YValue = 34;
e.Name = "wind";
s.Elements.Add(e);
e = new Element();
e.YValue = 27;
e.Name = "water";
s.Elements.Add(e);

c.SeriesCollection.Add(s);

}

void chart10(Chart c)
{
c.Type = ChartType.Combo;

c.Width = 180;
c.Height = 120;

c.XAxis.ClearValues = true;
c.YAxis.DefaultTick.Label.Text = "";
c.XAxis.DefaultTick.Label.Text = "";

c.XAxis.DefaultTick.Label.Font = new Font("Arial", 10, FontStyle.Bold);
c.XAxis.TickLabelAngle = 90;

c.DefaultElement.SmartLabel.Font = new Font("Arial", 9);
c.DefaultElement.SmartLabel.ForceVertical = true;
c.DefaultElement.SmartLabel.Text = "{%percentOfSeries:n0}%";
c.XAxis.InvertScale = true;

c.DefaultElement.ShowValue = true;

c.ChartArea.ClearColors();

c.YAxis.Clear();
c.XAxis.Clear();

Series s = new Series();
Element e = new Element();
e.YValue = 3;
e.Name = "nuclear";
e.Color = Color.Gray;
s.Elements.Add(e);
e = new Element();
e.YValue = 5;
e.Name = "fossil";
e.Color = Color.Gray;
s.Elements.Add(e);
e = new Element();
e.YValue = 30;
e.Name = "solar";
s.Elements.Add(e);

e = new Element();
e.YValue = 34;
e.Name = "wind";

s.Elements.Add(e);
e = new Element();
e.YValue = 27;
e.Name = "water";

s.Elements.Add(e);

c.SeriesCollection.Add(s);

}
</script>
<style>
.mainWrapper{
width:890px;
height:1288px;
background: url('../../images/eco.gif') ;
background: rgba(255,255,255,0) url('../../images/eco.svg') ;/*url('../../images/svgz/eco.svgz')*/
background-size: cover;
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
position:relative;
left:-25px;
}
.chart1
{
position:absolute;
margin-top:550px;
margin-left:70px;
width:170px;
}
.chart2
{
position:absolute;
margin-top:720px;
margin-left:70px;
width:166px;
}
.chart3
{
position:absolute;
margin-top:720px;
margin-left:260px;
width:186px;
}
.chart4{
position:absolute;
margin-top:720px;
margin-left:465px;
width:186px;
}
.chart5{
position:absolute;
margin-top:720px;
margin-left:665px;
width:186px;
}
.chart6{
position:absolute;
margin-top:920px;
margin-left:230px;
width:228px;
}

.chart7{
position:absolute;
margin-top:920px;
margin-left:458px;
width:110px;
}
.chart8{
position:absolute;
margin-top:920px;
margin-left:578px;
width:110px;
}
.chart9{
position:absolute;
margin-top:920px;
margin-left:695px;
width:110px;
}
.chart10{
position:absolute;
margin-top:100px;
margin-left:555px;
width:145px;
}
</style>
</head>
<body>

<div align="center"> </div>
<div class="mainWrapper" style="margin: 0px auto;">
<dotnet:Chart class="chart1" id="Chart1" runat="server" Width="568px" Height="344px"></dotnet:Chart>
<dotnet:Chart class="chart2" id="Chart2" runat="server" Width="568px" Height="344px"></dotnet:Chart>
<dotnet:Chart class="chart3" id="Chart3" runat="server" Width="568px" Height="344px"></dotnet:Chart>
<dotnet:Chart class="chart4" id="Chart4" runat="server" Width="568px" Height="344px"></dotnet:Chart>
<dotnet:Chart class="chart5" id="Chart5" runat="server" Width="568px" Height="344px"></dotnet:Chart>
<dotnet:Chart class="chart6" id="Chart6" runat="server" Width="568px" Height="344px"></dotnet:Chart>

<dotnet:Chart class="chart7" id="Chart7" runat="server" Width="568px" Height="344px"></dotnet:Chart>
<dotnet:Chart class="chart8" id="Chart8" runat="server" Width="568px" Height="344px"></dotnet:Chart>
<dotnet:Chart class="chart9" id="Chart9" runat="server" Width="568px" Height="344px"></dotnet:Chart>
<dotnet:Chart class="chart10" id="Chart10" runat="server" Width="568px" Height="344px"></dotnet:Chart>
</div>
</body>
</html>

<%@ Import Namespace="System.Drawing" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script runat="server">

Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates using template and multiple charts on the same page.
chartDefaults(Chart1)
chartDefaults(Chart2)
chartDefaults(Chart3)
chartDefaults(Chart4)
chartDefaults(Chart5)
chartDefaults(Chart6)
chartDefaults(Chart7)
chartDefaults(Chart8)
chartDefaults(Chart9)
chartDefaults(Chart10)

chart_1(Chart1)
chart_2(Chart2)
chart_3(Chart3)
chart_4(Chart4)
chart_5(Chart5)
chart_6(Chart6)
chart_7(Chart7)
chart_8(Chart8)
chart_9(Chart9)
chart_10(Chart10)
End Sub

Sub chartDefaults(ByVal c As Chart)
c.Background.Color = Color.Transparent

c.Palette = New Color() {CType(System.Drawing.ColorTranslator.FromHtml("#86b300"), Color)}
c.TempDirectory = "temp"
c.Debug = False
c.YAxis.SpacingPercentage = 20
c.JS.Enabled = True
c.JS.Buttons.EnableExportButton = False
c.JS.Buttons.EnablePrintButton = False
c.LegendBox.Visible = False
c.ChartArea.ClearColors()
c.ShadingEffectMode = ShadingEffectMode.Two
End Sub

Sub chart_1(ByVal c As Chart)
c.Type = ChartType.ComboHorizontal

c.Width = 180
c.Height = 125

c.XAxis.ClearValues = True

c.XAxis.DefaultTick.Label.Text = ""

c.YAxis.DefaultTick.Label.Font = New Font("Arial", 11, FontStyle.Bold)

Dim s As Series = New Series()
Dim e As Element = New Element()
e.YValue = 15
e.Name = "15"
s.Elements.Add(e)
e = New Element()
e.YValue = 20
e.Name = "20"
s.Elements.Add(e)
e = New Element()
e.YValue = 25
e.Name = "25"
s.Elements.Add(e)
e = New Element()
e.YValue = 30
e.Name = "30"

s.Elements.Add(e)
e = New Element()
e.YValue = 35
e.Name = "35"

s.Elements.Add(e)
c.SeriesCollection.Add(s)

End Sub

Sub chart_2(ByVal c As Chart)
c.Type = ChartType.Donuts

c.Width = 180
c.Height = 150
c.ChartArea.Padding = 0
Dim an As Annotation = New Annotation()
an.Label.Text = "12,457"
an.Label.Alignment = StringAlignment.Center
an.ClearColors()
an.Position = New Point(65, 45)
c.Annotations.Add(an)

Dim an2 As Annotation = New Annotation()
an2.Label.Text = "Respondents"
an2.Label.Alignment = StringAlignment.Center
an2.ClearColors()
an2.Position = New Point(50, 60)
c.Annotations.Add(an2)

c.ChartArea.ClearColors()
c.ShadingEffectMode = ShadingEffectMode.Three
c.Palette = New Color() {CType(System.Drawing.ColorTranslator.FromHtml("#86b300"), Color), CType(System.Drawing.ColorTranslator.FromHtml("#a8e100"), Color), CType(System.Drawing.ColorTranslator.FromHtml("#79a200"), Color), CType(System.Drawing.ColorTranslator.FromHtml("#b7f400"), Color), CType(System.Drawing.ColorTranslator.FromHtml("#d7f482"), Color)}

Dim s As Series = New Series()
Dim e As Element = New Element()
e.YValue = 15
e.Name = "A"
s.Elements.Add(e)
e = New Element()
e.YValue = 20
e.Name = "B"
s.Elements.Add(e)
e = New Element()
e.YValue = 25
e.Name = "C"
s.Elements.Add(e)
e = New Element()
e.YValue = 30
e.Name = "D"
s.Elements.Add(e)
e = New Element()
e.YValue = 35
e.Name = "E"
s.Elements.Add(e)

c.SeriesCollection.Add(s)

End Sub
Sub chart_3(ByVal c As Chart)
c.Type = ChartType.Combo
c.DefaultSeries.Type = SeriesType.AreaLine

c.Width = 180
c.Height = 150

c.ChartArea.ClearColors()
c.ShadingEffectMode = ShadingEffectMode.Three

c.YAxis.DefaultTick.Label.Font = New Font("Arial", 11, FontStyle.Bold)

c.XAxis.ClearValues = True

c.XAxis.DefaultTick.Label.Text = ""
c.XAxis.DefaultMinorTick.Label.Text = ""

Dim s As Series = New Series()
Dim e As Element = New Element()
e.YValue = 29.9
e.XDateTime = New DateTime(2010, 1, 1)
s.Elements.Add(e)
e = New Element()
e.YValue = 71.5
e.XDateTime = New DateTime(2010, 2, 1)
s.Elements.Add(e)
e = New Element()
e.YValue = 96.4
e.XDateTime = New DateTime(2010, 3, 1)
s.Elements.Add(e)
e = New Element()
e.YValue = 129.2
e.XDateTime = New DateTime(2010, 4, 1)
s.Elements.Add(e)
e = New Element()
e.YValue = 169.2
e.XDateTime = New DateTime(2010, 5, 1)
s.Elements.Add(e)

c.SeriesCollection.Add(s)

s = New Series()
e = New Element()
s.DefaultElement.Color = CType(System.Drawing.ColorTranslator.FromHtml("#868686"), Color)

e.YValue = 56.9
e.XDateTime = New DateTime(2010, 1, 1)
s.Elements.Add(e)
e = New Element()
e.YValue = 56.5
e.XDateTime = New DateTime(2010, 2, 1)
s.Elements.Add(e)
e = New Element()
e.YValue = 56.4
e.XDateTime = New DateTime(2010, 3, 1)
s.Elements.Add(e)
e = New Element()
e.YValue = 57
e.XDateTime = New DateTime(2010, 4, 1)
s.Elements.Add(e)
e = New Element()
e.YValue = 75
e.XDateTime = New DateTime(2010, 5, 1)
s.Elements.Add(e)

c.SeriesCollection.Add(s)

End Sub

Sub chart_4(ByVal c As Chart)
c.Type = ChartType.ComboHorizontal

c.Width = 200
c.Height = 142

c.XAxis.ClearValues = True
c.XAxis.DefaultTick.Label.Text = ""

c.YAxis.DefaultTick.Label.Font = New Font("Arial", 10, FontStyle.Bold)

c.DefaultElement.ShowValue = True

c.ChartArea.ClearColors()
c.ShadingEffectMode = ShadingEffectMode.Three

c.YAxis.Clear()
c.XAxis.Clear()

Dim s As Series = New Series()
Dim e As Element = New Element()
e.YValue = 10
e.Name = "duis"
s.Elements.Add(e)
e = New Element()
e.YValue = 20
e.Name = "aute"
s.Elements.Add(e)
e = New Element()
e.YValue = 25
e.Name = "irure"
s.Elements.Add(e)

e = New Element()
e.YValue = 30
e.Name = "dolor"
s.Elements.Add(e)
e = New Element()
e.YValue = 35
e.Name = "reprehen"
s.Elements.Add(e)
e = New Element()
e.YValue = 30
e.Name = "derit"
s.Elements.Add(e)

c.SeriesCollection.Add(s)

End Sub

Sub chart_5(ByVal c As Chart)
c.Type = ChartType.Pies
c.Palette = New Color() {CType(System.Drawing.ColorTranslator.FromHtml("#86b300"), Color), CType(System.Drawing.ColorTranslator.FromHtml("#a8e100"), Color), CType(System.Drawing.ColorTranslator.FromHtml("#868686"), Color), CType(System.Drawing.ColorTranslator.FromHtml("#b7f400"), Color), CType(System.Drawing.ColorTranslator.FromHtml("#d7f482"), Color)}

c.Width = 155
c.Height = 155

c.DefaultElement.SmartLabel.Text = "%YValue"
c.ChartArea.ClearColors()
c.ChartArea.Padding = 3

c.ShadingEffectMode = ShadingEffectMode.Three
c.DefaultElement.ToolTip = "%Name<br>%YValue"
c.XAxis.ClearValues = True
c.YAxis.ClearValues = True
c.XAxis.DefaultTick.Label.Text = ""
c.YAxis.DefaultTick.Label.Text = ""
c.YAxis.Clear()
c.XAxis.Clear()

Dim s As Series = New Series()
Dim e As Element = New Element()
e.YValue = 52
e.Name = "A"
s.Elements.Add(e)
e = New Element()
e.YValue = 38
e.Name = "B"
s.Elements.Add(e)
e = New Element()
e.YValue = 10
e.Name = "C"
s.Elements.Add(e)

c.SeriesCollection.Add(s)

End Sub

Sub chart_6(ByVal c As Chart)
c.Type = ChartType.ComboHorizontal

c.Width = 240
c.Height = 235

c.XAxis.ClearValues = True
c.XAxis.DefaultTick.Label.Text = ""
c.YAxis.DefaultTick.Label.Alignment = StringAlignment.Near

c.YAxis.DefaultTick.Label.Color = Color.White
c.YAxis.DefaultTick.Label.Font = New Font("Arial", 10, FontStyle.Bold)
c.DefaultElement.SmartLabel.Font = New Font("Arial", 10, FontStyle.Bold)

c.JS.Settings.Add("xAxis.defaultTick.label.offset", "'10,6'")

c.DefaultElement.ShowValue = True

c.ChartArea.ClearColors()

c.YAxis.Clear()
c.XAxis.Clear()

Dim s As Series = New Series()
Dim e As Element = New Element()
e.YValue = 15
e.Name = "bike"
s.Elements.Add(e)
e = New Element()
e.YValue = 69
e.Name = "car"
s.Elements.Add(e)
e = New Element()
e.YValue = 25
e.Name = "bus"
s.Elements.Add(e)

e = New Element()
e.YValue = 30
e.Name = "train"
s.Elements.Add(e)
e = New Element()
e.YValue = 47
e.Name = "subway"
s.Elements.Add(e)
e = New Element()
e.YValue = 19
e.Name = "ship"
s.Elements.Add(e)
e = New Element()
e.YValue = 24
e.Name = "airplane"
s.Elements.Add(e)

c.SeriesCollection.Add(s)

End Sub

Sub chart_7(ByVal c As Chart)
c.Type = ChartType.Combo

c.Width = 120
c.Height = 190

c.XAxis.ClearValues = True
c.YAxis.DefaultTick.Label.Text = ""

c.XAxis.DefaultTick.Label.Font = New Font("Arial", 10, FontStyle.Bold)
c.XAxis.TickLabelAngle = 90
c.XAxis.TickLabelPadding = 5
c.DefaultElement.SmartLabel.Font = New Font("Arial", 9)
c.DefaultElement.SmartLabel.ForceVertical = True
c.DefaultElement.SmartLabel.Text = "{%percentOfSeries:n0}%"

c.DefaultElement.ShowValue = True

c.ChartArea.ClearColors()

c.YAxis.Clear()
c.XAxis.Clear()

Dim s As Series = New Series()
Dim e As Element = New Element()
e.YValue = 32
e.Name = "nuclear"
e.Color = Color.Gray
s.Elements.Add(e)
e = New Element()
e.YValue = 23
e.Name = "fossil"
e.Color = Color.Gray
s.Elements.Add(e)
e = New Element()
e.YValue = 10
e.Name = "solar"
s.Elements.Add(e)

e = New Element()
e.YValue = 11
e.Name = "wind"
s.Elements.Add(e)
e = New Element()
e.YValue = 9
e.Name = "water"
s.Elements.Add(e)

c.SeriesCollection.Add(s)

End Sub

Sub chart_8(ByVal c As Chart)
c.Type = ChartType.Combo

c.Width = 120
c.Height = 190

c.XAxis.ClearValues = True
c.YAxis.DefaultTick.Label.Text = ""

c.XAxis.DefaultTick.Label.Font = New Font("Arial", 10, FontStyle.Bold)
c.XAxis.TickLabelAngle = 90

c.DefaultElement.SmartLabel.Font = New Font("Arial", 9)
c.DefaultElement.SmartLabel.ForceVertical = True
c.DefaultElement.SmartLabel.Text = "{%percentOfSeries:n0}%"

c.DefaultElement.ShowValue = True

c.ChartArea.ClearColors()

c.YAxis.Clear()
c.XAxis.Clear()

Dim s As Series = New Series()
Dim e As Element = New Element()
e.YValue = 12
e.Name = "nuclear"
e.Color = Color.Gray
s.Elements.Add(e)
e = New Element()
e.YValue = 16
e.Name = "fossil"
e.Color = Color.Gray
s.Elements.Add(e)
e = New Element()
e.YValue = 18
e.Name = "solar"
s.Elements.Add(e)

e = New Element()
e.YValue = 30
e.Name = "wind"
s.Elements.Add(e)
e = New Element()
e.YValue = 20
e.Name = "water"
s.Elements.Add(e)

c.SeriesCollection.Add(s)

End Sub
Sub chart_9(ByVal c As Chart)
c.Type = ChartType.Combo

c.Width = 120
c.Height = 190

c.XAxis.ClearValues = True
c.YAxis.DefaultTick.Label.Text = ""

c.XAxis.DefaultTick.Label.Font = New Font("Arial", 10, FontStyle.Bold)
c.XAxis.TickLabelAngle = 90

c.DefaultElement.SmartLabel.Font = New Font("Arial", 9)
c.DefaultElement.SmartLabel.ForceVertical = True
c.DefaultElement.SmartLabel.Text = "{%percentOfSeries:n0}%"

c.DefaultElement.ShowValue = True

c.ChartArea.ClearColors()

c.YAxis.Clear()
c.XAxis.Clear()

Dim s As Series = New Series()
Dim e As Element = New Element()
e.YValue = 3
e.Name = "nuclear"
e.Color = Color.Gray
s.Elements.Add(e)
e = New Element()
e.YValue = 5
e.Name = "fossil"
e.Color = Color.Gray
s.Elements.Add(e)
e = New Element()
e.YValue = 30
e.Name = "solar"
s.Elements.Add(e)

e = New Element()
e.YValue = 34
e.Name = "wind"
s.Elements.Add(e)
e = New Element()
e.YValue = 27
e.Name = "water"
s.Elements.Add(e)

c.SeriesCollection.Add(s)

End Sub

Sub chart_10(ByVal c As Chart)
c.Type = ChartType.Combo

c.Width = 180
c.Height = 120

c.XAxis.ClearValues = True
c.YAxis.DefaultTick.Label.Text = ""
c.XAxis.DefaultTick.Label.Text = ""

c.XAxis.DefaultTick.Label.Font = New Font("Arial", 10, FontStyle.Bold)
c.XAxis.TickLabelAngle = 90

c.DefaultElement.SmartLabel.Font = New Font("Arial", 9)
c.DefaultElement.SmartLabel.ForceVertical = True
c.DefaultElement.SmartLabel.Text = "{%percentOfSeries:n0}%"
c.XAxis.InvertScale = True

c.DefaultElement.ShowValue = True

c.ChartArea.ClearColors()

c.YAxis.Clear()
c.XAxis.Clear()

Dim s As Series = New Series()
Dim e As Element = New Element()
e.YValue = 3
e.Name = "nuclear"
e.Color = Color.Gray
s.Elements.Add(e)
e = New Element()
e.YValue = 5
e.Name = "fossil"
e.Color = Color.Gray
s.Elements.Add(e)
e = New Element()
e.YValue = 30
e.Name = "solar"
s.Elements.Add(e)

e = New Element()
e.YValue = 34
e.Name = "wind"

s.Elements.Add(e)
e = New Element()
e.YValue = 27
e.Name = "water"

s.Elements.Add(e)

c.SeriesCollection.Add(s)

End Sub
</script>
<style>
.mainWrapper{
width:890px;
height:1288px;
background: url('../../images/eco.gif') ;
background: rgba(255,255,255,0) url('../../images/eco.svg') ;/*url('../../images/svgz/eco.svgz')*/
background-size: cover;
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
position:relative;
left:-25px;
}
.chart1
{
position:absolute;
margin-top:550px;
margin-left:70px;
width:170px;
}
.chart2
{
position:absolute;
margin-top:720px;
margin-left:70px;
width:166px;
}
.chart3
{
position:absolute;
margin-top:720px;
margin-left:260px;
width:186px;
}
.chart4{
position:absolute;
margin-top:720px;
margin-left:465px;
width:186px;
}
.chart5{
position:absolute;
margin-top:720px;
margin-left:665px;
width:186px;
}
.chart6{
position:absolute;
margin-top:920px;
margin-left:230px;
width:228px;
}

.chart7{
position:absolute;
margin-top:920px;
margin-left:458px;
width:110px;
}
.chart8{
position:absolute;
margin-top:920px;
margin-left:578px;
width:110px;
}
.chart9{
position:absolute;
margin-top:920px;
margin-left:695px;
width:110px;
}
.chart10{
position:absolute;
margin-top:100px;
margin-left:555px;
width:145px;
}
</style>
</head>
<body>

<div align="center"> </div>
<div class="mainWrapper" style="margin: 0px auto;">
<dotnet:Chart class="chart1" id="Chart1" runat="server" Width="568px" Height="344px"></dotnet:Chart>
<dotnet:Chart class="chart2" id="Chart2" runat="server" Width="568px" Height="344px"></dotnet:Chart>
<dotnet:Chart class="chart3" id="Chart3" runat="server" Width="568px" Height="344px"></dotnet:Chart>
<dotnet:Chart class="chart4" id="Chart4" runat="server" Width="568px" Height="344px"></dotnet:Chart>
<dotnet:Chart class="chart5" id="Chart5" runat="server" Width="568px" Height="344px"></dotnet:Chart>
<dotnet:Chart class="chart6" id="Chart6" runat="server" Width="568px" Height="344px"></dotnet:Chart>

<dotnet:Chart class="chart7" id="Chart7" runat="server" Width="568px" Height="344px"></dotnet:Chart>
<dotnet:Chart class="chart8" id="Chart8" runat="server" Width="568px" Height="344px"></dotnet:Chart>
<dotnet:Chart class="chart9" id="Chart9" runat="server" Width="568px" Height="344px"></dotnet:Chart>
<dotnet:Chart class="chart10" id="Chart10" runat="server" Width="568px" Height="344px"></dotnet:Chart>
</div>
</body>
</html>

Sample FilenameJsGreen.aspx
Version8.2
Uses DatabaseNo

JS Charting

Gallery

JS Green