JS Smart Palette
Demonstrates a JSCharting chart with smart palette and swatch.
<%@ 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)
{
// Demonstrates a JSCharting chart with smart palette and swatch.
Chart.Size = "600x350";
//Chart.Title = ".netCHARTING Sample";
Chart.TempDirectory = "temp";
Chart.Debug = false;
//
Chart.DefaultSeries.Type = SeriesType.Marker;
Chart.LegendBox.Visible = false;
Chart.Mentor = false;
Chart.DefaultAxis.TickLabelPadding = 10;
Chart.XAxis.TickLabelPadding = 10;
// Enable JSCharting
Chart.JS.Enabled = true;
Chart.DefaultElement.ToolTip = "%XValue \n %Value";
SmartColor sc2 = new SmartColor(Color.Yellow, Color.Red, new ScaleRange(0, 60));
Chart.SmartPalette.Add("*", sc2);
swatchLabelV.Text += getVerticalSwatchHTML(new Size(20, 308), Chart.SmartPalette, 10, true);
// *DYNAMIC DATA NOTE*
// This sample uses random data to populate the chart. To populate
// a chart with database data see the following resources:
// - Use the getLiveData() method using the dataEngine to query a database.
// - Help File > Getting Started > Data Tutorials
// - DataEngine Class in the help file
// - Sample: features/DataEngine.aspx
SeriesCollection mySC = getRandomData();
// Add the random data.
Chart.SeriesCollection.Add(mySC);
}
SeriesCollection getRandomData()
{
Random myR = new Random(1);
SeriesCollection SC = new SeriesCollection();
DateTime dt = new DateTime(2022, 6, 2);
Series s = new Series("Series 1" );
for (int b = 1; b < 400; b++)
{
Element e = new Element();
e.XDateTime = dt = dt.AddDays(1);
e.YValue = myR.Next(50)+10;
s.Elements.Add(e);
}
SC.Add(s);
return SC;
}
SeriesCollection getLiveData()
{
DataEngine de = new DataEngine("ConnectionString goes here");
de.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de.SqlStatement = "SELECT XAxisColumn, YAxisColumn FROM ....";
return de.GetSeries();
}
string getVerticalSwatchHTML(Size size, SmartPalette sp, int divisions, bool withValues)
{
StringBuilder sb = new StringBuilder();
// Get Maximum Value of the smart palette range
double max = (double)sp.GetScaleRange("*").ValueHigh;
// Generate swatch string for each division.
sb.Append("<table cellpadding=\"0\" cellspacing=\"0\" style=\"width: " + size.Width + "px; height: " + size.Height + "px;\">");
for (int i = divisions; i >= 0; i--)
{
// Get the color of the current division.
string color = getHTMLColor(sp.GetValueColor("", (i * (max / divisions))));
sb.Append("<tr><td style=\" text-align: center; background-color: " + color + "\">");
if (withValues)
sb.Append((int)(i * (max / divisions)));
else
sb.Append(" ");
sb.Append("</td></tr>");
}
//return the swatch string.
sb.Append("</table>");
return sb.ToString();
}
string getHTMLColor(Color c)
{
return "#" + c.R.ToString("X2") + c.G.ToString("X2") + c.B.ToString("X2");
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</head><style type="text/css">
div, p
{
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
}
</style>
<body>
<div align="center">
<table>
<tr>
<td>
<div align="center">
<dnc:Chart ID="Chart" runat="server" />
</div>
</td>
<td style="border:0px solid red; vertical-align:top; padding-top:11px;">
<asp:Label ID="swatchLabelV" runat="server" />
</td>
</tr>
</table>
</div>
</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)
' Demonstrates a JSCharting chart with smart palette and swatch.
Chart.Size = "600x350"
'Chart.Title = ".netCHARTING Sample";
Chart.TempDirectory = "temp"
Chart.Debug = False
'
Chart.DefaultSeries.Type = SeriesType.Marker
Chart.LegendBox.Visible = False
Chart.Mentor = False
Chart.DefaultAxis.TickLabelPadding = 10
Chart.XAxis.TickLabelPadding = 10
' Enable JSCharting
Chart.JS.Enabled = True
Chart.DefaultElement.ToolTip = "%XValue " & Constants.vbLf & " %Value"
Dim sc2 As SmartColor = New SmartColor(Color.Yellow, Color.Red, New ScaleRange(0, 60))
Chart.SmartPalette.Add("*", sc2)
swatchLabelV.Text += getVerticalSwatchHTML(New Size(20, 308), Chart.SmartPalette, 10, True)
' *DYNAMIC DATA NOTE*
' This sample uses random data to populate the chart. To populate
' a chart with database data see the following resources:
' - Use the getLiveData() method using the dataEngine to query a database.
' - Help File > Getting Started > Data Tutorials
' - DataEngine Class in the help file
' - Sample: features/DataEngine.aspx
Dim mySC As SeriesCollection = getRandomData()
' Add the random data.
Chart.SeriesCollection.Add(mySC)
End Sub
Function getRandomData() As SeriesCollection
Dim myR As Random = New Random(1)
Dim SC As SeriesCollection = New SeriesCollection()
Dim dt As DateTime = New DateTime(2022, 6, 2)
Dim s As Series = New Series("Series 1")
For b As Integer = 1 To 399
Dim e As Element = New Element()
dt = dt.AddDays(1)
e.XDateTime = dt
e.YValue = myR.Next(50)+10
s.Elements.Add(e)
Next b
SC.Add(s)
Return SC
End Function
Function getLiveData() As SeriesCollection
Dim de As DataEngine = New DataEngine("ConnectionString goes here")
de.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de.SqlStatement = "SELECT XAxisColumn, YAxisColumn FROM ...."
Return de.GetSeries()
End Function
Function getVerticalSwatchHTML(ByVal size As Size, ByVal sp As SmartPalette, ByVal divisions As Integer, ByVal withValues As Boolean) As String
Dim sb As StringBuilder = New StringBuilder()
' Get Maximum Value of the smart palette range
Dim max As Double = CDbl(sp.GetScaleRange("*").ValueHigh)
' Generate swatch string for each division.
sb.Append("<table cellpadding=""0"" cellspacing=""0"" style=""width: " & size.Width & "px; height: " & size.Height & "px;"">")
For i As Integer = divisions To 0 Step -1
' Get the color of the current division.
Dim color As String = getHTMLColor(sp.GetValueColor("", (i * (max / divisions))))
sb.Append("<tr><td style="" text-align: center; background-color: " & color & """>")
If withValues Then
sb.Append(CInt(Fix(i * (max / divisions))))
Else
sb.Append(" ")
End If
sb.Append("</td></tr>")
Next i
'return the swatch string.
sb.Append("</table>")
Return sb.ToString()
End Function
Function getHTMLColor(ByVal c As Color) As String
Return "#" & c.R.ToString("X2") + c.G.ToString("X2") + c.B.ToString("X2")
End Function
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</head><style type="text/css">
div, p
{
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
}
</style>
<body>
<div align="center">
<table>
<tr>
<td>
<div align="center">
<dnc:Chart ID="Chart" runat="server" />
</div>
</td>
<td style="border:0px solid red; vertical-align:top; padding-top:11px;">
<asp:Label ID="swatchLabelV" runat="server" />
</td>
</tr>
</table>
</div>
</body>
</html>
Previous