ChartDirector 7.1 (.NET Edition)

Circular Zones




This example demonstrates adding circular zones to a polar chart.

In ChartDirector, a zone defined on the radial axis will mark a radius range, and so will appear as ring on a polar chart.

This example contains three circular zones in the plot area background, colored as red, green and blue. The blue region is the original background of the plot area, while the red and green regions are added using Axis.addZone of the radial axis object.

Source Code Listing

[Windows Forms - C# version] NetWinCharts\CSharpWinCharts\polarzones.cs
using System; using ChartDirector; namespace CSharpChartExplorer { public class polarzones : DemoModule { //Name of demo module public string getName() { return "Circular Zones"; } //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 data for the chart double[] data = {51, 15, 51, 40, 17, 87, 94, 21, 35, 88, 50, 60}; // 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 PolarChart c = new PolarChart(400, 420); // Set background color to a pale grey f0f0f0, with a black border and 1 pixel 3D border // effect c.setBackground(0xf0f0f0, 0x000000, 1); // Add a title to the chart using 16pt Arial Bold Italic font. The title text is white // (0xffffff) on a dark blue (000040) background c.addTitle("Chemical Concentration", "Arial Bold Italic", 16, 0xffffff).setBackground( 0x000040); // Set center of plot area at (200, 240) with radius 145 pixels. Set background color to // blue (9999ff) c.setPlotArea(200, 240, 145, 0x9999ff); // Color the region between radius = 40 to 80 as green (99ff99) c.radialAxis().addZone(40, 80, 0x99ff99); // Color the region with radius > 80 as red (ff9999) c.radialAxis().addZone(80, 999, 0xff9999); // Set the grid style to circular grid c.setGridStyle(false); // Set the radial axis label format c.radialAxis().setLabelFormat("{value} ppm"); // 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/green/blue zones legendBox.addKey("Under-Absorp", 0x9999ff); legendBox.addKey("Normal", 0x99ff99); legendBox.addKey("Over-Absorp", 0xff9999); // Add a blue (000080) spline line layer with line width set to 3 pixels and using // yellow (ffff00) circles to represent the data points PolarSplineLineLayer layer = c.addSplineLineLayer(data, 0x000080); layer.setLineWidth(3); layer.setDataSymbol(Chart.CircleShape, 11, 0xffff00); // Set the labels to the angular axis as spokes. c.angularAxis().setLabels(labels); // Output the chart viewer.Chart = c; // Include tool tip for the chart. viewer.ImageMap = layer.getHTMLImageMap("clickable", "", "title='Concentration on {label}: {value} ppm'"); } } }

[Windows Forms - VB Version] NetWinCharts\VBNetWinCharts\polarzones.vb
Imports System Imports Microsoft.VisualBasic Imports ChartDirector Public Class polarzones Implements DemoModule 'Name of demo module Public Function getName() As String Implements DemoModule.getName Return "Circular Zones" 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 data for the chart Dim data() As Double = {51, 15, 51, 40, 17, 87, 94, 21, 35, 88, 50, 60} ' The labels for the chart Dim labels() As String = {"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", _ "Oct", "Nov", "Dec"} ' Create a PolarChart object of size 400 x 420 pixels Dim c As PolarChart = New PolarChart(400, 420) ' Set background color to a pale grey f0f0f0, with a black border and 1 pixel 3D border ' effect c.setBackground(&Hf0f0f0, &H000000, 1) ' Add a title to the chart using 16pt Arial Bold Italic font. The title text is white ' (0xffffff) on a dark blue (000040) background c.addTitle("Chemical Concentration", "Arial Bold Italic", 16, &Hffffff).setBackground( _ &H000040) ' Set center of plot area at (200, 240) with radius 145 pixels. Set background color to blue ' (9999ff) c.setPlotArea(200, 240, 145, &H9999ff) ' Color the region between radius = 40 to 80 as green (99ff99) c.radialAxis().addZone(40, 80, &H99ff99) ' Color the region with radius > 80 as red (ff9999) c.radialAxis().addZone(80, 999, &Hff9999) ' Set the grid style to circular grid c.setGridStyle(False) ' Set the radial axis label format c.radialAxis().setLabelFormat("{value} ppm") ' Use semi-transparent (40ffffff) label background so as not to block the data c.radialAxis().setLabelStyle().setBackground(&H40ffffff, &H40000000) ' Add a legend box at (200, 30) top center aligned, using 9pt Arial Bold font. with a black ' border. Dim legendBox As LegendBox = c.addLegend(200, 30, False, "Arial Bold", 9) legendBox.setAlignment(Chart.TopCenter) ' Add legend keys to represent the red/green/blue zones legendBox.addKey("Under-Absorp", &H9999ff) legendBox.addKey("Normal", &H99ff99) legendBox.addKey("Over-Absorp", &Hff9999) ' Add a blue (000080) spline line layer with line width set to 3 pixels and using yellow ' (ffff00) circles to represent the data points Dim layer As PolarSplineLineLayer = c.addSplineLineLayer(data, &H000080) layer.setLineWidth(3) layer.setDataSymbol(Chart.CircleShape, 11, &Hffff00) ' Set the labels to the angular axis as spokes. c.angularAxis().setLabels(labels) ' Output the chart viewer.Chart = c ' Include tool tip for the chart. viewer.ImageMap = layer.getHTMLImageMap("clickable", "", _ "title='Concentration on {label}: {value} ppm'") End Sub End Class

[WPF - C#] NetWPFCharts\CSharpWPFCharts\polarzones.cs
using System; using ChartDirector; namespace CSharpWPFCharts { public class polarzones : DemoModule { //Name of demo module public string getName() { return "Circular Zones"; } //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 data for the chart double[] data = {51, 15, 51, 40, 17, 87, 94, 21, 35, 88, 50, 60}; // 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 PolarChart c = new PolarChart(400, 420); // Set background color to a pale grey f0f0f0, with a black border and 1 pixel 3D border // effect c.setBackground(0xf0f0f0, 0x000000, 1); // Add a title to the chart using 16pt Arial Bold Italic font. The title text is white // (0xffffff) on a dark blue (000040) background c.addTitle("Chemical Concentration", "Arial Bold Italic", 16, 0xffffff).setBackground( 0x000040); // Set center of plot area at (200, 240) with radius 145 pixels. Set background color to // blue (9999ff) c.setPlotArea(200, 240, 145, 0x9999ff); // Color the region between radius = 40 to 80 as green (99ff99) c.radialAxis().addZone(40, 80, 0x99ff99); // Color the region with radius > 80 as red (ff9999) c.radialAxis().addZone(80, 999, 0xff9999); // Set the grid style to circular grid c.setGridStyle(false); // Set the radial axis label format c.radialAxis().setLabelFormat("{value} ppm"); // 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/green/blue zones legendBox.addKey("Under-Absorp", 0x9999ff); legendBox.addKey("Normal", 0x99ff99); legendBox.addKey("Over-Absorp", 0xff9999); // Add a blue (000080) spline line layer with line width set to 3 pixels and using // yellow (ffff00) circles to represent the data points PolarSplineLineLayer layer = c.addSplineLineLayer(data, 0x000080); layer.setLineWidth(3); layer.setDataSymbol(Chart.CircleShape, 11, 0xffff00); // Set the labels to the angular axis as spokes. c.angularAxis().setLabels(labels); // Output the chart viewer.Chart = c; // Include tool tip for the chart. viewer.ImageMap = layer.getHTMLImageMap("clickable", "", "title='Concentration on {label}: {value} ppm'"); } } }

[ASP.NET Web Forms - C# version] NetWebCharts\CSharpASP\polarzones.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 data for the chart double[] data = {51, 15, 51, 40, 17, 87, 94, 21, 35, 88, 50, 60}; // 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 PolarChart c = new PolarChart(400, 420); // Set background color to a pale grey f0f0f0, with a black border and 1 pixel 3D border effect c.setBackground(0xf0f0f0, 0x000000, 1); // Add a title to the chart using 16pt Arial Bold Italic font. The title text is white // (0xffffff) on a dark blue (000040) background c.addTitle("Chemical Concentration", "Arial Bold Italic", 16, 0xffffff).setBackground(0x000040); // Set center of plot area at (200, 240) with radius 145 pixels. Set background color to blue // (9999ff) c.setPlotArea(200, 240, 145, 0x9999ff); // Color the region between radius = 40 to 80 as green (99ff99) c.radialAxis().addZone(40, 80, 0x99ff99); // Color the region with radius > 80 as red (ff9999) c.radialAxis().addZone(80, 999, 0xff9999); // Set the grid style to circular grid c.setGridStyle(false); // Set the radial axis label format c.radialAxis().setLabelFormat("{value} ppm"); // 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/green/blue zones legendBox.addKey("Under-Absorp", 0x9999ff); legendBox.addKey("Normal", 0x99ff99); legendBox.addKey("Over-Absorp", 0xff9999); // Add a blue (000080) spline line layer with line width set to 3 pixels and using yellow // (ffff00) circles to represent the data points PolarSplineLineLayer layer = c.addSplineLineLayer(data, 0x000080); layer.setLineWidth(3); layer.setDataSymbol(Chart.CircleShape, 11, 0xffff00); // Set the labels to the angular axis as spokes. c.angularAxis().setLabels(labels); // Output the chart WebChartViewer1.Image = c.makeWebImage(Chart.SVG); // Include tool tip for the chart. WebChartViewer1.ImageMap = layer.getHTMLImageMap("", "", "title='Concentration on {label}: {value} ppm'"); } </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\polarzones.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 data for the chart Dim data() As Double = {51, 15, 51, 40, 17, 87, 94, 21, 35, 88, 50, 60} ' The labels for the chart Dim labels() As String = {"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", _ "Oct", "Nov", "Dec"} ' Create a PolarChart object of size 400 x 420 pixels Dim c As PolarChart = New PolarChart(400, 420) ' Set background color to a pale grey f0f0f0, with a black border and 1 pixel 3D border effect c.setBackground(&Hf0f0f0, &H000000, 1) ' Add a title to the chart using 16pt Arial Bold Italic font. The title text is white (0xffffff) ' on a dark blue (000040) background c.addTitle("Chemical Concentration", "Arial Bold Italic", 16, &Hffffff).setBackground(&H000040) ' Set center of plot area at (200, 240) with radius 145 pixels. Set background color to blue ' (9999ff) c.setPlotArea(200, 240, 145, &H9999ff) ' Color the region between radius = 40 to 80 as green (99ff99) c.radialAxis().addZone(40, 80, &H99ff99) ' Color the region with radius > 80 as red (ff9999) c.radialAxis().addZone(80, 999, &Hff9999) ' Set the grid style to circular grid c.setGridStyle(False) ' Set the radial axis label format c.radialAxis().setLabelFormat("{value} ppm") ' Use semi-transparent (40ffffff) label background so as not to block the data c.radialAxis().setLabelStyle().setBackground(&H40ffffff, &H40000000) ' Add a legend box at (200, 30) top center aligned, using 9pt Arial Bold font. with a black ' border. Dim legendBox As LegendBox = c.addLegend(200, 30, False, "Arial Bold", 9) legendBox.setAlignment(Chart.TopCenter) ' Add legend keys to represent the red/green/blue zones legendBox.addKey("Under-Absorp", &H9999ff) legendBox.addKey("Normal", &H99ff99) legendBox.addKey("Over-Absorp", &Hff9999) ' Add a blue (000080) spline line layer with line width set to 3 pixels and using yellow ' (ffff00) circles to represent the data points Dim layer As PolarSplineLineLayer = c.addSplineLineLayer(data, &H000080) layer.setLineWidth(3) layer.setDataSymbol(Chart.CircleShape, 11, &Hffff00) ' Set the labels to the angular axis as spokes. c.angularAxis().setLabels(labels) ' Output the chart WebChartViewer1.Image = c.makeWebImage(Chart.SVG) ' Include tool tip for the chart. WebChartViewer1.ImageMap = layer.getHTMLImageMap("", "", _ "title='Concentration on {label}: {value} ppm'") 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\PolarzonesController.cs
using System; using System.Web.Mvc; using ChartDirector; namespace NetMvcCharts.Controllers { public class PolarzonesController : Controller { // // Default Action // public ActionResult Index() { ViewBag.Title = "Circular Zones"; createChart(ViewBag.Viewer = new RazorChartViewer(HttpContext, "chart1")); return View("~/Views/Shared/ChartView.cshtml"); } // // Create chart // private void createChart(RazorChartViewer viewer) { // The data for the chart double[] data = {51, 15, 51, 40, 17, 87, 94, 21, 35, 88, 50, 60}; // 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 PolarChart c = new PolarChart(400, 420); // Set background color to a pale grey f0f0f0, with a black border and 1 pixel 3D border // effect c.setBackground(0xf0f0f0, 0x000000, 1); // Add a title to the chart using 16pt Arial Bold Italic font. The title text is white // (0xffffff) on a dark blue (000040) background c.addTitle("Chemical Concentration", "Arial Bold Italic", 16, 0xffffff).setBackground( 0x000040); // Set center of plot area at (200, 240) with radius 145 pixels. Set background color to blue // (9999ff) c.setPlotArea(200, 240, 145, 0x9999ff); // Color the region between radius = 40 to 80 as green (99ff99) c.radialAxis().addZone(40, 80, 0x99ff99); // Color the region with radius > 80 as red (ff9999) c.radialAxis().addZone(80, 999, 0xff9999); // Set the grid style to circular grid c.setGridStyle(false); // Set the radial axis label format c.radialAxis().setLabelFormat("{value} ppm"); // 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/green/blue zones legendBox.addKey("Under-Absorp", 0x9999ff); legendBox.addKey("Normal", 0x99ff99); legendBox.addKey("Over-Absorp", 0xff9999); // Add a blue (000080) spline line layer with line width set to 3 pixels and using yellow // (ffff00) circles to represent the data points PolarSplineLineLayer layer = c.addSplineLineLayer(data, 0x000080); layer.setLineWidth(3); layer.setDataSymbol(Chart.CircleShape, 11, 0xffff00); // Set the labels to the angular axis as spokes. c.angularAxis().setLabels(labels); // Output the chart viewer.Image = c.makeWebImage(Chart.SVG); // Include tool tip for the chart. viewer.ImageMap = layer.getHTMLImageMap("", "", "title='Concentration on {label}: {value} ppm'"); } } }

[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>