JS Marimekko
Demonstrates a Mekko variwide chart with full stacked y axis.
<%@ 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 a Mekko variwide chart with full stacked y axis.
Chart.TitleBox.Label.Text = "New passenger cars in 2017 by fuel type";
Chart.TitleBox.ClearColors();
Chart.LegendBox.Header.Label.Text = "<b>Fuel types</b>";
Chart.LegendBox.Header.Label.Alignment = StringAlignment.Near;
//Chart.LegendBox.Template = "{%yValue:n0} %icon %name";
Chart.LegendBox.ClearColors();
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.Type = ChartType.Variwide;
Chart.Size = "750x450";
Chart.JS.Enabled = true;
Chart.ChartArea.ClearColors();
Chart.XAxis.Label.Text = "Countries";
Chart.YAxis.Label.Text = "Passenger cars";
Chart.YAxis.Scale = Scale.FullStacked;
Chart.PaletteName = Palette.FiveColor4;
Chart.DefaultElement.ToolTip = "<b>Passenger %seriesName cars in %name</b>: {%yValue:n0}<br>%percentOfGroup% of all passenger cars in %name";
Chart.DefaultElement.ShowValue = false;
// *DYNAMIC DATA NOTE*
// This sample uses random data to populate the chart. To populate
// a chart with database data see the following resources:
// - Use the getLiveData() method using the dataEngine to query a database.
// - Help File > Getting Started > Data Tutorials
// - DataEngine Class in the help file
// - Sample: features/DataEngine.aspx
SeriesCollection mySC = getData();
// Add the random data.
Chart.SeriesCollection.Add(mySC);
}
SeriesCollection getData()
{
SeriesCollection sc = new SeriesCollection();
Series countries = new Series("APV other than electric");
Element e1 = new Element("France",2110);
Element e2 = new Element("Germany",6882);
Element e3 = new Element("UK",2540);
Element e4 = new Element("Italy",161580);
Element e5 = new Element("Spain",4939);
countries.AddElements(e1, e2, e3, e4,e5);
sc.Add(countries);
countries = new Series("Hybrid");
e1 = new Element("France", 69654);
e2 = new Element("Germany",55060);
e3 = new Element("UK",68596);
e4 = new Element("Italy",63055);
e5 = new Element("Spain",55571);
countries.AddElements(e1, e2, e3, e4,e5);
sc.Add(countries);
countries = new Series("Electrically-chargeable");
e1 = new Element("France", 35882);
e2 = new Element("Germany",55060);
e3 = new Element("UK",48271);
e4 = new Element("Italy",3940 );
e5 = new Element("Spain",7409);
countries.AddElements(e1, e2, e3, e4,e5);
sc.Add(countries);
countries = new Series("Diesel");
e1 = new Element("France",998383);
e2 = new Element("Germany",1331768);
e3 = new Element("UK",1067059);
e4 = new Element("Italy",1109389);
e5 = new Element("Spain",597706);
countries.AddElements(e1, e2, e3, e4,e5);
sc.Add(countries);
countries = new Series("Petrol");
e1 = new Element("France",1004716);
e2 = new Element("Germany",1992490);
e3 = new Element("UK",1354148);
e4 = new Element("Italy",630559);
e5 = new Element("Spain",569303);
countries.AddElements(e1, e2, e3, e4,e5);
sc.Add(countries);
sc.Sort(ElementValue.YValue, "DESC");
return sc;
}
SeriesCollection getLiveData()
{
DataEngine de = new DataEngine("ConnectionString goes here");
de.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de.SqlStatement = "SELECT XAxisColumn, YAxisColumn FROM ....";
return de.GetSeries();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING 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 a Mekko variwide chart with full stacked y axis.
Chart.TitleBox.Label.Text = "New passenger cars in 2017 by fuel type"
Chart.TitleBox.ClearColors()
Chart.LegendBox.Header.Label.Text = "<b>Fuel types</b>"
Chart.LegendBox.Header.Label.Alignment = StringAlignment.Near
'Chart.LegendBox.Template = "{%yValue:n0} %icon %name";
Chart.LegendBox.ClearColors()
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.Type = ChartType.Variwide
Chart.Size = "750x450"
Chart.JS.Enabled = True
Chart.ChartArea.ClearColors()
Chart.XAxis.Label.Text = "Countries"
Chart.YAxis.Label.Text = "Passenger cars"
Chart.YAxis.Scale = Scale.FullStacked
Chart.PaletteName = Palette.FiveColor4
Chart.DefaultElement.ToolTip = "<b>Passenger %seriesName cars in %name</b>: {%yValue:n0}<br>%percentOfGroup% of all passenger cars in %name"
Chart.DefaultElement.ShowValue = False
' *DYNAMIC DATA NOTE*
' This sample uses random data to populate the chart. To populate
' a chart with database data see the following resources:
' - Use the getLiveData() method using the dataEngine to query a database.
' - Help File > Getting Started > Data Tutorials
' - DataEngine Class in the help file
' - Sample: features/DataEngine.aspx
Dim mySC As SeriesCollection = getData()
' Add the random data.
Chart.SeriesCollection.Add(mySC)
End Sub
Function getData() As SeriesCollection
Dim sc As SeriesCollection = New SeriesCollection()
Dim countries As Series = New Series("APV other than electric")
Dim e1 As Element = New Element("France",2110)
Dim e2 As Element = New Element("Germany",6882)
Dim e3 As Element = New Element("UK",2540)
Dim e4 As Element = New Element("Italy",161580)
Dim e5 As Element = New Element("Spain",4939)
countries.AddElements(e1, e2, e3, e4,e5)
sc.Add(countries)
countries = New Series("Hybrid")
e1 = New Element("France", 69654)
e2 = New Element("Germany",55060)
e3 = New Element("UK",68596)
e4 = New Element("Italy",63055)
e5 = New Element("Spain",55571)
countries.AddElements(e1, e2, e3, e4,e5)
sc.Add(countries)
countries = New Series("Electrically-chargeable")
e1 = New Element("France", 35882)
e2 = New Element("Germany",55060)
e3 = New Element("UK",48271)
e4 = New Element("Italy",3940)
e5 = New Element("Spain",7409)
countries.AddElements(e1, e2, e3, e4,e5)
sc.Add(countries)
countries = New Series("Diesel")
e1 = New Element("France",998383)
e2 = New Element("Germany",1331768)
e3 = New Element("UK",1067059)
e4 = New Element("Italy",1109389)
e5 = New Element("Spain",597706)
countries.AddElements(e1, e2, e3, e4,e5)
sc.Add(countries)
countries = New Series("Petrol")
e1 = New Element("France",1004716)
e2 = New Element("Germany",1992490)
e3 = New Element("UK",1354148)
e4 = New Element("Italy",630559)
e5 = New Element("Spain",569303)
countries.AddElements(e1, e2, e3, e4,e5)
sc.Add(countries)
sc.Sort(ElementValue.YValue, "DESC")
Return sc
End Function
Function getLiveData() As SeriesCollection
Dim de As DataEngine = New DataEngine("ConnectionString goes here")
de.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de.SqlStatement = "SELECT XAxisColumn, YAxisColumn FROM ...."
Return de.GetSeries()
End Function
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</div>
</body>
</html>
Previous