Gallery

Gallery > Scatter Charts

JS Scatter Multi

Demonstrates scatter chart with multiple series and zooming.

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 scatter chart with multiple series with Zooming feature.
Chart.Title = "Correlation of Ecological Footprint and the Human Development Index 2016";
Chart.Type = ChartType.Scatter;
// 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.JS.AxisToZoom = "xy";
Chart.JS.ControlID = "jscChart";

Chart.LegendBox.Template = "%icon %name";
//Chart.Palette = new Color[] {ColorTranslator.FromHtml("#ffee58"),ColorTranslator.FromHtml("#81d4fa"),ColorTranslator.FromHtml("#f9a825")};

Chart.YAxis.Label.Text = "Life Expectancy";
Chart.XAxis.Label.Text = "Fertility Rate";
Chart.XAxis.Scale = Scale.Range;
Chart.XAxis.ScaleRange.ValueLow = 0;
Chart.XAxis.ScaleRange.ValueHigh = 10;
Chart.DefaultSeries.DefaultElement.ToolTip = "<b>%country</b><br>%xAxisLabel: <b>%xValue</b><br>%yAxisLabel: <b>%yValue</b>";
Chart.DefaultSeries.DefaultElement.Transparency = 20;

DataEngine de = new DataEngine();
de.ChartObject = Chart;
de.ChartType = ChartType.Scatter;
de.Data = "./../../data/resources/fertilityRateAndLifeExpectancy.csv";
de.DataFields = "xAxis=fertility_rate1960,yAxis=life_expectancy1960,country";//cvs must have header
SeriesCollection sc = de.GetSeries();
sc[0].LegendEntry.Name = "1960";
Chart.SeriesCollection.Add(sc);

de = new DataEngine();
de.ChartObject = Chart;
de.ChartType = ChartType.Scatter;
de.Data = "./../../data/resources/fertilityRateAndLifeExpectancy.csv";
de.DataFields = "xAxis=fertility_rate1990,yAxis=life_expectancy1990,country";//cvs must have header
sc = de.GetSeries();
sc[0].LegendEntry.Name = "1990";
Chart.SeriesCollection.Add(sc);

de = new DataEngine();
de.ChartObject = Chart;
de.ChartType = ChartType.Scatter;
de.Data = "./../../data/resources/fertilityRateAndLifeExpectancy.csv";
de.DataFields = "xAxis=fertility_rate2016,yAxis=life_expectancy2016,country";//cvs must have header
sc = de.GetSeries();
sc[0].LegendEntry.Name = "2016";
Chart.SeriesCollection.Add(sc);
}

</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 scatter chart with multiple series with Zooming feature.
Chart.Title = "Correlation of Ecological Footprint and the Human Development Index 2016"
Chart.Type = ChartType.Scatter
' 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.JS.AxisToZoom = "xy"
Chart.JS.ControlID = "jscChart"

Chart.LegendBox.Template = "%icon %name"
'Chart.Palette = new Color[] {ColorTranslator.FromHtml("#ffee58"),ColorTranslator.FromHtml("#81d4fa"),ColorTranslator.FromHtml("#f9a825")};

Chart.YAxis.Label.Text = "Life Expectancy"
Chart.XAxis.Label.Text = "Fertility Rate"
Chart.XAxis.Scale = Scale.Range
Chart.XAxis.ScaleRange.ValueLow = 0
Chart.XAxis.ScaleRange.ValueHigh = 10
Chart.DefaultSeries.DefaultElement.ToolTip = "<b>%country</b><br>%xAxisLabel: <b>%xValue</b><br>%yAxisLabel: <b>%yValue</b>"
Chart.DefaultSeries.DefaultElement.Transparency = 20

Dim de As DataEngine = New DataEngine()
de.ChartObject = Chart
de.ChartType = ChartType.Scatter
de.Data = "./../../data/resources/fertilityRateAndLifeExpectancy.csv"
de.DataFields = "xAxis=fertility_rate1960,yAxis=life_expectancy1960,country" 'cvs must have header
Dim sc As SeriesCollection = de.GetSeries()
sc(0).LegendEntry.Name = "1960"
Chart.SeriesCollection.Add(sc)

de = New DataEngine()
de.ChartObject = Chart
de.ChartType = ChartType.Scatter
de.Data = "./../../data/resources/fertilityRateAndLifeExpectancy.csv"
de.DataFields = "xAxis=fertility_rate1990,yAxis=life_expectancy1990,country" 'cvs must have header
sc = de.GetSeries()
sc(0).LegendEntry.Name = "1990"
Chart.SeriesCollection.Add(sc)

de = New DataEngine()
de.ChartObject = Chart
de.ChartType = ChartType.Scatter
de.Data = "./../../data/resources/fertilityRateAndLifeExpectancy.csv"
de.DataFields = "xAxis=fertility_rate2016,yAxis=life_expectancy2016,country" 'cvs must have header
sc = de.GetSeries()
sc(0).LegendEntry.Name = "2016"
Chart.SeriesCollection.Add(sc)
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 FilenameJsScatterMulti.aspx
Version10.0
Uses DatabaseNo

JS Charting

Gallery

JS Scatter Multi