Gallery

Gallery > Bars Charts

JS Column Pyramid

Demonstrates how to draw stacked bars with positive and negative values.

Download Show C# Code Show VB Code

<%@ Page Language="C#" Debug="true" 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 draw stacked bars with positive and negative values.
// Set he chart size.
Chart.Width = 680;
Chart.Height = 400;

// Set the title.
Chart.TitleBox.Label.Text="The population of the USA in 2015";
Chart.Debug = false;
Chart.DefaultElement.ToolTip = "%icon {Math.abs(%Value)}"; Chart.Type = ChartType.ComboHorizontal;
Chart.ChartArea.ClearColors();
Chart.LegendBox.Template = "js:%name %icon {Math.abs(%Value)}";//by adding "js:" prevent normalization
Chart.LegendBox.ClearColors();
Chart.Palette = new Color[] {Color.FromArgb(59, 120, 221), Color.FromArgb(232, 69, 18)};
// Set the directory where the related JSC files will be created and stored.
Chart.TempDirectory="temp";

// Enable JSCharting
Chart.JS.Enabled = true;
Chart.JS.Buttons.EnableExportButton = false;
Chart.JS.Buttons.EnablePrintButton = false;
Chart.ToolTipTemplate = "Ages %xValue:<br><b>%points</b>";
Chart.YAxis.Crosshair = new AxisTick();
Chart.YAxis.Label.Text = "Age";
Chart.XAxis.Scale = Scale.Stacked;
Chart.XAxis.ReverseStack = true;
Chart.XAxis.DefaultTick.GridLine.Color = Color.LightGray;
Chart.YAxis.DefaultTick.GridLine.Color = Color.LightGray;

DataEngine de = new DataEngine();
de.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/USPopulation2015.csv";
de.DataFields = "yAxis=population,name=age,splitBy=gender";//cvs must have header
SeriesCollection sc = de.GetSeries();
Chart.SeriesCollection.Add(sc);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Gallery Sample</title></head>
<body>
<div align="center">
<dotnet:Chart id="Chart" runat="server"/>
</div>
</body>
</html>

<%@ Page Language="vb" Debug="true" 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 draw stacked bars with positive and negative values.
' Set he chart size.
Chart.Width = 680
Chart.Height = 400

' Set the title.
Chart.TitleBox.Label.Text="The population of the USA in 2015"
Chart.Debug = False
Chart.DefaultElement.ToolTip = "%icon {Math.abs(%Value)}"
Chart.Type = ChartType.ComboHorizontal
Chart.ChartArea.ClearColors()
Chart.LegendBox.Template = "js:%name %icon {Math.abs(%Value)}" 'by adding "js:" prevent normalization
Chart.LegendBox.ClearColors()
Chart.Palette = New Color() {Color.FromArgb(59, 120, 221), Color.FromArgb(232, 69, 18)}
' Set the directory where the related JSC files will be created and stored.
Chart.TempDirectory="temp"

' Enable JSCharting
Chart.JS.Enabled = True
Chart.JS.Buttons.EnableExportButton = False
Chart.JS.Buttons.EnablePrintButton = False
Chart.ToolTipTemplate = "Ages %xValue:<br><b>%points</b>"
Chart.YAxis.Crosshair = New AxisTick()
Chart.YAxis.Label.Text = "Age"
Chart.XAxis.Scale = Scale.Stacked
Chart.XAxis.ReverseStack = True
Chart.XAxis.DefaultTick.GridLine.Color = Color.LightGray
Chart.YAxis.DefaultTick.GridLine.Color = Color.LightGray

Dim de As DataEngine = New DataEngine()
de.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/USPopulation2015.csv"
de.DataFields = "yAxis=population,name=age,splitBy=gender" 'cvs must have header
Dim sc As SeriesCollection = de.GetSeries()
Chart.SeriesCollection.Add(sc)
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Gallery Sample</title></head>
<body>
<div align="center">
<dotnet:Chart id="Chart" runat="server"/>
</div>
</body>
</html>

Sample FilenameJsColumnPyramid.aspx
Version10.0
Uses DatabaseNo

JS Charting

Gallery

JS Column Pyramid