Gallery

Gallery > Bars Charts

JS Bar Difference

Two bar series with another range bar series indicating the difference between them.

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)
{
// This sample demonstrates two bar series with another range bar series indicating the difference between them.
// Set he chart size.
Chart.Width = 700;
Chart.Height = 480;

Chart.Type = ChartType.ComboHorizontal;
Chart.ChartArea.ClearColors();
Chart.LegendBox.Visible = false;
Chart.Palette = new Color[2] { ColorTranslator.FromHtml("#c9c9c9"),ColorTranslator.FromHtml("#9E9E9E")};
// Set the directory where the related JSC files will be created and stored.
Chart.TempDirectory = "temp";
// Set the title.
Chart.TitleBox.Label.Text ="js:makeTitle()";
Chart.DefaultElement.ToolTip = "%icon %seriesName: <b>%value</b>";
Chart.YAxis.DefaultTick.GridLine.Color = Color.LightGray;
Chart.XAxis.FormatString = "c0";

// Enable JSCharting
Chart.JS.Enabled = true;
Chart.JS.ControlID = "myJSC";
Chart.XAxis.DefaultTick.GridLine.Color = Color.LightGray;
Chart.SeriesCollection.Add(getData());
}
SeriesCollection getData()
{

SeriesCollection SC = new SeriesCollection();

Series s1 = new Series();
s1.Name = "2019";

Element el = new Element();
el.Name = "Mexico and Central America";
el.YValue = 31790;
s1.Elements.Add(el);

el = new Element();
el.Name = "United Kingdom";
el.YValue = 30547;
s1.Elements.Add(el);

el = new Element();
el.Name = "Canada";
el.YValue =18613;
s1.Elements.Add(el);

el = new Element();
el.Name = "China";
el.YValue =10702;
s1.Elements.Add(el);

el = new Element();
el.Name = "Other";
el.YValue =29172;
s1.Elements.Add(el);
SC.Add(s1);

s1 = new Series();
s1.Name = "2020";

el = new Element();
el.Name = "Mexico and Central America";
el.YValue = 33350;
s1.Elements.Add(el);

el = new Element();
el.Name = "United Kingdom";
el.YValue = 29243;
s1.Elements.Add(el);

el = new Element();
el.Name = "Canada";
el.YValue =18420;
s1.Elements.Add(el);

el = new Element();
el.Name = "China";
el.YValue =10671;
s1.Elements.Add(el);

el = new Element();
el.Name = "Other";
el.YValue =28446;
s1.Elements.Add(el);
SC.Add(s1);

s1 = new Series();
s1.Name = "Different";

SC.Add(getDiffElement(SC[0],SC[1]));
return SC;
}

Series getDiffElement(Series s1,Series s2)
{
Series series = new Series();
series.Name = s1.Name + " vs. " + s2.Name;
for (int i = 0; i < 5; i++)
{
Element diff = new Element();
diff.Name = s1.Elements[i].Name;
diff.ShowValue = true;
diff.SmartLabel.Text = "{%attributes_percent:n2}%";
diff.Color = s1.Elements[i].YValue < s2.Elements[i].YValue ? ColorTranslator.FromHtml("#C8E6C9") : ColorTranslator.FromHtml("#FFAB91");
diff.YValueStart = s1.Elements[i].YValue;
diff.YValue = s2.Elements[i].YValue;
diff.CustomAttributes.Add("attributes_percent",100-(s1.Elements[i].YValue/s2.Elements[i].YValue)*100);
series.Elements.Add(diff);
}
return series;
}

SeriesCollection getLiveData()
{
DataEngine de = new DataEngine(ConfigurationManager.AppSettings["DNCConnectionString"]);
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>Gallery Sample</title>
<style>

</style>
<script type="text/javascript">
function wrapInColor(text, color) {
return "<b><span style='color:" + color + "'>" + text + '</span></b>';
}
function makeTitle() {
return 'Walmart International net sales by market, ' +
wrapInColor('2019', '#c9c9c9') +
' and ' +
wrapInColor('2020', '#9E9E9E') +
' comparison (in millions $)';
}
</script>
</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)
' This sample demonstrates two bar series with another range bar series indicating the difference between them.
' Set he chart size.
Chart.Width = 700
Chart.Height = 480

Chart.Type = ChartType.ComboHorizontal
Chart.ChartArea.ClearColors()
Chart.LegendBox.Visible = False
Chart.Palette = New Color(1) { ColorTranslator.FromHtml("#c9c9c9"),ColorTranslator.FromHtml("#9E9E9E")}
' Set the directory where the related JSC files will be created and stored.
Chart.TempDirectory = "temp"
' Set the title.
Chart.TitleBox.Label.Text ="js:makeTitle()"
Chart.DefaultElement.ToolTip = "%icon %seriesName: <b>%value</b>"
Chart.YAxis.DefaultTick.GridLine.Color = Color.LightGray
Chart.XAxis.FormatString = "c0"

' Enable JSCharting
Chart.JS.Enabled = True
Chart.JS.ControlID = "myJSC"
Chart.XAxis.DefaultTick.GridLine.Color = Color.LightGray
Chart.SeriesCollection.Add(getData())
End Sub
Function getData() As SeriesCollection

Dim SC As SeriesCollection = New SeriesCollection()

Dim s1 As Series = New Series()
s1.Name = "2019"

Dim el As Element = New Element()
el.Name = "Mexico and Central America"
el.YValue = 31790
s1.Elements.Add(el)

el = New Element()
el.Name = "United Kingdom"
el.YValue = 30547
s1.Elements.Add(el)

el = New Element()
el.Name = "Canada"
el.YValue =18613
s1.Elements.Add(el)

el = New Element()
el.Name = "China"
el.YValue =10702
s1.Elements.Add(el)

el = New Element()
el.Name = "Other"
el.YValue =29172
s1.Elements.Add(el)
SC.Add(s1)

s1 = New Series()
s1.Name = "2020"

el = New Element()
el.Name = "Mexico and Central America"
el.YValue = 33350
s1.Elements.Add(el)

el = New Element()
el.Name = "United Kingdom"
el.YValue = 29243
s1.Elements.Add(el)

el = New Element()
el.Name = "Canada"
el.YValue =18420
s1.Elements.Add(el)

el = New Element()
el.Name = "China"
el.YValue =10671
s1.Elements.Add(el)

el = New Element()
el.Name = "Other"
el.YValue =28446
s1.Elements.Add(el)
SC.Add(s1)

s1 = New Series()
s1.Name = "Different"

SC.Add(getDiffElement(SC(0),SC(1)))
Return SC
End Function

Function getDiffElement(ByVal s1 As Series, ByVal s2 As Series) As Series
Dim series As Series = New Series()
series.Name = s1.Name & " vs. " & s2.Name
For i As Integer = 0 To 4
Dim diff As Element = New Element()
diff.Name = s1.Elements(i).Name
diff.ShowValue = True
diff.SmartLabel.Text = "{%attributes_percent:n2}%"
If s1.Elements(i).YValue < s2.Elements(i).YValue Then
diff.Color = ColorTranslator.FromHtml("#C8E6C9")
Else
diff.Color = ColorTranslator.FromHtml("#FFAB91")
End If
diff.YValueStart = s1.Elements(i).YValue
diff.YValue = s2.Elements(i).YValue
diff.CustomAttributes.Add("attributes_percent",100-(s1.Elements(i).YValue/s2.Elements(i).YValue)*100)
series.Elements.Add(diff)
Next i
Return series
End Function

Function getLiveData() As SeriesCollection
Dim de As DataEngine = New DataEngine(ConfigurationManager.AppSettings("DNCConnectionString"))
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>Gallery Sample</title>
<style>

</style>
<script type="text/javascript">
function wrapInColor(text, color) {
return "<b><span style='color:" + color + "'>" + text + '</span></b>';
}
function makeTitle() {
return 'Walmart International net sales by market, ' +
wrapInColor('2019', '#c9c9c9') +
' and ' +
wrapInColor('2020', '#9E9E9E') +
' comparison (in millions $)';
}
</script>
</head>
<body>

<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</div>
</body>
</html>

Sample FilenameJsBarDifference.aspx
Version10.3
Uses DatabaseNo

JS Charting

Gallery

JS Bar Difference