Gallery

Gallery > Combination Charts

JS Diet DB

Demonstrates how to use database with JS charting.

Download Show C# Code Show VB Code

<%@ Page Language="C#" Description="dotnetCHARTING Component"%>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Import Namespace="System.Drawing" %>

<script runat="server">
void Page_Load(Object sender,EventArgs e)
{
// Demonstrates how to use database with JS charting.
Chart.JS.Enabled = true;
Chart.JS.Buttons.EnableExportButton = false;
Chart.JS.Buttons.EnablePrintButton = false;

//set global properties
Chart.Title="Dietary Breakdown";
Chart.TempDirectory="temp";
Chart.Size = "700X400";
Chart.DateGrouping = TimeInterval.Days;
Chart.ChartArea.YAxis.Scale = Scale.FullStacked;
Chart.XAxis.FormatString="MMM d";
Chart.DefaultSeries.ConnectionString = ConfigurationManager.AppSettings["DNCConnectionString"];
Chart.YAxis.Label.Text = "Protein, Carbs and Fat";
Chart.YAxis.DefaultTick.Label.Text = "{%value*100:n0}%";
Chart.YAxis.AlternateGridBackground.Color = Color.White;

//Add visual effect, set colors and tooltip on mouseover
Chart.ShadingEffectMode = ShadingEffectMode.Three;
Chart.PaletteName = Palette.Two;
Chart.LegendBox.Template = "%name %icon";

Chart.DefaultSeries.DefaultElement.ShowValue = true;

//Add series
Chart.Series.Name="Protein";
Chart.Series.SqlStatement= @"SELECT EatenDate,Sum(Protein) FROM Eaten GROUP BY EatenDate";
Chart.Series.DefaultElement.SmartLabel.Text = "{%percentOfGroup:n0}%";
Chart.SeriesCollection.Add();

Chart.Series.Name="Carbs";
Chart.Series.SqlStatement= @"SELECT EatenDate,Sum(Carbs) FROM Eaten GROUP BY EatenDate";
Chart.Series.DefaultElement.SmartLabel.Text = "{%percentOfGroup:n0}%";
Chart.SeriesCollection.Add();

Chart.Series.Name="Fat";
Chart.Series.SqlStatement= @"SELECT EatenDate,Sum(Fat) FROM Eaten GROUP BY EatenDate";
Chart.Series.DefaultElement.SmartLabel.Text = "{%percentOfGroup:n0}%";
Chart.SeriesCollection.Add();

Chart.Series.Name="Calories";
Chart.Series.Type = SeriesType.Line;
Chart.Series.Line.Width = 2;
Chart.Series.DefaultElement.SmartLabel.Color = Color.Black;
Chart.Series.SqlStatement= @"SELECT EatenDate,Sum(Calories) FROM Eaten GROUP BY EatenDate";
//Bind Calories series to second Y axis
Axis CalTotal = new Axis();
CalTotal.Orientation = dotnetCHARTING.Orientation.Right;
CalTotal.Label.Text = "Calories";
Chart.Series.YAxis = CalTotal;
Chart.SeriesCollection.Add();

}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Date Grouping By Days Sample</title>
</head>
<body>
<div align="center">
<dotnet:Chart id="Chart" runat="server"/>
</div>
</body>
</html>

<%@ Page Language="vb" Description="dotnetCHARTING Component"%>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Import Namespace="System.Drawing" %>

<script runat="server">
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates how to use database with JS charting.
Chart.JS.Enabled = True
Chart.JS.Buttons.EnableExportButton = False
Chart.JS.Buttons.EnablePrintButton = False

'set global properties
Chart.Title="Dietary Breakdown"
Chart.TempDirectory="temp"
Chart.Size = "700X400"
Chart.DateGrouping = TimeInterval.Days
Chart.ChartArea.YAxis.Scale = Scale.FullStacked
Chart.XAxis.FormatString="MMM d"
Chart.DefaultSeries.ConnectionString = ConfigurationManager.AppSettings("DNCConnectionString")
Chart.YAxis.Label.Text = "Protein, Carbs and Fat"
Chart.YAxis.DefaultTick.Label.Text = "{%value*100:n0}%"
Chart.YAxis.AlternateGridBackground.Color = Color.White

'Add visual effect, set colors and tooltip on mouseover
Chart.ShadingEffectMode = ShadingEffectMode.Three
Chart.PaletteName = Palette.Two
Chart.LegendBox.Template = "%name %icon"

Chart.DefaultSeries.DefaultElement.ShowValue = True

'Add series
Chart.Series.Name="Protein"
Chart.Series.SqlStatement= "SELECT EatenDate,Sum(Protein) FROM Eaten GROUP BY EatenDate"
Chart.Series.DefaultElement.SmartLabel.Text = "{%percentOfGroup:n0}%"
Chart.SeriesCollection.Add()

Chart.Series.Name="Carbs"
Chart.Series.SqlStatement= "SELECT EatenDate,Sum(Carbs) FROM Eaten GROUP BY EatenDate"
Chart.Series.DefaultElement.SmartLabel.Text = "{%percentOfGroup:n0}%"
Chart.SeriesCollection.Add()

Chart.Series.Name="Fat"
Chart.Series.SqlStatement= "SELECT EatenDate,Sum(Fat) FROM Eaten GROUP BY EatenDate"
Chart.Series.DefaultElement.SmartLabel.Text = "{%percentOfGroup:n0}%"
Chart.SeriesCollection.Add()

Chart.Series.Name="Calories"
Chart.Series.Type = SeriesType.Line
Chart.Series.Line.Width = 2
Chart.Series.DefaultElement.SmartLabel.Color = Color.Black
Chart.Series.SqlStatement= "SELECT EatenDate,Sum(Calories) FROM Eaten GROUP BY EatenDate"
'Bind Calories series to second Y axis
Dim CalTotal As Axis = New Axis()
CalTotal.Orientation = dotnetCHARTING.Orientation.Right
CalTotal.Label.Text = "Calories"
Chart.Series.YAxis = CalTotal
Chart.SeriesCollection.Add()

End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Date Grouping By Days Sample</title>
</head>
<body>
<div align="center">
<dotnet:Chart id="Chart" runat="server"/>
</div>
</body>
</html>

Sample FilenameJsDietDB.aspx
Version10.0
Uses DatabaseYes

JS Charting

Gallery

JS Diet DB