//Main code for creating chart.
//Note: the argument img is unused because this demo only has 1 chart.
public void createChart(WinChartViewer viewer, string img)
{
// The data for the chart
double[] data0 = { 90, 60, 85, 75, 55 };
double[] data1 = { 60, 80, 70, 80, 85 };
// The labels for the chart
string[] labels = { "Speed", "Reliability", "Comfort", "Safety",
"Efficiency" };
// Create a PolarChart object of size 480 x 380 pixels. Set background
// color to gold, with 1 pixel 3D border effect
PolarChart c = new PolarChart(480, 380, Chart.goldColor(), 0x000000, 1);
// Add a title to the chart using 15 pts Times Bold Italic font. The
// title text is white (ffffff) on a deep blue (000080) background
c.addTitle("Space Travel Vehicles Compared",
"Times New Roman Bold Italic", 15, 0xffffff).setBackground(0x000080);
// Set plot area center at (240, 210), with 150 pixels radius, and a
// white (ffffff) background.
c.setPlotArea(240, 210, 150, 0xffffff);
// Add a legend box at top right corner (470, 35) using 10 pts Arial Bold
// font. Set the background to silver, with 1 pixel 3D border effect.
LegendBox b = c.addLegend(470, 35, true, "Arial Bold", 10);
b.setAlignment(Chart.TopRight);
b.setBackground(Chart.silverColor(), Chart.Transparent, 1);
// Add an area layer to the chart using semi-transparent blue
// (0x806666cc). Add a blue (0x6666cc) line layer using the same data
// with 3 pixel line width to highlight the border of the area.
c.addAreaLayer(data0, unchecked ((int)0x806666cc), "Model Saturn");
c.addLineLayer(data0, 0x6666cc).setLineWidth(3);
// Add an area layer to the chart using semi-transparent red
// (0x80cc6666). Add a red (0xcc6666) line layer using the same data with
// 3 pixel line width to highlight the border of the area.
c.addAreaLayer(data1, unchecked ((int)0x80cc6666), "Model Jupiter");
c.addLineLayer(data1, 0xcc6666).setLineWidth(3);
// Set the labels to the angular axis as spokes.
c.angularAxis().setLabels(labels);
// Output the chart
viewer.Image = c.makeImage();
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='[{dataSetName}] {label}: score = {value}'");
}
//Main code for creating chart.
//Note: the argument img is unused because this demo only has 1 chart.
public void createChart(WinChartViewer viewer, string img)
{
// Data for the chart
double[] data0 = { 5, 3, 10, 4, 3, 5, 2, 5 };
double[] data1 = { 12, 6, 17, 6, 7, 9, 4, 7 };
double[] data2 = { 17, 7, 22, 7, 18, 13, 5, 11 };
double[] angles = { 0, 45, 90, 135, 180, 225, 270, 315 };
string[] labels = { "North", "North\nEast", "East", "South\nEast",
"South", "South\nWest", "West", "North\nWest" };
// Create a PolarChart object of size 460 x 500 pixels, with a grey
// (e0e0e0) background and a 1 pixel 3D border
PolarChart c = new PolarChart(460, 500, 0xe0e0e0, 0x000000, 1);
// Add a title to the chart at the top left corner using 15pts Arial Bold
// Italic font. Use white text on deep blue background.
c.addTitle("Wind Direction", "Arial Bold Italic", 15, 0xffffff
).setBackground(0x000080);
LegendBox legendBox = c.addLegend(230, 35, false, "Arial Bold", 9);
legendBox.setAlignment(Chart.TopCenter);
legendBox.setBackground(Chart.Transparent, Chart.Transparent, 1);
legendBox.addKey("5 m/s or above", 0xff3333);
legendBox.addKey("1 - 5 m/s", 0x33ff33);
legendBox.addKey("less than 1 m/s", 0x3333ff);
// Set plot area center at (230, 280) with radius 180 pixels and white
// background
c.setPlotArea(230, 280, 180, 0xffffff);
// Set the grid style to circular grid
c.setGridStyle(false);
// Set angular axis as 0 - 360, with a spoke every 30 units
c.angularAxis().setLinearScale2(0, 360, labels);
for (int i = 0; i < angles.Length; ++i)
{
c.angularAxis().addZone(angles[i] - 10, angles[i] + 10, 0, data0[i],
0x3333ff, 0);
c.angularAxis().addZone(angles[i] - 10, angles[i] + 10, data0[i],
data1[i], 0x33ff33, 0);
c.angularAxis().addZone(angles[i] - 10, angles[i] + 10, data1[i],
data2[i], 0xff3333, 0);
}
// Add an Transparent invisible layer to ensure the axis is auto-scaled
// using the data
c.addLineLayer(data2, Chart.Transparent);
// Output the chart
viewer.Image = c.makeImage();
}
//Main code for creating chart.
//Note: the argument img is unused because this demo only has 1 chart.
public void createChart(WinChartViewer viewer, string img)
{
// Data for the chart
double[] data = { 9.4, 1.8, 2.1, 2.3, 3.5, 7.7, 8.8, 6.1, 5.0, 3.1, 6.0,
4.3, 5.1, 2.6, 1.5, 2.2, 5.1, 4.3, 4.0, 9.0, 1.7, 8.8, 9.9, 9.5 };
double[] angles = { 0, 15, 30, 45, 60, 75, 90, 105, 120, 135, 150, 165,
180, 195, 210, 225, 240, 255, 270, 285, 300, 315, 330, 345 };
// Create a PolarChart object of size 460 x 460 pixels, with a silver
// background and a 1 pixel 3D border
PolarChart c = new PolarChart(460, 460, Chart.silverColor(), 0x000000, 1)
;
// Add a title to the chart at the top left corner using 15pts Arial Bold
// Italic font. Use white text on deep blue background.
c.addTitle("Polar Vector Chart Demonstration", "Arial Bold Italic", 15,
0xffffff).setBackground(0x000080);
// Set plot area center at (230, 240) with radius 180 pixels and white
// background
c.setPlotArea(230, 240, 180, 0xffffff);
// Set the grid style to circular grid
c.setGridStyle(false);
// Set angular axis as 0 - 360, with a spoke every 30 units
c.angularAxis().setLinearScale(0, 360, 30);
// Add sectors to the chart as sector zones
for (int i = 0; i < data.Length; ++i)
{
c.angularAxis().addZone(angles[i], angles[i] + 15, 0, data[i],
0x33ff33, 0x008000);
}
// Add an Transparent invisible layer to ensure the axis is auto-scaled
// using the data
c.addLineLayer(data, Chart.Transparent);
// Output the chart
viewer.Image = c.makeImage();
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer)
{
// The data for the chart
double[] data0 = { 90, 25, 40, 55, 68, 44, 79, 85, 50 };
double[] angles0 = { 15, 60, 110, 180, 230, 260, 260, 310, 340 };
double[] data1 = { 80, 91, 66, 80, 92, 87 };
double[] angles1 = { 40, 65, 88, 110, 150, 200 };
// Create a PolarChart object of size 460 x 500 pixels, with a grey (e0e0e0) background and 1
// pixel 3D border
PolarChart c = new PolarChart(460, 500, 0xe0e0e0, 0x000000, 1);
// Add a title to the chart at the top left corner using 15pt Arial Bold Italic font. Use a
// wood pattern as the title background.
c.addTitle("Polar Line Chart Demo", "Arial Bold Italic", 15).setBackground(c.patternColor(
Url.Content("~/Content/wood.png")));
// Set center of plot area at (230, 280) with radius 180 pixels, and white (ffffff)
// background.
c.setPlotArea(230, 280, 180, 0xffffff);
// Set the grid style to circular grid, with grids below the chart layers
c.setGridStyle(false, false);
// Add a legend box at top-center of plot area (230, 35) using horizontal layout. Use 10pt
// Arial Bold font, with 1 pixel 3D border effect.
LegendBox b = c.addLegend(230, 35, false, "Arial Bold", 9);
b.setAlignment(Chart.TopCenter);
b.setBackground(Chart.Transparent, Chart.Transparent, 1);
// Set angular axis as 0 - 360, with a spoke every 30 units
c.angularAxis().setLinearScale(0, 360, 30);
// Add a blue (0xff) line layer to the chart using (data0, angle0)
PolarLineLayer layer0 = c.addLineLayer(data0, 0x0000ff, "Close Loop Line");
layer0.setAngles(angles0);
// Set the line width to 2 pixels
layer0.setLineWidth(2);
// Use 11 pixel triangle symbols for the data points
layer0.setDataSymbol(Chart.TriangleSymbol, 11);
// Enable data label and set its format
layer0.setDataLabelFormat("({value},{angle})");
// Set the data label text box with light blue (0x9999ff) backgruond color and 1 pixel 3D
// border effect
layer0.setDataLabelStyle().setBackground(0x9999ff, Chart.Transparent, 1);
// Add a red (0xff0000) line layer to the chart using (data1, angle1)
PolarLineLayer layer1 = c.addLineLayer(data1, 0xff0000, "Open Loop Line");
layer1.setAngles(angles1);
// Set the line width to 2 pixels
layer1.setLineWidth(2);
// Use 11 pixel diamond symbols for the data points
layer1.setDataSymbol(Chart.DiamondSymbol, 11);
// Set the line to open loop
layer1.setCloseLoop(false);
// Enable data label and set its format
layer1.setDataLabelFormat("({value},{angle})");
// Set the data label text box with light red (0xff9999) backgruond color and 1 pixel 3D
// border effect
layer1.setDataLabelStyle().setBackground(0xff9999, Chart.Transparent, 1);
// Output the chart
viewer.Image = c.makeWebImage(Chart.PNG);
// Include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("", "", "title='[{dataSetName}] ({radius}, {angle})'");
}
//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 data for the chart
double[] data0 = { 6, 12.5, 18.2, 15 };
double[] angles0 = { 45, 96, 169, 258 };
double[] size0 = { 41, 105, 12, 20 };
double[] data1 = { 18, 16, 11, 14 };
double[] angles1 = { 30, 210, 240, 310 };
double[] size1 = { 30, 45, 12, 90 };
// Create a PolarChart object of size 460 x 460 pixels
PolarChart c = new PolarChart(460, 460);
// Add a title to the chart at the top left corner using 15pt Arial Bold Italic font
c.addTitle2(Chart.TopLeft, "<*underline=2*>EM Field Strength", "Arial Bold Italic", 15);
// Set center of plot area at (230, 240) with radius 180 pixels
c.setPlotArea(230, 240, 180);
// Use alternative light grey/dark grey circular background color
c.setPlotAreaBg(0xdddddd, 0xeeeeee);
// Set the grid style to circular grid
c.setGridStyle(false);
// Add a legend box at the top right corner of the chart using 9pt Arial Bold font
c.addLegend(459, 0, true, "Arial Bold", 9).setAlignment(Chart.TopRight);
// Set angular axis as 0 - 360, with a spoke every 30 units
c.angularAxis().setLinearScale(0, 360, 30);
// Set the radial axis label format
c.radialAxis().setLabelFormat("{value} km");
// Add a blue (0x9999ff) line layer to the chart using (data0, angle0)
PolarLineLayer layer0 = c.addLineLayer(data0, 0x9999ff, "Cold Spot");
layer0.setAngles(angles0);
// Disable the line by setting its width to 0, so only the symbols are visible
layer0.setLineWidth(0);
// Use a circular data point symbol
layer0.setDataSymbol(Chart.CircleSymbol, 11);
// Modulate the symbol size by size0 to produce a bubble chart effect
layer0.setSymbolScale(size0);
// Add a red (0xff9999) line layer to the chart using (data1, angle1)
PolarLineLayer layer1 = c.addLineLayer(data1, 0xff9999, "Hot Spot");
layer1.setAngles(angles1);
// Disable the line by setting its width to 0, so only the symbols are visible
layer1.setLineWidth(0);
// Use a circular data point symbol
layer1.setDataSymbol(Chart.CircleSymbol, 11);
// Modulate the symbol size by size1 to produce a bubble chart effect
layer1.setSymbolScale(size1);
// Output the chart
viewer.Chart = c;
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='{dataSetName} at ({value} km, {angle} deg)\nStrength = {z} Watt'");
}
//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 data for the chart
double[] data = { 5.1, 1.5, 5.1, 4.0, 1.7, 8.7, 9.4, 2.1, 3.5, 8.8, 5.0, 6.0 };
// The labels for the chart
string[] labels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept",
"Oct", "Nov", "Dec" };
// Create a PolarChart object of size 400 x 420 pixels. with a metallic blue (9999ff)
// background color and 1 pixel 3D border
PolarChart c = new PolarChart(400, 420, Chart.metalColor(0x9999ff), 0x000000, 1);
// Add a title to the chart using 16pt Arial Bold Italic font. The title text is white
// (0xffffff) on deep blue (000080) background
c.addTitle("Chemical Concentration", "Arial Bold Italic", 16, 0xffffff).setBackground(
0x000080);
// Set center of plot area at (200, 240) with radius 145 pixels. Set background color to
// green (0x33ff33)
c.setPlotArea(200, 240, 145, 0x33ff33);
// Set the labels to the angular axis
c.angularAxis().setLabels(labels);
// Color the sector between label index = 5.5 to 7.5 as red (ff3333) zone
c.angularAxis().addZone(5.5, 7.5, 0xff3333);
// Color the sector between label index = 4.5 to 5.5, and also between 7.5 to 8.5, as
// yellow (ff3333) zones
c.angularAxis().addZone(4.5, 5.5, 0xffff00);
c.angularAxis().addZone(7.5, 8.5, 0xffff00);
// Set the grid style to circular grid
c.setGridStyle(false);
// Use semi-transparent (40ffffff) label background so as not to block the data
c.radialAxis().setLabelStyle().setBackground(0x40ffffff, 0x40000000);
// Add a legend box at (200, 30) top center aligned, using 9pt Arial Bold font. with a
// black border.
LegendBox legendBox = c.addLegend(200, 30, false, "Arial Bold", 9);
legendBox.setAlignment(Chart.TopCenter);
// Add legend keys to represent the red/yellow/green zones
legendBox.addKey("Very Dry", 0xff3333);
legendBox.addKey("Critical", 0xffff00);
legendBox.addKey("Moderate", 0x33ff33);
// Add a blue (0x80) line layer with line width set to 3 pixels and use purple (ff00ff)
// cross symbols for the data points
PolarLineLayer layer = c.addLineLayer(data, 0x000080);
layer.setLineWidth(3);
layer.setDataSymbol(Chart.Cross2Shape(), 15, 0xff00ff);
// Output the chart
viewer.Chart = c;
// Include tool tip for the chart.
viewer.ImageMap = layer.getHTMLImageMap("clickable", "",
"title='Concentration on {label}: {value} ppm'");
}
//Main code for creating chart.
//Note: the argument img is unused because this demo only has 1 chart.
public void createChart(WinChartViewer viewer, string img)
{
// The data for the chart
double[] data0 = { 43, 89, 76, 64, 48, 18, 92, 68, 44, 79, 71, 85 };
double[] angles0 = { 45, 96, 169, 258, 15, 30, 330, 260, 60, 75, 110, 140 }
;
double[] data1 = { 50, 91, 26, 29, 80, 53, 62, 87, 19, 40 };
double[] angles1 = { 230, 210, 240, 310, 179, 250, 244, 199, 89, 160 };
double[] data2 = { 88, 65, 76, 49, 80, 53 };
double[] angles2 = { 340, 310, 340, 210, 30, 300 };
// The labels on the angular axis (spokes)
string[] labels = { "North", "North\nEast", "East", "South\nEast",
"South", "South\nWest", "West", "North\nWest" };
// Create a PolarChart object of size 460 x 460 pixels
PolarChart c = new PolarChart(460, 460);
// Add a title to the chart at the top left corner using 15pts Arial Bold
// Italic font
c.addTitle2(Chart.TopLeft, "<*underline=2*>Plants in Wonderland",
"Arial Bold Italic", 15);
// Set center of plot area at (230, 240) with radius 180 pixels
c.setPlotArea(230, 240, 180);
// Use alternative light grey/dark grey sector background color
c.setPlotAreaBg(0xdddddd, 0xeeeeee, false);
// Set the grid style to circular grid
c.setGridStyle(false);
// Add a legend box at the top right corner of the chart using 9 pts
// Arial Bold font
c.addLegend(459, 0, true, "Arial Bold", 9).setAlignment(Chart.TopRight);
// Set angular axis as 0 - 360, either 8 spokes
c.angularAxis().setLinearScale2(0, 360, labels);
// Set the radial axis label format
c.radialAxis().setLabelFormat("{value} km");
// Add a blue (0xff) polar line layer to the chart using (data0, angle0)
PolarLineLayer layer0 = c.addLineLayer(data0, 0x0000ff, "Immortal Weed");
layer0.setAngles(angles0);
layer0.setLineWidth(0);
layer0.setDataSymbol(Chart.TriangleSymbol, 11);
// Add a red (0xff0000) polar line layer to the chart using (data1,
// angles1)
PolarLineLayer layer1 = c.addLineLayer(data1, 0xff0000, "Precious Flower"
);
layer1.setAngles(angles1);
// Disable the line by setting its width to 0, so only the symbols are
// visible
layer1.setLineWidth(0);
// Use a 11 pixel diamond data point symbol
layer1.setDataSymbol(Chart.DiamondSymbol, 11);
// Add a green (0x00ff00) polar line layer to the chart using (data2,
// angles2)
PolarLineLayer layer2 = c.addLineLayer(data2, 0x00ff00, "Magical Tree");
layer2.setAngles(angles2);
// Disable the line by setting its width to 0, so only the symbols are
// visible
layer2.setLineWidth(0);
// Use a 9 pixel square data point symbol
layer2.setDataSymbol(Chart.SquareSymbol, 9);
// Output the chart
viewer.Image = c.makeImage();
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='{dataSetName} at ({value} km, {angle} deg)'");
}