Gallery

Gallery > Lines Charts

JS Dumbbell Markers

Demonstrates a dumbbell slider chart with offset markers to compare data between two years. Uses firstPoint and lastPoint to manage styling.

Download Show C# Code Show VB Code

<%@ Page Language="C#" Description="dotnetCHARTING Component" %>

<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script runat="server">
void Page_Load(Object sender, EventArgs e)
{
// Demonstrates a dumbbell slider chart with offset markers to compare data between two years. Uses firstPoint and lastPoint to manage styling.

Chart.Type = ChartType.ComboHorizontal;
Chart.TitleBox.Label.Text = "js:makeTitle()";
Chart.Width = 600;
Chart.Height = 900;
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.Palette = new Color[] { };
Chart.DefaultAxis.DefaultTick.Label.Font = new Font("Tahoma", 11, FontStyle.Regular);
Chart.DefaultAxis.AlternateGridBackground.Color = Color.White;

Chart.XAxis.Orientation = dotnetCHARTING.Orientation.Top;
Chart.XAxis.DefaultTick.Label.Text = "%value%";
Chart.XAxis.ScaleRange.ValueLow = 0;
Chart.XAxis.ScaleRange.ValueHigh = 17;

Chart.YAxis.Orientation = dotnetCHARTING.Orientation.Right;
Chart.YAxis.DefaultTick.GridLine.Visible = false;
Chart.YAxis.DefaultTick.Line.Length = 0;

Axis axisReplica = Chart.YAxis.Calculate("");
axisReplica.Orientation = dotnetCHARTING.Orientation.Left;
axisReplica.ScaleRange.ValueLow = 0.5;
axisReplica.ScaleRange.ValueHigh = 12.5;
axisReplica.Interval = 1;
axisReplica.DefaultTick.GridLine.Color = Color.LightGray;
axisReplica.DefaultTick.Label.Text = "";
Chart.AxisCollection.Add(axisReplica);

Chart.DefaultSeries.Type = SeriesType.Line;
Chart.DefaultSeries.DefaultElement.Marker.Size = 15;
Chart.DefaultSeries.Line.Width = 3;
Chart.DefaultSeries.Line.Color = Color.Gray;
Chart.DefaultSeries.DefaultElement.ShowValue = true;
Chart.LegendBox.Visible = false;
Chart.DefaultSeries.LegendEntry.Visible = false;
Chart.DefaultElement.LabelTemplate = "%Value%";

Chart.DefaultElement.HoverAction = HoverAction.HighlightSeries;
Chart.DefaultElement.YAxisTick.Label.Text = "js:'<span style=\"color: %color;\">%name</span>'";
Chart.DefaultElement.YAxisTick.HoverAction = HoverAction.HighlightSeries;

Chart.ToolTip = "";//disable tooltip for all the elements
//Js settings
Chart.JS.Enabled = true;
Chart.JS.Settings.Add("defaultSeries.lastPoint.marker.offset", "'0,-8'");
Chart.JS.Settings.Add("defaultSeries.firstPoint.marker.offset", "'0,8'");

// First we get our data
DataEngine de = new DataEngine();
de.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/us-top-offenses-2019-2020.csv";
de.DataFields = "name=type,yValue=year_2019,yValue=year_2020";//cvs must have header: type,year_2019,year_2020
SeriesCollection sc = de.GetSeries();

Chart.DefaultSeries.FirstElement.Color = ColorTranslator.FromHtml("#d78c20");
Chart.DefaultSeries.FirstElement.Marker.Type = ElementMarkerType.Triangle;
Chart.DefaultSeries.FirstElement.SmartLabel.Offset = new Point(0, 3);
Chart.DefaultSeries.FirstElement.SmartLabel.LineAlignment = StringAlignment.Far;
Chart.DefaultSeries.FirstElement.SmartLabel.Alignment = LabelAlignment.Center;

Chart.DefaultSeries.LastElement.Color = ColorTranslator.FromHtml("#65b769");
Chart.DefaultSeries.LastElement.Marker.Type = ElementMarkerType.TriangleUpsideDown;
Chart.DefaultSeries.LastElement.SmartLabel.Offset = new Point(0, -3);
Chart.DefaultSeries.LastElement.SmartLabel.LineAlignment = StringAlignment.Near;
Chart.DefaultSeries.LastElement.SmartLabel.Alignment = LabelAlignment.Center;

//Make 12 series with 2 elements: year_2019 and year_2020
SeriesCollection mySc = new SeriesCollection();
for (int i = 11; i > -1; i--)
{
Series ser = new Series();
ser.Name = sc[0].Elements[i].Name;
Element el = sc[0].Elements[i].Clone();
//el.Color = ColorTranslator.FromHtml("#65b769");
//el.Marker.Type = ElementMarkerType.TriangleUpsideDown;

ser.Elements.Add(el);
Element el2 = sc[1].Elements[i].Clone();
// el2.Color = ColorTranslator.FromHtml("#d78c20");
ser.Elements.Add(el2);
mySc.Add(ser);
}
// Add the collection.
Chart.SeriesCollection.Add(mySc);
}
</script>
<script type="text/javascript">
function wrapInColor(text, color) {
return "<b><span style='fontSize:15px;color:" + color + "'>" + text + '</span></b>';
}
function makeTitle() {
return 'COVID-19 Impact on Criminal Offences<br>' +
'<span style="font-size:12px">Percent of top offenses between March 15 and April 30 in ' +
wrapInColor('2019', '#65b769') +
' vs the same period in ' +
wrapInColor('2020', '#d78c20') +
'</span>';
}
</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" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script runat="server">
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates a dumbbell slider chart with offset markers to compare data between two years. Uses firstPoint and lastPoint to manage styling.

Chart.Type = ChartType.ComboHorizontal
Chart.TitleBox.Label.Text = "js:makeTitle()"
Chart.Width = 600
Chart.Height = 900
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.Palette = New Color() { }
Chart.DefaultAxis.DefaultTick.Label.Font = New Font("Tahoma", 11, FontStyle.Regular)
Chart.DefaultAxis.AlternateGridBackground.Color = Color.White

Chart.XAxis.Orientation = dotnetCHARTING.Orientation.Top
Chart.XAxis.DefaultTick.Label.Text = "%value%"
Chart.XAxis.ScaleRange.ValueLow = 0
Chart.XAxis.ScaleRange.ValueHigh = 17

Chart.YAxis.Orientation = dotnetCHARTING.Orientation.Right
Chart.YAxis.DefaultTick.GridLine.Visible = False
Chart.YAxis.DefaultTick.Line.Length = 0

Dim axisReplica As Axis = Chart.YAxis.Calculate("")
axisReplica.Orientation = dotnetCHARTING.Orientation.Left
axisReplica.ScaleRange.ValueLow = 0.5
axisReplica.ScaleRange.ValueHigh = 12.5
axisReplica.Interval = 1
axisReplica.DefaultTick.GridLine.Color = Color.LightGray
axisReplica.DefaultTick.Label.Text = ""
Chart.AxisCollection.Add(axisReplica)

Chart.DefaultSeries.Type = SeriesType.Line
Chart.DefaultSeries.DefaultElement.Marker.Size = 15
Chart.DefaultSeries.Line.Width = 3
Chart.DefaultSeries.Line.Color = Color.Gray
Chart.DefaultSeries.DefaultElement.ShowValue = True
Chart.LegendBox.Visible = False
Chart.DefaultSeries.LegendEntry.Visible = False
Chart.DefaultElement.LabelTemplate = "%Value%"

Chart.DefaultElement.HoverAction = HoverAction.HighlightSeries
Chart.DefaultElement.YAxisTick.Label.Text = "js:'<span style=""color: %color;"">%name</span>'"
Chart.DefaultElement.YAxisTick.HoverAction = HoverAction.HighlightSeries

Chart.ToolTip = "" 'disable tooltip for all the elements
'Js settings
Chart.JS.Enabled = True
Chart.JS.Settings.Add("defaultSeries.lastPoint.marker.offset", "'0,-8'")
Chart.JS.Settings.Add("defaultSeries.firstPoint.marker.offset", "'0,8'")

' First we get our data
Dim de As DataEngine = New DataEngine()
de.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/us-top-offenses-2019-2020.csv"
de.DataFields = "name=type,yValue=year_2019,yValue=year_2020" 'cvs must have header: type,year_2019,year_2020
Dim sc As SeriesCollection = de.GetSeries()

Chart.DefaultSeries.FirstElement.Color = ColorTranslator.FromHtml("#d78c20")
Chart.DefaultSeries.FirstElement.Marker.Type = ElementMarkerType.Triangle
Chart.DefaultSeries.FirstElement.SmartLabel.Offset = New Point(0, 3)
Chart.DefaultSeries.FirstElement.SmartLabel.LineAlignment = StringAlignment.Far
Chart.DefaultSeries.FirstElement.SmartLabel.Alignment = LabelAlignment.Center

Chart.DefaultSeries.LastElement.Color = ColorTranslator.FromHtml("#65b769")
Chart.DefaultSeries.LastElement.Marker.Type = ElementMarkerType.TriangleUpsideDown
Chart.DefaultSeries.LastElement.SmartLabel.Offset = New Point(0, -3)
Chart.DefaultSeries.LastElement.SmartLabel.LineAlignment = StringAlignment.Near
Chart.DefaultSeries.LastElement.SmartLabel.Alignment = LabelAlignment.Center

'Make 12 series with 2 elements: year_2019 and year_2020
Dim mySc As SeriesCollection = New SeriesCollection()
For i As Integer = 11 To 0 Step -1
Dim ser As Series = New Series()
ser.Name = sc(0).Elements(i).Name
Dim el As Element = sc(0).Elements(i).Clone()
'el.Color = ColorTranslator.FromHtml("#65b769");
'el.Marker.Type = ElementMarkerType.TriangleUpsideDown;

ser.Elements.Add(el)
Dim el2 As Element = sc(1).Elements(i).Clone()
' el2.Color = ColorTranslator.FromHtml("#d78c20");
ser.Elements.Add(el2)
mySc.Add(ser)
Next i
' Add the collection.
Chart.SeriesCollection.Add(mySc)
End Sub
</script>
<script type="text/javascript">
function wrapInColor(text, color) {
return "<b><span style='fontSize:15px;color:" + color + "'>" + text + '</span></b>';
}
function makeTitle() {
return 'COVID-19 Impact on Criminal Offences<br>' +
'<span style="font-size:12px">Percent of top offenses between March 15 and April 30 in ' +
wrapInColor('2019', '#65b769') +
' vs the same period in ' +
wrapInColor('2020', '#d78c20') +
'</span>';
}
</script>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</div>
</body>
</html>

Sample FilenameJsDumbbellMarkers.aspx
Version10.1
Uses DatabaseNo

JS Charting

Gallery

JS Dumbbell Markers