Tree Map DB Multi Color Swatch
Demonstrates using a TreeMap chart with live data and a multi range color SmartPalette.
<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<script runat="server">
void Page_Load(Object sender, EventArgs e)
{
// Demonstrates using a TreeMap chart with live data and a multi range color SmartPalette.
Chart.Size = "600x450";
Chart.TempDirectory = "temp";
Chart.Debug = true;
Chart.Type = ChartType.TreeMap;
Chart.TitleBox.Position = TitleBoxPosition.FullWithLegend;
Chart.LegendBox.DefaultEntry.Visible = false;
// Series Label control
Chart.DefaultSeries.Box.Label.Color = Color.White;
Chart.DefaultSeries.Box.Label.Shadow.Color = Color.Black;
Chart.DefaultSeries.Box.Label.Shadow.Depth = 3;
Chart.DefaultSeries.Box.Label.Alignment = StringAlignment.Near;
Chart.DefaultSeries.Box.Label.LineAlignment = StringAlignment.Near;
Chart.DefaultSeries.Box.Label.Text = "Salaries (Total: <%YSum,Currency>)";
Chart.DefaultSeries.Box.Label.Font = new Font("Arial", 10,FontStyle.Bold);
//Element labels and tooltip
Chart.DefaultElement.ToolTip = "%Name";
Chart.DefaultElement.ShowValue = true;
Chart.DefaultElement.SmartLabel.Text = "%Name\n<%YValue,Currency>";
Chart.DefaultElement.SmartLabel.DynamicDisplay = false;
Chart.DefaultElement.SmartLabel.LineAlignment = StringAlignment.Center;
SeriesCollection mySC = getLiveData();
// Add the random data.
Chart.SeriesCollection.Add(mySC);
// Setup Rance colors
Chart.SmartPalette.Add("*", new SmartColor(Color.Green, Color.Yellow, new ScaleRange(0, 50000), ElementValue.YValue));
Chart.SmartPalette.Add("*", new SmartColor(Color.Yellow, Color.Red, new ScaleRange(50000, 100000), ElementValue.YValue));
Chart.TitleBox.Label.Text = getSwatch(480, Chart.SmartPalette, 10);
Chart.TitleBox.Padding = 2;
}
string getSwatch(int width, SmartPalette sp, int divisions)
{
string result = "";
string spacers = "";
int boxWidth = width / divisions;
double max = (double)sp.GetScaleRange("*").ValueHigh;
for (int i = 0; i <= divisions; i++)
{
spacers += "<Chart:Spacer size='" + boxWidth + "x1'>";
string color = getHTMLColor(sp.GetValueColor("", (i * (max / divisions))));
result += "<block hAlign='Center' bgColor='" + color + "' fColor='Black' fStyle='Regular' >" + (i * (max / divisions));
}
result = spacers + "<row>" + result;
return result;
}
string getHTMLColor(Color c)
{
return "#" + c.R.ToString("X2") + c.G.ToString("X2") + c.B.ToString("X2");
}
SeriesCollection getLiveData()
{
DataEngine de = new DataEngine(ConfigurationManager.AppSettings["DNCConnectionString"]);
de.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de.DataFields = "xAxis=name,yAxis=salary";
de.SqlStatement = @"SELECT * FROM Employees";//, YAxisColumn FROM ....";
return de.GetSeries();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</head>
<body>
<div align="center">
<dnc:Chart ID="Chart" runat="server" />
</div>
</body>
</html>
<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<script runat="server">
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates using a TreeMap chart with live data and a multi range color SmartPalette.
Chart.Size = "600x450"
Chart.TempDirectory = "temp"
Chart.Debug = True
Chart.Type = ChartType.TreeMap
Chart.TitleBox.Position = TitleBoxPosition.FullWithLegend
Chart.LegendBox.DefaultEntry.Visible = False
' Series Label control
Chart.DefaultSeries.Box.Label.Color = Color.White
Chart.DefaultSeries.Box.Label.Shadow.Color = Color.Black
Chart.DefaultSeries.Box.Label.Shadow.Depth = 3
Chart.DefaultSeries.Box.Label.Alignment = StringAlignment.Near
Chart.DefaultSeries.Box.Label.LineAlignment = StringAlignment.Near
Chart.DefaultSeries.Box.Label.Text = "Salaries (Total: <%YSum,Currency>)"
Chart.DefaultSeries.Box.Label.Font = New Font("Arial", 10,FontStyle.Bold)
'Element labels and tooltip
Chart.DefaultElement.ToolTip = "%Name"
Chart.DefaultElement.ShowValue = True
Chart.DefaultElement.SmartLabel.Text = "%Name" & Constants.vbLf & "<%YValue,Currency>"
Chart.DefaultElement.SmartLabel.DynamicDisplay = False
Chart.DefaultElement.SmartLabel.LineAlignment = StringAlignment.Center
Dim mySC As SeriesCollection = getLiveData()
' Add the random data.
Chart.SeriesCollection.Add(mySC)
' Setup Rance colors
Chart.SmartPalette.Add("*", New SmartColor(Color.Green, Color.Yellow, New ScaleRange(0, 50000), ElementValue.YValue))
Chart.SmartPalette.Add("*", New SmartColor(Color.Yellow, Color.Red, New ScaleRange(50000, 100000), ElementValue.YValue))
Chart.TitleBox.Label.Text = getSwatch(480, Chart.SmartPalette, 10)
Chart.TitleBox.Padding = 2
End Sub
Function getSwatch(ByVal width As Integer, ByVal sp As SmartPalette, ByVal divisions As Integer) As String
Dim result As String = ""
Dim spacers As String = ""
Dim boxWidth As Integer = width / divisions
Dim max As Double = CDbl(sp.GetScaleRange("*").ValueHigh)
For i As Integer = 0 To divisions
spacers &= "<Chart:Spacer size='" & boxWidth & "x1'>"
Dim color As String = getHTMLColor(sp.GetValueColor("", (i * (max / divisions))))
result &= "<block hAlign='Center' bgColor='" & color & "' fColor='Black' fStyle='Regular' >" & (i * (max / divisions))
Next i
result = spacers & "<row>" & result
Return result
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
Function getLiveData() As SeriesCollection
Dim de As DataEngine = New DataEngine(ConfigurationManager.AppSettings("DNCConnectionString"))
de.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de.DataFields = "xAxis=name,yAxis=salary"
de.SqlStatement = "SELECT * FROM Employees" ', YAxisColumn FROM....";
Return de.GetSeries()
End Function
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</head>
<body>
<div align="center">
<dnc:Chart ID="Chart" runat="server" />
</div>
</body>
</html>
Previous