JS Map With Pies
Demonstrates a map with pie microcharts.
<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script runat="server">
void Page_Load(Object sender, EventArgs e)
{
// Demonstrates a map with pie microcharts.
Chart.Type = ChartType.Map;
Chart.Width = 768;
Chart.Height = 444;
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.TitleBox.Label.Text = "Mean travel time to work (minutes)";
Chart.TitleBox.Label.Font = new Font("Arial", 12, FontStyle.Regular);
Chart.TitleBox.Position = TitleBoxPosition.Center;
Chart.TitleBox.Label.Alignment = StringAlignment.Center;
Chart.DefaultElement.ToolTip = "%name:<br><Chart:Pie size=25 verticalAlign=middle outline=2 margin=2 values=%zValue,60-%zValue colors=#1e4960,#1e4960,white><b>%zValue</b> minutes";
Chart.DefaultElement.SmartLabel.Text = "<Chart:Pie size=30 verticalAlign=middle outline=2 margin=2 values=%zValue,60-%zValue colors=#1e4960,#1e4960,white>";
Chart.DefaultElement.ShowValue = true;
Chart.JS.Settings.Add("defaultTooltip.fill", "#607D8B");
Chart.JS.Settings.Add("defaultTooltip.label_style_color", "white");
Chart.ChartArea.ClearColors();
Chart.LegendBox.ClearColors();
Chart.JS.Enabled = true;
Chart.JS.ControlID = "myJSC";
Chart.JS.AxisToZoom = ""; //disable zooming
Chart.JS.Settings.Add("palette.pointValue", "'{%zValue:n1}%'");
Chart.SmartPalette.Add("*", new SmartColor(ColorTranslator.FromHtml("#d1eeea"), ColorTranslator.FromHtml("#2a5674"), new ScaleRange(15, 35), ElementValue.ZValue));
Chart.SeriesCollection.Add(getMapData());
}
SeriesCollection getMapData()
{
//Load US map
SeriesCollection SC = new SeriesCollection();
Series s = new Series();
s.JsMap = "US";
//Add custom data
DataEngine de = new DataEngine();
de.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/mean-travel-time-to-work.csv";
de.DataFields = "zValue=time,name=State";//cvs must have header: date,total
SeriesCollection sc = de.GetSeries();
foreach (Element el in sc[0].Elements)
s.Elements.Add(getElement("US." + el.Name, el.ZValue));
SC.Add(s);
return SC;
}
Element getElement(string code, double zVal)
{
Element el = new Element();
el.JsMap = code;
el.ZValue = zVal;
return el;
}
</script>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</div>
</body>
</html>
<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<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 a map with pie microcharts.
Chart.Type = ChartType.Map
Chart.Width = 768
Chart.Height = 444
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.TitleBox.Label.Text = "Mean travel time to work (minutes)"
Chart.TitleBox.Label.Font = New Font("Arial", 12, FontStyle.Regular)
Chart.TitleBox.Position = TitleBoxPosition.Center
Chart.TitleBox.Label.Alignment = StringAlignment.Center
Chart.DefaultElement.ToolTip = "%name:<br><Chart:Pie size=25 verticalAlign=middle outline=2 margin=2 values=%zValue,60-%zValue colors=#1e4960,#1e4960,white><b>%zValue</b> minutes"
Chart.DefaultElement.SmartLabel.Text = "<Chart:Pie size=30 verticalAlign=middle outline=2 margin=2 values=%zValue,60-%zValue colors=#1e4960,#1e4960,white>"
Chart.DefaultElement.ShowValue = True
Chart.JS.Settings.Add("defaultTooltip.fill", "#607D8B")
Chart.JS.Settings.Add("defaultTooltip.label_style_color", "white")
Chart.ChartArea.ClearColors()
Chart.LegendBox.ClearColors()
Chart.JS.Enabled = True
Chart.JS.ControlID = "myJSC"
Chart.JS.AxisToZoom = "" 'disable zooming
Chart.JS.Settings.Add("palette.pointValue", "'{%zValue:n1}%'")
Chart.SmartPalette.Add("*", New SmartColor(ColorTranslator.FromHtml("#d1eeea"), ColorTranslator.FromHtml("#2a5674"), New ScaleRange(15, 35), ElementValue.ZValue))
Chart.SeriesCollection.Add(getMapData())
End Sub
Function getMapData() As SeriesCollection
'Load US map
Dim SC As SeriesCollection = New SeriesCollection()
Dim s As Series = New Series()
s.JsMap = "US"
'Add custom data
Dim de As DataEngine = New DataEngine()
de.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/mean-travel-time-to-work.csv"
de.DataFields = "zValue=time,name=State" 'cvs must have header: date,total
'INSTANT VB NOTE: The variable sc was renamed since Visual Basic will not allow local variables with the same name as parameters or other local variables:
Dim sc_Renamed As SeriesCollection = de.GetSeries()
For Each el As Element In sc_Renamed(0).Elements
s.Elements.Add(getElement("US." & el.Name, el.ZValue))
Next el
SC.Add(s)
Return SC
End Function
Function getElement(ByVal code As String, ByVal zVal As Double) As Element
Dim el As Element = New Element()
el.JsMap = code
el.ZValue = zVal
Return el
End Function
</script>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</div>
</body>
</html>
Previous