Gallery
PreviousJS Radar Arcs Congress
<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Collections.Generic" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script runat="server">
void Page_Load(Object sender, EventArgs e)
{
// Demonstrates Radar chart used to display US senate and house demographics.
setDefaults(senateChart);
setDefaults(houseChart);
senateChart.LegendBox.Orientation = dotnetCHARTING.Orientation.Top;
senateChart.DefaultElement.Marker.Size = 20;
senateChart.JS.RenderCallback = "updateSenate";
Annotation an = new Annotation("Senate");
an.Label.Font = new Font("Tahoma",18, FontStyle.Regular);
an.Position = new Point(315, 300);
an.ClearColors();
senateChart.Annotations.Add(an);
senateChart.YAxis.ScaleRange.ValueLow = -6;
senateChart.YAxis.ScaleRange.ValueHigh = 5;
senateChart.JS.Settings.Add("defaultSeries_mouseTracking_enabled", "false");
senateChart.JS.Settings.Add("defaultSeries_shape_size", "390");
senateChart.JS.Settings.Add("defaultSeries_angle_sweep", "180");
senateChart.JS.Settings.Add("defaultSeries_angle_start", "-180");
houseChart.LegendBox.Orientation = dotnetCHARTING.Orientation.Bottom;
houseChart.DefaultElement.Marker.Size = 14;
houseChart.JS.RenderCallback = "updateHouse";
Annotation an2 = new Annotation("House");
an2.Label.Font = new Font("Tahoma",18, FontStyle.Regular);
an2.Position = new Point(315, 35);
an2.ClearColors();
houseChart.Annotations.Add(an2);
houseChart.YAxis.ScaleRange.ValueLow = -8;
houseChart.YAxis.ScaleRange.ValueHigh = 15;
houseChart.JS.Settings.Add("defaultSeries_mouseTracking_enabled", "false");
houseChart.JS.Settings.Add("defaultSeries_shape_padding", "160");
houseChart.JS.Settings.Add("defaultSeries_angle_sweep", "180");
houseChart.JS.Settings.Add("defaultSeries_angle_start", "0");
getData();
getHouseData();
}
void setDefaults(Chart chartObj)
{
chartObj.Type = ChartType.Radar;
chartObj.DefaultSeries.Type = SeriesType.Marker;
chartObj.TempDirectory = "temp";
chartObj.Debug = true;
chartObj.LegendBox.Template = "%icon %name: (<b>%pointCount</b>)";
chartObj.JS.Enabled = true;
chartObj.ChartArea.ClearColors();
chartObj.DefaultAxis.Clear();
chartObj.DefaultElement.Marker.Type = ElementMarkerType.Circle;
chartObj.DefaultElement.Outline.Color = Color.Empty;
chartObj.DefaultElement.Transparency = 1;
}
void getData()
{
Dictionary<string, Dictionary<string, object[]>> senateData = new Dictionary<string, Dictionary<string, object[]>>();
Dictionary<string, object[]> party = new Dictionary<string, object[]>();
party.Add("categories", new string[] {"Republicans", "Democrats", "Independents"});
party.Add("values", new object[] { 52, 46, 2 });
party.Add("colors", new string[] {"#D32F2F", "#1976D2", "#dddecc" });
Dictionary<string, object[]> gender = new Dictionary<string, object[]>();
gender.Add("categories", new string[] {"Women", "Men"});
gender.Add("values", new object[] {25, 75 });
gender.Add("colors", new string[] {"#EF5350", "#42A5F5" });
Dictionary<string, object[]> age = new Dictionary<string, object[]>();
age.Add("categories", new string[] {"40-49", "50-59", "60-69", "70-79", "80+"});
age.Add("values", new object[] { 12, 19, 38, 24, 7});
age.Add("colors", new string[] {"#FFA000", "#FFEE58", "#8BC34A", "#009688", "#006064" });
SeriesCollection sc = makeSeries(age, 5,"age");
senateChart.SeriesCollection.Add(sc);
SeriesCollection sc2 = makeSeries(gender, 5,"gender");
senateChart.SeriesCollection.Add(sc2);
SeriesCollection sc3 = makeSeries(party, 5,"party");
senateChart.SeriesCollection.Add(sc3);
}
void getHouseData()
{
Dictionary<string, Dictionary<string, object[]>> senateData = new Dictionary<string, Dictionary<string, object[]>>();
Dictionary<string, object[]> party = new Dictionary<string, object[]>();
party.Add("categories", new string[] {"Republicans", "Democrats", "Independents", "Libertarians", "Vacant"});
party.Add("values", new object[] { 195, 233, 1, 1, 5});
party.Add("colors", new string[] {"#D32F2F", "#1976D2", "#dddecc", "#fed300", "#ffffff" });
Dictionary<string, object[]> gender = new Dictionary<string, object[]>();
gender.Add("categories", new string[] {"Women", "Men", "Vacant"});
gender.Add("values", new object[] {101, 329, 5 });
gender.Add("colors", new string[] {"#EF5350", "#42A5F5", "#ffffff"});
Dictionary<string, object[]> age = new Dictionary<string, object[]>();
age.Add("categories", new string[] {"30-39", "40-49", "50-59", "60-69", "70-79", "80+", "Vacant"});
age.Add("values", new object[] { 25, 81, 112, 127, 73, 12, 5});
age.Add("colors", new string[] {"#FF7043", "#FFA000", "#FFEE58", "#8BC34A", "#009688", "#006064", "#ffffff" });
SeriesCollection sc = makeSeries(age, 15,"age");
houseChart.SeriesCollection.Add(sc);
SeriesCollection sc2 = makeSeries(gender, 15, "gender");
houseChart.SeriesCollection.Add(sc2);
SeriesCollection sc3 = makeSeries(party, 15,"party");
houseChart.SeriesCollection.Add(sc3);
}
SeriesCollection makeSeries(Dictionary<string, object[]> data, int chartHeight, string id)
{
SeriesCollection sc = new SeriesCollection();
int sum = 0;
List<List<int>> ranges = new List<List<int>>();
int dataIndex = 0;
foreach (var item in data)
{
if (item.Key == "values")
{
foreach (var years in item.Value)
{
Series ages = new Series();
ages.JsID = id;
ages.Name = data["categories"][dataIndex].ToString();
ages.DefaultElement.Color = ColorTranslator.FromHtml(data["colors"].GetValue(dataIndex).ToString());
sc.Add(ages);
List<int> range = new List<int>();
range.Add(sum + 1);
sum += Convert.ToInt16(item.Value[dataIndex].ToString());
range.Add(sum);
ranges.Add(range);
dataIndex++;
}
}
}
for (int i = 0; i < Math.Ceiling((decimal)(sum / chartHeight)); i++)//20
{
for (int j = 0; j < chartHeight; j++)//5
{
int index = i + j + (chartHeight - 1) * i;
int seriesIndex = mapValue(ranges, index + 1);
if (index <= sum - 1)
{
Element el = new Element();
el.YValue = j;
el.XValue = i;
sc[seriesIndex].Elements.Add(el);
}
}
}
return sc;
}
int mapValue(List<List<int>> ranges, int value)
{
int result = 0;
int index = 0;
foreach(var item in ranges)
{
//object first = item[0];
if (value >= item[0] && value <= item[1])
return index;
index++;
}
return result;
}
</script>
<script type="text/javascript">
var chartSenate;
var chartHouse;
function updateSenate(c) {
chartSenate = c;
}
function updateHouse(c) {
chartHouse = c;
toggleSeries("age");
}
function clicked(v) {
x = document.querySelectorAll("a");
for (i = 0; i < x.length; i++) {
x[i].className = "";
}
var a = document.getElementById(v.id);
a.className = "active";
toggleSeries(v.id);
}
function toggleSeries(id) {
for (let i = 0; i < chartSenate.seriesCount; i++) {
var s1 = chartSenate.series(i);
if (s1.userOptions["id"] == id) {
chartSenate.series(i).options({ visible: true, legendEntry_visible:true }, false);
}
else {
chartSenate.series(i).options({ visible: false,legendEntry_visible:false }, false);
}
}
chartSenate.redraw();
for (let i = 0; i < chartHouse.seriesCount; i++) {
var s1 = chartHouse.series(i);
if (s1.userOptions["id"] == id) {
chartHouse.series(i).options({ visible: true, legendEntry_visible:true }, false);
}
else {
chartHouse.series(i).options({ visible: false, legendEntry_visible:false }, false);
}
}
chartHouse.redraw();
}
</script>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color:ghostwhite;
font-family:Tahoma;
font-size:18px;
color:darkgray;
}
li {
float: left;
cursor: pointer;
}
li a {
display: block;
color: darkgray;
text-align: center;
padding: 12px 16px;
text-decoration: none;
width:60px;
}
li a:hover {
background-color:white;
cursor:pointer !important;
}
.active
{
color:black;
}
</style>
</head>
<body>
<div align="center">
<label style="font-family:Tahoma;font-size:20px;" >Demographics of the 116th United States Congress</label>
<div style="width:276px;">
<ul>
<li><a id="party" onclick="return clicked(this)">Party</a></li>
<li><a id="gender" onclick="return clicked(this)">Gender</a></li>
<li><a id="age" class="active" onclick="return clicked(this)">Age</a></li>
</ul>
</div>
<dotnet:Chart ID="senateChart" Width="720" height="380" runat="server" />
<dotnet:Chart ID="houseChart" Width="720" height="500" runat="server" />
</div>
</body>
</html>
<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Collections.Generic" %>
<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 Radar chart used to display US senate and house demographics.
setDefaults(senateChart)
setDefaults(houseChart)
senateChart.LegendBox.Orientation = dotnetCHARTING.Orientation.Top
senateChart.DefaultElement.Marker.Size = 20
senateChart.JS.RenderCallback = "updateSenate"
Dim an As Annotation = New Annotation("Senate")
an.Label.Font = New Font("Tahoma", 18, FontStyle.Regular)
an.Position = New Point(315, 300)
an.ClearColors()
senateChart.Annotations.Add(an)
senateChart.YAxis.ScaleRange.ValueLow = -6
senateChart.YAxis.ScaleRange.ValueHigh = 5
senateChart.JS.Settings.Add("defaultSeries_mouseTracking_enabled", "false")
senateChart.JS.Settings.Add("defaultSeries_shape_size", "390")
senateChart.JS.Settings.Add("defaultSeries_angle_sweep", "180")
senateChart.JS.Settings.Add("defaultSeries_angle_start", "-180")
houseChart.LegendBox.Orientation = dotnetCHARTING.Orientation.Bottom
houseChart.DefaultElement.Marker.Size = 14
houseChart.JS.RenderCallback = "updateHouse"
Dim an2 As Annotation = New Annotation("House")
an2.Label.Font = New Font("Tahoma", 18, FontStyle.Regular)
an2.Position = New Point(315, 35)
an2.ClearColors()
houseChart.Annotations.Add(an2)
houseChart.YAxis.ScaleRange.ValueLow = -8
houseChart.YAxis.ScaleRange.ValueHigh = 15
houseChart.JS.Settings.Add("defaultSeries_mouseTracking_enabled", "false")
houseChart.JS.Settings.Add("defaultSeries_shape_padding", "160")
houseChart.JS.Settings.Add("defaultSeries_angle_sweep", "180")
houseChart.JS.Settings.Add("defaultSeries_angle_start", "0")
getData()
getHouseData()
End Sub
Private Sub setDefaults(ByVal chartObj As Chart)
chartObj.Type = ChartType.Radar
chartObj.DefaultSeries.Type = SeriesType.Marker
chartObj.TempDirectory = "temp"
chartObj.Debug = True
chartObj.LegendBox.Template = "%icon %name: (<b>%pointCount</b>)"
chartObj.JS.Enabled = True
chartObj.ChartArea.ClearColors()
chartObj.DefaultAxis.Clear()
chartObj.DefaultElement.Marker.Type = ElementMarkerType.Circle
chartObj.DefaultElement.Outline.Color = Color.Empty
chartObj.DefaultElement.Transparency = 1
End Sub
Private Sub getData()
Dim senateData As Dictionary(Of String, Dictionary(Of String, Object())) = New Dictionary(Of String, Dictionary(Of String, Object()))()
Dim party As Dictionary(Of String, Object()) = New Dictionary(Of String, Object())()
party.Add("categories", New String() {"Republicans", "Democrats", "Independents"})
party.Add("values", New Object() {52, 46, 2})
party.Add("colors", New String() {"#D32F2F", "#1976D2", "#dddecc"})
Dim gender As Dictionary(Of String, Object()) = New Dictionary(Of String, Object())()
gender.Add("categories", New String() {"Women", "Men"})
gender.Add("values", New Object() {25, 75})
gender.Add("colors", New String() {"#EF5350", "#42A5F5"})
Dim age As Dictionary(Of String, Object()) = New Dictionary(Of String, Object())()
age.Add("categories", New String() {"40-49", "50-59", "60-69", "70-79", "80+"})
age.Add("values", New Object() {12, 19, 38, 24, 7})
age.Add("colors", New String() {"#FFA000", "#FFEE58", "#8BC34A", "#009688", "#006064"})
Dim sc As SeriesCollection = makeSeries(age, 5, "age")
senateChart.SeriesCollection.Add(sc)
Dim sc2 As SeriesCollection = makeSeries(gender, 5, "gender")
senateChart.SeriesCollection.Add(sc2)
Dim sc3 As SeriesCollection = makeSeries(party, 5, "party")
senateChart.SeriesCollection.Add(sc3)
End Sub
Private Sub getHouseData()
Dim senateData As Dictionary(Of String, Dictionary(Of String, Object())) = New Dictionary(Of String, Dictionary(Of String, Object()))()
Dim party As Dictionary(Of String, Object()) = New Dictionary(Of String, Object())()
party.Add("categories", New String() {"Republicans", "Democrats", "Independents", "Libertarians", "Vacant"})
party.Add("values", New Object() {195, 233, 1, 1, 5})
party.Add("colors", New String() {"#D32F2F", "#1976D2", "#dddecc", "#fed300", "#ffffff"})
Dim gender As Dictionary(Of String, Object()) = New Dictionary(Of String, Object())()
gender.Add("categories", New String() {"Women", "Men", "Vacant"})
gender.Add("values", New Object() {101, 329, 5})
gender.Add("colors", New String() {"#EF5350", "#42A5F5", "#ffffff"})
Dim age As Dictionary(Of String, Object()) = New Dictionary(Of String, Object())()
age.Add("categories", New String() {"30-39", "40-49", "50-59", "60-69", "70-79", "80+", "Vacant"})
age.Add("values", New Object() {25, 81, 112, 127, 73, 12, 5})
age.Add("colors", New String() {"#FF7043", "#FFA000", "#FFEE58", "#8BC34A", "#009688", "#006064", "#ffffff"})
Dim sc As SeriesCollection = makeSeries(age, 15, "age")
houseChart.SeriesCollection.Add(sc)
Dim sc2 As SeriesCollection = makeSeries(gender, 15, "gender")
houseChart.SeriesCollection.Add(sc2)
Dim sc3 As SeriesCollection = makeSeries(party, 15, "party")
houseChart.SeriesCollection.Add(sc3)
End Sub
Private Function makeSeries(ByVal data As Dictionary(Of String, Object()), ByVal chartHeight As Integer, ByVal id As String) As SeriesCollection
Dim sc As SeriesCollection = New SeriesCollection()
Dim sum As Integer = 0
Dim ranges As List(Of List(Of Integer)) = New List(Of List(Of Integer))()
Dim dataIndex As Integer = 0
For Each item In data
If item.Key = "values" Then
For Each years In item.Value
Dim ages As Series = New Series()
ages.JsID = id
ages.Name = data("categories")(dataIndex).ToString()
ages.DefaultElement.Color = ColorTranslator.FromHtml(data("colors").GetValue(dataIndex).ToString())
sc.Add(ages)
Dim range As List(Of Integer) = New List(Of Integer)()
range.Add(sum + 1)
sum += Convert.ToInt16(item.Value(dataIndex).ToString())
range.Add(sum)
ranges.Add(range)
dataIndex += 1
Next
End If
Next
For i As Integer = 0 To Math.Ceiling(CDec((sum / chartHeight))) - 1
For j As Integer = 0 To chartHeight - 1
Dim index As Integer = i + j + (chartHeight - 1) * i
Dim seriesIndex As Integer = mapValue(ranges, index + 1)
If index <= sum - 1 Then
Dim el As Element = New Element()
el.YValue = j
el.XValue = i
sc(seriesIndex).Elements.Add(el)
End If
Next
Next
Return sc
End Function
Private Function mapValue(ByVal ranges As List(Of List(Of Integer)), ByVal value As Integer) As Integer
Dim result As Integer = 0
Dim index As Integer = 0
For Each item In ranges
If value >= item(0) AndAlso value <= item(1) Then Return index
index += 1
Next
Return result
End Function
</script>
<script type="text/javascript">
var chartSenate;
var chartHouse;
function updateSenate(c) {
chartSenate = c;
}
function updateHouse(c) {
chartHouse = c;
toggleSeries("age");
}
function clicked(v) {
x = document.querySelectorAll("a");
for (i = 0; i < x.length; i++) {
x[i].className = "";
}
var a = document.getElementById(v.id);
a.className = "active";
toggleSeries(v.id);
}
function toggleSeries(id) {
for (let i = 0; i < chartSenate.seriesCount; i++) {
var s1 = chartSenate.series(i);
if (s1.userOptions["id"] == id) {
chartSenate.series(i).options({ visible: true, legendEntry_visible:true }, false);
}
else {
chartSenate.series(i).options({ visible: false,legendEntry_visible:false }, false);
}
}
chartSenate.redraw();
for (let i = 0; i < chartHouse.seriesCount; i++) {
var s1 = chartHouse.series(i);
if (s1.userOptions["id"] == id) {
chartHouse.series(i).options({ visible: true, legendEntry_visible:true }, false);
}
else {
chartHouse.series(i).options({ visible: false, legendEntry_visible:false }, false);
}
}
chartHouse.redraw();
}
</script>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: ghostwhite;
font-family: Tahoma;
font-size: 18px;
color: darkgray;
}
li {
float: left;
cursor: pointer;
}
li a {
display: block;
color: darkgray;
text-align: center;
padding: 12px 16px;
text-decoration: none;
width: 60px;
}
li a:hover {
background-color: white;
cursor: pointer !important;
}
.active {
color: black;
}
</style>
</head>
<body>
<div align="center">
<label style="font-family: Tahoma; font-size: 20px;">Demographics of the 116th United States Congress</label>
<div style="width: 276px;">
<ul>
<li><a id="party" onclick="return clicked(this)">Party</a></li>
<li><a id="gender" onclick="return clicked(this)">Gender</a></li>
<li><a id="age" class="active" onclick="return clicked(this)">Age</a></li>
</ul>
</div>
<dotnet:Chart ID="senateChart" Width="720" Height="380" runat="server" />
<dotnet:Chart ID="houseChart" Width="720" Height="500" runat="server" />
</div>
</body>
</html>
- Sample FilenameJsRadarArcsCongress.aspx
- Version10.3
- Uses DatabaseNo