Gallery

Gallery > Mosaic Charts

JS Smartphones Brands Profit

Demonstrates a Variwide bar mekko column chart with negative y values.

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 a Variwide bar mekko column chart with negative y values.
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.Type = ChartType.Variwide;
Chart.Size = "750x450";
Chart.TitleBox.Label.Text = "Profit per phone x phones sold by brand Q4 2015";
Chart.TitleBox.Label.Font = new Font("Arial", 11, FontStyle.Bold);
Chart.TitleBox.ClearColors();
Chart.LegendBox.Visible = false;
Chart.JS.Enabled = true;
Chart.ChartArea.ClearColors();
Chart.YAxis.Label.Text = "Operating profit per unit sold";
Chart.YAxis.Minimum = -50;
Chart.YAxis.Maximum = 200;
//Chart.YAxis.DefaultTick.GridLine.Color = Color.LightGray;
Chart.YAxis.Line.Width = 0;
Chart.XAxis.Label.Text = "Units Sold";
Chart.XAxis.Line.Width = 0;
Chart.XAxis.ClearValues = true;

Chart.DefaultElement.ShowValue = true;
Chart.DefaultElement.Outline.Width = 0;
Chart.DefaultElement.LabelTemplate = "%name";
Chart.DefaultElement.ToolTip="<b>%name</b><br>%yAxisLabel: %yValue<br>%xAxisLabel: {%zValue:n1}M";
// *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()
{
Series phones = new Series();
Element e1 = new Element("Apple",184.1);
e1.ZValue = 78.25;
Element e2 = new Element("Samsung",23.29);
e2.ZValue = 81.5;
Element e3 = new Element("LG",-3.36);
e3.ZValue = 15.3;
Element e4 = new Element("Sony",26.17);
e4.ZValue = 7.6;
Element e5 = new Element("HTC",-37.65);
e5.ZValue = 3.4;
Element e6 = new Element("Microsoft Mobile",-36.11);
e6.ZValue = 4.5;
phones.AddElements(e1, e2, e3, e4,e5,e6);
phones.PaletteName = Palette.Default;
return new SeriesCollection(phones);

}
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 Variwide bar mekko column chart with negative y values.
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.Type = ChartType.Variwide
Chart.Size = "750x450"
Chart.TitleBox.Label.Text = "Profit per phone x phones sold by brand Q4 2015"
Chart.TitleBox.Label.Font = New Font("Arial", 11, FontStyle.Bold)
Chart.TitleBox.ClearColors()
Chart.LegendBox.Visible = False
Chart.JS.Enabled = True
Chart.ChartArea.ClearColors()
Chart.YAxis.Label.Text = "Operating profit per unit sold"
Chart.YAxis.Minimum = -50
Chart.YAxis.Maximum = 200
'Chart.YAxis.DefaultTick.GridLine.Color = Color.LightGray;
Chart.YAxis.Line.Width = 0
Chart.XAxis.Label.Text = "Units Sold"
Chart.XAxis.Line.Width = 0
Chart.XAxis.ClearValues = True

Chart.DefaultElement.ShowValue = True
Chart.DefaultElement.Outline.Width = 0
Chart.DefaultElement.LabelTemplate = "%name"
Chart.DefaultElement.ToolTip="<b>%name</b><br>%yAxisLabel: %yValue<br>%xAxisLabel: {%zValue:n1}M"
' *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 phones As Series = New Series()
Dim e1 As Element = New Element("Apple",184.1)
e1.ZValue = 78.25
Dim e2 As Element = New Element("Samsung",23.29)
e2.ZValue = 81.5
Dim e3 As Element = New Element("LG",-3.36)
e3.ZValue = 15.3
Dim e4 As Element = New Element("Sony",26.17)
e4.ZValue = 7.6
Dim e5 As Element = New Element("HTC",-37.65)
e5.ZValue = 3.4
Dim e6 As Element = New Element("Microsoft Mobile",-36.11)
e6.ZValue = 4.5
phones.AddElements(e1, e2, e3, e4,e5,e6)
phones.PaletteName = Palette.Default
Return New SeriesCollection(phones)

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>

Sample FilenameJsSmartphonesBrandsProfit.aspx
Version9.3
Uses DatabaseNo

JS Charting

Gallery

JS Smartphones Brands Profit