[Windows Forms - C# version] NetWinCharts\CSharpWinCharts\heatmapcellsymbols.cs
using System;
using ChartDirector;
namespace CSharpChartExplorer
{
public class heatmapcellsymbols : DemoModule
{
//Name of demo module
public string getName() { return "Heat Map Cell Symbols"; }
//Number of charts produced in this demo module
public int getNoOfCharts() { return 1; }
//Main code for creating chart.
//Note: the argument chartIndex is unused because this demo only has 1 chart.
public void createChart(WinChartViewer viewer, int chartIndex)
{
// The x-axis and y-axis labels
string[] xLabels = {"Alpha", "Beta", "Gamma", "Delta", "Epsilon", "Zeta", "Eta",
"Theta", "Iota", "Kappa"};
string[] yLabels = {"Ant", "Bear", "Cat", "Dog", "Elephant", "Fox", "Goat", "Horse",
"Insect", "Jellyfish"};
// Random data for the 10 x 10 cells
RanSeries rand = new RanSeries(2);
double[] zData = rand.getSeries(xLabels.Length * yLabels.Length, 0, 10);
// The coordinates for the first set of scatter symbols
double[] symbolX = {2.5, 6.5, 3.5, 8.5};
double[] symbolY = {4.5, 7.5, 9.5, 8.5};
// The coordinates for the second set of scatter symbols
double[] symbol2X = {6.5, 3.5, 7.5, 1.5};
double[] symbol2Y = {0.5, 7.5, 3.5, 2.5};
// Create an XYChart object of size 600 x 500 pixels.
XYChart c = new XYChart(600, 500);
// Set the plotarea at (80, 80) and of size 400 x 400 pixels. Set the background,
// border, and grid lines to transparent.
PlotArea p = c.setPlotArea(80, 80, 400, 400, -1, -1, Chart.Transparent,
Chart.Transparent);
// Add the first set of scatter symbols. Use grey (0x555555) cross shape symbols.
c.addScatterLayer(symbolX, symbolY, "Disputed", Chart.Cross2Shape(0.2), 15, 0x555555
).setHTMLImageMap("{disable}");
// Add the first set of scatter symbols. Use yellow (0xffff66) star shape symbols.
c.addScatterLayer(symbol2X, symbol2Y, "Audited", Chart.StarShape(5), 19, 0xffff66
).setHTMLImageMap("{disable}");
// Create a discrete heat map with 10 x 10 cells
DiscreteHeatMapLayer layer = c.addDiscreteHeatMapLayer(zData, xLabels.Length);
// Set the x-axis labels. Use 10pt Arial Bold font rotated by 90 degrees. Set axis stem
// to transparent, so only the labels are visible. Set 0.5 offset to position the labels
// in between the grid lines. Position the x-axis at the top of the chart.
c.xAxis().setLabels(xLabels);
c.xAxis().setLabelStyle("Arial Bold", 10, Chart.TextColor, 90);
c.xAxis().setColors(Chart.Transparent, Chart.TextColor);
c.xAxis().setLabelOffset(0.5);
c.setXAxisOnTop();
// Set the y-axis labels. Use 10pt Arial Bold font. Set axis stem to transparent, so
// only the labels are visible. Set 0.5 offset to position the labels in between the
// grid lines. Reverse the y-axis so that the labels are flowing top-down instead of
// bottom-up.
c.yAxis().setLabels(yLabels);
c.yAxis().setLabelStyle("Arial Bold", 10);
c.yAxis().setColors(Chart.Transparent, Chart.TextColor);
c.yAxis().setLabelOffset(0.5);
c.yAxis().setReverse();
// Set the color stops and scale
double[] colorScale = {0, 0xff0000, 1, 0xff8800, 3, 0x4488cc, 7, 0x99ccff, 9, 0x00ff00,
10};
string[] colorLabels = {"Poor", "Fair", "Good", "Very Good", "Excellent"};
layer.colorAxis().setColorScale(colorScale);
// Position the legend box 20 pixels to the right of the plot area. Use 10pt Arial Bold
// font. Set the key icon size to 15 x 15 pixels. Set vertical key spacing to 8 pixels.
LegendBox b = c.addLegend(p.getRightX() + 20, p.getTopY(), true, "Arial Bold", 10);
b.setBackground(Chart.Transparent, Chart.Transparent);
b.setKeySize(15, 15);
b.setKeySpacing(0, 8);
// Add the color scale label to the legend box
for(int i = colorLabels.Length - 1; i >= 0; --i) {
b.addKey(colorLabels[i], (int)(colorScale[i * 2 + 1]));
}
// Output the chart
viewer.Chart = c;
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='<*cdml*>({xLabel}, {yLabel}) = {z|2}'");
}
}
}
[Windows Forms - VB Version] NetWinCharts\VBNetWinCharts\heatmapcellsymbols.vb
Imports System
Imports Microsoft.VisualBasic
Imports ChartDirector
Public Class heatmapcellsymbols
Implements DemoModule
'Name of demo module
Public Function getName() As String Implements DemoModule.getName
Return "Heat Map Cell Symbols"
End Function
'Number of charts produced in this demo module
Public Function getNoOfCharts() As Integer Implements DemoModule.getNoOfCharts
Return 1
End Function
'Main code for creating chart.
'Note: the argument chartIndex is unused because this demo only has 1 chart.
Public Sub createChart(viewer As WinChartViewer, chartIndex As Integer) _
Implements DemoModule.createChart
' The x-axis and y-axis labels
Dim xLabels() As String = {"Alpha", "Beta", "Gamma", "Delta", "Epsilon", "Zeta", "Eta", _
"Theta", "Iota", "Kappa"}
Dim yLabels() As String = {"Ant", "Bear", "Cat", "Dog", "Elephant", "Fox", "Goat", _
"Horse", "Insect", "Jellyfish"}
' Random data for the 10 x 10 cells
Dim rand As RanSeries = New RanSeries(2)
Dim zData() As Double = rand.getSeries((UBound(xLabels) + 1) * (UBound(yLabels) + 1), 0, _
10)
' The coordinates for the first set of scatter symbols
Dim symbolX() As Double = {2.5, 6.5, 3.5, 8.5}
Dim symbolY() As Double = {4.5, 7.5, 9.5, 8.5}
' The coordinates for the second set of scatter symbols
Dim symbol2X() As Double = {6.5, 3.5, 7.5, 1.5}
Dim symbol2Y() As Double = {0.5, 7.5, 3.5, 2.5}
' Create an XYChart object of size 600 x 500 pixels.
Dim c As XYChart = New XYChart(600, 500)
' Set the plotarea at (80, 80) and of size 400 x 400 pixels. Set the background, border, and
' grid lines to transparent.
Dim p As PlotArea = c.setPlotArea(80, 80, 400, 400, -1, -1, Chart.Transparent, _
Chart.Transparent)
' Add the first set of scatter symbols. Use grey (0x555555) cross shape symbols.
c.addScatterLayer(symbolX, symbolY, "Disputed", Chart.Cross2Shape(0.2), 15, &H555555 _
).setHTMLImageMap("{disable}")
' Add the first set of scatter symbols. Use yellow (0xffff66) star shape symbols.
c.addScatterLayer(symbol2X, symbol2Y, "Audited", Chart.StarShape(5), 19, &Hffff66 _
).setHTMLImageMap("{disable}")
' Create a discrete heat map with 10 x 10 cells
Dim layer As DiscreteHeatMapLayer = c.addDiscreteHeatMapLayer(zData, UBound(xLabels) + 1)
' Set the x-axis labels. Use 10pt Arial Bold font rotated by 90 degrees. Set axis stem to
' transparent, so only the labels are visible. Set 0.5 offset to position the labels in
' between the grid lines. Position the x-axis at the top of the chart.
c.xAxis().setLabels(xLabels)
c.xAxis().setLabelStyle("Arial Bold", 10, Chart.TextColor, 90)
c.xAxis().setColors(Chart.Transparent, Chart.TextColor)
c.xAxis().setLabelOffset(0.5)
c.setXAxisOnTop()
' Set the y-axis labels. Use 10pt Arial Bold font. Set axis stem to transparent, so only the
' labels are visible. Set 0.5 offset to position the labels in between the grid lines.
' Reverse the y-axis so that the labels are flowing top-down instead of bottom-up.
c.yAxis().setLabels(yLabels)
c.yAxis().setLabelStyle("Arial Bold", 10)
c.yAxis().setColors(Chart.Transparent, Chart.TextColor)
c.yAxis().setLabelOffset(0.5)
c.yAxis().setReverse()
' Set the color stops and scale
Dim colorScale() As Double = {0, &Hff0000, 1, &Hff8800, 3, &H4488cc, 7, &H99ccff, 9, _
&H00ff00, 10}
Dim colorLabels() As String = {"Poor", "Fair", "Good", "Very Good", "Excellent"}
layer.colorAxis().setColorScale(colorScale)
' Position the legend box 20 pixels to the right of the plot area. Use 10pt Arial Bold font.
' Set the key icon size to 15 x 15 pixels. Set vertical key spacing to 8 pixels.
Dim b As LegendBox = c.addLegend(p.getRightX() + 20, p.getTopY(), True, "Arial Bold", 10)
b.setBackground(Chart.Transparent, Chart.Transparent)
b.setKeySize(15, 15)
b.setKeySpacing(0, 8)
' Add the color scale label to the legend box
For i As Integer = UBound(colorLabels) To 0 Step -1
b.addKey(colorLabels(i), Int(colorScale(i * 2 + 1)))
Next
' Output the chart
viewer.Chart = c
'include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "", _
"title='<*cdml*>({xLabel}, {yLabel}) = {z|2}'")
End Sub
End Class
[WPF - C#] NetWPFCharts\CSharpWPFCharts\heatmapcellsymbols.cs
using System;
using ChartDirector;
namespace CSharpWPFCharts
{
public class heatmapcellsymbols : DemoModule
{
//Name of demo module
public string getName() { return "Heat Map Cell Symbols"; }
//Number of charts produced in this demo module
public int getNoOfCharts() { return 1; }
//Main code for creating chart.
//Note: the argument chartIndex is unused because this demo only has 1 chart.
public void createChart(WPFChartViewer viewer, int chartIndex)
{
// The x-axis and y-axis labels
string[] xLabels = {"Alpha", "Beta", "Gamma", "Delta", "Epsilon", "Zeta", "Eta",
"Theta", "Iota", "Kappa"};
string[] yLabels = {"Ant", "Bear", "Cat", "Dog", "Elephant", "Fox", "Goat", "Horse",
"Insect", "Jellyfish"};
// Random data for the 10 x 10 cells
RanSeries rand = new RanSeries(2);
double[] zData = rand.getSeries(xLabels.Length * yLabels.Length, 0, 10);
// The coordinates for the first set of scatter symbols
double[] symbolX = {2.5, 6.5, 3.5, 8.5};
double[] symbolY = {4.5, 7.5, 9.5, 8.5};
// The coordinates for the second set of scatter symbols
double[] symbol2X = {6.5, 3.5, 7.5, 1.5};
double[] symbol2Y = {0.5, 7.5, 3.5, 2.5};
// Create an XYChart object of size 600 x 500 pixels.
XYChart c = new XYChart(600, 500);
// Set the plotarea at (80, 80) and of size 400 x 400 pixels. Set the background,
// border, and grid lines to transparent.
PlotArea p = c.setPlotArea(80, 80, 400, 400, -1, -1, Chart.Transparent,
Chart.Transparent);
// Add the first set of scatter symbols. Use grey (0x555555) cross shape symbols.
c.addScatterLayer(symbolX, symbolY, "Disputed", Chart.Cross2Shape(0.2), 15, 0x555555
).setHTMLImageMap("{disable}");
// Add the first set of scatter symbols. Use yellow (0xffff66) star shape symbols.
c.addScatterLayer(symbol2X, symbol2Y, "Audited", Chart.StarShape(5), 19, 0xffff66
).setHTMLImageMap("{disable}");
// Create a discrete heat map with 10 x 10 cells
DiscreteHeatMapLayer layer = c.addDiscreteHeatMapLayer(zData, xLabels.Length);
// Set the x-axis labels. Use 10pt Arial Bold font rotated by 90 degrees. Set axis stem
// to transparent, so only the labels are visible. Set 0.5 offset to position the labels
// in between the grid lines. Position the x-axis at the top of the chart.
c.xAxis().setLabels(xLabels);
c.xAxis().setLabelStyle("Arial Bold", 10, Chart.TextColor, 90);
c.xAxis().setColors(Chart.Transparent, Chart.TextColor);
c.xAxis().setLabelOffset(0.5);
c.setXAxisOnTop();
// Set the y-axis labels. Use 10pt Arial Bold font. Set axis stem to transparent, so
// only the labels are visible. Set 0.5 offset to position the labels in between the
// grid lines. Reverse the y-axis so that the labels are flowing top-down instead of
// bottom-up.
c.yAxis().setLabels(yLabels);
c.yAxis().setLabelStyle("Arial Bold", 10);
c.yAxis().setColors(Chart.Transparent, Chart.TextColor);
c.yAxis().setLabelOffset(0.5);
c.yAxis().setReverse();
// Set the color stops and scale
double[] colorScale = {0, 0xff0000, 1, 0xff8800, 3, 0x4488cc, 7, 0x99ccff, 9, 0x00ff00,
10};
string[] colorLabels = {"Poor", "Fair", "Good", "Very Good", "Excellent"};
layer.colorAxis().setColorScale(colorScale);
// Position the legend box 20 pixels to the right of the plot area. Use 10pt Arial Bold
// font. Set the key icon size to 15 x 15 pixels. Set vertical key spacing to 8 pixels.
LegendBox b = c.addLegend(p.getRightX() + 20, p.getTopY(), true, "Arial Bold", 10);
b.setBackground(Chart.Transparent, Chart.Transparent);
b.setKeySize(15, 15);
b.setKeySpacing(0, 8);
// Add the color scale label to the legend box
for(int i = colorLabels.Length - 1; i >= 0; --i) {
b.addKey(colorLabels[i], (int)(colorScale[i * 2 + 1]));
}
// Output the chart
viewer.Chart = c;
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='<*cdml*>({xLabel}, {yLabel}) = {z|2}'");
}
}
}
[ASP.NET Web Forms - C# version] NetWebCharts\CSharpASP\heatmapcellsymbols.aspx
(Click here on how to convert this code to code-behind style.)<%@ Page Language="C#" Debug="true" %>
<%@ Import Namespace="ChartDirector" %>
<%@ Register TagPrefix="chart" Namespace="ChartDirector" Assembly="netchartdir" %>
<!DOCTYPE html>
<script runat="server">
//
// Page Load event handler
//
protected void Page_Load(object sender, EventArgs e)
{
// The x-axis and y-axis labels
string[] xLabels = {"Alpha", "Beta", "Gamma", "Delta", "Epsilon", "Zeta", "Eta", "Theta",
"Iota", "Kappa"};
string[] yLabels = {"Ant", "Bear", "Cat", "Dog", "Elephant", "Fox", "Goat", "Horse", "Insect",
"Jellyfish"};
// Random data for the 10 x 10 cells
RanSeries rand = new RanSeries(2);
double[] zData = rand.getSeries(xLabels.Length * yLabels.Length, 0, 10);
// The coordinates for the first set of scatter symbols
double[] symbolX = {2.5, 6.5, 3.5, 8.5};
double[] symbolY = {4.5, 7.5, 9.5, 8.5};
// The coordinates for the second set of scatter symbols
double[] symbol2X = {6.5, 3.5, 7.5, 1.5};
double[] symbol2Y = {0.5, 7.5, 3.5, 2.5};
// Create an XYChart object of size 600 x 500 pixels.
XYChart c = new XYChart(600, 500);
// Set the plotarea at (80, 80) and of size 400 x 400 pixels. Set the background, border, and
// grid lines to transparent.
PlotArea p = c.setPlotArea(80, 80, 400, 400, -1, -1, Chart.Transparent, Chart.Transparent);
// Add the first set of scatter symbols. Use grey (0x555555) cross shape symbols.
c.addScatterLayer(symbolX, symbolY, "Disputed", Chart.Cross2Shape(0.2), 15, 0x555555
).setHTMLImageMap("{disable}");
// Add the first set of scatter symbols. Use yellow (0xffff66) star shape symbols.
c.addScatterLayer(symbol2X, symbol2Y, "Audited", Chart.StarShape(5), 19, 0xffff66
).setHTMLImageMap("{disable}");
// Create a discrete heat map with 10 x 10 cells
DiscreteHeatMapLayer layer = c.addDiscreteHeatMapLayer(zData, xLabels.Length);
// Set the x-axis labels. Use 10pt Arial Bold font rotated by 90 degrees. Set axis stem to
// transparent, so only the labels are visible. Set 0.5 offset to position the labels in between
// the grid lines. Position the x-axis at the top of the chart.
c.xAxis().setLabels(xLabels);
c.xAxis().setLabelStyle("Arial Bold", 10, Chart.TextColor, 90);
c.xAxis().setColors(Chart.Transparent, Chart.TextColor);
c.xAxis().setLabelOffset(0.5);
c.setXAxisOnTop();
// Set the y-axis labels. Use 10pt Arial Bold font. Set axis stem to transparent, so only the
// labels are visible. Set 0.5 offset to position the labels in between the grid lines. Reverse
// the y-axis so that the labels are flowing top-down instead of bottom-up.
c.yAxis().setLabels(yLabels);
c.yAxis().setLabelStyle("Arial Bold", 10);
c.yAxis().setColors(Chart.Transparent, Chart.TextColor);
c.yAxis().setLabelOffset(0.5);
c.yAxis().setReverse();
// Set the color stops and scale
double[] colorScale = {0, 0xff0000, 1, 0xff8800, 3, 0x4488cc, 7, 0x99ccff, 9, 0x00ff00, 10};
string[] colorLabels = {"Poor", "Fair", "Good", "Very Good", "Excellent"};
layer.colorAxis().setColorScale(colorScale);
// Position the legend box 20 pixels to the right of the plot area. Use 10pt Arial Bold font.
// Set the key icon size to 15 x 15 pixels. Set vertical key spacing to 8 pixels.
LegendBox b = c.addLegend(p.getRightX() + 20, p.getTopY(), true, "Arial Bold", 10);
b.setBackground(Chart.Transparent, Chart.Transparent);
b.setKeySize(15, 15);
b.setKeySpacing(0, 8);
// Add the color scale label to the legend box
for(int i = colorLabels.Length - 1; i >= 0; --i) {
b.addKey(colorLabels[i], (int)(colorScale[i * 2 + 1]));
}
// Output the chart
WebChartViewer1.Image = c.makeWebImage(Chart.SVG);
// Include tool tip for the chart
WebChartViewer1.ImageMap = c.getHTMLImageMap("", "",
"title='<*cdml*>({xLabel}, {yLabel}) = {z|2}'");
}
</script>
<html>
<head>
<script type="text/javascript" src="cdjcv.js"></script>
</head>
<body>
<chart:WebChartViewer id="WebChartViewer1" runat="server" />
</body>
</html>
[ASP.NET Web Forms - VB Version] NetWebCharts\VBNetASP\heatmapcellsymbols.aspx
(Click here on how to convert this code to code-behind style.)<%@ Page Language="VB" Debug="true" %>
<%@ Import Namespace="ChartDirector" %>
<%@ Register TagPrefix="chart" Namespace="ChartDirector" Assembly="netchartdir" %>
<!DOCTYPE html>
<script runat="server">
'
' Page Load event handler
'
Protected Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)
' The x-axis and y-axis labels
Dim xLabels() As String = {"Alpha", "Beta", "Gamma", "Delta", "Epsilon", "Zeta", "Eta", _
"Theta", "Iota", "Kappa"}
Dim yLabels() As String = {"Ant", "Bear", "Cat", "Dog", "Elephant", "Fox", "Goat", "Horse", _
"Insect", "Jellyfish"}
' Random data for the 10 x 10 cells
Dim rand As RanSeries = New RanSeries(2)
Dim zData() As Double = rand.getSeries((UBound(xLabels) + 1) * (UBound(yLabels) + 1), 0, 10)
' The coordinates for the first set of scatter symbols
Dim symbolX() As Double = {2.5, 6.5, 3.5, 8.5}
Dim symbolY() As Double = {4.5, 7.5, 9.5, 8.5}
' The coordinates for the second set of scatter symbols
Dim symbol2X() As Double = {6.5, 3.5, 7.5, 1.5}
Dim symbol2Y() As Double = {0.5, 7.5, 3.5, 2.5}
' Create an XYChart object of size 600 x 500 pixels.
Dim c As XYChart = New XYChart(600, 500)
' Set the plotarea at (80, 80) and of size 400 x 400 pixels. Set the background, border, and
' grid lines to transparent.
Dim p As PlotArea = c.setPlotArea(80, 80, 400, 400, -1, -1, Chart.Transparent, _
Chart.Transparent)
' Add the first set of scatter symbols. Use grey (0x555555) cross shape symbols.
c.addScatterLayer(symbolX, symbolY, "Disputed", Chart.Cross2Shape(0.2), 15, &H555555 _
).setHTMLImageMap("{disable}")
' Add the first set of scatter symbols. Use yellow (0xffff66) star shape symbols.
c.addScatterLayer(symbol2X, symbol2Y, "Audited", Chart.StarShape(5), 19, &Hffff66 _
).setHTMLImageMap("{disable}")
' Create a discrete heat map with 10 x 10 cells
Dim layer As DiscreteHeatMapLayer = c.addDiscreteHeatMapLayer(zData, UBound(xLabels) + 1)
' Set the x-axis labels. Use 10pt Arial Bold font rotated by 90 degrees. Set axis stem to
' transparent, so only the labels are visible. Set 0.5 offset to position the labels in between
' the grid lines. Position the x-axis at the top of the chart.
c.xAxis().setLabels(xLabels)
c.xAxis().setLabelStyle("Arial Bold", 10, Chart.TextColor, 90)
c.xAxis().setColors(Chart.Transparent, Chart.TextColor)
c.xAxis().setLabelOffset(0.5)
c.setXAxisOnTop()
' Set the y-axis labels. Use 10pt Arial Bold font. Set axis stem to transparent, so only the
' labels are visible. Set 0.5 offset to position the labels in between the grid lines. Reverse
' the y-axis so that the labels are flowing top-down instead of bottom-up.
c.yAxis().setLabels(yLabels)
c.yAxis().setLabelStyle("Arial Bold", 10)
c.yAxis().setColors(Chart.Transparent, Chart.TextColor)
c.yAxis().setLabelOffset(0.5)
c.yAxis().setReverse()
' Set the color stops and scale
Dim colorScale() As Double = {0, &Hff0000, 1, &Hff8800, 3, &H4488cc, 7, &H99ccff, 9, &H00ff00, _
10}
Dim colorLabels() As String = {"Poor", "Fair", "Good", "Very Good", "Excellent"}
layer.colorAxis().setColorScale(colorScale)
' Position the legend box 20 pixels to the right of the plot area. Use 10pt Arial Bold font. Set
' the key icon size to 15 x 15 pixels. Set vertical key spacing to 8 pixels.
Dim b As LegendBox = c.addLegend(p.getRightX() + 20, p.getTopY(), True, "Arial Bold", 10)
b.setBackground(Chart.Transparent, Chart.Transparent)
b.setKeySize(15, 15)
b.setKeySpacing(0, 8)
' Add the color scale label to the legend box
For i As Integer = UBound(colorLabels) To 0 Step -1
b.addKey(colorLabels(i), Int(colorScale(i * 2 + 1)))
Next
' Output the chart
WebChartViewer1.Image = c.makeWebImage(Chart.SVG)
' Include tool tip for the chart
WebChartViewer1.ImageMap = c.getHTMLImageMap("", "", _
"title='<*cdml*>({xLabel}, {yLabel}) = {z|2}'")
End Sub
</script>
<html>
<head>
<script type="text/javascript" src="cdjcv.js"></script>
</head>
<body>
<chart:WebChartViewer id="WebChartViewer1" runat="server" />
</body>
</html>
[ASP.NET MVC - Controller] NetMvcCharts\Controllers\HeatmapcellsymbolsController.cs
using System;
using System.Web.Mvc;
using ChartDirector;
namespace NetMvcCharts.Controllers
{
public class HeatmapcellsymbolsController : Controller
{
//
// Default Action
//
public ActionResult Index()
{
ViewBag.Title = "Heat Map Cell Symbols";
createChart(ViewBag.Viewer = new RazorChartViewer(HttpContext, "chart1"));
return View("~/Views/Shared/ChartView.cshtml");
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer)
{
// The x-axis and y-axis labels
string[] xLabels = {"Alpha", "Beta", "Gamma", "Delta", "Epsilon", "Zeta", "Eta", "Theta",
"Iota", "Kappa"};
string[] yLabels = {"Ant", "Bear", "Cat", "Dog", "Elephant", "Fox", "Goat", "Horse",
"Insect", "Jellyfish"};
// Random data for the 10 x 10 cells
RanSeries rand = new RanSeries(2);
double[] zData = rand.getSeries(xLabels.Length * yLabels.Length, 0, 10);
// The coordinates for the first set of scatter symbols
double[] symbolX = {2.5, 6.5, 3.5, 8.5};
double[] symbolY = {4.5, 7.5, 9.5, 8.5};
// The coordinates for the second set of scatter symbols
double[] symbol2X = {6.5, 3.5, 7.5, 1.5};
double[] symbol2Y = {0.5, 7.5, 3.5, 2.5};
// Create an XYChart object of size 600 x 500 pixels.
XYChart c = new XYChart(600, 500);
// Set the plotarea at (80, 80) and of size 400 x 400 pixels. Set the background, border, and
// grid lines to transparent.
PlotArea p = c.setPlotArea(80, 80, 400, 400, -1, -1, Chart.Transparent, Chart.Transparent);
// Add the first set of scatter symbols. Use grey (0x555555) cross shape symbols.
c.addScatterLayer(symbolX, symbolY, "Disputed", Chart.Cross2Shape(0.2), 15, 0x555555
).setHTMLImageMap("{disable}");
// Add the first set of scatter symbols. Use yellow (0xffff66) star shape symbols.
c.addScatterLayer(symbol2X, symbol2Y, "Audited", Chart.StarShape(5), 19, 0xffff66
).setHTMLImageMap("{disable}");
// Create a discrete heat map with 10 x 10 cells
DiscreteHeatMapLayer layer = c.addDiscreteHeatMapLayer(zData, xLabels.Length);
// Set the x-axis labels. Use 10pt Arial Bold font rotated by 90 degrees. Set axis stem to
// transparent, so only the labels are visible. Set 0.5 offset to position the labels in
// between the grid lines. Position the x-axis at the top of the chart.
c.xAxis().setLabels(xLabels);
c.xAxis().setLabelStyle("Arial Bold", 10, Chart.TextColor, 90);
c.xAxis().setColors(Chart.Transparent, Chart.TextColor);
c.xAxis().setLabelOffset(0.5);
c.setXAxisOnTop();
// Set the y-axis labels. Use 10pt Arial Bold font. Set axis stem to transparent, so only the
// labels are visible. Set 0.5 offset to position the labels in between the grid lines.
// Reverse the y-axis so that the labels are flowing top-down instead of bottom-up.
c.yAxis().setLabels(yLabels);
c.yAxis().setLabelStyle("Arial Bold", 10);
c.yAxis().setColors(Chart.Transparent, Chart.TextColor);
c.yAxis().setLabelOffset(0.5);
c.yAxis().setReverse();
// Set the color stops and scale
double[] colorScale = {0, 0xff0000, 1, 0xff8800, 3, 0x4488cc, 7, 0x99ccff, 9, 0x00ff00, 10};
string[] colorLabels = {"Poor", "Fair", "Good", "Very Good", "Excellent"};
layer.colorAxis().setColorScale(colorScale);
// Position the legend box 20 pixels to the right of the plot area. Use 10pt Arial Bold font.
// Set the key icon size to 15 x 15 pixels. Set vertical key spacing to 8 pixels.
LegendBox b = c.addLegend(p.getRightX() + 20, p.getTopY(), true, "Arial Bold", 10);
b.setBackground(Chart.Transparent, Chart.Transparent);
b.setKeySize(15, 15);
b.setKeySpacing(0, 8);
// Add the color scale label to the legend box
for(int i = colorLabels.Length - 1; i >= 0; --i) {
b.addKey(colorLabels[i], (int)(colorScale[i * 2 + 1]));
}
// Output the chart
viewer.Image = c.makeWebImage(Chart.SVG);
// Include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("", "",
"title='<*cdml*>({xLabel}, {yLabel}) = {z|2}'");
}
}
}
[ASP.NET MVC - View] NetMvcCharts\Views\Shared\ChartView.cshtml
@{ Layout = null; }
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<style>
@ViewBag.Style
</style>
@Scripts.Render("~/Scripts/cdjcv.js")
</head>
<body style="margin:5px 0px 0px 5px">
<div style="font:bold 18pt verdana;">
@ViewBag.Title
</div>
<hr style="border:solid 1px #000080; background:#000080" />
<div>
@{
if (ViewBag.Viewer is Array)
{
// Display multiple charts
for (int i = 0; i < ViewBag.Viewer.Length; ++i)
{
@:@Html.Raw(ViewBag.Viewer[i].RenderHTML())
}
}
else
{
// Display one chart only
@:@Html.Raw(ViewBag.Viewer.RenderHTML())
}
}
</div>
</body>
</html>
© 2023 Advanced Software Engineering Limited. All rights reserved.
