JS Scatter Axis Markers
Demonstrates scatter chart with multiple series and axis markers with gradient color.
<%@ 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 and axis markers with gradient color.
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;
// Set the default series type.
//Chart.DefaultSeries.Type = SeriesType.AreaLine;
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.Template = "%icon %name";
Chart.LegendBox.Position = LegendBoxPosition.ChartArea;
Chart.Palette = new Color[] {ColorTranslator.FromHtml("#ffee58"),ColorTranslator.FromHtml("#81d4fa"),ColorTranslator.FromHtml("#f9a825"), ColorTranslator.FromHtml("#ec407a"), ColorTranslator.FromHtml("#7cb342"), ColorTranslator.FromHtml("#1e88e5"), ColorTranslator.FromHtml("#3949ab")};
Chart.YAxis.Label.Text = "Ecological Footprint per Person (gha)";
AxisMarker am = new AxisMarker("Ecological Deficit",new Background(Color.Yellow,Color.Red,-90),1.63, 17.5);
am.LegendEntry.Visible = false;
am.BringToFront = true;
am.Label.Alignment = StringAlignment.Far;
am.Label.LineAlignment = StringAlignment.Far;
am.Background.Transparency = 90;
Chart.YAxis.Markers.Add(am);
am = new AxisMarker("Ecological reserve",new Background(Color.Green,Color.Yellow,-90),0,1.63);
am.LegendEntry.Visible = false;
am.Label.Alignment = StringAlignment.Far;
am.Label.LineAlignment = StringAlignment.Near;
am.BringToFront = true;
am.Background.Transparency = 90;
Chart.YAxis.Markers.Add(am);
am = new AxisMarker();
am.Line.Color = Color.Gray;
am.Line.Width = 2;
am.Value = 1.63;
am.LegendEntry = new LegendEntry("World Biocapacity", am.Value.ToString());
Chart.YAxis.Markers.Add(am);
Chart.XAxis.Label.Text = "Human Development Index";
AxisMarker amx = new AxisMarker();
amx.Label.Text = "Medium HDI";
amx.Line.Color = Color.Gray;
amx.Line.DashStyle = System.Drawing.Drawing2D.DashStyle.Dash;
amx.Value = 0.555;
amx.LegendEntry.Visible = false;
Chart.XAxis.Markers.Add(amx);
amx = new AxisMarker();
amx.Label.Text = "High HDI";
amx.Line.Color = Color.Gray;
amx.Line.DashStyle = System.Drawing.Drawing2D.DashStyle.Dash;
amx.Value = 0.7;
amx.LegendEntry.Visible = false;
Chart.XAxis.Markers.Add(amx);
amx = new AxisMarker();
amx.Label.Text = "Very high HDI";
amx.Line.Color = Color.Gray;
amx.Line.DashStyle = System.Drawing.Drawing2D.DashStyle.Dash;
amx.Value = 0.8;
amx.LegendEntry.Visible = false;
Chart.XAxis.Markers.Add(amx);
Chart.DefaultSeries.DefaultElement.ToolTip = "<b>%country</b><br>HDI: <b>%xValue</b><br>Footprint: <b>%yValue gha</b>";
Chart.DefaultSeries.DefaultElement.Transparency = 20;
DataEngine de = new DataEngine();
de.ChartObject = Chart;
de.ChartType = ChartType.Scatter;
de.Data = "./../../data/resources/EcoFootprintAndHDI.csv";
de.DataFields = "xAxis=hdi,yAxis=footprint,splitby=region,country";//cvs must have header
SeriesCollection sc = de.GetSeries();
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 and axis markers with gradient color.
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
' Set the default series type.
'Chart.DefaultSeries.Type = SeriesType.AreaLine;
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.Template = "%icon %name"
Chart.LegendBox.Position = LegendBoxPosition.ChartArea
Chart.Palette = New Color() {ColorTranslator.FromHtml("#ffee58"),ColorTranslator.FromHtml("#81d4fa"),ColorTranslator.FromHtml("#f9a825"), ColorTranslator.FromHtml("#ec407a"), ColorTranslator.FromHtml("#7cb342"), ColorTranslator.FromHtml("#1e88e5"), ColorTranslator.FromHtml("#3949ab")}
Chart.YAxis.Label.Text = "Ecological Footprint per Person (gha)"
Dim am As AxisMarker = New AxisMarker("Ecological Deficit",New Background(Color.Yellow,Color.Red,-90),1.63, 17.5)
am.LegendEntry.Visible = False
am.BringToFront = True
am.Label.Alignment = StringAlignment.Far
am.Label.LineAlignment = StringAlignment.Far
am.Background.Transparency = 90
Chart.YAxis.Markers.Add(am)
am = New AxisMarker("Ecological reserve",New Background(Color.Green,Color.Yellow,-90),0,1.63)
am.LegendEntry.Visible = False
am.Label.Alignment = StringAlignment.Far
am.Label.LineAlignment = StringAlignment.Near
am.BringToFront = True
am.Background.Transparency = 90
Chart.YAxis.Markers.Add(am)
am = New AxisMarker()
am.Line.Color = Color.Gray
am.Line.Width = 2
am.Value = 1.63
am.LegendEntry = New LegendEntry("World Biocapacity", am.Value.ToString())
Chart.YAxis.Markers.Add(am)
Chart.XAxis.Label.Text = "Human Development Index"
Dim amx As AxisMarker = New AxisMarker()
amx.Label.Text = "Medium HDI"
amx.Line.Color = Color.Gray
amx.Line.DashStyle = System.Drawing.Drawing2D.DashStyle.Dash
amx.Value = 0.555
amx.LegendEntry.Visible = False
Chart.XAxis.Markers.Add(amx)
amx = New AxisMarker()
amx.Label.Text = "High HDI"
amx.Line.Color = Color.Gray
amx.Line.DashStyle = System.Drawing.Drawing2D.DashStyle.Dash
amx.Value = 0.7
amx.LegendEntry.Visible = False
Chart.XAxis.Markers.Add(amx)
amx = New AxisMarker()
amx.Label.Text = "Very high HDI"
amx.Line.Color = Color.Gray
amx.Line.DashStyle = System.Drawing.Drawing2D.DashStyle.Dash
amx.Value = 0.8
amx.LegendEntry.Visible = False
Chart.XAxis.Markers.Add(amx)
Chart.DefaultSeries.DefaultElement.ToolTip = "<b>%country</b><br>HDI: <b>%xValue</b><br>Footprint: <b>%yValue gha</b>"
Chart.DefaultSeries.DefaultElement.Transparency = 20
Dim de As DataEngine = New DataEngine()
de.ChartObject = Chart
de.ChartType = ChartType.Scatter
de.Data = "./../../data/resources/EcoFootprintAndHDI.csv"
de.DataFields = "xAxis=hdi,yAxis=footprint,splitby=region,country" 'cvs must have header
Dim sc As SeriesCollection = de.GetSeries()
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>
Previous