Gallery

Gallery > Scatter Charts

JS Dot Plot Histogram

Demonstrates creating a dot plot histogram using the JavaScript chart.

Download Show C# Code Show VB Code

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

<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>

<script runat="server">

void Page_Load(Object sender, EventArgs e)
{
// Demonstrates creating a dot plot histogram using the JavaScript chart.

Chart.Size = "500x640";
Chart.TitleBox.Label.Text = "js:makeTitle()";
Chart.TempDirectory = "temp";
Chart.Debug = false;

Chart.DefaultSeries.Type = SeriesType.Marker;
Chart.ToolTip = "";
Chart.LegendBox.Visible = false;

Chart.XAxis.Label.Text = "Runners Age";
Chart.YAxis.AlternateGridBackground.Color = Color.Transparent;
Chart.DefaultElement.FocusGlow.Width = 0;

Chart.YAxis.ScaleRange.ValueLow = 0.5;
Chart.YAxis.ScaleRange.ValueHigh = 80;
// Enable JSCharting
Chart.JS.Enabled = true;

DataEngine de = new DataEngine();
de.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/running-event-results.csv";
de.DataFields = "xdatetime=birth_date,yvalue=official_time,sex";//cvs must have header
SeriesCollection sc = de.GetSeries();
SeriesCollection ages = new SeriesCollection();
int elCount = 0;
if(sc.Count>0)
elCount = sc[0].Elements.Count;
if(elCount>0)
{
for (int j = 0; j < elCount; j++)
{
Element curEl = sc[0].Elements[j];
int a = DateTime.Now.Year - curEl.XDateTime.Year;
int index = ages.IndexOf(a.ToString());
if (index > -1)
{
Element el = new Element();
el.XValue = a;
el.Name = el.XValue.ToString();
el.YValue = ages[index].Elements.Count;
if (curEl.CustomAttributes["sex"].ToString() == "M")
el.Color = Color.FromArgb(3, 169, 244);
else
el.Color = Color.FromArgb(255, 87, 34);
ages[index].Elements.Add(el);
}
else
{
Element el = new Element();
el.XValue = a;
el.Name = el.XValue.ToString();
el.YValue = 0;
if (curEl.CustomAttributes["sex"].ToString() == "M")
el.Color = Color.FromArgb(3, 169, 244);
else
el.Color = Color.FromArgb(255, 87, 34);
Series age = new Series();
age.DefaultElement.Marker.Type = ElementMarkerType.Circle;
age.DefaultElement.Marker.Size = 5;
age.DefaultElement.Outline.Width = 0;
age.Name = a.ToString();
age.Elements.Add(el);
ages.Add(age);
}
}
}
Chart.Palette = new Color[] { };
Chart.SeriesCollection.Add(ages);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script type="text/javascript">
function wrapInColor(text, color) {return "<b><span style='fontSize:15px;color:" + color + "'>" + text + '</span></b>';}
function makeTitle(){return wrapInColor('Male', '#03A9F4') + ' and ' + wrapInColor('Female', '#FF5722') + ' Runners by Age';}
</script>
</head>
<body>
<div align="center">
<dnc:Chart ID="Chart" runat="server" />
</div>
</body>
</html>

<%@ Page Language="vb" Description="dotnetCHARTING Component" %>

<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>

<script runat="server">

Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

' Demonstrates creating a dot plot histogram using the JavaScript chart.

Chart.Size = "500x640"
Chart.TitleBox.Label.Text = "js:makeTitle()"
Chart.TempDirectory = "temp"
Chart.Debug = False

Chart.DefaultSeries.Type = SeriesType.Marker
Chart.ToolTip = ""
Chart.LegendBox.Visible = False

Chart.XAxis.Label.Text = "Runners Age"
Chart.YAxis.AlternateGridBackground.Color = Color.Transparent
Chart.DefaultElement.FocusGlow.Width = 0

Chart.YAxis.ScaleRange.ValueLow = 0.5
Chart.YAxis.ScaleRange.ValueHigh = 80
' Enable JSCharting
Chart.JS.Enabled = True

Dim de As DataEngine = New DataEngine()
de.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/running-event-results.csv"
de.DataFields = "xdatetime=birth_date,yvalue=official_time,sex" 'cvs must have header
Dim sc As SeriesCollection = de.GetSeries()
Dim ages As SeriesCollection = New SeriesCollection()
Dim elCount As Int16 = 0
If sc.Count > 0 Then
elCount = sc(0).Elements.Count
End If
If elCount > 0 Then
For j As Integer = 0 To elCount - 1
Dim curEl As Element = sc(0).Elements(j)
Dim a As Integer = DateTime.Now.Year - curEl.XDateTime.Year
Dim index As Integer = ages.IndexOf(a.ToString())
If index > -1 Then
Dim el As Element = New Element()
el.XValue = a
el.Name = el.XValue.ToString()
el.YValue = ages(index).Elements.Count
If curEl.CustomAttributes("sex").ToString() = "M" Then
el.Color = Color.FromArgb(3, 169, 244)
Else
el.Color = Color.FromArgb(255, 87, 34)
End If
ages(index).Elements.Add(el)

Else
Dim el As Element = New Element()
el.XValue = a
el.Name = el.XValue.ToString()
el.YValue = 0
If curEl.CustomAttributes("sex").ToString() = "M" Then
el.Color = Color.FromArgb(3, 169, 244)
Else
el.Color = Color.FromArgb(255, 87, 34)
End If
Dim age As Series = New Series()
age.DefaultElement.Marker.Type = ElementMarkerType.Circle
age.DefaultElement.Marker.Size = 5
age.DefaultElement.Outline.Width = 0
age.Name = a.ToString()
age.Elements.Add(el)
ages.Add(age)
End If
Next j
End If
Chart.Palette = New Color() {}
Chart.SeriesCollection.Add(ages)
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script type="text/javascript">
function wrapInColor(text, color) {return "<b><span style='fontSize:15px;color:" + color + "'>" + text + '</span></b>';}
function makeTitle(){return wrapInColor('Male', '#03A9F4') + ' and ' + wrapInColor('Female', '#FF5722') + ' Runners by Age';}
</script>
</head>
<body>
<div align="center">
<dnc:Chart ID="Chart" runat="server" />
</div>
</body>
</html>

Sample FilenameJsDotPlotHistogram.aspx
Version10.1
Uses DatabaseNo

JS Charting

Gallery

JS Dot Plot Histogram