Gallery

Gallery > Heatmap Charts

JS Waffle Chart

Demonstrates Waffle chart created using multiple heatmap charts.

Download Show C# Code Show VB Code

<%@ Page Language="C#" Description="dotnetCHARTING Component" %>

<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Collections.Generic" %>
<script runat="server">
// Demonstrates Waffle chart created using multiple heatmap charts.
Dictionary<string, int> openWith = new Dictionary<string, int>();
int total = 0;
void Page_Load(Object sender, EventArgs e)
{
openWith.Add("White<br>Alone", 250139096);
openWith.Add("Black<br>Alone", 43804319);
openWith.Add("American Indian or Alaska Native Alone", 4147521);
openWith.Add("Asian<br>Alone", 19330600);
openWith.Add("Hawaiian and Other Pacific Islander Alone", 799418);
openWith.Add("Two or More<br>Race Groups", 8946480);
foreach (KeyValuePair<string, int> author in openWith)
total += author.Value;

setChartDefault(chart1);
setChartDefault(chart2);
setChartDefault(chart3);
setChartDefault(chart4);
setChartDefault(chart5);
setChartDefault(chart6);

setChartData(chart1, "White<br>Alone");
setChartData(chart2, "Black<br>Alone");
setChartData(chart3, "American Indian or Alaska Native Alone");
setChartData(chart4, "Asian<br>Alone");
setChartData(chart5, "Hawaiian and Other Pacific Islander Alone");
setChartData(chart6, "Two or More<br>Race Groups");
}
void setChartData(Chart c, string name)
{
c.Title = name;

double p = (double)openWith[name];
double d = (p / ((double)total)) * 100;
int percent = (int)Math.Round(d, 0);

string label = "<span style='fontWeight:bold;font-size:18px;'>";
label += openWith[name].ToString("n0");
label += "</span><br><span style='fontWeight:bold;'>(";
label += d.ToString("n2");
label += "%)</span>";

//adding label
Annotation an = new Annotation(label);
an.Position = new Point(0, 40);
an.Label.Alignment = StringAlignment.Center;
an.Label.LineAlignment = StringAlignment.Center;
an.Label.OutlineColor = Color.White;
an.Size = new Size(new Point(186, 150));
an.DynamicSize = false;
an.Background.Color = Color.Transparent;
an.Line.Color = Color.Transparent;
c.Annotations.Add(an);

c.SeriesCollection.Add(generateData(percent));
}
void setChartDefault(Chart c)
{
c.Type = ChartType.Heatmap;
c.LegendBox.Visible = false;
// Set the chart size.
c.Width = 200;
c.Height = 200;

// Enable JSCharting
c.JS.Enabled = true;
c.Debug = true;

//Set the directory where the related JSC files will be created and stored.
c.TempDirectory = "temp";

c.DefaultSeries.DefaultElement.ToolTip = "";
c.DefaultSeries.DefaultElement.Outline.Color = Color.White;
c.DefaultSeries.DefaultElement.Outline.Width = 2;
c.DefaultSeries.DefaultElement.Transparency = 0;
c.YAxis.DefaultTick.Label.Text = "";
c.YAxis.DefaultTick.Line.Visible = false;
c.XAxis.DefaultTick.Label.Text = "";
c.XAxis.DefaultTick.Line.Visible = false;
c.SmartPalette = SmartPalette.FromColorsRange(ElementValue.ZValue, new ScaleRange(0,1),new Color[] { ColorTranslator.FromHtml("#EEEEEE"), ColorTranslator.FromHtml("#D1C4E9") });

//Provides additional performance boost by omitting hover state computations.
c.JS.Settings.Add("defaultSeries.mouseTracking_enabled", "false");
}
Series generateData(int percent)
{
int xCount = 10;
int yCount = 10;
Series ser = new Series();

for (int x = 0; x < xCount; x++)
{
for (int y = 0; y < yCount; y++)
{
int cellNumber = ((9 - y) * 10) + (10 - x);
Element element = new Element();
element.XValue = x;
element.YValue = y;
if ((100 - percent) < cellNumber){
element.ZValue = 1;
}else{
element.ZValue = 0;
}
ser.Elements.Add(element);
}
}
return ser;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gallery Sample</title>
<style type="text/css">
#waffleWrapper {
max-width: 600px;
margin: 0px auto;
justify-content: space-around;
display: flex;
flex-wrap: wrap;
}

#waffleWrapper p {
font-size: 14px;
font-family: tahoma, geneva, sans-serif;
font-weight: bold;
text-align: center;
width: 100%;
color: #212121;
}

.chart {
width: 180px;
height: 220px;
}
</style>
</head>
<body>
<div align="center">
<div id="waffleWrapper">
<p style="font-size: 20px; font-family: tahoma, geneva, sans-serif; color: black">US Population by Race</p>
<dnc:Chart runat="server" TempDirectory="temp" Size="200x200" class="chart" ID="chart1" />
<dnc:Chart runat="server" TempDirectory="temp" Size="200x200" class="chart" ID="chart2" />
<dnc:Chart runat="server" TempDirectory="temp" Size="200x200" class="chart" ID="chart3" />
<dnc:Chart runat="server" TempDirectory="temp" Size="200x200" class="chart" ID="chart4" />
<dnc:Chart runat="server" TempDirectory="temp" Size="200x200" class="chart" ID="chart5" />
<dnc:Chart runat="server" TempDirectory="temp" Size="200x200" class="chart" ID="chart6" Style="padding-left: 3px" />
</div>
</div>
</body>
</html>

<%@ Page Language="vb" Description="dotnetCHARTING Component" %>

<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Collections.Generic" %>
<script runat="server">
' Demonstrates Waffle chart created using multiple heatmap charts.
Dim openWith As Dictionary(Of String, Integer) = New Dictionary(Of String, Integer)()
Dim total As Integer = 0
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
openWith.Add("White<br>Alone", 250139096)
openWith.Add("Black<br>Alone", 43804319)
openWith.Add("American Indian or Alaska Native Alone", 4147521)
openWith.Add("Asian<br>Alone", 19330600)
openWith.Add("Hawaiian and Other Pacific Islander Alone", 799418)
openWith.Add("Two or More<br>Race Groups", 8946480)
For Each author As KeyValuePair(Of String, Integer) In openWith
total += author.Value
Next author

setChartDefault(chart1)
setChartDefault(chart2)
setChartDefault(chart3)
setChartDefault(chart4)
setChartDefault(chart5)
setChartDefault(chart6)

setChartData(chart1, "White<br>Alone")
setChartData(chart2, "Black<br>Alone")
setChartData(chart3, "American Indian or Alaska Native Alone")
setChartData(chart4, "Asian<br>Alone")
setChartData(chart5, "Hawaiian and Other Pacific Islander Alone")
setChartData(chart6, "Two or More<br>Race Groups")
End Sub
Sub setChartData(ByVal c As Chart, ByVal name As String)
c.Title = name

Dim p As Double = CDbl(openWith(name))
Dim d As Double = (p / (CDbl(total))) * 100
Dim percent As Integer = CInt(Fix(Math.Round(d, 0)))

Dim label As String = "<span style='fontWeight:bold;font-size:18px;'>"
label &= openWith(name).ToString("n0")
label &= "</span><br><span style='fontWeight:bold;'>("
label &= d.ToString("n2")
label &= "%)</span>"

'adding label
Dim an As Annotation = New Annotation(label)
an.Position = New Point(0, 40)
an.Label.Alignment = StringAlignment.Center
an.Label.LineAlignment = StringAlignment.Center
an.Label.OutlineColor = Color.White
an.Size = New Size(New Point(186, 150))
an.DynamicSize = False
an.Background.Color = Color.Transparent
an.Line.Color = Color.Transparent
c.Annotations.Add(an)

c.SeriesCollection.Add(generateData(percent))
End Sub
Sub setChartDefault(ByVal c As Chart)
c.Type = ChartType.Heatmap
c.LegendBox.Visible = False
' Set the chart size.
c.Width = 200
c.Height = 200

' Enable JSCharting
c.JS.Enabled = True
c.Debug = True

'Set the directory where the related JSC files will be created and stored.
c.TempDirectory = "temp"

c.DefaultSeries.DefaultElement.ToolTip = ""
c.DefaultSeries.DefaultElement.Outline.Color = Color.White
c.DefaultSeries.DefaultElement.Outline.Width = 2
c.DefaultSeries.DefaultElement.Transparency = 0
c.YAxis.DefaultTick.Label.Text = ""
c.YAxis.DefaultTick.Line.Visible = False
c.XAxis.DefaultTick.Label.Text = ""
c.XAxis.DefaultTick.Line.Visible = False
c.SmartPalette = SmartPalette.FromColorsRange(ElementValue.ZValue, New ScaleRange(0,1),New Color() { ColorTranslator.FromHtml("#EEEEEE"), ColorTranslator.FromHtml("#D1C4E9") })

'Provides additional performance boost by omitting hover state computations.
c.JS.Settings.Add("defaultSeries.mouseTracking_enabled", "false")
End Sub
Function generateData(ByVal percent As Integer) As Series
Dim xCount As Integer = 10
Dim yCount As Integer = 10
Dim ser As Series = New Series()

For x As Integer = 0 To xCount - 1
For y As Integer = 0 To yCount - 1
Dim cellNumber As Integer = ((9 - y) * 10) + (10 - x)
Dim element As Element = New Element()
element.XValue = x
element.YValue = y
If (100 - percent) < cellNumber Then
element.ZValue = 1
Else
element.ZValue = 0
End If
ser.Elements.Add(element)
Next y
Next x
Return ser
End Function
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gallery Sample</title>
<style type="text/css">
#waffleWrapper {
max-width: 600px;
margin: 0px auto;
justify-content: space-around;
display: flex;
flex-wrap: wrap;
}

#waffleWrapper p {
font-size: 14px;
font-family: tahoma, geneva, sans-serif;
font-weight: bold;
text-align: center;
width: 100%;
color: #212121;
}

.chart {
width: 180px;
height: 220px;
}
</style>
</head>
<body>
<div align="center">
<div id="waffleWrapper">
<p style="font-size: 20px; font-family: tahoma, geneva, sans-serif; color: black">US Population by Race</p>
<dnc:Chart runat="server" TempDirectory="temp" Size="200x200" class="chart" ID="chart1" />
<dnc:Chart runat="server" TempDirectory="temp" Size="200x200" class="chart" ID="chart2" />
<dnc:Chart runat="server" TempDirectory="temp" Size="200x200" class="chart" ID="chart3" />
<dnc:Chart runat="server" TempDirectory="temp" Size="200x200" class="chart" ID="chart4" />
<dnc:Chart runat="server" TempDirectory="temp" Size="200x200" class="chart" ID="chart5" />
<dnc:Chart runat="server" TempDirectory="temp" Size="200x200" class="chart" ID="chart6" Style="padding-left: 3px" />
</div>
</div>
</body>
</html>

Sample FilenameJsWaffleChart.aspx
Version10.1
Uses DatabaseNo

JS Charting

Gallery

JS Waffle Chart