JS Gradient Columns
Draw gradient range columns.
<%@ 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)
{
// This sample demonstrates how to draw gradient range columns.
Chart.Type = ChartType.Combo;
Chart.Width = 875;
Chart.Height = 650;
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.TitleBox.Label.Text = "United States Violence Rates by State";
Chart.TitleBox.Label.Font = new Font("Tahoma", 9, FontStyle.Bold);
Chart.TitleBox.ClearColors();
//LegendBox
Chart.LegendBox.Position = new Point(710, 0);
Chart.LegendBox.Template = "%year1 %icon %year2";
LegendEntry le = new LegendEntry();
le.CustomAttributes.Add("year1", "'2008'");
le.CustomAttributes.Add("year2", "'2018'");
Chart.JS.Settings.Add("legend.customEntries.0.iconWidth", "80");
Chart.JS.Settings.Add("legend.customEntries.0.icon.fill", "js:palette.slice().reverse().concat([0])");
Chart.LegendBox.ExtraEntries.Add(le);
Chart.YAxis.Label.Text = "Incidents / 100,000 People";
Chart.YAxis.DefaultTick.GridLine.Visible = false;
Chart.YAxis.DefaultTick.GridLine.Color = Color.Transparent;
Chart.XAxis.Line.Visible = false;
Chart.XAxis.Line.Color = Color.Transparent;
Chart.XAxis.TickLabelAngle = 90;
//JS settings
Chart.JS.Enabled = true;
Chart.JS.RenderCallback = "callbackFunc";
Chart.XAxis.Crosshair = new AxisTick();
Chart.ToolTipTemplate = "<b>%xValue</b><hr>%points";
Chart.DefaultSeries.DefaultElement.ShowValue = true;
Chart.DefaultSeries.DefaultElement.Outline.Width = 0;
Chart.DefaultSeries.DefaultElement.SmartLabel.DynamicDisplay = false;
Chart.DefaultElement.ToolTip = "2008: <b>{%yStart:d}</b><br>2018: <b>{%yValue:d}</b>";
Chart.Palette = new Color[] { ColorTranslator.FromHtml("#0052D4"), ColorTranslator.FromHtml("#65C7F7"), ColorTranslator.FromHtml("#9CECFB") };
Chart.DefaultSeries.LegendEntry.Visible = false;
DataEngine de = new DataEngine();
de.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/us-violent-crimes-rate-by-state.csv";
de.DataFields = "xValue=state,yvaluestart=2008_result,yvalue=2018_result";//cvs must have header: date,total
SeriesCollection sc = de.GetSeries();
sc[0].Name = "2018_result";
Chart.SeriesCollection.Add(sc[0]);
DataEngine de2 = new DataEngine();
de2.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de2.Data = "./../../data/resources/us-violent-crimes-rate-by-state.csv";
de2.DataFields = "yvalue=2008_result,xValue=state,2018_result=result2018";//cvs must have header: date,total
SeriesCollection sc2 = de2.GetSeries();
sc2[0].Name = "2008_result";
sc2[0].Type = SeriesType.Marker;
sc2[0].DefaultElement.Marker.Size = 0;
sc2[0].DefaultElement.SmartLabel.ForceVertical = true;
sc2[0].DefaultElement.SmartLabel.Padding = 8;
sc2[0].DefaultElement.SmartLabel.Alignment = LabelAlignment.Center;
sc2[0].DefaultElement.ToolTip = " ";
Chart.SeriesCollection.Add(sc2[0]);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script>
var palette = ['#0052D4', '#65C7F7', '#9CECFB'];
function callbackFunc(c) {
c.series("2008_result").points(function (p) {
var start = p.options('attributes.RESULT2018');
var end = p.y;
if (start < end) {
return p.options({ label_verticalAlign: 'top' }, false);
}
else {
return p.options({ label_verticalAlign: 'bottom' }, false);
}
});
c.series("2018_result").points(function (p) {
var start = p.y[0];
var end = p.y[1];
if (start < end) {
return p.options({ fill: palette.concat([90]) }, false);
}
else {
return p.options({ fill: palette.slice().reverse().concat([90]) }, false);
}
});
c.redraw();
}
</script>
</head>
<body>
<dnc:Chart ID="Chart" runat="server" Style="max-width: 900px; margin: 0px auto;" />
</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)
' This sample demonstrates how to draw gradient range columns.
Chart.Type = ChartType.Combo
Chart.Width = 875
Chart.Height = 650
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.TitleBox.Label.Text = "United States Violence Rates by State"
Chart.TitleBox.Label.Font = New Font("Tahoma", 9, FontStyle.Bold)
Chart.TitleBox.ClearColors()
'LegendBox
Chart.LegendBox.Position = New Point(710, 0)
Chart.LegendBox.Template = "%year1 %icon %year2"
Dim le As LegendEntry = New LegendEntry()
le.CustomAttributes.Add("year1", "'2008'")
le.CustomAttributes.Add("year2", "'2018'")
Chart.JS.Settings.Add("legend.customEntries.0.iconWidth", "80")
Chart.JS.Settings.Add("legend.customEntries.0.icon.fill", "js:palette.slice().reverse().concat([0])")
Chart.LegendBox.ExtraEntries.Add(le)
Chart.YAxis.Label.Text = "Incidents / 100,000 People"
Chart.YAxis.DefaultTick.GridLine.Visible = False
Chart.YAxis.DefaultTick.GridLine.Color = Color.Transparent
Chart.XAxis.Line.Visible = False
Chart.XAxis.Line.Color = Color.Transparent
Chart.XAxis.TickLabelAngle = 90
'JS settings
Chart.JS.Enabled = True
Chart.JS.RenderCallback = "callbackFunc"
Chart.XAxis.Crosshair = New AxisTick()
Chart.ToolTipTemplate = "<b>%xValue</b><hr>%points"
Chart.DefaultSeries.DefaultElement.ShowValue = True
Chart.DefaultSeries.DefaultElement.Outline.Width = 0
Chart.DefaultSeries.DefaultElement.SmartLabel.DynamicDisplay = False
Chart.DefaultElement.ToolTip = "2008: <b>{%yStart:d}</b><br>2018: <b>{%yValue:d}</b>"
Chart.Palette = New Color() { ColorTranslator.FromHtml("#0052D4"), ColorTranslator.FromHtml("#65C7F7"), ColorTranslator.FromHtml("#9CECFB") }
Chart.DefaultSeries.LegendEntry.Visible = False
Dim de As DataEngine = New DataEngine()
de.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/us-violent-crimes-rate-by-state.csv"
de.DataFields = "xValue=state,yvaluestart=2008_result,yvalue=2018_result" 'cvs must have header: date,total
Dim sc As SeriesCollection = de.GetSeries()
sc(0).Name = "2018_result"
Chart.SeriesCollection.Add(sc(0))
Dim de2 As DataEngine = New DataEngine()
de2.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de2.Data = "./../../data/resources/us-violent-crimes-rate-by-state.csv"
de2.DataFields = "yvalue=2008_result,xValue=state,2018_result=result2018" 'cvs must have header: date,total
Dim sc2 As SeriesCollection = de2.GetSeries()
sc2(0).Name = "2008_result"
sc2(0).Type = SeriesType.Marker
sc2(0).DefaultElement.Marker.Size = 0
sc2(0).DefaultElement.SmartLabel.ForceVertical = True
sc2(0).DefaultElement.SmartLabel.Padding = 8
sc2(0).DefaultElement.SmartLabel.Alignment = LabelAlignment.Center
sc2(0).DefaultElement.ToolTip = " "
Chart.SeriesCollection.Add(sc2(0))
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script>
var palette = ['#0052D4', '#65C7F7', '#9CECFB'];
function callbackFunc(c) {
c.series("2008_result").points(function (p) {
var start = p.options('attributes.RESULT2018');
var end = p.y;
if (start < end) {
return p.options({ label_verticalAlign: 'top' }, false);
}
else {
return p.options({ label_verticalAlign: 'bottom' }, false);
}
});
c.series("2018_result").points(function (p) {
var start = p.y[0];
var end = p.y[1];
if (start < end) {
return p.options({ fill: palette.concat([90]) }, false);
}
else {
return p.options({ fill: palette.slice().reverse().concat([90]) }, false);
}
});
c.redraw();
}
</script>
</head>
<body>
<dnc:Chart ID="Chart" runat="server" Style="max-width: 900px; margin: 0px auto;" />
</body>
</html>
Previous