//
// Create chart
//
private void createChart(RazorChartViewer viewer)
{
// The value to display on the meter
double value = 75.35;
// Create an LinearMeter object of size 260 x 66 pixels with a very light grey (0xeeeeee)
// background, and a rounded 3-pixel thick light grey (0xaaaaaa) border
LinearMeter m = new LinearMeter(260, 66, 0xeeeeee, 0xaaaaaa);
m.setRoundedFrame(Chart.Transparent);
m.setThickFrame(3);
// Set the scale region top-left corner at (18, 24), with size of 222 x 20 pixels. The scale
// labels are located on the top (implies horizontal meter)
m.setMeter(18, 24, 222, 20, Chart.Top);
// Set meter scale from 0 - 100, with a tick every 10 units
m.setScale(0, 100, 10);
// Add a 5-pixel thick smooth color scale to the meter at y = 48 (below the meter scale)
double[] smoothColorScale = { 0, 0x0000ff, 25, 0x0088ff, 50, 0x00ff00, 75, 0xffff00, 100,
0xff0000 };
m.addColorScale(smoothColorScale, 48, 5);
// Add a light blue (0x0088ff) bar from 0 to the data value with glass effect and 4 pixel
// rounded corners
m.addBar(0, value, 0x0088ff, Chart.glassEffect(Chart.NormalGlare, Chart.Top), 4);
// Output the chart
viewer.Image = m.makeWebImage(Chart.PNG);
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer)
{
// The data for the area chart
double[] data = { 30, 28, 40, 55, 75, 68, 54, 60, 50, 62, 75, 65, 75, 89, 60, 55, 53, 35, 50,
66, 56, 48, 52, 65, 62 };
// The labels for the area chart
string[] labels = { "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13",
"14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24" };
// Create a XYChart object of size 250 x 250 pixels
XYChart c = new XYChart(250, 250);
// Set the plotarea at (30, 20) and of size 200 x 200 pixels
c.setPlotArea(30, 20, 200, 200);
// Add an area chart layer using the given data
c.addAreaLayer(data);
// Set the labels on the x axis.
c.xAxis().setLabels(labels);
// Display 1 out of 3 labels on the x-axis.
c.xAxis().setLabelStep(3);
// Output the chart
viewer.Image = c.makeWebImage(Chart.PNG);
// Include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("", "", "title='Hour {xLabel}: Traffic {value} GBytes'");
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer)
{
// The data for the bar chart
double[] data0 = { 100, 125, 245, 147, 67 };
double[] data1 = { 85, 156, 179, 211, 123 };
double[] data2 = { 97, 87, 56, 267, 157 };
string[] labels = { "Mon", "Tue", "Wed", "Thur", "Fri" };
// Create a XYChart object of size 540 x 375 pixels
XYChart c = new XYChart(540, 375);
// Add a title to the chart using 18pt Times Bold Italic font
c.addTitle("Average Weekly Network Load", "Times New Roman Bold Italic", 18);
// Set the plotarea at (50, 55) and of 440 x 280 pixels in size. Use a vertical gradient
// color from light blue (f9f9ff) to blue (6666ff) as background. Set border and grid lines
// to white (ffffff).
c.setPlotArea(50, 55, 440, 280, c.linearGradientColor(0, 55, 0, 335, 0xf9f9ff, 0x6666ff), -1,
0xffffff, 0xffffff);
// Add a legend box at (50, 28) using horizontal layout. Use 10pt Arial Bold as font, with
// transparent background.
c.addLegend(50, 28, false, "Arial Bold", 10).setBackground(Chart.Transparent);
// Set the x axis labels
c.xAxis().setLabels(labels);
// Draw the ticks between label positions (instead of at label positions)
c.xAxis().setTickOffset(0.5);
// Set axis label style to 8pt Arial Bold
c.xAxis().setLabelStyle("Arial Bold", 8);
c.yAxis().setLabelStyle("Arial Bold", 8);
// Set axis line width to 2 pixels
c.xAxis().setWidth(2);
c.yAxis().setWidth(2);
// Add axis title
c.yAxis().setTitle("Throughput (MBytes Per Hour)");
// Add a multi-bar layer with 3 data sets
BarLayer layer = c.addBarLayer2(Chart.Side);
layer.addDataSet(data0, 0xff0000, "Server #1");
layer.addDataSet(data1, 0x00ff00, "Server #2");
layer.addDataSet(data2, 0xff8800, "Server #3");
// Set bar border to transparent. Use glass lighting effect with light direction from left.
layer.setBorderColor(Chart.Transparent, Chart.glassEffect(Chart.NormalGlare, Chart.Left));
// Configure the bars within a group to touch each others (no gap)
layer.setBarGap(0.2, Chart.TouchBar);
// Output the chart
viewer.Image = c.makeWebImage(Chart.PNG);
// Output Javascript chart model to the browser to suppport tracking cursor
viewer.ChartModel = c.getJsChartModel();
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer)
{
// The data for the bar chart
double[] data = { 85, 156, 179.5, 211, 123 };
// The labels for the bar chart
string[] labels = { "Mon", "Tue", "Wed", "Thu", "Fri" };
// Create a XYChart object of size 250 x 250 pixels
XYChart c = new XYChart(250, 250);
// Set the plotarea at (30, 20) and of size 200 x 200 pixels
c.setPlotArea(30, 20, 200, 200);
// Add a bar chart layer using the given data
c.addBarLayer(data);
// Set the labels on the x axis.
c.xAxis().setLabels(labels);
// Output the chart
viewer.Image = c.makeWebImage(Chart.PNG);
// Include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("", "", "title='{xLabel}: {value} GBytes'");
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer, int chartIndex)
{
// The data for the pyramid chart
double[] data = { 156, 123, 211, 179 };
// The semi-transparent colors for the pyramid layers
int[] colors = { 0x400000cc, 0x4066aaee, 0x40ffbb00, 0x40ee6622 };
// The rotation angle
int angle = chartIndex * 15;
// Create a PyramidChart object of size 200 x 200 pixels, with white (ffffff) background and
// grey (888888) border
PyramidChart c = new PyramidChart(200, 200, 0xffffff, 0x888888);
// Set the pyramid center at (100, 100), and width x height to 60 x 120 pixels
c.setPyramidSize(100, 100, 60, 120);
// Set the elevation to 15 degrees and use the given rotation angle
c.addTitle("Rotation = " + angle, "Arial Italic", 15);
c.setViewAngle(15, angle);
// Set the pyramid data
c.setData(data);
// Set the layer colors to the given colors
c.setColors2(Chart.DataColor, colors);
// Leave 1% gaps between layers
c.setLayerGap(0.01);
// Output the chart
viewer.Image = c.makeWebImage(Chart.PNG);
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer)
{
// The data for the pyramid chart
double[] data = { 156, 123, 211, 179 };
// The labels for the pyramid chart
string[] labels = { "Funds", "Bonds", "Stocks", "Cash" };
// Create a PyramidChart object of size 360 x 360 pixels
PyramidChart c = new PyramidChart(360, 360);
// Set the pyramid center at (180, 180), and width x height to 150 x 180 pixels
c.setPyramidSize(180, 180, 150, 300);
// Set the pyramid data and labels
c.setData(data, labels);
// Add labels at the center of the pyramid layers using Arial Bold font. The labels will have
// two lines showing the layer name and percentage.
c.setCenterLabel("{label}\n{percent}%", "Arial Bold");
// Output the chart
viewer.Image = c.makeWebImage(Chart.PNG);
// Include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("", "", "title='{label}: US$ {value}M ({percent}%)'");
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer, int chartIndex)
{
// The data for the pyramid chart
double[] data = { 156, 123, 211, 179 };
// The colors for the pyramid layers
int[] colors = { 0x66aaee, 0xeebb22, 0xcccccc, 0xcc88ff };
// The layer gap
double gap = chartIndex * 0.01;
// Create a PyramidChart object of size 200 x 200 pixels, with white (ffffff) background and
// grey (888888) border
PyramidChart c = new PyramidChart(200, 200, 0xffffff, 0x888888);
// Set the pyramid center at (100, 100), and width x height to 60 x 120 pixels
c.setPyramidSize(100, 100, 60, 120);
// Set the layer gap
c.addTitle("Gap = " + gap, "Arial Italic", 15);
c.setLayerGap(gap);
// Set the elevation to 15 degrees
c.setViewAngle(15);
// Set the pyramid data
c.setData(data);
// Set the layer colors to the given colors
c.setColors2(Chart.DataColor, colors);
// Output the chart
viewer.Image = c.makeWebImage(Chart.PNG);
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer)
{
// The data for the bar chart
double[] data = { 85, 156, 179.5, 211, 123 };
// The labels for the bar chart
string[] labels = { "Mon", "Tue", "Wed", "Thu", "Fri" };
// Create a XYChart object of size 300 x 280 pixels
XYChart c = new XYChart(300, 280);
// Set the plotarea at (45, 30) and of size 200 x 200 pixels
c.setPlotArea(45, 30, 200, 200);
// Add a title to the chart
c.addTitle("Weekly Server Load");
// Add a title to the y axis
c.yAxis().setTitle("MBytes");
// Add a title to the x axis
c.xAxis().setTitle("Work Week 25");
// Add a bar chart layer with green (0x00ff00) bars using the given data
c.addBarLayer(data, 0x00ff00).set3D();
// Set the labels on the x axis.
c.xAxis().setLabels(labels);
// Output the chart
viewer.Image = c.makeWebImage(Chart.PNG);
// Include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("", "", "title='{xLabel}: {value} MBytes'");
}
//
// Initialize the WebChartViewer when the page is first loaded
//
private void initViewer(RazorChartViewer viewer)
{
//
// This example assumes the initial chart is the full chart and we can auto-detect the full
// data range in the drawChart code. So we do not need to configure the full range here.
//
}
public ActionResult Index()
{
RazorChartViewer viewer = ViewBag.Viewer = new RazorChartViewer(HttpContext, "chart1");
RazorViewPortControl viewPortCtrl = ViewBag.ViewPortControl = new RazorViewPortControl(HttpContext, "chart2");
//
// This script handles both the full page request, as well as the subsequent partial updates
// (AJAX chart updates). We need to determine the type of request first before we processing
// it.
//
if (RazorChartViewer.IsPartialUpdateRequest(Request))
{
// Is a partial update request.
drawChart(viewer);
return(Content(viewer.PartialUpdateChart()));
}
//
// If the code reaches here, it is a full page request.
//
// Initialize the WebChartViewer and draw the chart.
initViewer(viewer);
drawChart(viewer);
// Draw a thumbnail chart representing the full range in the WebViewPortControl
drawFullChart(viewPortCtrl, viewer);
return(View());
}
public ActionResult Index()
{
RazorChartViewer viewer = ViewBag.Viewer = new RazorChartViewer(HttpContext, "chart1");
//
// This script handles both the full page request, as well as the subsequent partial updates
// (AJAX chart updates). We need to determine the type of request first before we processing
// it.
//
if (RazorChartViewer.IsPartialUpdateRequest(Request))
{
// Is a partial update request.
drawChart(viewer);
return(Content(viewer.PartialUpdateChart()));
}
//
// If the code reaches here, it is a full page request.
//
// In this exapmle, we just need to initialize the WebChartViewer and draw the chart.
initViewer(viewer);
drawChart(viewer);
return(View());
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer)
{
// The value to display on the meter
double value = 74.35;
// Create an LinearMeter object of size 70 x 240 pixels with a very light grey (0xeeeeee)
// background, and a rounded 3-pixel thick light grey (0xcccccc) border
LinearMeter m = new LinearMeter(70, 240, 0xeeeeee, 0xcccccc);
m.setRoundedFrame(Chart.Transparent);
m.setThickFrame(3);
// Set the scale region top-left corner at (28, 18), with size of 20 x 205 pixels. The scale
// labels are located on the left (default - implies vertical meter).
m.setMeter(28, 18, 20, 205);
// Set meter scale from 0 - 100, with a tick every 10 units
m.setScale(0, 100, 10);
// Add a smooth color scale to the meter
double[] smoothColorScale = { 0, 0x6666ff, 25, 0x00bbbb, 50, 0x00ff00, 75, 0xffff00, 100,
0xff0000 };
m.addColorScale(smoothColorScale);
// Add a blue (0x0000cc) pointer at the specified value
m.addPointer(value, 0x0000cc);
// Output the chart
viewer.Image = m.makeWebImage(Chart.PNG);
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer)
{
// The data for the pie chart
double[] data = { 25, 18, 15, 12, 8, 30, 35 };
// The labels for the pie chart
string[] labels = { "Labor", "Licenses", "Taxes", "Legal", "Insurance", "Facilities",
"Production" };
// Create a PieChart object of size 450 x 270 pixels
PieChart c = new PieChart(450, 270);
// Set the center of the pie at (150, 100) and the radius to 80 pixels
c.setPieSize(150, 135, 100);
// add a legend box where the top left corner is at (330, 50)
c.addLegend(330, 60);
// modify the sector label format to show percentages only
c.setLabelFormat("{percent}%");
// Set the pie data and the pie labels
c.setData(data, labels);
// Use rounded edge shading, with a 1 pixel white (FFFFFF) border
c.setSectorStyle(Chart.RoundedEdgeShading, 0xffffff, 1);
// Output the chart
viewer.Image = c.makeWebImage(Chart.PNG);
// Include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("", "", "title='{label}: US${value}K ({percent}%)'");
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer)
{
// The value to display on the meter
double value = 66.77;
// Create an LinearMeter object of size 70 x 240 pixels with a very light grey (0xeeeeee)
// background, and a rounded 3-pixel thick light grey (0xbbbbbb) border
LinearMeter m = new LinearMeter(70, 240, 0xeeeeee, 0xbbbbbb);
m.setRoundedFrame(Chart.Transparent);
m.setThickFrame(3);
// Set the scale region top-left corner at (28, 18), with size of 20 x 205 pixels. The scale
// labels are located on the left (default - implies vertical meter).
m.setMeter(28, 18, 20, 205);
// Set meter scale from 0 - 100, with a tick every 10 units
m.setScale(0, 100, 10);
// Add a 5-pixel thick smooth color scale to the meter at x = 54 (right of meter scale)
double[] smoothColorScale = { 0, 0x0000ff, 25, 0x0088ff, 50, 0x00ff00, 75, 0xffff00, 100,
0xff0000 };
m.addColorScale(smoothColorScale, 54, 5);
// Add a light blue (0x0088ff) bar from 0 to the data value with glass effect and 4 pixel
// rounded corners
m.addBar(0, value, 0x0088ff, Chart.glassEffect(Chart.NormalGlare, Chart.Left), 4);
// Output the chart
viewer.Image = m.makeWebImage(Chart.PNG);
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer)
{
// The data for the pie chart
double[] data = { 25, 18, 15, 12, 8, 30, 35 };
// The labels for the pie chart
string[] labels = { "Labor", "Licenses", "Taxes", "Legal", "Insurance", "Facilities",
"Production" };
// Create a PieChart object of size 360 x 300 pixels
PieChart c = new PieChart(360, 300);
// Set the center of the pie at (180, 140) and the radius to 100 pixels
c.setPieSize(180, 140, 100);
// Add a title to the pie chart
c.addTitle("Project Cost Breakdown");
// Draw the pie in 3D
c.set3D();
// Set the pie data and the pie labels
c.setData(data, labels);
// Explode the 1st sector (index = 0)
c.setExplode(0);
// Output the chart
viewer.Image = c.makeWebImage(Chart.PNG);
// Include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("", "", "title='{label}: US${value}K ({percent}%)'");
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer, int chartIndex)
{
// The data for the chart
double[] data = { 100, 125, 260, 147, 67 };
string[] labels = { "Mon", "Tue", "Wed", "Thu", "Fri" };
// Create a XYChart object of size 200 x 180 pixels
XYChart c = new XYChart(200, 180);
// Set the plot area at (30, 10) and of size 140 x 130 pixels
c.setPlotArea(30, 10, 140, 130);
// Ise log scale axis if required
if (chartIndex == 1)
{
c.yAxis().setLogScale3();
}
// Set the labels on the x axis
c.xAxis().setLabels(labels);
// Add a color bar layer using the given data. Use a 1 pixel 3D border for the bars.
c.addBarLayer3(data).setBorderColor(-1, 1);
// Output the chart
viewer.Image = c.makeWebImage(Chart.PNG);
// Include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("", "", "title='Mileage on {xLabel}: {value} miles'");
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer)
{
// The data for the chart
double[] data = { 90, 60, 65, 75, 40 };
// The labels for the chart
string[] labels = { "Speed", "Reliability", "Comfort", "Safety", "Efficiency" };
// Create a PolarChart object of size 450 x 350 pixels
PolarChart c = new PolarChart(450, 350);
// Set center of plot area at (225, 185) with radius 150 pixels
c.setPlotArea(225, 185, 150);
// Add an area layer to the polar chart
c.addAreaLayer(data, 0x9999ff);
// Set the labels to the angular axis as spokes
c.angularAxis().setLabels(labels);
// Output the chart
viewer.Image = c.makeWebImage(Chart.PNG);
// Include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("", "", "title='{label}: score = {value}'");
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer)
{
// 4 data points to represent the cash flow for the Q1 - Q4
double[] data = { 230, 140, 220, 330, 150 };
// We want to plot a waterfall chart showing the 4 quarters as well as the total
string[] labels = { "Product 1", "Product 2", "Product 3", "Product 4", "Product 5", "Total" };
// The top side of the bars in a waterfall chart is the accumulated data. We use the
// ChartDirector ArrayMath utility to accumulate the data. The "total" is handled by
// inserting a zero point at the end before accumulation (after accumulation it will become
// the total).
double[] boxTop = new ArrayMath(data).insert2(0, 1).acc().result();
// The botom side of the bars is just the top side of the previous bar. So we shifted the top
// side data to obtain the bottom side data.
double[] boxBottom = new ArrayMath(boxTop).shift(1, 0).result();
// The last point (total) is different. Its bottom side is always 0.
boxBottom[boxBottom.Length - 1] = 0;
// Create a XYChart object of size 500 x 280 pixels. Set background color to light blue
// (ccccff), with 1 pixel 3D border effect.
XYChart c = new XYChart(500, 290, 0xccccff, 0x000000, 1);
// Add a title to the chart using 13 points Arial Bold Itatic font, with white (ffffff) text
// on a deep blue (0x80) background
c.addTitle("Product Revenue - Year 2004", "Arial Bold Italic", 13, 0xffffff).setBackground(
0x000080);
// Set the plotarea at (55, 50) and of size 430 x 215 pixels. Use alternative white/grey
// background.
c.setPlotArea(55, 45, 430, 215, 0xffffff, 0xeeeeee);
// Set the labels on the x axis using Arial Bold font
c.xAxis().setLabels(labels).setFontStyle("Arial Bold");
// Set the x-axis ticks and grid lines to be between the bars
c.xAxis().setTickOffset(0.5);
// Use Arial Bold as the y axis label font
c.yAxis().setLabelStyle("Arial Bold");
// Add a title to the y axis
c.yAxis().setTitle("USD (in millions)");
// Add a multi-color box-whisker layer to represent the waterfall bars
BoxWhiskerLayer layer = c.addBoxWhiskerLayer2(boxTop, boxBottom);
// Put data labels on the bars to show the cash flow using Arial Bold font
layer.setDataLabelFormat("{={top}-{bottom}}M");
layer.setDataLabelStyle("Arial Bold").setAlignment(Chart.Center);
// Output the chart
viewer.Image = c.makeWebImage(Chart.PNG);
// Include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("", "", "title='{xLabel}: {={top}-{bottom}} millions'");
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer)
{
// Data for the chart as 2 random data series
RanSeries r = new RanSeries(127);
double[] data0 = r.getSeries(180, 10, -1.5, 1.5);
double[] data1 = r.getSeries(180, 150, -15, 15);
DateTime[] timeStamps = r.getDateSeries(180, new DateTime(2011, 1, 1), 86400);
// Create a XYChart object of size 670 x 400 pixels
XYChart c = new XYChart(670, 400);
// Add a title to the chart using 18pt Times New Roman Bold Italic font
c.addTitle("Plasma Stabilizer Energy Usage", "Times New Roman Bold Italic", 18);
// Set the plotarea at (50, 55) with width 100 pixels less than chart width, and height 90
// pixels less than chart height. Use a vertical gradient from light blue (f0f6ff) to sky
// blue (a0c0ff) as background. Set border to transparent and grid lines to white (ffffff).
c.setPlotArea(50, 55, c.getWidth() - 100, c.getHeight() - 90, c.linearGradientColor(0, 55, 0,
c.getHeight() - 35, 0xf0f6ff, 0xa0c0ff), -1, Chart.Transparent, 0xffffff, 0xffffff);
// Add a legend box at (50, 25) using horizontal layout. Use 10pt Arial Bold as font. Set the
// background and border color to Transparent.
c.addLegend(50, 25, false, "Arial Bold", 10).setBackground(Chart.Transparent);
// Set axis label style to 8pt Arial Bold
c.xAxis().setLabelStyle("Arial Bold", 8);
c.yAxis().setLabelStyle("Arial Bold", 8);
c.yAxis2().setLabelStyle("Arial Bold", 8);
// Set the axis stem to transparent
c.xAxis().setColors(Chart.Transparent);
c.yAxis().setColors(Chart.Transparent);
c.yAxis2().setColors(Chart.Transparent);
// Configure x-axis label format
c.xAxis().setMultiFormat(Chart.StartOfYearFilter(), "{value|mm/yyyy} ",
Chart.StartOfMonthFilter(), "{value|mm}");
// Add axis title using 10pt Arial Bold Italic font
c.yAxis().setTitle("Power Usage (Watt)", "Arial Bold Italic", 10);
c.yAxis2().setTitle("Effective Load (kg)", "Arial Bold Italic", 10);
// Add a line layer to the chart using a line width of 2 pixels.
LineLayer layer = c.addLineLayer2();
layer.setLineWidth(2);
// Add 2 data series to the line layer
layer.setXData(timeStamps);
layer.addDataSet(data0, 0xcc0000, "Power Usage");
layer.addDataSet(data1, 0x008800, "Effective Load").setUseYAxis2();
// Output the chart
viewer.Image = c.makeWebImage(Chart.PNG);
// Output Javascript chart model to the browser to suppport tracking cursor
viewer.ChartModel = c.getJsChartModel();
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer)
{
// The data for the chart
double[] data0 = { 600, 800, 1200, 1500, 1800, 1900, 2000, 1950 };
double[] data1 = { 300, 450, 500, 1000, 1500, 1600, 1650, 1600 };
// The labels for the chart
string[] labels = { "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002" };
// Create a XYChart object of size 450 x 250 pixels, with a pale yellow (0xffffc0)
// background, a black border, and 1 pixel 3D border effect.
XYChart c = new XYChart(450, 250, 0xffffc0, 0, 1);
// Set the plotarea at (60, 45) and of size 360 x 170 pixels, using white (0xffffff) as the
// plot area background color. Turn on both horizontal and vertical grid lines with light
// grey color (0xc0c0c0)
c.setPlotArea(60, 45, 360, 170, 0xffffff, -1, -1, 0xc0c0c0, -1);
// Add a legend box at (60, 20) (top of the chart) with horizontal layout. Use 8pt Arial Bold
// font. Set the background and border color to Transparent.
c.addLegend(60, 20, false, "Arial Bold", 8).setBackground(Chart.Transparent);
// Add a title to the chart using 12pt Arial Bold/white font. Use a 1 x 2 bitmap pattern as
// the background.
c.addTitle("Information Resource Usage", "Arial Bold", 12, 0xffffff).setBackground(
c.patternColor(new int[] { 0x000040, 0x000080 }, 2));
// Set the labels on the x axis
c.xAxis().setLabels(labels);
// Reserve 8 pixels margins at both side of the x axis to avoid the first and last symbols
// drawing outside of the plot area
c.xAxis().setMargin(8, 8);
// Add a title to the y axis
c.yAxis().setTitle("Population");
// Add a line layer to the chart
LineLayer layer = c.addLineLayer2();
// Add the first line using small_user.png as the symbol.
layer.addDataSet(data0, 0xcf4040, "Users").setDataSymbol2(Url.Content(
"~/Content/small_user.png"));
// Add the first line using small_computer.png as the symbol.
layer.addDataSet(data1, 0x40cf40, "Computers").setDataSymbol2(Url.Content(
"~/Content/small_computer.png"));
// Set the line width to 3 pixels
layer.setLineWidth(3);
// Output the chart
viewer.Image = c.makeWebImage(Chart.PNG);
// Include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("", "",
"title='Number of {dataSetName} at {xLabel}: {value}'");
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer)
{
// Data for the chart
double[] data0 = { 100, 125, 245, 147, 67, 96, 160, 145, 97, 167, 220, 125 };
double[] data1 = { 85, 156, 179, 211, 123, 225, 127, 99, 111, 260, 175, 156 };
double[] data2 = { 97, 87, 56, 267, 157, 157, 67, 156, 77, 87, 197, 87 };
string[] labels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct",
"Nov", "Dec" };
// Create a XYChart object of size 560 x 280 pixels.
XYChart c = new XYChart(560, 280);
// Add a title to the chart using 14pt Arial Bold Italic font
c.addTitle(" Average Weekly Network Load", "Arial Bold Italic", 14);
// Set the plotarea at (50, 50) and of 500 x 200 pixels in size. Use alternating light grey
// (f8f8f8) / white (ffffff) background. Set border to transparent and use grey (CCCCCC)
// dotted lines as horizontal and vertical grid lines
c.setPlotArea(50, 50, 500, 200, 0xffffff, 0xf8f8f8, Chart.Transparent, c.dashLineColor(
0xcccccc, Chart.DotLine), c.dashLineColor(0xcccccc, Chart.DotLine));
// Add a legend box at (50, 22) using horizontal layout. Use 10 pt Arial Bold Italic font,
// with transparent background
c.addLegend(50, 22, false, "Arial Bold Italic", 10).setBackground(Chart.Transparent);
// Set the x axis labels
c.xAxis().setLabels(labels);
// Draw the ticks between label positions (instead of at label positions)
c.xAxis().setTickOffset(0.5);
// Add axis title
c.yAxis().setTitle("Throughput (MBytes Per Hour)");
// Set axis line width to 2 pixels
c.xAxis().setWidth(2);
c.yAxis().setWidth(2);
// Add a multi-bar layer with 3 data sets
BarLayer layer = c.addBarLayer2(Chart.Side);
layer.addDataSet(data0, 0xff0000, "Server #1");
layer.addDataSet(data1, 0x00ff00, "Server #2");
layer.addDataSet(data2, 0x0000ff, "Server #3");
// Set bar shape to circular (cylinder)
layer.setBarShape(Chart.CircleShape);
// Configure the bars within a group to touch each others (no gap)
layer.setBarGap(0.2, Chart.TouchBar);
// Output the chart
viewer.Image = c.makeWebImage(Chart.PNG);
// Include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("", "",
"title='{dataSetName} on {xLabel}: {value} MBytes/hour'");
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer)
{
// The XY points for the scatter chart
double[] dataX = { 150, 400, 300, 1500, 800 };
double[] dataY = { 0.6, 8, 5.4, 2, 4 };
// The labels for the points
string[] labels = { "Nano\n100", "SpeedTron\n200 Lite", "SpeedTron\n200", "Marathon\nExtra",
"Marathon\n2000" };
// Create a XYChart object of size 450 x 400 pixels
XYChart c = new XYChart(450, 400);
// Set the plotarea at (55, 40) and of size 350 x 300 pixels, with a light grey border
// (0xc0c0c0). Turn on both horizontal and vertical grid lines with light grey color
// (0xc0c0c0)
c.setPlotArea(55, 40, 350, 300, 0xffffff, -1, 0xc0c0c0, 0xc0c0c0, -1);
// Add a title to the chart using 18pt Times Bold Itatic font.
c.addTitle("Product Comparison Chart", "Times New Roman Bold Italic", 18);
// Add a title to the y axis using 12pt Arial Bold Italic font
c.yAxis().setTitle("Capacity (tons)", "Arial Bold Italic", 12);
// Add a title to the x axis using 12pt Arial Bold Italic font
c.xAxis().setTitle("Range (miles)", "Arial Bold Italic", 12);
// Set the axes line width to 3 pixels
c.xAxis().setWidth(3);
c.yAxis().setWidth(3);
// Add the data as a scatter chart layer, using a 15 pixel circle as the symbol
ScatterLayer layer = c.addScatterLayer(dataX, dataY, "", Chart.GlassSphereShape, 15,
0xff3333, 0xff3333);
// Add labels to the chart as an extra field
layer.addExtraField(labels);
// Set the data label format to display the extra field
layer.setDataLabelFormat("{field0}");
// Use 8pt Arial Bold to display the labels
ChartDirector.TextBox textbox = layer.setDataLabelStyle("Arial Bold", 8);
// Set the background to purple with a 1 pixel 3D border
textbox.setBackground(0xcc99ff, Chart.Transparent, 1);
// Put the text box 4 pixels to the right of the data point
textbox.setAlignment(Chart.Left);
textbox.setPos(4, 0);
// Output the chart
viewer.Image = c.makeWebImage(Chart.PNG);
// Include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("", "",
"title='Range = {x} miles, Capacity = {value} tons'");
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer)
{
// The data for the pie chart
double[] data = { 72, 18, 15, 12 };
// The depths for the sectors
double[] depths = { 30, 20, 10, 10 };
// The labels for the pie chart
string[] labels = { "Sunny", "Cloudy", "Rainy", "Snowy" };
// The icons for the sectors
string[] icons = { "sun.png", "cloud.png", "rain.png", "snowy.png" };
// Create a PieChart object of size 400 x 300 pixels
PieChart c = new PieChart(400, 300);
// Use the semi-transparent palette for this chart
c.setColors(Chart.transparentPalette);
// Set the background to metallic light blue (CCFFFF), with a black border and 1 pixel 3D
// border effect,
c.setBackground(Chart.metalColor(0xccccff), 0x000000, 1);
//Set default directory for loading images
c.setSearchPath(Url.Content("~/Content"));
// Set donut center at (200, 175), and outer/inner radii as 100/50 pixels
c.setDonutSize(200, 175, 100, 50);
// Add a title box using 15pt Times Bold Italic font and metallic blue (8888FF) background
// color
c.addTitle("Weather Profile in Wonderland", "Times New Roman Bold Italic", 15).setBackground(
Chart.metalColor(0x8888ff));
// Set the pie data and the pie labels
c.setData(data, labels);
// Add icons to the chart as a custom field
c.addExtraField(icons);
// Configure the sector labels using CDML to include the icon images
c.setLabelFormat(
"<*block,valign=absmiddle*><*img={field0}*> <*block*>{label}\n{percent}%<*/*><*/*>");
// Draw the pie in 3D with variable 3D depths
c.set3D2(depths);
// Set the start angle to 225 degrees may improve layout when the depths of the sector are
// sorted in descending order, because it ensures the tallest sector is at the back.
c.setStartAngle(225);
// Output the chart
viewer.Image = c.makeWebImage(Chart.PNG);
// Include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("", "", "title='{label}: {value} days ({percent}%)'");
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer, int chartIndex)
{
// The x and y coordinates of the grid
double[] dataX = { -4, -3, -2, -1, 0, 1, 2, 3, 4 };
double[] dataY = { -4, -3, -2, -1, 0, 1, 2, 3, 4 };
// Use random numbers for the z values on the XY grid
RanSeries r = new RanSeries(99);
double[] dataZ = r.get2DSeries(dataX.Length, dataY.Length, -0.9, 0.9);
// Create a XYChart object of size 420 x 360 pixels
XYChart c = new XYChart(420, 360);
// Set the plotarea at (30, 25) and of size 300 x 300 pixels. Use semi-transparent grey
// (0xdd000000) horizontal and vertical grid lines
c.setPlotArea(30, 25, 300, 300, -1, -1, -1, unchecked ((int)0xdd000000), -1);
// Set the x-axis and y-axis scale
c.xAxis().setLinearScale(-4, 4, 1);
c.yAxis().setLinearScale(-4, 4, 1);
// Add a contour layer using the given data
ContourLayer layer = c.addContourLayer(dataX, dataY, dataZ);
// Move the grid lines in front of the contour layer
c.getPlotArea().moveGridBefore(layer);
// Add a color axis (the legend) in which the top left corner is anchored at (350, 25). Set
// the length to 400 300 and the labels on the right side.
ColorAxis cAxis = layer.setColorAxis(350, 25, Chart.TopLeft, 300, Chart.Right);
if (chartIndex == 1)
{
// Speicify a color gradient as a list of colors, and use it in the color axis.
int[] colorGradient = { 0x0044cc, 0xffffff, 0x00aa00 };
cAxis.setColorGradient(false, colorGradient);
}
else if (chartIndex == 2)
{
// Specify the color scale to use in the color axis
double[] colorScale = { -1.0, 0x1a9850, -0.75, 0x66bd63, -0.5, 0xa6d96a, -0.25, 0xd9ef8b,
0, 0xfee08b, 0.25, 0xfdae61, 0.5, 0xf46d43, 0.75, 0xd73027, 1 };
cAxis.setColorScale(colorScale);
}
else if (chartIndex == 3)
{
// Specify the color scale to use in the color axis. Also specify an underflow color
// 0x66ccff (blue) for regions that fall below the lower axis limit.
double[] colorScale = { 0, 0xffff99, 0.2, 0x80cdc1, 0.4, 0x35978f, 0.6, 0x01665e, 0.8,
0x003c30, 1 };
cAxis.setColorScale(colorScale, 0x66ccff);
}
// Output the chart
viewer.Image = c.makeWebImage(Chart.PNG);
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer)
{
// Sample data for the Box-Whisker chart. Represents the minimum, 1st quartile, medium, 3rd
// quartile and maximum values of some quantities
double[] Q0Data = { 40, 45, 40, 30, 20, 50, 25, 44 };
double[] Q1Data = { 55, 60, 50, 40, 38, 60, 51, 60 };
double[] Q2Data = { 62, 70, 60, 50, 48, 70, 62, 70 };
double[] Q3Data = { 70, 80, 65, 60, 53, 78, 69, 76 };
double[] Q4Data = { 80, 90, 75, 70, 60, 85, 80, 84 };
// The labels for the chart
string[] labels = { "A", "B", "C", "D", "E", "F", "G", "H" };
// Create a XYChart object of size 450 x 400 pixels
XYChart c = new XYChart(450, 400);
// Set the plotarea at (50, 30) and of size 380 x 340 pixels, with transparent background and
// border and light grey (0xcccccc) horizontal grid lines
c.setPlotArea(50, 30, 380, 340, Chart.Transparent, -1, Chart.Transparent, 0xcccccc);
// Add a title box using grey (0x555555) 18pt Arial font
ChartDirector.TextBox title = c.addTitle(" Pattern Recognition Accuracy", "Arial", 18,
0x555555);
// Set the x and y axis stems to transparent and the label font to 12pt Arial
c.xAxis().setColors(Chart.Transparent);
c.yAxis().setColors(Chart.Transparent);
c.xAxis().setLabelStyle("Arial", 12);
c.yAxis().setLabelStyle("Arial", 12);
// Set the labels on the x axis
c.xAxis().setLabels(labels);
// For the automatic y-axis labels, set the minimum spacing to 30 pixels.
c.yAxis().setTickDensity(30);
// Add a box whisker layer using light blue (0x99ccee) for the fill color and blue (0x6688aa)
// for the whisker color. Set line width to 2 pixels. Use rounded corners and bar lighting
// effect.
BoxWhiskerLayer b = c.addBoxWhiskerLayer(Q3Data, Q1Data, Q4Data, Q0Data, Q2Data, 0x99ccee,
0x6688aa);
b.setLineWidth(2);
b.setRoundedCorners();
b.setBorderColor(Chart.Transparent, Chart.barLighting());
// Adjust the plot area to fit under the title with 10-pixel margin on the other three sides.
c.packPlotArea(10, title.getHeight(), c.getWidth() - 10, c.getHeight() - 10);
// Output the chart
viewer.Image = c.makeWebImage(Chart.PNG);
// Include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("", "",
"title='[{xLabel}] min/med/max = {min}/{med}/{max}\nInter-quartile range: {bottom} to " +
"{top}'");
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer)
{
// The data for the chart
double[] data0 = { 0.05, 0.06, 0.48, 0.1, 0.01, 0.05 };
double[] data1 = { 100, 125, 265, 147, 67, 105 };
string[] labels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun" };
// Create a XYChart object of size 300 x 180 pixels
XYChart c = new XYChart(300, 180);
// Set the plot area at (50, 20) and of size 200 x 130 pixels
c.setPlotArea(50, 20, 200, 130);
// Add a title to the chart using 8pt Arial Bold font
c.addTitle("Independent Y-Axis Demo", "Arial Bold", 8);
// Set the labels on the x axis.
c.xAxis().setLabels(labels);
// Add a title to the primary (left) y axis
c.yAxis().setTitle("Packet Drop Rate (pps)");
// Set the axis, label and title colors for the primary y axis to red (0xc00000) to match the
// first data set
c.yAxis().setColors(0xc00000, 0xc00000, 0xc00000);
// Add a title to the secondary (right) y axis
c.yAxis2().setTitle("Throughtput (MBytes)");
// set the axis, label and title colors for the primary y axis to green (0x008000) to match
// the second data set
c.yAxis2().setColors(0x008000, 0x008000, 0x008000);
// Add a line layer to for the first data set using red (0xc00000) color with a line width to
// 3 pixels
LineLayer lineLayer = c.addLineLayer(data0, 0xc00000);
lineLayer.setLineWidth(3);
// tool tip for the line layer
lineLayer.setHTMLImageMap("", "", "title='Packet Drop Rate on {xLabel}: {value} pps'");
// Add a bar layer to for the second data set using green (0x00C000) color. Bind the second
// data set to the secondary (right) y axis
BarLayer barLayer = c.addBarLayer(data1, 0x00c000);
barLayer.setUseYAxis2();
// tool tip for the bar layer
barLayer.setHTMLImageMap("", "", "title='Throughput on {xLabel}: {value} MBytes'");
// Output the chart
viewer.Image = c.makeWebImage(Chart.PNG);
// include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("");
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer)
{
// Use random table to generate a random series. The random table is set to 1 col x 51 rows,
// with 9 as the seed
RanTable rantable = new RanTable(9, 1, 51);
// Set the 1st column to start from 100, with changes between rows from -5 to +5
rantable.setCol(0, 100, -5, 5);
// Get the 1st column of the random table as the data set
double[] data = rantable.getCol(0);
// Create a XYChart object of size 600 x 300 pixels
XYChart c = new XYChart(600, 300);
// Set the plotarea at (50, 35) and of size 500 x 240 pixels. Enable both the horizontal and
// vertical grids by setting their colors to grey (0xc0c0c0)
c.setPlotArea(50, 35, 500, 240).setGridColor(0xc0c0c0, 0xc0c0c0);
// Add a title to the chart using 18 point Times Bold Itatic font.
c.addTitle("LOWESS Generic Curve Fitting Algorithm", "Times New Roman Bold Italic", 18);
// Set the y axis line width to 3 pixels
c.yAxis().setWidth(3);
// Add a title to the x axis using 12pt Arial Bold Italic font
c.xAxis().setTitle("Server Load (TPS)", "Arial Bold Italic", 12);
// Set the x axis line width to 3 pixels
c.xAxis().setWidth(3);
// Set the x axis scale from 0 - 50, with major tick every 5 units and minor tick every 1
// unit
c.xAxis().setLinearScale(0, 50, 5, 1);
// Add a blue layer to the chart
LineLayer layer = c.addLineLayer2();
// Add a red (0x80ff0000) data set to the chart with square symbols
layer.addDataSet(data, unchecked ((int)0x80ff0000)).setDataSymbol(Chart.SquareSymbol);
// Set the line width to 2 pixels
layer.setLineWidth(2);
// Use lowess for curve fitting, and plot the fitted data using a spline layer with line
// width set to 3 pixels
c.addSplineLayer(new ArrayMath(data).lowess().result(), 0x0000ff).setLineWidth(3);
// Set zero affinity to 0 to make sure the line is displayed in the most detail scale
c.yAxis().setAutoScale(0, 0, 0);
// Output the chart
viewer.Image = c.makeWebImage(Chart.PNG);
// Include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("", "", "title='({x}, {value|2})'");
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer)
{
// Get the selected year and month
int selectedYear = int.Parse(Request["year"]);
int selectedMonth = int.Parse(Request["x"]) + 1;
//
// In real life, the data may come from a database based on selectedYear. In this example, we
// just use a random number generator.
//
int seed = (selectedYear - 1992) * (100 + 3 * selectedMonth);
RanTable rantable = new RanTable(seed, 1, 4);
rantable.setCol(0, seed * 0.003, seed * 0.017);
double[] data = rantable.getCol(0);
// The labels for the pie chart
string[] labels = { "Services", "Hardware", "Software", "Others" };
// Create a PieChart object of size 600 x 240 pixels
PieChart c = new PieChart(600, 280);
// Set the center of the pie at (300, 140) and the radius to 120 pixels
c.setPieSize(300, 140, 120);
// Add a title to the pie chart using 18pt Times Bold Italic font
c.addTitle("Revenue Breakdown for " + selectedMonth + "/" + selectedYear,
"Times New Roman Bold Italic", 18);
// Draw the pie in 3D with 20 pixels 3D depth
c.set3D(20);
// Set label format to display sector label, value and percentage in two lines
c.setLabelFormat("{label}<*br*>${value|2}M ({percent}%)");
// Set label style to 10pt Arial Bold Italic font. Set background color to the same as the
// sector color, with reduced-glare glass effect and rounded corners.
ChartDirector.TextBox t = c.setLabelStyle("Arial Bold Italic", 10);
t.setBackground(Chart.SameAsMainColor, Chart.Transparent, Chart.glassEffect(
Chart.ReducedGlare));
t.setRoundedCorners();
// Use side label layout method
c.setLabelLayout(Chart.SideLayout);
// Set the pie data and the pie labels
c.setData(data, labels);
// Create the image and save it in a temporary location
viewer.Image = c.makeWebImage(Chart.PNG);
// Create an image map for the chart
viewer.ImageMap = c.getHTMLImageMap(Url.Action("", "piestub"), "",
"title='{label}:US$ {value|2}M'");
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer)
{
// The data for the bar chart
double[] data0 = { 100, 125, 245, 147 };
double[] data1 = { 85, 156, 179, 211 };
double[] data2 = { 97, 87, 56, 267 };
string[] labels = { "1st Quarter", "2nd Quarter", "3rd Quarter", "4th Quarter" };
// Create a XYChart object of size 600 x 350 pixels
XYChart c = new XYChart(600, 350);
// Add a title to the chart using 14pt Arial Bold Italic font
c.addTitle("Annual Product Revenue", "Arial Bold Italic", 14);
// Set the plot area at (50, 60) and of size 500 x 240. Use two alternative background colors
// (f8f8f8 and ffffff)
c.setPlotArea(50, 60, 500, 240, 0xf8f8f8, 0xffffff);
// Add a legend box at (55, 22) using horizontal layout, with transparent background
c.addLegend(55, 22, false).setBackground(Chart.Transparent);
// Set the x axis labels
c.xAxis().setLabels(labels);
// Draw the ticks between label positions (instead of at label positions)
c.xAxis().setTickOffset(0.5);
// Add a multi-bar layer with 3 data sets and 9 pixels 3D depth
BarLayer layer = c.addBarLayer2(Chart.Side, 9);
layer.addDataSet(data0, -1, "Product A");
layer.addDataSet(data1, -1, "Product B");
layer.addDataSet(data2, -1, "Product C");
// Set data set 1 to use a bar shape of a 6-pointed star
layer.setBarShape(Chart.StarShape(6), 0);
// Set data set 2 to use a bar shapre of a 6-sided polygon
layer.setBarShape(Chart.PolygonShape(6), 1);
// Set data set 3 to use an X bar shape
layer.setBarShape(Chart.Cross2Shape(), 2);
// Add a title to the y-axis
c.yAxis().setTitle("Revenue (USD in millions)");
// Add a title to the x axis
c.xAxis().setTitle("Year 2005");
// Output the chart
viewer.Image = c.makeWebImage(Chart.PNG);
// Include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("", "",
"title='{dataSetName}: {xLabel} Revenue = {value} millions'");
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer)
{
// The data for the chart
double[] dataY0 = { 4, 4.5, 5, 5.25, 5.75, 5.25, 5, 4.5, 4, 3, 2.5, 2.5 };
DateTime[] dataX0 = { new DateTime(1997, 1, 1), new DateTime(1998, 6, 25), new DateTime(1999,
9, 6), new DateTime(2000, 2, 6), new DateTime(2000, 9,21), new DateTime(2001, 3, 4),
new DateTime(2001, 6, 8), new DateTime(2002, 2, 4), new DateTime(2002, 5, 19),
new DateTime(2002, 8, 16), new DateTime(2002, 12, 1), new DateTime(2003, 1, 1) };
double[] dataY1 = { 7, 6.5, 6, 5, 6.5, 7, 6, 5.5, 5, 4, 3.5, 3.5 };
DateTime[] dataX1 = { new DateTime(1997, 1, 1), new DateTime(1997, 7, 1), new DateTime(1997,
12, 1), new DateTime(1999, 1, 15), new DateTime(1999, 6,9), new DateTime(2000,3, 3),
new DateTime(2000, 8, 13), new DateTime(2001, 5, 5), new DateTime(2001, 9, 16),
new DateTime(2002, 3, 16), new DateTime(2002, 6, 1), new DateTime(2003, 1, 1) };
// Create a XYChart object of size 500 x 270 pixels, with a pale blue (e0e0ff) background,
// black border, 1 pixel 3D border effect and rounded corners
XYChart c = new XYChart(600, 300, 0xe0e0ff, 0x000000, 1);
c.setRoundedFrame();
// Set the plotarea at (55, 60) and of size 520 x 200 pixels, with white (ffffff) background.
// Set horizontal and vertical grid lines to grey (cccccc).
c.setPlotArea(50, 60, 525, 200, 0xffffff, -1, -1, 0xcccccc, 0xcccccc);
// Add a legend box at (55, 32) (top of the chart) with horizontal layout. Use 9pt Arial Bold
// font. Set the background and border color to Transparent.
c.addLegend(55, 32, false, "Arial Bold", 9).setBackground(Chart.Transparent);
// Add a title box to the chart using 15pt Times Bold Italic font. The text is white (ffffff)
// on a deep blue (000088) background, with soft lighting effect from the right side.
c.addTitle("Long Term Interest Rates", "Times New Roman Bold Italic", 15, 0xffffff
).setBackground(0x000088, -1, Chart.softLighting(Chart.Right));
// Set the y axis label format to display a percentage sign
c.yAxis().setLabelFormat("{value}%");
// Add a red (ff0000) step line layer to the chart and set the line width to 2 pixels
StepLineLayer layer0 = c.addStepLineLayer(dataY0, 0xff0000, "Country AAA");
layer0.setXData(dataX0);
layer0.setLineWidth(2);
// Add a blue (0000ff) step line layer to the chart and set the line width to 2 pixels
StepLineLayer layer1 = c.addStepLineLayer(dataY1, 0x0000ff, "Country BBB");
layer1.setXData(dataX1);
layer1.setLineWidth(2);
// Output the chart
viewer.Image = c.makeWebImage(Chart.PNG);
// Include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("", "",
"title='{dataSetName} change to {value}% on {x|mmm dd, yyyy}'");
}
