Gallery

Gallery > Lines Charts

JS Series Selection Sync

This sample uses series selection to highlight line series in sync with a dropdown control.

Download Show C# Code Show VB Code

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

<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Collections.Generic" %>
<script runat="server">
void Page_Load(Object sender, EventArgs e)
{
// This sample uses series selection to highlight line series in sync with a dropdown control.
// Set he chart size.
Chart.Width = 740;
Chart.Height = 400;
Chart.Debug = false;
Chart.ToolTip = "";
Chart.ChartArea.ClearColors();
Chart.LegendBox.Visible = false;
Chart.DefaultSeries.LegendEntry.Visible = false;
Chart.Palette = new Color[] { };

// Set the directory where the related JSC files will be created and stored.
Chart.TempDirectory = "temp";
Chart.DefaultElement.Marker.Visible = false;
Chart.DefaultSeries.Type = SeriesType.Spline;
Chart.DefaultSeries.Line.Width = 1;
Chart.DefaultSeries.Line.Color = Color.LightGray;

// Enable JSCharting
Chart.JS.Enabled = true;
Chart.JS.Buttons.EnableExportButton = false;
Chart.JS.Buttons.EnablePrintButton = false;
Chart.JS.RenderCallback = "updateStatus";
Chart.JS.Settings.Add("defaultSeries.states.hover_enabled", "false");
Chart.JS.Settings.Add("defaultSeries.states.select_line_opacity", "1");
Chart.JS.Settings.Add("defaultSeries.states.select_line_width", "3");
Chart.JS.Settings.Add("defaultSeries.states.select_line_color", "currentColor");
Chart.DefaultElement.Hotspot.Attributes.Custom.Add("mouseOver", "js:mouseHovering");

Chart.XAxis.Scale = Scale.Time;
Chart.XAxis.FormatString = "yyyy";
Chart.XAxis.DefaultTick.GridLine.Color = Color.LightGray;
Chart.YAxis.DefaultTick.GridLine.Color = Color.LightGray;
Chart.YAxis.DefaultTick.Label.Text = "%value%";
Chart.YAxis.ScaleRange.ValueLow = 2;
Chart.YAxis.ScaleRange.ValueHigh = 14;

DataEngine de = new DataEngine();
de.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/laborForceUs.csv";
de.DataFields = "yAxis=unemployed,xAxis=year,splitby=state,labor_force";//cvs must have header
SeriesCollection sc = de.GetSeries();

SeriesCollection orgs = new SeriesCollection();
//calculae average
int count = sc.Count;
for (int i = 0; i < sc.Count; i++)
{
if (string.IsNullOrEmpty(sc[i].Name))
continue;
ElementCollection ec = sc[i].GetActiveElements();
Series ser = new Series();
ser.Name = sc[i].Name;
foreach (Element el in ec)
{
if (el.XValue < 1991)
continue;
Element newEl = new Element();
double rate = (el.YValue * 100) / double.Parse(el.CustomAttributes["labor_force"].ToString());
newEl.YValue = rate;
newEl.XDateTime = new DateTime((int)el.XValue, 1, 1);
ser.Elements.Add(newEl);
}
orgs.Add(ser);
}
Series average = new Series();
average.Name = "Average";
int elementCount = orgs[0].Elements.Count;
for (int i = 0; i < elementCount; i++)
{
string maxName = "";
string minName = "";
double maxRate = 0;
double minRate = 100;
double avg = 0;
for (int j = 0; j < orgs.Count; j++)
{
if (orgs[j].Elements[i].YValue > maxRate)
{
maxRate = orgs[j].Elements[i].YValue;
maxName = orgs[j].Name;
}
if (orgs[j].Elements[i].YValue < minRate)
{
minRate = orgs[j].Elements[i].YValue;
minName = orgs[j].Name;
}
avg += orgs[j].Elements[i].YValue;

}
Element el = new Element();
el.XDateTime = new DateTime(1991 + i, 1, 1);
el.YValue = avg / orgs.Count;
el.CustomAttributes.Add("min", minName + " " + minRate);
el.CustomAttributes.Add("max", maxName + " " + maxRate);
average.Elements.Add(el);
}
Chart.SeriesCollection.Add(orgs);
Chart.SeriesCollection.Add(average);

}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gallery Sample</title>
<script type="text/javascript">
var selectEl, myJSC;
function selectChanged(control) {
selectSeries(control.selectedOptions[0].innerText);
}
function updateStatus(c) {
myJSC = c;
selectEl = document.getElementById('selectState');
selectEl.addEventListener('change', function () {
selectChanged(this);
});
dropdownSelect('Average');
selectSeries('Average');
}
function dropdownSelect(id) {
for (var i = 0; i < selectEl.options.length; i++) {
if (selectEl.options[i].text === id) {
selectEl.options[i].selected = true;
return;
}
}
}
function mouseHovering() {
selectSeries(this.series.name);
dropdownSelect(this.series.name);
return false;
}
// Set the selected series on the chart.
function selectSeries(id) {
myJSC.series().each(function (s) {
s.options({ selected: id === s.name });
});
}
</script>
</head>
<body>
<div style="max-width: 740px; margin: 0px auto; font-family: tahoma, geneva, sans-serif;">
Average US Unemployment Rate:
<select id="selectState"><option value="Alabama">Alabama</option><option value="Alaska">Alaska</option><option value="Arizona">Arizona</option><option value="Arkansas">Arkansas</option><option value="California">California</option><option value="Colorado">Colorado</option><option value="Connecticut">Connecticut</option><option value="Delaware">Delaware</option><option value="District of Columbia">District of Columbia</option><option value="Florida">Florida</option><option value="Georgia">Georgia</option><option value="Hawaii">Hawaii</option><option value="Idaho">Idaho</option><option value="Illinois">Illinois</option><option value="Indiana">Indiana</option><option value="Iowa">Iowa</option><option value="Kansas">Kansas</option><option value="Kentucky">Kentucky</option><option value="Louisiana">Louisiana</option><option value="Maine">Maine</option><option value="Maryland">Maryland</option><option value="Massachusetts">Massachusetts</option><option value="Michigan">Michigan</option><option value="Minnesota">Minnesota</option><option value="Mississippi">Mississippi</option><option value="Missouri">Missouri</option><option value="Montana">Montana</option><option value="Nebraska">Nebraska</option><option value="Nevada">Nevada</option><option value="New Hampshire">New Hampshire</option><option value="New Jersey">New Jersey</option><option value="New Mexico">New Mexico</option><option value="New York">New York</option><option value="North Carolina">North Carolina</option><option value="North Dakota">North Dakota</option><option value="Ohio">Ohio</option><option value="Oklahoma">Oklahoma</option><option value="Oregon">Oregon</option><option value="Pennsylvania">Pennsylvania</option><option value="Rhode Island">Rhode Island</option><option value="South Carolina">South Carolina</option><option value="South Dakota">South Dakota</option><option value="Tennessee">Tennessee</option><option value="Texas">Texas</option><option value="Utah">Utah</option><option value="Vermont">Vermont</option><option value="Virginia">Virginia</option><option value="Washington">Washington</option><option value="West Virginia">West Virginia</option><option value="Wisconsin">Wisconsin</option><option value="Wyoming">Wyoming</option><option value="Average">Average</option></select>
</div>
<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" %>
<%@ Import Namespace="System.Collections.Generic" %>
<script runat="server">
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' This sample uses series selection to highlight line series in sync with a dropdown control.
' Set he chart size.
Chart.Width = 740
Chart.Height = 400
Chart.Debug = False
Chart.ToolTip = ""
Chart.ChartArea.ClearColors()
Chart.LegendBox.Visible = False
Chart.DefaultSeries.LegendEntry.Visible = False
Chart.Palette = New Color() { }

' Set the directory where the related JSC files will be created and stored.
Chart.TempDirectory = "temp"
Chart.DefaultElement.Marker.Visible = False
Chart.DefaultSeries.Type = SeriesType.Spline
Chart.DefaultSeries.Line.Width = 1
Chart.DefaultSeries.Line.Color = Color.LightGray

' Enable JSCharting
Chart.JS.Enabled = True
Chart.JS.Buttons.EnableExportButton = False
Chart.JS.Buttons.EnablePrintButton = False
Chart.JS.RenderCallback = "updateStatus"
Chart.JS.Settings.Add("defaultSeries.states.hover_enabled", "false")
Chart.JS.Settings.Add("defaultSeries.states.select_line_opacity", "1")
Chart.JS.Settings.Add("defaultSeries.states.select_line_width", "3")
Chart.JS.Settings.Add("defaultSeries.states.select_line_color", "currentColor")
Chart.DefaultElement.Hotspot.Attributes.Custom.Add("mouseOver", "js:mouseHovering")

Chart.XAxis.Scale = Scale.Time
Chart.XAxis.FormatString = "yyyy"
Chart.XAxis.DefaultTick.GridLine.Color = Color.LightGray
Chart.YAxis.DefaultTick.GridLine.Color = Color.LightGray
Chart.YAxis.DefaultTick.Label.Text = "%value%"
Chart.YAxis.ScaleRange.ValueLow = 2
Chart.YAxis.ScaleRange.ValueHigh = 14

Dim de As DataEngine = New DataEngine()
de.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/laborForceUs.csv"
de.DataFields = "yAxis=unemployed,xAxis=year,splitby=state,labor_force" 'cvs must have header
Dim sc As SeriesCollection = de.GetSeries()

Dim orgs As SeriesCollection = New SeriesCollection()
'calculae average
Dim count As Integer = sc.Count
For i As Integer = 0 To sc.Count - 1
If String.IsNullOrEmpty(sc(i).Name) Then
Continue For
End If
Dim ec As ElementCollection = sc(i).GetActiveElements()
Dim ser As Series = New Series()
ser.Name = sc(i).Name
For Each el As Element In ec
If el.XValue < 1991 Then
Continue For
End If
Dim newEl As Element = New Element()
Dim rate As Double = (el.YValue * 100) / Double.Parse(el.CustomAttributes("labor_force").ToString())
newEl.YValue = rate
newEl.XDateTime = New DateTime(CInt(Fix(el.XValue)), 1, 1)
ser.Elements.Add(newEl)
Next el
orgs.Add(ser)
Next i
Dim average As Series = New Series()
average.Name = "Average"
Dim elementCount As Integer = orgs(0).Elements.Count
For i As Integer = 0 To elementCount - 1
Dim maxName As String = ""
Dim minName As String = ""
Dim maxRate As Double = 0
Dim minRate As Double = 100
Dim avg As Double = 0
For j As Integer = 0 To orgs.Count - 1
If orgs(j).Elements(i).YValue > maxRate Then
maxRate = orgs(j).Elements(i).YValue
maxName = orgs(j).Name
End If
If orgs(j).Elements(i).YValue < minRate Then
minRate = orgs(j).Elements(i).YValue
minName = orgs(j).Name
End If
avg += orgs(j).Elements(i).YValue

Next j
Dim el As Element = New Element()
el.XDateTime = New DateTime(1991 + i, 1, 1)
el.YValue = avg / orgs.Count
el.CustomAttributes.Add("min", minName & " " & minRate)
el.CustomAttributes.Add("max", maxName & " " & maxRate)
average.Elements.Add(el)
Next i
Chart.SeriesCollection.Add(orgs)
Chart.SeriesCollection.Add(average)

End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gallery Sample</title>
<script type="text/javascript">
var selectEl, myJSC;
function selectChanged(control) {
selectSeries(control.selectedOptions[0].innerText);
}
function updateStatus(c) {
myJSC = c;
selectEl = document.getElementById('selectState');
selectEl.addEventListener('change', function () {
selectChanged(this);
});
dropdownSelect('Average');
selectSeries('Average');
}
function dropdownSelect(id) {
for (var i = 0; i < selectEl.options.length; i++) {
if (selectEl.options[i].text === id) {
selectEl.options[i].selected = true;
return;
}
}
}
function mouseHovering() {
selectSeries(this.series.name);
dropdownSelect(this.series.name);
return false;
}
// Set the selected series on the chart.
function selectSeries(id) {
myJSC.series().each(function (s) {
s.options({ selected: id === s.name });
});
}
</script>
</head>
<body>
<div style="max-width: 740px; margin: 0px auto; font-family: tahoma, geneva, sans-serif;">
Average US Unemployment Rate:
<select id="selectState"><option value="Alabama">Alabama</option><option value="Alaska">Alaska</option><option value="Arizona">Arizona</option><option value="Arkansas">Arkansas</option><option value="California">California</option><option value="Colorado">Colorado</option><option value="Connecticut">Connecticut</option><option value="Delaware">Delaware</option><option value="District of Columbia">District of Columbia</option><option value="Florida">Florida</option><option value="Georgia">Georgia</option><option value="Hawaii">Hawaii</option><option value="Idaho">Idaho</option><option value="Illinois">Illinois</option><option value="Indiana">Indiana</option><option value="Iowa">Iowa</option><option value="Kansas">Kansas</option><option value="Kentucky">Kentucky</option><option value="Louisiana">Louisiana</option><option value="Maine">Maine</option><option value="Maryland">Maryland</option><option value="Massachusetts">Massachusetts</option><option value="Michigan">Michigan</option><option value="Minnesota">Minnesota</option><option value="Mississippi">Mississippi</option><option value="Missouri">Missouri</option><option value="Montana">Montana</option><option value="Nebraska">Nebraska</option><option value="Nevada">Nevada</option><option value="New Hampshire">New Hampshire</option><option value="New Jersey">New Jersey</option><option value="New Mexico">New Mexico</option><option value="New York">New York</option><option value="North Carolina">North Carolina</option><option value="North Dakota">North Dakota</option><option value="Ohio">Ohio</option><option value="Oklahoma">Oklahoma</option><option value="Oregon">Oregon</option><option value="Pennsylvania">Pennsylvania</option><option value="Rhode Island">Rhode Island</option><option value="South Carolina">South Carolina</option><option value="South Dakota">South Dakota</option><option value="Tennessee">Tennessee</option><option value="Texas">Texas</option><option value="Utah">Utah</option><option value="Vermont">Vermont</option><option value="Virginia">Virginia</option><option value="Washington">Washington</option><option value="West Virginia">West Virginia</option><option value="Wisconsin">Wisconsin</option><option value="Wyoming">Wyoming</option><option value="Average">Average</option></select>
</div>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</div>
</body>
</html>

Sample FilenameJsSeriesSelectionSync.aspx
Version10.1
Uses DatabaseNo

JS Charting

Gallery

JS Series Selection Sync