Gallery

Gallery > Scatter Charts

JS USIndustries

Demonstrates a marker chart loaded from csv data.

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 a marker chart loaded from csv data.
Chart.Title = "Average Wage by Industry in the US";
Chart.Type = ChartType.ComboHorizontal;
// Set he chart size.
Chart.Width = 875;
Chart.Height= 400;
Chart.DefaultSeries.Type = SeriesType.Marker;
Chart.DefaultSeries.DefaultElement.Marker.Size = 12;
Chart.DefaultSeries.DefaultElement.Marker.Type = ElementMarkerType.Circle;
Chart.Debug = false;
// Set the directory where the related JSC files will be created and stored.
Chart.TempDirectory="temp";

// Enable JSCharting
Chart.JS.Enabled = true;

Chart.LegendBox.Visible = false;
Chart.XAxis.Crosshair = new AxisTick();
Chart.XAxis.FormatString = "c";
Chart.XAxis.DefaultTick.GridLine.Width = 0;

Chart.YAxis.InvertScale = true;
Chart.YAxis.Line.Width = 0;
Chart.YAxis.DefaultTick.GridLine.Color = Color.LightGray;

AxisMarker amx = new AxisMarker();
amx.Label.Text = "Avg wage in US: %value";
amx.Line.Color = Color.Gray;
amx.Line.Width = 4;
amx.Value = 55390;
amx.LegendEntry.Visible = false;
Chart.XAxis.Markers.Add(amx);

DataEngine de = new DataEngine();
de.ChartObject = Chart;
de.ChartType = ChartType.ComboHorizontal;
de.Data = "./../../data/resources/USIndustries.csv";
de.DataFields = "name=industry,yAxis=avg_wage";//cvs must have header
SeriesCollection sc = de.GetSeries();
ElementCollection updatedElemens = new ElementCollection();
for(int i=0;i<sc[0].Elements.Count;i++)
{

sc[0].Elements[i].Color = sc[0].Elements[i].YValue < 55390 ? ColorTranslator.FromHtml("#f44336") : ColorTranslator.FromHtml("#2196f3");
sc[0].Elements[i].Name = sc[0].Elements[i].Name.Trim('"');
if (sc[0].Elements[i].Name != "Total")
updatedElemens.Add(sc[0].Elements[i]);
}
Chart.SeriesCollection.Add(new Series("",updatedElemens));
}
</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" 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 a marker chart loaded from csv data.
Chart.Title = "Average Wage by Industry in the US"
Chart.Type = ChartType.ComboHorizontal
' Set he chart size.
Chart.Width = 875
Chart.Height= 400
Chart.DefaultSeries.Type = SeriesType.Marker
Chart.DefaultSeries.DefaultElement.Marker.Size = 12
Chart.DefaultSeries.DefaultElement.Marker.Type = ElementMarkerType.Circle
Chart.Debug = False
' Set the directory where the related JSC files will be created and stored.
Chart.TempDirectory="temp"

' Enable JSCharting
Chart.JS.Enabled = True

Chart.LegendBox.Visible = False
Chart.XAxis.Crosshair = New AxisTick()
Chart.XAxis.FormatString = "c"
Chart.XAxis.DefaultTick.GridLine.Width = 0

Chart.YAxis.InvertScale = True
Chart.YAxis.Line.Width = 0
Chart.YAxis.DefaultTick.GridLine.Color = Color.LightGray

Dim amx As AxisMarker = New AxisMarker()
amx.Label.Text = "Avg wage in US: %value"
amx.Line.Color = Color.Gray
amx.Line.Width = 4
amx.Value = 55390
amx.LegendEntry.Visible = False
Chart.XAxis.Markers.Add(amx)

Dim de As DataEngine = New DataEngine()
de.ChartObject = Chart
de.ChartType = ChartType.ComboHorizontal
de.Data = "./../../data/resources/USIndustries.csv"
de.DataFields = "name=industry,yAxis=avg_wage" 'cvs must have header
Dim sc As SeriesCollection = de.GetSeries()
Dim updatedElemens As ElementCollection = New ElementCollection()
For i As Integer = 0 To sc(0).Elements.Count - 1

If sc(0).Elements(i).YValue < 55390 Then
sc(0).Elements(i).Color = ColorTranslator.FromHtml("#f44336")
Else
sc(0).Elements(i).Color = ColorTranslator.FromHtml("#2196f3")
End If
sc(0).Elements(i).Name = sc(0).Elements(i).Name.Trim(""""c)
If sc(0).Elements(i).Name <> "Total" Then
updatedElemens.Add(sc(0).Elements(i))
End If
Next i
Chart.SeriesCollection.Add(New Series("",updatedElemens))
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 FilenameJsUSIndustries.aspx
Version10.0
Uses DatabaseNo

JS Charting

Gallery

JS USIndustries