Gallery

Gallery > Showcase Charts

JS Tires Compared

Demonstrates custom curly brace range ticks mapped to tire ratings.

Download Show C# Code Show VB Code

<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script runat="server">
void Page_Load(Object sender, EventArgs e)
{
// Demonstrates custom curly brace range ticks mapped to tire ratings.
Chart.Type = ChartType.Combo;
Chart.Width = 600;
Chart.Height = 500;
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.DefaultSeries.Type = SeriesType.Line;
Chart.Palette = new Color[3] { ColorTranslator.FromHtml("#e9e9e9"),ColorTranslator.FromHtml("#b7b7b7"),ColorTranslator.FromHtml("#797979")};
Chart.ChartArea.ClearColors();

Chart.JS.Enabled = true;
Chart.LegendBox.Position = LegendBoxPosition.BottomMiddle;

Chart.LegendBox.ClearColors();
Chart.LegendBox.Template = "%icon %name";
Chart.XAxis.Orientation = dotnetCHARTING.Orientation.Top;
Chart.XAxis.DefaultTick.Label.AutoWrap = true;
Chart.XAxis.DefaultTick.Label.Width = 50;
Chart.XAxis.TickLabelAngle = 0;

Annotation an = new Annotation("Source: Consumer Reports");
an.Position = new Point(22,447);
an.ClearColors();
Chart.Annotations.Add(an);

// Setup the shadow axis and add it.
Axis shadow = Chart.YAxis.Calculate("");
shadow.Orientation = dotnetCHARTING.Orientation.Left;
shadow.ClearValues = true;
shadow.Line.Color = Color.Empty;
shadow.DefaultTick.GridLine.Color = Color.Empty;
Chart.AxisCollection.Add(shadow);

Chart.YAxis.ClearValues = true;
Chart.YAxis.Minimum = 0.5;
Chart.YAxis.Maximum = 5.5;
Chart.YAxis.DefaultTick.GridLine.Color = Color.LightGray;
Chart.XAxis.DefaultTick.GridLine.Color = Color.LightGray;

Chart.JS.Settings.Add("yAxis.0.defaultTick.rangeMode", "'curly'");
Chart.JS.Settings.Add("yAxis.0.defaultTick.label_placement", "'outside'");
Chart.JS.Settings.Add("yAxis.0.defaultTick.label_padding", "5");
Chart.JS.Settings.Add("yAxis.0.defaultTick.label_margin", "5");
Chart.JS.Settings.Add("yAxis.0.defaultTick.line_radius", "10");
Chart.JS.Settings.Add("yAxis.0.defaultTick.enabled", "false");

AxisTick at = new AxisTick();
at.Label.Text = "Poor";
at.Value = "[0.5,1.5]";
at.Line.Color = Color.FromArgb(201,15,24);
Chart.YAxis.ExtraTicks.Add(at);

at = new AxisTick();
at.Label.Text = "Fair";
at.Value = "[1.5,2.5]";
at.Line.Color = Color.FromArgb(234,162,32);
Chart.YAxis.ExtraTicks.Add(at);

at = new AxisTick();
at.Label.Text = "Good";
at.Value = "[2.5,3.5]";
at.Line.Color = Color.FromArgb(234,210,41);
Chart.YAxis.ExtraTicks.Add(at);

at = new AxisTick();
at.Label.Text = "Very Good";
at.Value = "[3.5,4.5]";
at.Line.Color = Color.FromArgb(174,234,49);
Chart.YAxis.ExtraTicks.Add(at);

at = new AxisTick();
at.Label.Text = "Excellent";
at.Value = "[4.5,5.5]";
at.Line.Color = Color.FromArgb(80,200,20);
Chart.YAxis.ExtraTicks.Add(at);

// *DYNAMIC DATA NOTE*
// This sample uses random data to populate the chart. To populate
// a chart with database data see the following resources:
// - Classic samples folder
// - Help File > Data Tutorials
// - Sample: features/DataEngine.aspx
SeriesCollection mySC = getData();
Chart.SeriesCollection.Add(mySC);
}
SeriesCollection getData()
{
SeriesCollection SC = new SeriesCollection();
Series UHPSummer = new Series();
UHPSummer.Name = "UHP Summer";
UHPSummer.Elements.Add(new Element("Handling",5));
UHPSummer.Elements.Add(new Element("Dry Breaking", 5));
UHPSummer.Elements.Add(new Element("Wet Breaking", 4));
UHPSummer.Elements.Add(new Element("Ride Noise", 3 ));
UHPSummer.Elements.Add(new Element("Ride Comfort",2));
UHPSummer.Elements.Add(new Element("Rolling Resistance", 2));
UHPSummer.Elements.Add(new Element("Snow Traction", 1));
SC.Add(UHPSummer);

Series AllSeason = new Series();
AllSeason.Name = "All Season";
AllSeason.Elements.Add(new Element("Handling",3));
AllSeason.Elements.Add(new Element("Dry Breaking", 4));
AllSeason.Elements.Add(new Element("Wet Breaking", 3));
AllSeason.Elements.Add(new Element("Ride Noise", 4 ));
AllSeason.Elements.Add(new Element("Ride Comfort",4));
AllSeason.Elements.Add(new Element("Rolling Resistance", 3));
AllSeason.Elements.Add(new Element("Snow Traction", 3));
SC.Add(AllSeason);

Series WinterSnow = new Series();
WinterSnow.Name = "Winter/Snow";
WinterSnow.Elements.Add(new Element("Handling",2));
WinterSnow.Elements.Add(new Element("Dry Breaking", 2));
WinterSnow.Elements.Add(new Element("Wet Breaking", 2));
WinterSnow.Elements.Add(new Element("Ride Noise", 3 ));
WinterSnow.Elements.Add(new Element("Ride Comfort",5));
WinterSnow.Elements.Add(new Element("Rolling Resistance", 3));
WinterSnow.Elements.Add(new Element("Snow Traction", 5));
SC.Add(WinterSnow);

return SC;
}
</script>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" Width="568px" Height="344px">
</dotnet:Chart>
</div>
</body>
</html>

<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script runat="server">
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates custom curly brace range ticks mapped to tire ratings.
Chart.Type = ChartType.Combo
Chart.Width = 600
Chart.Height = 500
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.DefaultSeries.Type = SeriesType.Line
Chart.Palette = New Color(2) { ColorTranslator.FromHtml("#e9e9e9"),ColorTranslator.FromHtml("#b7b7b7"),ColorTranslator.FromHtml("#797979")}
Chart.ChartArea.ClearColors()

Chart.JS.Enabled = True
Chart.LegendBox.Position = LegendBoxPosition.BottomMiddle

Chart.LegendBox.ClearColors()
Chart.LegendBox.Template = "%icon %name"
Chart.XAxis.Orientation = dotnetCHARTING.Orientation.Top
Chart.XAxis.DefaultTick.Label.AutoWrap = True
Chart.XAxis.DefaultTick.Label.Width = 50
Chart.XAxis.TickLabelAngle = 0

Dim an As Annotation = New Annotation("Source: Consumer Reports")
an.Position = New Point(22,447)
an.ClearColors()
Chart.Annotations.Add(an)

' Setup the shadow axis and add it.
Dim shadow As Axis = Chart.YAxis.Calculate("")
shadow.Orientation = dotnetCHARTING.Orientation.Left
shadow.ClearValues = True
shadow.Line.Color = Color.Empty
shadow.DefaultTick.GridLine.Color = Color.Empty
Chart.AxisCollection.Add(shadow)

Chart.YAxis.ClearValues = True
Chart.YAxis.Minimum = 0.5
Chart.YAxis.Maximum = 5.5
Chart.YAxis.DefaultTick.GridLine.Color = Color.LightGray
Chart.XAxis.DefaultTick.GridLine.Color = Color.LightGray

Chart.JS.Settings.Add("yAxis.0.defaultTick.rangeMode", "'curly'")
Chart.JS.Settings.Add("yAxis.0.defaultTick.label_placement", "'outside'")
Chart.JS.Settings.Add("yAxis.0.defaultTick.label_padding", "5")
Chart.JS.Settings.Add("yAxis.0.defaultTick.label_margin", "5")
Chart.JS.Settings.Add("yAxis.0.defaultTick.line_radius", "10")
Chart.JS.Settings.Add("yAxis.0.defaultTick.enabled", "false")

Dim at As AxisTick = New AxisTick()
at.Label.Text = "Poor"
at.Value = "[0.5,1.5]"
at.Line.Color = Color.FromArgb(201,15,24)
Chart.YAxis.ExtraTicks.Add(at)

at = New AxisTick()
at.Label.Text = "Fair"
at.Value = "[1.5,2.5]"
at.Line.Color = Color.FromArgb(234,162,32)
Chart.YAxis.ExtraTicks.Add(at)

at = New AxisTick()
at.Label.Text = "Good"
at.Value = "[2.5,3.5]"
at.Line.Color = Color.FromArgb(234,210,41)
Chart.YAxis.ExtraTicks.Add(at)

at = New AxisTick()
at.Label.Text = "Very Good"
at.Value = "[3.5,4.5]"
at.Line.Color = Color.FromArgb(174,234,49)
Chart.YAxis.ExtraTicks.Add(at)

at = New AxisTick()
at.Label.Text = "Excellent"
at.Value = "[4.5,5.5]"
at.Line.Color = Color.FromArgb(80,200,20)
Chart.YAxis.ExtraTicks.Add(at)

' *DYNAMIC DATA NOTE*
' This sample uses random data to populate the chart. To populate
' a chart with database data see the following resources:
' - Classic samples folder
' - Help File > Data Tutorials
' - Sample: features/DataEngine.aspx
Dim mySC As SeriesCollection = getData()
Chart.SeriesCollection.Add(mySC)
End Sub
Function getData() As SeriesCollection
Dim SC As SeriesCollection = New SeriesCollection()
Dim UHPSummer As Series = New Series()
UHPSummer.Name = "UHP Summer"
UHPSummer.Elements.Add(New Element("Handling",5))
UHPSummer.Elements.Add(New Element("Dry Breaking", 5))
UHPSummer.Elements.Add(New Element("Wet Breaking", 4))
UHPSummer.Elements.Add(New Element("Ride Noise", 3))
UHPSummer.Elements.Add(New Element("Ride Comfort",2))
UHPSummer.Elements.Add(New Element("Rolling Resistance", 2))
UHPSummer.Elements.Add(New Element("Snow Traction", 1))
SC.Add(UHPSummer)

Dim AllSeason As Series = New Series()
AllSeason.Name = "All Season"
AllSeason.Elements.Add(New Element("Handling",3))
AllSeason.Elements.Add(New Element("Dry Breaking", 4))
AllSeason.Elements.Add(New Element("Wet Breaking", 3))
AllSeason.Elements.Add(New Element("Ride Noise", 4))
AllSeason.Elements.Add(New Element("Ride Comfort",4))
AllSeason.Elements.Add(New Element("Rolling Resistance", 3))
AllSeason.Elements.Add(New Element("Snow Traction", 3))
SC.Add(AllSeason)

Dim WinterSnow As Series = New Series()
WinterSnow.Name = "Winter/Snow"
WinterSnow.Elements.Add(New Element("Handling",2))
WinterSnow.Elements.Add(New Element("Dry Breaking", 2))
WinterSnow.Elements.Add(New Element("Wet Breaking", 2))
WinterSnow.Elements.Add(New Element("Ride Noise", 3))
WinterSnow.Elements.Add(New Element("Ride Comfort",5))
WinterSnow.Elements.Add(New Element("Rolling Resistance", 3))
WinterSnow.Elements.Add(New Element("Snow Traction", 5))
SC.Add(WinterSnow)

Return SC
End Function
</script>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" Width="568px" Height="344px">
</dotnet:Chart>
</div>
</body>
</html>

Sample FilenameJsTiresCompared.aspx
Version9.3
Uses DatabaseNo

JS Charting

Gallery

JS Tires Compared