Gallery

Gallery > Dashboards And InfoGrids

JS Cooking

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 multiple charts on a page to make an infographic.
chartDefaults(Chart1);
chartDefaults(Chart2);
chartDefaults(Chart3);
chartDefaults(Chart4);
chartDefaults(Chart5);
chartDefaults(Chart6);
chart1(Chart1);
chart2(Chart2);
chart3(Chart3);

chart4(Chart4);
chart5(Chart5);
chart6(Chart6);

}

void chartDefaults(Chart c){
c.Background.Color = Color.FromArgb(255,194,180,155);

c.Palette = new Color[] {
(Color)System.Drawing.ColorTranslator.FromHtml("#ed6d4b"),
(Color)System.Drawing.ColorTranslator.FromHtml("#f29854"),
(Color)System.Drawing.ColorTranslator.FromHtml("#f5bd8c"),
(Color)System.Drawing.ColorTranslator.FromHtml("#fffcd9")
};
c.TempDirectory = "temp";
c.Debug = true;
c.JS.Enabled = true;
c.JS.Buttons.EnableExportButton = false;
c.JS.Buttons.EnablePrintButton = false;
c.LegendBox.Visible = false;
c.ChartArea.ClearColors();
c.ShadingEffectMode = ShadingEffectMode.Three;
}

void chart1(Chart c)
{
c.Type = ChartType.ComboHorizontal;
c.Width = 240;
c.Height = 135;

c.XAxis.ClearValues = true;
c.XAxis.DefaultTick.Label.Text = "";
c.YAxis.DefaultTick.Label.Alignment = StringAlignment.Near;
c.YAxis.SpacingPercentage = 20;
c.YAxis.DefaultTick.Label.Color = Color.White;
c.YAxis.DefaultTick.Label.Font = new Font("Arial", 10, FontStyle.Bold);
c.YAxis.DefaultTick.Line.Length=0;
c.YAxis.Line.Width=0;
c.XAxis.Clear();

c.JS.Settings.Add("box.padding.left", "-80");
c.YAxis.DefaultTick.Label.Offset = new Point(95, 0);

Series s = new Series();
Element e = new Element();
e.YValue=45;
e.Name="Home";
s.Elements.Add(e);
e = new Element();
e.YValue = 30;
e.Name = "Restaurant";
s.Elements.Add(e);
e = new Element();
e.YValue = 20;
e.Name = "Gifts";
s.Elements.Add(e);
e = new Element();
e.YValue = 30;
e.Name = "Production";

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

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

}

void chart2(Chart c) //Pie 1
{
c.Type = ChartType.Pies;

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

c.ChartArea.ClearColors();

c.JS.Settings.Add("series.0.shape.size", "90%");

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

c.SeriesCollection.Add(s);

}
void chart3(Chart c) //Pie 2
{
c.Type = ChartType.Pies;

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

c.ChartArea.ClearColors();

c.JS.Settings.Add("series.0.shape.size", "90%");

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

c.SeriesCollection.Add(s);

}
void chart4(Chart c) //Bars 2
{
c.Type = ChartType.ComboHorizontal;

c.Width = 260;
c.Height = 245;
//c.XAxis.ClearValues = true;
c.XAxis.DefaultTick.Label.Text = "%Name";
c.YAxis.DefaultTick.Label.Alignment = StringAlignment.Near;
c.YAxis.SpacingPercentage = 20;
c.YAxis.DefaultTick.Label.Color = Color.White;
c.YAxis.DefaultTick.Label.Font = new Font("Arial", 10, FontStyle.Bold);
c.YAxis.DefaultTick.Line.Length=0;
c.YAxis.Line.Width=0;

c.JS.Settings.Add("box.padding.left", "-102");
c.YAxis.DefaultTick.Label.Offset = new Point(110,2);

c.DefaultElement.ShowValue = true;
c.XAxis.Clear();

Series s = new Series();
Element e = new Element();
e.YValue = 10;
e.Name = "Gifts";
s.Elements.Add(e);
e = new Element();
e.YValue = 35;
e.Name = "Home Baking";
s.Elements.Add(e);
e = new Element();
e.YValue = 16;
e.Name = "Restaurants";
s.Elements.Add(e);

c.SeriesCollection.Add(s);

}
void chart5(Chart c)
{
c.Type = ChartType.Pies;

c.Width = 80;
c.Height = 80;

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

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 = 15;
//e.Name = "Gifts";
s.Elements.Add(e);
e = new Element();
e.YValue = 20;
// e.Name = "Home Baking";
s.Elements.Add(e);

c.SeriesCollection.Add(s);

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

c.Width = 80;
c.Height = 80;

c.DefaultElement.SmartLabel.Text = "%YValue";
c.DefaultElement.SmartLabel.PieLabelMode = PieLabelMode.Inside;

c.XAxis.DefaultTick.Label.Color = Color.White;
c.ChartArea.Padding = 3;
c.ChartArea.ClearColors();
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 = 45;
//e.Name = "Gifts";
s.Elements.Add(e);
e = new Element();
e.YValue = 20;
//e.Name = "Home Baking";
s.Elements.Add(e);

c.SeriesCollection.Add(s);

}

</script>
<style>
.mainWrapper{
width:890px;
height:1359px;
background: url('../../images/food.gif') ;
background: rgba(255,255,255,0) url('../../images/food.svg') ;/*url('../../images/svgz/food.svgz')*/
background-size: cover;
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
position:relative;
left:-25px;
}
.chart1
{
position:absolute;
margin-top:220px;
margin-left:60px;
width:240px;
border:solid 2px red;
}
.chart2
{
position:absolute;
margin-top:415px;
margin-left:403px;
width:210px;
}
.chart3
{
position:absolute;
margin-top:415px;
margin-left:655px;
width:210px;
}
.chart4{
position:absolute;
margin-top:695px;
margin-left:625px;
width:260px;
}
.chart5{
position:absolute;
margin-top:1045px;
margin-left:119px;
width:60px;
}
.chart6{
position:absolute;
margin-top:1055px;
margin-left:557px;
width:60px;
}
</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>
</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 multiple charts on a page to make an infographic.
chartDefaults(Chart1)
chartDefaults(Chart2)
chartDefaults(Chart3)
chartDefaults(Chart4)
chartDefaults(Chart5)
chartDefaults(Chart6)
chart_1(Chart1)
Chart_2(Chart2)
Chart_3(Chart3)
Chart_4(Chart4)
chart_5(Chart5)
chart_6(Chart6)

End Sub

Sub chartDefaults(ByVal c As Chart)
c.Background.Color = Color.FromArgb(255,194,180,155)

c.Palette = New Color() { CType(System.Drawing.ColorTranslator.FromHtml("#ed6d4b"), Color), CType(System.Drawing.ColorTranslator.FromHtml("#f29854"), Color), CType(System.Drawing.ColorTranslator.FromHtml("#f5bd8c"), Color), CType(System.Drawing.ColorTranslator.FromHtml("#fffcd9"), Color) }
c.TempDirectory = "temp"
c.Debug = True
c.JS.Enabled = True
c.JS.Buttons.EnableExportButton = False
c.JS.Buttons.EnablePrintButton = False
c.LegendBox.Visible = False
c.ChartArea.ClearColors()
c.ShadingEffectMode = ShadingEffectMode.Three
End Sub

Sub chart_1(ByVal c As Chart)
c.Type = ChartType.ComboHorizontal
c.Width = 240
c.Height = 135

c.XAxis.ClearValues = True
c.XAxis.DefaultTick.Label.Text = ""
c.YAxis.DefaultTick.Label.Alignment = StringAlignment.Near
c.YAxis.SpacingPercentage = 20
c.YAxis.DefaultTick.Label.Color = Color.White
c.YAxis.DefaultTick.Label.Font = New Font("Arial", 10, FontStyle.Bold)
c.YAxis.DefaultTick.Line.Length = 0
c.YAxis.Line.Width = 0
c.XAxis.Clear()

c.JS.Settings.Add("box.padding.left", "-80")
c.YAxis.DefaultTick.Label.Offset = New Point(95, 0)

Dim s As Series = New Series()
Dim e As Element = New Element()
e.YValue = 45
e.Name = "Home"
s.Elements.Add(e)
e = New Element()
e.YValue = 30
e.Name = "Restaurant"
s.Elements.Add(e)
e = New Element()
e.YValue = 20
e.Name = "Gifts"
s.Elements.Add(e)
e = New Element()
e.YValue = 30
e.Name = "Production"

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

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

End Sub
Sub chart_2(ByVal c As Chart) 'Pie 1
c.Type = ChartType.Pies

c.Width = 150
c.Height = 150

c.ChartArea.ClearColors()

c.JS.Settings.Add("series.0.shape.size", "90%")

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

c.SeriesCollection.Add(s)

End Sub
Sub chart_3(ByVal c As Chart) 'Pie 2
c.Type = ChartType.Pies

c.Width = 150
c.Height = 150

c.ChartArea.ClearColors()

c.JS.Settings.Add("series.0.shape.size", "90%")

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

c.SeriesCollection.Add(s)

End Sub
Sub chart_4(ByVal c As Chart) 'Bars 2
c.Type = ChartType.ComboHorizontal

c.Width = 260
c.Height = 245
'c.XAxis.ClearValues = true;
c.XAxis.DefaultTick.Label.Text = "%Name"
c.YAxis.DefaultTick.Label.Alignment = StringAlignment.Near
c.YAxis.SpacingPercentage = 20
c.YAxis.DefaultTick.Label.Color = Color.White
c.YAxis.DefaultTick.Label.Font = New Font("Arial", 10, FontStyle.Bold)
c.YAxis.DefaultTick.Line.Length = 0
c.YAxis.Line.Width = 0

c.JS.Settings.Add("box.padding.left", "-102")
c.YAxis.DefaultTick.Label.Offset = New Point(110, 2)

c.DefaultElement.ShowValue = True
c.XAxis.Clear()

Dim s As Series = New Series()
Dim e As Element = New Element()
e.YValue = 10
e.Name = "Gifts"
s.Elements.Add(e)
e = New Element()
e.YValue = 35
e.Name = "Home Baking"
s.Elements.Add(e)
e = New Element()
e.YValue = 16
e.Name = "Restaurants"
s.Elements.Add(e)

c.SeriesCollection.Add(s)

End Sub
Sub chart_5(ByVal c As Chart)
c.Type = ChartType.Pies

c.Width = 80
c.Height = 80

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

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 = 15
'e.Name = "Gifts";
s.Elements.Add(e)
e = New Element()
e.YValue = 20
' e.Name = "Home Baking";
s.Elements.Add(e)

c.SeriesCollection.Add(s)

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

c.Width = 80
c.Height = 80

c.DefaultElement.SmartLabel.Text = "%YValue"
c.DefaultElement.SmartLabel.PieLabelMode = PieLabelMode.Inside

c.XAxis.DefaultTick.Label.Color = Color.White
c.ChartArea.Padding = 3
c.ChartArea.ClearColors()
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 = 45
'e.Name = "Gifts";
s.Elements.Add(e)
e = New Element()
e.YValue = 20
'e.Name = "Home Baking";
s.Elements.Add(e)

c.SeriesCollection.Add(s)

End Sub

</script>
<style>
.mainWrapper{
width:890px;
height:1359px;
background: url('../../images/food.gif') ;
background: rgba(255,255,255,0) url('../../images/food.svg') ;/*url('../../images/svgz/food.svgz')*/
background-size: cover;
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
position:relative;
left:-25px;
}
.chart1
{
position:absolute;
margin-top:220px;
margin-left:60px;
width:240px;
border:solid 2px red;
}
.chart2
{
position:absolute;
margin-top:415px;
margin-left:403px;
width:210px;
}
.chart3
{
position:absolute;
margin-top:415px;
margin-left:655px;
width:210px;
}
.chart4{
position:absolute;
margin-top:695px;
margin-left:625px;
width:260px;
}
.chart5{
position:absolute;
margin-top:1045px;
margin-left:119px;
width:60px;
}
.chart6{
position:absolute;
margin-top:1055px;
margin-left:557px;
width:60px;
}
</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>
</div>
</body>
</html>

Sample FilenameJsCooking.aspx
Version8.2
Uses DatabaseNo

JS Charting

Gallery

JS Cooking