JS Mapping Bubble Thematic
Demonstrates using a bubble series on maps leveraging a point geoJSON map file.Chart.
<%@ Import Namespace="System.Drawing" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script runat="server">
void Page_Load(Object sender,EventArgs e)
{
// Demonstrates using a bubble series on maps leveraging a point geoJSON map file.
Chart.Type = ChartType.Map;//Horizontal;
Chart.Width = 600;
Chart.Height = 350;
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.LegendBox.Visible = false;
Chart.JS.Enabled = true;
Chart.JS.Mapping.BaseLayers = "US";
Chart.JS.Mapping.ReferenceLayers = "../../images/MapFiles/UsCapitals.json.txt";
Chart.ChartArea.Padding = 20;
Chart.SmartPalette.Add("*", new SmartColor(Color.Green, Color.Yellow, new ScaleRange(0, 100), ElementValue.ZValue));
Chart.SeriesCollection.Add(getMapData());
swatchLabel.Text += "<br>HTML Swatch with values<br>";
swatchLabel.Text += getSwatchHTML(300, Chart.SmartPalette, 10, true);
}
SeriesCollection getMapData()
{
string[] cities = new string[] { "Montpelier", "Dover", "Annapolis", "Carson City", "Little Rock", "Jefferson City", "Hartford", "Providence", "Springfield", "Frankfort", "Madison", "Trenton", "Lansing", "Lincoln", "Concord", "Columbus", "Albany", "Harrisburg", "Olympia", "Salem", "Topeka", "Baton Rouge", "Austin", "Montgomery", "Tallahassee", "Columbia", "Indianapolis", "Richmond", "Charleston", "Augusta", "Helena", "Bismarck", "Boise", "Sacramento", "Santa Fe", "Salt Lake City", "Cheyenne", "Des Moines", "Oklahoma City", "Pierre", "Jackson", "Raleigh", "Nashville", "Phoenix", "Boston", "Denver", "Atlanta" };
SeriesCollection SC = new SeriesCollection();
Series s = new Series();
s.Type = SeriesType.Bubble;
Random r = new Random();
foreach (string city in cities)
{
Element el = new Element();
el.JsMap = "UsCapitals." + city;
el.ZValue = r.Next(100);
s.Elements.Add(el);
}
SC.Add(s);
return SC;
}
string getSwatchHTML(int width, SmartPalette sp, int divisions, bool withValues)
{
StringBuilder sb = new StringBuilder();
// Get Maximum Value of the smart palette range
double max = (double)sp.GetScaleRange("*").ValueHigh;
int cellWidth = width / divisions;
// Generate swatch string for each division.
sb.Append("<table cellpadding=\"0\" cellspacing=\"0\" style=\"width: " + width + "px;margin-left:auto;margin-right:auto;\"><tr>");
for (int i = 0; i <= divisions; i++)
{
// Get the color of the current division.
string color = getHTMLColor(sp.GetValueColor("", (i * (max / divisions))));
sb.Append("<td style=\" text-align: center; width: " + cellWidth + "px; background-color: " + color + "\">");
if (withValues)
sb.Append((int)(i * (max / divisions)));
else
sb.Append(" ");
sb.Append("</td>");
}
//return the swatch string.
sb.Append("</tr></table>");
return sb.ToString();
}
string getHTMLColor(Color c)
{
return "#" + c.R.ToString("X2") + c.G.ToString("X2") + c.B.ToString("X2");
}
</script>
</head>
<body>
<div style="margin-left:auto;margin-right:auto;width:600px;">
<div align="center"> <asp:Label ID="swatchLabel" runat="server" />
<dotnet:Chart id="Chart" runat="server" Width="568px" Height="344px"></dotnet:Chart></div>
</div>
</body>
</html>
<%@ Import Namespace="System.Drawing" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<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 using a bubble series on maps leveraging a point geoJSON map file.
Chart.Type = ChartType.Map 'Horizontal;
Chart.Width = 600
Chart.Height = 350
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.LegendBox.Visible = False
Chart.JS.Enabled = True
Chart.JS.Mapping.BaseLayers = "US"
Chart.JS.Mapping.ReferenceLayers = "../../images/MapFiles/UsCapitals.json.txt"
Chart.ChartArea.Padding = 20
Chart.SmartPalette.Add("*", New SmartColor(Color.Green, Color.Yellow, New ScaleRange(0, 100), ElementValue.ZValue))
Chart.SeriesCollection.Add(getMapData())
swatchLabel.Text &= "<br>HTML Swatch with values<br>"
swatchLabel.Text += getSwatchHTML(300, Chart.SmartPalette, 10, True)
End Sub
Function getMapData() As SeriesCollection
Dim cities As String() = New String() { "Montpelier", "Dover", "Annapolis", "Carson City", "Little Rock", "Jefferson City", "Hartford", "Providence", "Springfield", "Frankfort", "Madison", "Trenton", "Lansing", "Lincoln", "Concord", "Columbus", "Albany", "Harrisburg", "Olympia", "Salem", "Topeka", "Baton Rouge", "Austin", "Montgomery", "Tallahassee", "Columbia", "Indianapolis", "Richmond", "Charleston", "Augusta", "Helena", "Bismarck", "Boise", "Sacramento", "Santa Fe", "Salt Lake City", "Cheyenne", "Des Moines", "Oklahoma City", "Pierre", "Jackson", "Raleigh", "Nashville", "Phoenix", "Boston", "Denver", "Atlanta" }
Dim SC As SeriesCollection = New SeriesCollection()
Dim s As Series = New Series()
s.Type = SeriesType.Bubble
Dim r As Random = New Random()
For Each city As String In cities
Dim el As Element = New Element()
el.JsMap = "UsCapitals." & city
el.ZValue = r.Next(100)
s.Elements.Add(el)
Next city
SC.Add(s)
Return SC
End Function
Function getSwatchHTML(ByVal width As Integer, 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)
Dim cellWidth As Integer = width / divisions
' Generate swatch string for each division.
sb.Append("<table cellpadding=""0"" cellspacing=""0"" style=""width: " & width & "px;margin-left:auto;margin-right:auto;""><tr>")
For i As Integer = 0 To divisions
' Get the color of the current division.
Dim color As String = getHTMLColor(sp.GetValueColor("", (i * (max / divisions))))
sb.Append("<td style="" text-align: center; width: " & cellWidth & "px; background-color: " & color & """>")
If withValues Then
sb.Append(CInt(Fix(i * (max / divisions))))
Else
sb.Append(" ")
End If
sb.Append("</td>")
Next i
'return the swatch string.
sb.Append("</tr></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>
</head>
<body>
<div style="margin-left:auto;margin-right:auto;width:600px;">
<div align="center"> <asp:Label ID="swatchLabel" runat="server" />
<dotnet:Chart id="Chart" runat="server" Width="568px" Height="344px"></dotnet:Chart></div>
</div>
</body>
</html>
Previous