//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 pie chart
double[] data = { 35, 30, 25, 7, 6, 5, 4, 3, 2, 1 };
// The labels for the pie chart
string[] labels = { "Labor", "Production", "Facilities", "Taxes", "Misc",
"Legal", "Insurance", "Licenses", "Transport", "Interest" };
// Create a PieChart object of size 560 x 270 pixels, with a golden
// background and a 1 pixel 3D border
PieChart c = new PieChart(560, 270, Chart.goldColor(), -1, 1);
// Add a title box using 15 pts Times Bold Italic font and metallic pink
// background color
c.addTitle("Project Cost Breakdown", "Times New Roman Bold Italic", 15
).setBackground(Chart.metalColor(0xff9999));
// Set the center of the pie at (280, 135) and the radius to 110 pixels
c.setPieSize(280, 135, 110);
// Draw the pie in 3D with 20 pixels 3D depth
c.set3D(20);
// Use the side label layout method
c.setLabelLayout(Chart.SideLayout);
// Set the label box background color the same as the sector color, with
// glass effect, and with 5 pixels rounded corners
ChartDirector.TextBox t = c.setLabelStyle();
t.setBackground(Chart.SameAsMainColor, Chart.Transparent,
Chart.glassEffect());
t.setRoundedCorners(5);
// Set the border color of the sector the same color as the fill color.
// Set the line color of the join line to black (0x0)
c.setLineColor(Chart.SameAsMainColor, 0x000000);
// Set the start angle to 135 degrees may improve layout when there are
// many small sectors at the end of the data array (that is, data sorted
// in descending order). It is because this makes the small sectors
// position near the horizontal axis, where the text label has the least
// tendency to overlap. For data sorted in ascending order, a start angle
// of 45 degrees can be used instead.
c.setStartAngle(135);
// Set the pie data and the pie labels
c.setData(data, labels);
// Output the chart
viewer.Image = c.makeImage();
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='{label}: US${value}K ({percent}%)'");
}
//
// 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'");
}
public void createChartWeekly(WinChartViewer viewer, DataTable errorData, int per)
{
try
{
Chart.setLicenseCode("DEVP-2LSU-B4LX-YCTY-2DF2-77EE");
double[] data = null;
int[] color = null;
string[] labels = null;
// this.chartWidth = this.Width;
//plottWidth = 900;
GetDataForChart(errorData, ref labels, ref data, ref color);
PieChart c = new PieChart(viewer.Width, viewer.Height);
c.setBorder(10);
c.addTitle(" BY TYPE", "Calibri Bold", 30
).setBackground(Chart.metalColor(0xff9999));
c.setPieSize(450, viewer.Height / 2, 150);
c.set3D(40);
c.setLabelLayout(Chart.SideLayout);
ChartDirector.TextBox t = c.setLabelStyle("Arial Bold", 10, Chart.CColor(Color.Blue));
t.setBackground(Chart.SameAsMainColor, Chart.Transparent,
Chart.glassEffect());
t.setText("{label} ({value})");
t.setRoundedCorners(4);
c.setLineColor(Chart.SameAsMainColor);
c.setStartAngle(15);
c.setData(data, labels);
viewer.Chart = c;
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='{label}'");
}
catch (Exception)
{
}
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer)
{
// The data for the pie chart
double[] data = { 21, 18, 15, 12, 8, 24 };
// The labels for the pie chart
string[] labels = { "Labor", "Licenses", "Taxes", "Legal", "Facilities", "Production" };
// The colors to use for the sectors
int[] colors = { 0x66aaee, 0xeebb22, 0xbbbbbb, 0x8844ff, 0xdd2222, 0x009900 };
// Create a PieChart object of size 600 x 360 pixels.
PieChart c = new PieChart(600, 360);
// Use the white on black palette, which means the default text and line colors are white
c.setColors(Chart.whiteOnBlackPalette);
// Use a vertical gradient color from deep blue (000066) to blue (0000cc) as background. Use
// rounded corners of 20 pixels radius. Enable soft drop shadow.
c.setBackground(c.linearGradientColor(0, 0, 0, c.getHeight(), 0x000066, 0x0000cc));
c.setRoundedFrame(0xffffff, 20);
c.setDropShadow();
// Add a title using 18pt Times New Roman Bold Italic font. Add 16 pixels top margin to the
// title.
c.addTitle("Exploded Pie Chart Demonstration", "Times New Roman Bold Italic", 18).setMargin2(
0, 0, 16, 0);
// Set the center of the pie at (300, 195) and the radius to 110 pixels
c.setPieSize(300, 195, 110);
// Set the pie data and the pie labels
c.setData(data, labels);
// Set the sector colors
c.setColors2(Chart.DataColor, colors);
// Use local gradient shading for the sectors, with 5 pixels wide semi-transparent white
// (bbffffff) borders
c.setSectorStyle(Chart.LocalGradientShading, unchecked ((int)0xbbffffff), 5);
// Use the side label layout method
c.setLabelLayout(Chart.SideLayout);
// Use 10pt Arial Bold as the default label font. Set the label box background color the same
// as the sector color. Use soft lighting effect with light direction from right. Use 8
// pixels rounded corners.
ChartDirector.TextBox t = c.setLabelStyle("Arial Bold", 10, 0x000000);
t.setBackground(Chart.SameAsMainColor, Chart.Transparent, Chart.softLighting(Chart.Right, 0))
;
t.setRoundedCorners(8);
// Set the sector label format. The label is centered in a 110 pixels wide bounding box. It
// consists of two lines. The first line is the sector name. The second line shows the data
// value and percentage.
c.setLabelFormat(
"<*block,halign=center,width=110*>{label}\n<*font=Arial,size=8*>US$ {value}M " +
"({percent}%)<*/*>");
// Explode all sectors 10 pixels from the center
c.setExplode(-1, 10);
// 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}%)'");
}
//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 pie chart
double[] data = { 20, 10, 15, 12 };
// The labels for the pie chart
string[] labels = { "Labor", "Licenses", "Facilities", "Production" };
// The colors to use for the sectors
int[] colors = { 0x66aaee, 0xeebb22, 0xcccccc, 0xcc88ff };
// Create a PieChart object of size 600 x 320 pixels. Use a vertical gradient color from
// deep blue (000066) to blue (0000cc) as background. Use rounded corners of 20 pixels
// radius.
PieChart c = new PieChart(600, 320);
c.setBackground(c.linearGradientColor(0, 0, 0, c.getHeight(), 0x000066, 0x0000cc));
c.setRoundedFrame(0xffffff, 20);
// Add a title using 18pt Times New Roman Bold Italic font in white (ffffff) color. Set
// top/bottom margins to 8 pixels.
ChartDirector.TextBox title = c.addTitle("Donut Chart Demonstration",
"Times New Roman Bold Italic", 18, 0xffffff);
title.setMargin2(0, 0, 8, 8);
// Add a separator line in white color just under the title
c.addLine(10, title.getHeight(), c.getWidth() - 11, title.getHeight(), 0xffffff);
// Set donut center at (300, 170), and outer/inner radii as 120/60 pixels
c.setDonutSize(300, 170, 120, 60);
// Draw the pie in 3D with a pie thickness of 25 pixels
c.set3D(25);
// Set the pie data and the pie labels
c.setData(data, labels);
// Set the sector colors
c.setColors2(Chart.DataColor, colors);
// Use local gradient shading for the sectors
c.setSectorStyle(Chart.LocalGradientShading);
// Set sector border color to same as fill color. Set label join line color to white
// (ffffff)
c.setLineColor(Chart.SameAsMainColor, 0xffffff);
// Use the side label layout method, with the labels positioned 16 pixels from the donut
// bounding box
c.setLabelLayout(Chart.SideLayout, 16);
// Set the sector label format. The label consists of two lines. The first line is the
// sector name in Times Bold Italic font and is underlined. The second line shows the
// data value and percentage.
c.setLabelFormat(
"<*block,halign=left*><*font=Times New Roman Bold Italic,size=12,underline=1*>" +
"{label}<*/font*><*br*>US$ {value}K ({percent}%)");
// Set the label box background color the same as the sector color. Use soft lighting
// effect with light direction from right. Use rounded corners.
ChartDirector.TextBox t = c.setLabelStyle();
t.setBackground(Chart.SameAsMainColor, Chart.Transparent, Chart.softLighting(Chart.Right
));
t.setRoundedCorners();
// Output the chart
viewer.Chart = c;
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='{label}: US${value}K ({percent}%)'");
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer, int chartIndex)
{
// The value to display on the meter
double value = 75.35;
// The bar colors for the meters
int[] barColor = { 0x0088ff, 0x00cc00, 0x8833dd, 0xff8800 };
// Create a LinearMeter object of size 260 x 80 pixels with very light grey (0xeeeeee)
// backgruond and a light grey (0xccccccc) 3-pixel thick rounded frame
LinearMeter m = new LinearMeter(260, 80, 0xeeeeee, 0xcccccc);
m.setRoundedFrame(Chart.Transparent);
m.setThickFrame(3);
// This example demonstrates putting the text labels at the top or bottom. This is by setting
// the label alignment, as well as the scale, color scale and label positions.
int[] alignment = { Chart.Top, Chart.Top, Chart.Bottom, Chart.Bottom };
int[] meterYPos = { 24, 24, 36, 36 };
int[] labelYPos = { 65, 65, 16, 16 };
int[] colorScalePos = { 48, 48, 27, 27 };
// Set the scale region
m.setMeter(18, meterYPos[chartIndex], 222, 20, alignment[chartIndex]);
// 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
double[] smoothColorScale = { 0, 0x0000ff, 25, 0x0088ff, 50, 0x00ff00, 75, 0xdddd00, 100,
0xff0000 };
m.addColorScale(smoothColorScale, colorScalePos[chartIndex], 5);
// Add a bar from 0 to value with glass effect and 4 pixel rounded corners
m.addBar(0, value, barColor[chartIndex], Chart.glassEffect(Chart.NormalGlare, Chart.Top), 4);
//
// In this example, some charts have the "Temperauture" label on the left side and the value
// readout on the right side, and some charts have the reverse
//
if (chartIndex % 2 == 0)
{
// Add a label on the left side using 8pt Arial Bold font
m.addText(15, labelYPos[chartIndex], "Temperature C", "Arial Bold", 8, Chart.TextColor,
Chart.Left);
// Add a text box on the right side. Display the value using white (0xffffff) 8pt Arial
// Bold font on a black (0x000000) background with depressed rounded border.
ChartDirector.TextBox t = m.addText(240, labelYPos[chartIndex], m.formatValue(value, "2"
), "Arial", 8, 0xffffff, Chart.Right);
t.setBackground(0x000000, 0x000000, -1);
t.setRoundedCorners(3);
}
else
{
// Add a label on the right side using 8pt Arial Bold font
m.addText(243, labelYPos[chartIndex], "Temperature C", "Arial Bold", 8, Chart.TextColor,
Chart.Right);
// Add a text box on the left side. Display the value using white (0xffffff) 8pt Arial
// Bold font on a black (0x000000) background with depressed rounded border.
ChartDirector.TextBox t = m.addText(18, labelYPos[chartIndex], m.formatValue(value, "2"),
"Arial", 8, 0xffffff, Chart.Left);
t.setBackground(0x000000, 0x000000, -1);
t.setRoundedCorners(3);
}
// Output the chart
viewer.Image = m.makeWebImage(Chart.PNG);
}
//Main code for creating charts
public void createChart(WPFChartViewer viewer, int chartIndex)
{
// The value to display on the meter
double value = 72.3;
// The background and border colors of the meters
int[] bgColor = { 0x88ccff, 0xffdddd, 0xffddaa, 0xffccff, 0xdddddd, 0xccffcc };
int[] borderColor = { 0x000077, 0x880000, 0xee6600, 0x440088, 0x000000, 0x006000 };
// Create an AngularMeter object of size 250 x 250 pixels with transparent background
AngularMeter m = new AngularMeter(250, 250, Chart.Transparent);
// Demonstration two different meter scale angles
if (chartIndex % 2 == 0)
{
// Center at (125, 125), scale radius = 111 pixels, scale angle -140 to +140 degrees
m.setMeter(125, 125, 111, -140, 140);
}
else
{
// Center at (125, 125), scale radius = 111 pixels, scale angle -180 to +90 degrees
m.setMeter(125, 125, 111, -180, 90);
}
// Background gradient color with brighter color at the center
double[] bgGradient = { 0, m.adjustBrightness(bgColor[chartIndex], 3), 0.75, bgColor[
chartIndex] };
// Add circle with radius 123 pixels as background using the background gradient
m.addRing(0, 123, m.relativeRadialGradient(bgGradient));
// Add a ring between radii 116 and 123 pixels as border
m.addRing(116, 123, borderColor[chartIndex]);
// Meter scale is 0 - 100, with major/minor/micro ticks every 10/5/1 units
m.setScale(0, 100, 10, 5, 1);
// Set the scale label style to 15pt Arial Italic. Set the major/minor/micro tick
// lengths to 12/9/6 pixels pointing inwards, and their widths to 2/1/1 pixels.
m.setLabelStyle("Arial Italic", 15);
m.setTickLength(-12, -9, -6);
m.setLineWidth(0, 2, 1, 1);
// Demostrate different types of color scales and putting them at different positions
double[] smoothColorScale = { 0, 0x3333ff, 25, 0x0088ff, 50, 0x00ff00, 75, 0xdddd00, 100,
0xff0000 };
double[] stepColorScale = { 0, 0x00cc00, 60, 0xffdd00, 80, 0xee0000, 100 };
double[] highLowColorScale = { 0, 0x00ff00, 70, Chart.Transparent, 100, 0xff0000 };
if (chartIndex == 0)
{
// Add the smooth color scale at the default position
m.addColorScale(smoothColorScale);
}
else if (chartIndex == 1)
{
// Add the smooth color scale starting at radius 62 with zero width and ending at
// radius 40 with 22 pixels outer width
m.addColorScale(smoothColorScale, 62, 0, 40, 22);
}
else if (chartIndex == 2)
{
// Add green, yellow and red zones between radii 44 and 60
m.addZone(0, 60, 44, 60, 0x00dd00);
m.addZone(60, 80, 44, 60, 0xffff00);
m.addZone(80, 100, 44, 60, 0xff0000);
}
else if (chartIndex == 3)
{
// Add the high/low color scale at the default position
m.addColorScale(highLowColorScale);
}
else if (chartIndex == 4)
{
// Add the smooth color scale at radius 44 with 16 pixels outer width
m.addColorScale(smoothColorScale, 44, 16);
}
else
{
// Add the step color scale at the default position
m.addColorScale(stepColorScale);
}
// Add a text label centered at (125, 175) with 15pt Arial Italic font
m.addText(125, 175, "CPU", "Arial Italic", 15, Chart.TextColor, Chart.Center);
// Add a readout to some of the charts as demonstration
if (chartIndex == 0 || chartIndex == 2)
{
// Put the value label center aligned at (125, 232), using white (0xffffff) 14pt
// Arial font on a black (0x000000) background. Set box width to 50 pixels with 5
// pixels rounded corners.
ChartDirector.TextBox t = m.addText(125, 232, m.formatValue(value,
"<*block,width=50,halign=center*>{value|1}"), "Arial", 14, 0xffffff,
Chart.BottomCenter);
t.setBackground(0x000000);
t.setRoundedCorners(5);
}
// Add a red (0xff0000) pointer at the specified value
m.addPointer2(value, 0xff0000);
// Output the chart
viewer.Chart = m;
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer, int chartIndex)
{
// The value to display on the meter
double value = 74.25;
// Create a LinearMeter object of size 250 x 75 pixels with very light grey (0xeeeeee)
// backgruond and a light grey (0xccccccc) 3-pixel thick rounded frame
LinearMeter m = new LinearMeter(250, 75, 0xeeeeee, 0xcccccc);
m.setRoundedFrame(Chart.Transparent);
m.setThickFrame(3);
// Set the scale region top-left corner at (14, 23), with size of 218 x 20 pixels. The scale
// labels are located on the top (implies horizontal meter)
m.setMeter(14, 23, 218, 20, Chart.Top);
// Set meter scale from 0 - 100, with a tick every 10 units
m.setScale(0, 100, 10);
// Demostrate different types of color scales and putting them at different positions
double[] smoothColorScale = { 0, 0x6666ff, 25, 0x00bbbb, 50, 0x00ff00, 75, 0xffff00, 100,
0xff0000 };
double[] stepColorScale = { 0, 0x33ff33, 50, 0xffff33, 80, 0xff3333, 100 };
double[] highLowColorScale = { 0, 0x6666ff, 70, Chart.Transparent, 100, 0xff0000 };
if (chartIndex == 0)
{
// Add the smooth color scale at the default position
m.addColorScale(smoothColorScale);
}
else if (chartIndex == 1)
{
// Add the high low scale at the default position
m.addColorScale(highLowColorScale);
}
else if (chartIndex == 2)
{
// Add the smooth color scale starting at y = 43 (bottom of scale) with zero width and
// ending at y = 23 with 20 pixels width
m.addColorScale(smoothColorScale, 43, 0, 23, 20);
}
else
{
// Add the step color scale at the default position
m.addColorScale(stepColorScale);
}
// Add a blue (0x0000cc) pointer at the specified value
m.addPointer(value, 0x0000cc);
// Add a label left aligned to (10, 61) using 8pt Arial Bold font
m.addText(10, 61, "Temperature C", "Arial Bold", 8, Chart.TextColor, Chart.Left);
// Add a text box right aligned to (235, 61). Display the value using white (0xffffff) 8pt
// Arial Bold font on a black (0x000000) background with depressed rounded border.
ChartDirector.TextBox t = m.addText(235, 61, m.formatValue(value, "2"), "Arial Bold", 8,
0xffffff, Chart.Right);
t.setBackground(0x000000, 0x000000, -1);
t.setRoundedCorners(3);
// Output the chart
viewer.Image = m.makeWebImage(Chart.PNG);
}
//Main code for creating charts
public void createChart(WinChartViewer viewer, int chartIndex)
{
// The value to display on the meter
double value = 75.35;
// Create a LinearMeter object of size 250 x 75 pixels with black background and rounded
// corners
LinearMeter m = new LinearMeter(250, 75, 0x000000);
m.setRoundedFrame(Chart.Transparent);
// Set the default text and line colors to white (0xffffff)
m.setColor(Chart.TextColor, 0xffffff);
m.setColor(Chart.LineColor, 0xffffff);
// Set the scale region top-left corner at (14, 23), with size of 218 x 20 pixels. The
// scale labels are located on the top (implies horizontal meter)
m.setMeter(14, 23, 218, 20, Chart.Top);
// Set meter scale from 0 - 100, with a tick every 10 units
m.setScale(0, 100, 10);
// The tick line width to 1 pixel
m.setLineWidth(0, 1);
// Demostrate different types of color scales and putting them at different positions
double[] smoothColorScale = { 0, 0x0000ff, 25, 0x0088ff, 50, 0x00ff00, 75, 0xdddd00, 100,
0xff0000 };
double[] stepColorScale = { 0, 0x00cc00, 50, 0xeecc00, 80, 0xdd0000, 100 };
double[] highLowColorScale = { 0, 0x0000ff, 70, Chart.Transparent, 100, 0xff0000 };
if (chartIndex == 0)
{
// Add the smooth color scale at the default position
m.addColorScale(smoothColorScale);
}
else if (chartIndex == 1)
{
// Add the smooth color scale starting at y = 23 (top of scale) with zero width and
// ending at y = 23 with 20 pixels width
m.addColorScale(smoothColorScale, 23, 0, 23, 20);
}
else if (chartIndex == 2)
{
// Add the high low scale at the default position
m.addColorScale(highLowColorScale);
}
else if (chartIndex == 3)
{
// Add the smooth color scale starting at y = 33 (center of scale) with zero width
// and ending at y = 23 with 20 pixels width
m.addColorScale(smoothColorScale, 33, 0, 23, 20);
}
else if (chartIndex == 4)
{
// Add the step color scale at the default position
m.addColorScale(stepColorScale);
}
else
{
// Add the smooth color scale starting at y = 43 (bottom of scale) with zero width
// and ending at y = 23 with 20 pixels width
m.addColorScale(smoothColorScale, 43, 0, 23, 20);
}
// Add a blue (0x0000cc) pointer with white (0xffffff) border at the specified value
m.addPointer(value, 0x0000cc, 0xffffff);
// Add a label left aligned to (10, 61) using 8pt Arial Bold font
m.addText(10, 61, "Temperature C", "Arial Bold", 8, Chart.TextColor, Chart.Left);
// Add a text box right aligned to (235, 61). Display the value using white (0xffffff)
// 8pt Arial Bold font on a black (0x000000) background with depressed grey (0x444444)
// rounded border.
ChartDirector.TextBox t = m.addText(235, 61, m.formatValue(value, "2"), "Arial Bold", 8,
0xffffff, Chart.Right);
t.setBackground(0x000000, 0x444444, -1);
t.setRoundedCorners(3);
// Output the chart
viewer.Chart = m;
}
//Main code for creating charts
public void createChart(WinChartViewer viewer, int chartIndex)
{
// The value to display on the meter
double value = 74.25;
// Create a LinearMeter object of size 70 x 260 pixels with black background and rounded
// corners
LinearMeter m = new LinearMeter(70, 260, 0x000000);
m.setRoundedFrame(Chart.Transparent);
// Set the default text and line colors to white (0xffffff)
m.setColor(Chart.TextColor, 0xffffff);
m.setColor(Chart.LineColor, 0xffffff);
// Set the scale region top-left corner at (28, 30), with size of 20 x 196 pixels. The
// scale labels are located on the left (default - implies vertical meter)
m.setMeter(28, 30, 20, 196);
// Set meter scale from 0 - 100, with a tick every 10 units
m.setScale(0, 100, 10);
// The tick line width to 1 pixel
m.setLineWidth(0, 1);
// Demostrate different types of color scales and putting them at different positions
double[] smoothColorScale = { 0, 0x0000ff, 25, 0x0088ff, 50, 0x00ff00, 75, 0xdddd00, 100,
0xff0000 };
double[] stepColorScale = { 0, 0x00cc00, 50, 0xeecc00, 80, 0xdd0000, 100 };
double[] highLowColorScale = { 0, 0x0000ff, 70, Chart.Transparent, 100, 0xff0000 };
if (chartIndex == 0)
{
// Add the smooth color scale at the default position
m.addColorScale(smoothColorScale);
}
else if (chartIndex == 1)
{
// Add the step color scale at the default position
m.addColorScale(stepColorScale);
}
else if (chartIndex == 2)
{
// Add the high low scale at the default position
m.addColorScale(highLowColorScale);
}
else if (chartIndex == 3)
{
// Add the smooth color scale starting at x = 28 (left of scale) with zero width and
// ending at x = 28 with 20 pixels width
m.addColorScale(smoothColorScale, 28, 0, 28, 20);
}
else if (chartIndex == 4)
{
// Add the smooth color scale starting at x = 38 (center of scale) with zero width
// and ending at x = 28 with 20 pixels width
m.addColorScale(smoothColorScale, 38, 0, 28, 20);
}
else
{
// Add the smooth color scale starting at x = 48 (right of scale) with zero width
// and ending at x = 28 with 20 pixels width
m.addColorScale(smoothColorScale, 48, 0, 28, 20);
}
// Add a blue (0x0000cc) pointer with white (0xffffff) border at the specified value
m.addPointer(value, 0x0000cc, 0xffffff);
// Add a label at the top-center using 8pt Arial Bold font
m.addText(m.getWidth() / 2, 5, "Temp C", "Arial Bold", 8, Chart.TextColor, Chart.Top);
// Add a text box at the bottom-center. Display the value using white (0xffffff) 8pt
// Arial Bold font on a black (0x000000) background with depressed grey (0x444444)
// rounded border.
ChartDirector.TextBox t = m.addText(m.getWidth() / 2, m.getHeight() - 7, m.formatValue(
value, "2"), "Arial Bold", 8, 0xffffff, Chart.Bottom);
t.setBackground(0x000000, 0x444444, -1);
t.setRoundedCorners(3);
// Output the chart
viewer.Chart = m;
}
//Main code for creating charts
public void createChart(WPFChartViewer viewer, int chartIndex)
{
// The value to display on the meter
double value = 66.77;
// Create a LinearMeter object of size 70 x 260 pixels with black background and rounded
// corners
LinearMeter m = new LinearMeter(70, 260, 0x000000);
m.setRoundedFrame(Chart.Transparent);
// Set the default text and line colors to white (0xffffff)
m.setColor(Chart.TextColor, 0xffffff);
m.setColor(Chart.LineColor, 0xffffff);
// Set the scale region top-left corner at (36, 30), with size of 20 x 196 pixels. The
// scale labels are located on the left (default - implies vertical meter).
m.setMeter(36, 30, 20, 196);
// Set meter scale from 0 - 100, with a tick every 10 units
m.setScale(0, 100, 10);
// Add the chart title at the top center
ChartDirector.TextBox title = m.addText(m.getWidth() / 2, 5, "Temp C", "Arial Bold", 8,
Chart.TextColor, Chart.TopCenter);
// Move the scale labels 8 pixels from the meter scale to make room for the color scale
m.setLabelPos(false, 8);
// Demostrate different types of color scales
double[] smoothColorScale = { 0, 0x0000ff, 25, 0x0088ff, 50, 0x00ff00, 75, 0xdddd00, 100,
0xff0000 };
double[] stepColorScale = { 0, 0x00dd00, 50, 0xffff00, 80, 0xff0000, 100 };
double[] highLowColorScale = { 0, 0x0000ff, 40, Chart.Transparent, 60, Chart.Transparent,
100, 0xff0000 };
double[] highColorScale = { 70, Chart.Transparent, 100, 0xff0000 };
if (chartIndex == 0)
{
// Add a blue (0x0088ff) bar from 0 to value with glass effect and 4 pixel rounded
// corners
m.addBar(0, value, 0x0088ff, Chart.glassEffect(Chart.NormalGlare, Chart.Left), 4);
// Add a 4-pixel thick smooth color scale at x = 29 (left of meter scale)
m.addColorScale(smoothColorScale, 29, 4);
}
else if (chartIndex == 1)
{
// Add a yellow (0xCC9922) bar from 0 to value with bar lighting effect
m.addBar(0, value, 0xcc9922, Chart.barLighting());
// Add a 4-pixel thick smooth color scale at x = 29 (left of meter scale)
m.addColorScale(smoothColorScale, 29, 4);
// Set the title style to black text on a yellow (0xcc9922) background with rounded
// corners
title.setFontColor(0x000000);
title.setBackground(0xcc9922);
title.setRoundedCorners(2);
}
else if (chartIndex == 2)
{
// Add a grey (0xaaaaaa) bar from 0 to value with bar lighting effect
m.addBar(0, value, 0xaaaaaa, Chart.barLighting());
// Add a 4-pixel high/low color scale at x = 29 (left of meter scale)
m.addColorScale(highLowColorScale, 29, 4);
}
else if (chartIndex == 3)
{
// Add a brown (0xbb6622) bar from 0 to value with cylinder lighting effect
m.addBar(0, value, 0xbb6622, Chart.cylinderEffect());
// Add a 4 pixel thick brown (0xbb6622) frame
m.setThickFrame(4, 0xbb6622);
// Add a high only color scale at x = 29 (left of meter scale)
m.addColorScale(highColorScale, 29, 4);
}
else if (chartIndex == 4)
{
// Add a purple (0x7755ee) bar from 0 to value
m.addBar(0, value, 0x7755ee);
// Add a 4 pixel thick purple (0x880088) frame
m.setThickFrame(4, 0x880088);
// Add a 4-pixel high/low color scale at x = 29 (left of meter scale)
m.addColorScale(highLowColorScale, 29, 4);
}
else
{
// Add a green (0x00bb00) bar from 0 to value with soft lighting effect and 4 pixel
// rounded corners
m.addBar(0, value, 0x00bb00, Chart.softLighting(), 4);
// Add a 4-pixel step color scale at x = 29 (left of meter scale)
m.addColorScale(stepColorScale, 29, 4);
}
// Add a text box at the bottom-center. Display the value using white (0xffffff) 8pt
// Arial Bold font on a black (0x000000) background with depressed grey (0x333333)
// rounded border.
ChartDirector.TextBox t = m.addText(m.getWidth() / 2, m.getHeight() - 7, m.formatValue(
value, "2"), "Arial Bold", 8, 0xffffff, Chart.BottomCenter);
t.setBackground(0x000000, 0x333333, -1);
t.setRoundedCorners(3);
// Output the chart
viewer.Chart = m;
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer)
{
// Data for outer ring
double[] data = { 88, 124, 96 };
// Data for inner ring
double[] data2 = { 77, 87, 45 };
// Labels for the sectors
string[] labels = { "Hardware", "Software", "Services" };
// Colors for the sectors
int[] colors = { 0xff9999, 0x9999ff, 0x66ff66 };
//
// Create the main chart, which contains the chart title, the outer ring, and the legend box
//
// Create a PieChart object of size 450 x 360 pixels, with transparent background
PieChart c = new PieChart(450, 360);
// Add a title to the chart with 18pt Times Bold Italic font
c.addTitle("Concentric Donut Chart", "Times New Roman Bold Italic", 18);
// Set donut center at (160, 200), and outer/inner radii as 150/100 pixels
c.setDonutSize(160, 200, 150, 100);
// Add a label at the bottom-right corner of the ring to label the outer ring Use 12pt Arial
// Bold Italic font in white (ffffff) color, on a green (008800) background, with soft
// lighting effect and 5 pixels rounded corners
ChartDirector.TextBox t = c.addText(260, 300, " Year 2006 ", "Arial Bold Italic", 12,
0xffffff);
t.setBackground(0x008800, Chart.Transparent, Chart.softLighting());
t.setRoundedCorners(5);
// Set the legend box at (320, 50) with 12pt Arial Bold Italic font, with no border
c.addLegend(320, 50, true, "Arial Bold Italic", 13).setBackground(Chart.Transparent,
Chart.Transparent);
// Set the pie data and the pie labels
c.setData(data, labels);
// Set the pie colors
c.setColors2(Chart.DataColor, colors);
// Set pie border color to white (ffffff)
c.setLineColor(0xffffff);
// Set pie label to value in $###M format, percentage in (##.#%) format, in two lines.
c.setLabelFormat("${value}M<*br*>({percent|1}%)");
// Use 10pt Airal Bold for the sector labels
c.setLabelStyle("Arial Bold", 10);
// Set the label position to -25 pixels from the sector (which would be internal to the
// sector)
c.setLabelPos(-25);
//
// Create the inner ring.
//
// Create a PieChart object of size 280 x 320 pixels, with transparent background
PieChart c2 = new PieChart(280, 320, Chart.Transparent);
// Set donut center at (110, 110), and outer/inner radii as 100/50 pixels
c2.setDonutSize(110, 110, 100, 50);
// Add a label at the center of the ring to label the inner ring. Use 12pt Arial Bold Italic
// font in white (ffffff) color, on a deep blue (0000cc) background, with soft lighting
// effect and 5 pixels rounded corners
ChartDirector.TextBox t2 = c2.addText(110, 110, " Year 2005 ", "Arial Bold Italic", 12,
0xffffff, Chart.Center);
t2.setBackground(0x0000cc, Chart.Transparent, Chart.softLighting());
t2.setRoundedCorners(5);
// Set the pie data and the pie labels
c2.setData(data2, labels);
// Set the pie colors
c2.setColors2(Chart.DataColor, colors);
// Set pie border color to white (ffffff)
c2.setLineColor(0xffffff);
// Set pie label to value in $###M format, percentage in (##.#%) format, in two lines.
c2.setLabelFormat("${value}M<*br*>({percent|1}%)");
// Use 10pt Airal Bold for the sector labels
c2.setLabelStyle("Arial Bold", 10);
// Set the label position to -25 pixels from the sector (which would be internal to the
// sector)
c2.setLabelPos(-25);
// merge the inner ring into the outer ring at (50, 90)
c.makeChart3().merge(c2.makeChart3(), 50, 90, Chart.TopLeft, 0);
// Output the chart
viewer.Image = c.makeWebImage(Chart.PNG);
// include tool tip for the chart
viewer.ImageMap = c2.getHTMLImageMap("", "",
"title='{label} revenue for 2005: US${value}M ({percent}%)'", 50, 90) +
c.getHTMLImageMap("", "", "title='{label} revenue for 2006: US${value}M ({percent}%)'");
}
//Main code for creating charts
public void createChart(WinChartViewer viewer, int chartIndex)
{
// The value to display on the meter
double value = 74.25;
// Create a LinearMeter object of size 250 x 75 pixels with very light grey (0xeeeeee)
// backgruond and a light grey (0xccccccc) 3-pixel thick rounded frame
LinearMeter m = new LinearMeter(250, 75, 0xeeeeee, 0xcccccc);
m.setRoundedFrame(Chart.Transparent);
m.setThickFrame(3);
// This example demonstrates putting the text labels at the top or bottom. This is by
// setting the label alignment, scale position and label position.
int[] alignment = { Chart.Top, Chart.Top, Chart.Bottom, Chart.Bottom };
int[] meterYPos = { 23, 23, 34, 34 };
int[] labelYPos = { 61, 61, 15, 15 };
// Set the scale region
m.setMeter(14, meterYPos[chartIndex], 218, 20, alignment[chartIndex]);
// Set meter scale from 0 - 100, with a tick every 10 units
m.setScale(0, 100, 10);
// Add a smooth color scale at the default position
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);
//
// In this example, some charts have the "Temperauture" label on the left side and the
// value readout on the right side, and some charts have the reverse
//
if (chartIndex % 2 == 0)
{
// Add a label on the left side using 8pt Arial Bold font
m.addText(10, labelYPos[chartIndex], "Temperature C", "Arial Bold", 8,
Chart.TextColor, Chart.Left);
// Add a text box on the right side. Display the value using white (0xffffff) 8pt
// Arial Bold font on a black (0x000000) background with depressed rounded border.
ChartDirector.TextBox t = m.addText(235, labelYPos[chartIndex], m.formatValue(value,
"2"), "Arial Bold", 8, 0xffffff, Chart.Right);
t.setBackground(0x000000, 0x000000, -1);
t.setRoundedCorners(3);
}
else
{
// Add a label on the right side using 8pt Arial Bold font
m.addText(237, labelYPos[chartIndex], "Temperature C", "Arial Bold", 8,
Chart.TextColor, Chart.Right);
// Add a text box on the left side. Display the value using white (0xffffff) 8pt
// Arial Bold font on a black (0x000000) background with depressed rounded border.
ChartDirector.TextBox t = m.addText(11, labelYPos[chartIndex], m.formatValue(value,
"2"), "Arial Bold", 8, 0xffffff, Chart.Left);
t.setBackground(0x000000, 0x000000, -1);
t.setRoundedCorners(3);
}
// Output the chart
viewer.Chart = m;
}
//Main code for creating charts
public void createChart(WPFChartViewer viewer, int chartIndex)
{
// The value to display on the meter
double value = 75.35;
// Create a LinearMeter object of size 260 x 80 pixels with black background and rounded
// corners
LinearMeter m = new LinearMeter(260, 80, 0x000000);
m.setRoundedFrame(Chart.Transparent);
// Set the default text and line colors to white (0xffffff)
m.setColor(Chart.TextColor, 0xffffff);
m.setColor(Chart.LineColor, 0xffffff);
// Set the scale region top-left corner at (15, 24), with size of 228 x 20 pixels. The
// scale labels are located on the top (implies horizontal meter)
m.setMeter(15, 24, 228, 20, Chart.Top);
// Set meter scale from 0 - 100, with a tick every 10 units
m.setScale(0, 100, 10);
// Demostrate different types of color scales
double[] smoothColorScale = { 0, 0x0000ff, 25, 0x0088ff, 50, 0x00ff00, 75, 0xdddd00, 100,
0xff0000 };
double[] stepColorScale = { 0, 0x00dd00, 50, 0xffff00, 80, 0xff3333, 100 };
double[] highLowColorScale = { 0, 0x0000ff, 40, Chart.Transparent, 60, Chart.Transparent,
100, 0xff0000 };
double[] highColorScale = { 70, Chart.Transparent, 100, 0xff0000 };
if (chartIndex == 0)
{
// Add a blue (0x0088ff) bar from 0 to value with glass effect and 4 pixel rounded
// corners
m.addBar(0, value, 0x0088ff, Chart.glassEffect(Chart.NormalGlare, Chart.Top), 4);
// Add a 5-pixel thick smooth color scale at y = 48 (below the meter scale)
m.addColorScale(smoothColorScale, 48, 5);
}
else if (chartIndex == 1)
{
// Add a purple (0xaa66ff) bar from 0 to value
m.addBar(0, value, 0xaa66ff);
// Add a 4 pixel thick purple (0x880088) frame
m.setThickFrame(4, 0x880088);
// Add a 5-pixel thick high/low color scale at y = 48 (below the meter scale)
m.addColorScale(highLowColorScale, 48, 5);
}
else if (chartIndex == 2)
{
// Add a green (0x00ee00) bar from 0 to value with right side soft lighting effect
// and 4 pixel rounded corners
m.addBar(0, value, 0x00ee00, Chart.softLighting(Chart.Right), 4);
// Add a 5-pixel thick step color scale at y = 48 (below the meter scale)
m.addColorScale(stepColorScale, 48, 5);
}
else if (chartIndex == 3)
{
// Add an orange (0xff8800) bar from 0 to value with cylinder lighting effect
m.addBar(0, value, 0xff8800, Chart.cylinderEffect());
// Add a 4 pixel thick brown (0xbb5500) frame
m.setThickFrame(4, 0xbb5500);
// Add a 5-pixel thick high only color scale at y = 48 (below the meter scale)
m.addColorScale(highColorScale, 48, 5);
}
else if (chartIndex == 4)
{
// Add a magneta (0xdd00dd) bar from 0 to value with top side soft lighting effect
// and 4 pixel rounded corners
m.addBar(0, value, 0xdd00dd, Chart.softLighting(Chart.Top), 4);
// Add a 5-pixel thick smooth color scale at y = 48 (below the meter scale)
m.addColorScale(smoothColorScale, 48, 5);
}
else
{
// Add a red (0xff0000) bar from 0 to value with bar lighting effect
m.addBar(0, value, 0xff0000, Chart.barLighting());
// Add a 4 pixel thick red (0xaa0000) frame
m.setThickFrame(4, 0xaa0000);
// Add a 5-pixel thick high/low color scale at y = 48 (below the meter scale)
m.addColorScale(highLowColorScale, 48, 5);
}
// Add a label left aligned to (12, 65) using 8pt Arial Bold font
m.addText(12, 65, "Temperature C", "Arial Bold", 8, Chart.TextColor, Chart.Left);
// Add a text box right aligned to (243, 65). Display the value using white (0xffffff)
// 8pt Arial Bold font on a black (0x000000) background with depressed dark grey
// (0x333333) rounded border.
ChartDirector.TextBox t = m.addText(243, 65, m.formatValue(value, "2"), "Arial", 8,
0xffffff, Chart.Right);
t.setBackground(0x000000, 0x333333, -1);
t.setRoundedCorners(3);
// Output the chart
viewer.Chart = m;
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer, int chartIndex)
{
// The value to display on the meter
double value = 74.25;
// Create a LinearMeter object of size 70 x 260 pixels with very light grey (0xeeeeee)
// backgruond and a grey (0xbbbbbb) 3-pixel thick rounded frame
LinearMeter m = new LinearMeter(70, 260, 0xeeeeee, 0xbbbbbb);
m.setRoundedFrame(Chart.Transparent);
m.setThickFrame(3);
// Set the scale region top-left corner at (28, 33), with size of 20 x 194 pixels. The scale
// labels are located on the left (default - implies vertical meter).
m.setMeter(28, 33, 20, 194);
// Set meter scale from 0 - 100, with a tick every 10 units
m.setScale(0, 100, 10);
// Demostrate different types of color scales
double[] smoothColorScale = { 0, 0x0000ff, 25, 0x0088ff, 50, 0x00ff00, 75, 0xdddd00, 100,
0xff0000 };
double[] stepColorScale = { 0, 0x00dd00, 50, 0xffff00, 80, 0xff0000, 100 };
double[] highColorScale = { 70, Chart.Transparent, 100, 0xff0000 };
double[] lowColorScale = { 0, 0x0000ff, 30, Chart.Transparent };
if (chartIndex == 0)
{
// Add a blue (0x0088ff) bar from 0 to value with glass effect and 4 pixel rounded
// corners
m.addBar(0, value, 0x0088ff, Chart.glassEffect(Chart.NormalGlare, Chart.Left), 4);
// Add a 6-pixel thick smooth color scale at x = 53 (right of meter scale)
m.addColorScale(smoothColorScale, 53, 6);
}
else if (chartIndex == 1)
{
// Add a green (0x00cc00) bar from 0 to value with bar lighting effect and 4 pixel
// rounded corners
m.addBar(0, value, 0x00cc00, Chart.barLighting(), 4);
// Add a high only color scale at x = 52 (right of meter scale) with thickness varying
// from 0 to 8
m.addColorScale(highColorScale, 52, 0, 52, 8);
// Add a low only color scale at x = 52 (right of meter scale) with thickness varying
// from 8 to 0
m.addColorScale(lowColorScale, 52, 8, 52, 0);
}
else if (chartIndex == 2)
{
// Add a purple (0x0088ff) bar from 0 to value with glass effect and 4 pixel rounded
// corners
m.addBar(0, value, 0x8833dd, Chart.glassEffect(Chart.NormalGlare, Chart.Left), 4);
// Add a high only color scale at x = 52 (right of meter scale) with thickness varying
// from 0 to 8
m.addColorScale(highColorScale, 52, 0, 52, 8);
}
else if (chartIndex == 3)
{
// Add a orange (0xff8800) bar from 0 to value with cylinder lighting effect
m.addBar(0, value, 0xff8800, Chart.cylinderEffect());
// Add a high only color scale at x = 53 (right of meter scale)
m.addColorScale(highColorScale, 53, 6);
}
else if (chartIndex == 4)
{
// Add a red (0xee3333) bar from 0 to value with glass effect and 4 pixel rounded corners
m.addBar(0, value, 0xee3333, Chart.glassEffect(Chart.NormalGlare, Chart.Left), 4);
// Add a step color scale at x = 53 (right of meter scale)
m.addColorScale(stepColorScale, 53, 6);
}
else
{
// Add a grey (0xaaaaaa) bar from 0 to value
m.addBar(0, value, 0xaaaaaa);
// Add a smooth color scale at x = 52 (right of meter scale) with thickness varying from
// 0 to 8
m.addColorScale(smoothColorScale, 52, 0, 52, 8);
}
// Add a title using 8pt Arial Bold font with grey (0xbbbbbb) background
m.addTitle("Temp C", "Arial Bold", 8, Chart.TextColor).setBackground(0xbbbbbb);
// Add a text box at the bottom-center. Display the value using white (0xffffff) 8pt Arial
// Bold font on a black (0x000000) background with rounded border.
ChartDirector.TextBox t = m.addText(m.getWidth() / 2, m.getHeight() - 8, m.formatValue(value,
"2"), "Arial Bold", 8, 0xffffff, Chart.Bottom);
t.setBackground(0x000000);
t.setRoundedCorners(3);
t.setMargin2(5, 5, 2, 1);
// Output the chart
viewer.Image = m.makeWebImage(Chart.PNG);
}
//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 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 600 x 360 pixels, with a brushed silver background, 1
// pixel 3D border effect, rounded corners and soft drop shadow.
XYChart c = new XYChart(600, 360, Chart.brushedSilverColor(), Chart.Transparent, 1);
c.setRoundedFrame();
c.setDropShadow();
// Add a title box to the chart using 18pt Times Bold Italic font.
ChartDirector.TextBox title = c.addTitle(
"<*block,valign=absmiddle*><*img=@/images/star.png*><*img=@/images/star.png*> " +
"Performance Enhancer <*img=@/images/star.png*><*img=@/images/star.png*><*/*>",
"Times New Roman Bold Italic", 18);
//
// Use a text box with a depressed 3D border to create the inner depressed region
//
// The width of the frame border
int frameWidth = 5;
// Set the depressed region position
ChartDirector.TextBox contentBox = c.addText(frameWidth, title.getHeight(), "");
contentBox.setSize(c.getDrawArea().getWidth() - 1 - frameWidth * 2, c.getDrawArea(
).getHeight() - title.getHeight() - frameWidth - 1);
// Use -1 as the rasied effect to create a depressed region
contentBox.setBackground(Chart.Transparent, Chart.Transparent, -1);
// Set rounded corners, and put the text box at the back of the chart
contentBox.setRoundedCorners(10);
contentBox.setZOrder(Chart.ChartBackZ);
// Tentatively set the plotarea to 50 pixels from the left depressed edge, and 25 pixels
// under the top depressed edge. Set the width to 75 pixels less than the depressed
// region width, and the height to 75 pixels less than the depressed region height. Use
// white (ffffff) background, transparent border, and grey (cccccc) horizontal and
// vertical grid lines.
PlotArea plotArea = c.setPlotArea(50 + contentBox.getLeftX(), contentBox.getTopY() + 25,
contentBox.getWidth() - 75, contentBox.getHeight() - 75, 0xffffff, -1, -1, 0xcccccc,
-1);
// Add a title to the y axis
c.yAxis().setTitle("Energy Concentration (KJ per liter)");
// 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);
// Add a title to the x axis using CDML
c.xAxis().setTitle(
"<*block,valign=absmiddle*><*img=@/images/clock.png*> Elapsed Time (hour)<*/*>");
// Set the axes width to 2 pixels
c.xAxis().setWidth(2);
c.yAxis().setWidth(2);
// Add an area layer to the chart using a gradient color that changes vertically from
// semi-transparent red (60ff0000) to semi-transparent white (60ffffff)
c.addAreaLayer(data, c.linearGradientColor(0, contentBox.getTopY() + 20, 0,
contentBox.getTopY() + contentBox.getHeight() - 50, 0x60ff0000, 0x60ffffff));
// Adjust the plot area size, such that the bounding box (inclusive of axes) is 15
// pixels from the left depressed edge, 25 pixels below the top depressed edge, 25
// pixels from the right depressed edge, and 15 pixels above the bottom depressed edge.
c.packPlotArea(contentBox.getLeftX() + 15, contentBox.getTopY() + 25,
contentBox.getLeftX() + contentBox.getWidth() - 25, contentBox.getTopY() +
contentBox.getHeight() - 15);
// Add a custom CDML text with the bottom right corner is anchored to the bootom right
// corner of the plot area, with 5 pixels margin.
c.addText(plotArea.getLeftX() + plotArea.getWidth() - 5, plotArea.getTopY() +
plotArea.getHeight() - 5,
"<*block,valign=absmiddle*><*img=@/images/small_molecule.png*> <*block*>" +
"<*font=Times New Roman Bold Italic,size=10,color=804040*>Molecular\nEngineering" +
"<*/*>").setAlignment(Chart.BottomRight);
// Output the chart
viewer.Chart = c;
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='Hour {xLabel}: {value} KJ/liter'");
}
//Main code for creating charts
public void createChart(WinChartViewer viewer, int chartIndex)
{
// The value to display on the meter
double value = 72.3;
// Create an AngularMeter object of size 250 x 250 pixels with transparent background
AngularMeter m = new AngularMeter(250, 250, Chart.Transparent);
// Set the default text and line colors to white (0xffffff)
m.setColor(Chart.TextColor, 0xffffff);
m.setColor(Chart.LineColor, 0xffffff);
// Demonstration two different meter scale angles
if (chartIndex % 2 == 0)
{
// Center at (125, 125), scale radius = 111 pixels, scale angle -140 to +140 degrees
m.setMeter(125, 125, 111, -140, 140);
}
else
{
// Center at (125, 125), scale radius = 111 pixels, scale angle -180 to +90 degrees
m.setMeter(125, 125, 111, -180, 90);
}
// Add a black (0x000000) circle with radius 123 pixels as background
m.addRing(0, 123, 0x000000);
// Gradient color for the border to make it silver-like
double[] ringGradient = { 1, 0x7f7f7f, 0.5, 0xd6d6d6, 0, 0xffffff, -0.5, 0xd6d6d6, -1,
0x7f7f7f };
// Add a ring between radii 116 and 122 pixels using the silver gradient as border
m.addRing(116, 122, m.relativeLinearGradient(ringGradient, 45, 122));
// Meter scale is 0 - 100, with major/minor/micro ticks every 10/5/1 units
m.setScale(0, 100, 10, 5, 1);
// Set the scale label style to 15pt Arial Italic. Set the major/minor/micro tick
// lengths to 12/9/6 pixels pointing inwards, and their widths to 2/1/1 pixels.
m.setLabelStyle("Arial Italic", 15);
m.setTickLength(-12, -9, -6);
m.setLineWidth(0, 2, 1, 1);
// Demostrate different types of color scales and glare effects and putting them at
// different positions.
double[] smoothColorScale = { 0, 0x0000ff, 25, 0x0088ff, 50, 0x00ff00, 75, 0xdddd00, 100,
0xff0000 };
double[] stepColorScale = { 0, 0x00aa00, 60, 0xddaa00, 80, 0xcc0000, 100 };
double[] highLowColorScale = { 0, 0x00ff00, 70, Chart.Transparent, 100, 0xff0000 };
if (chartIndex == 0)
{
// Add the smooth color scale at the default position
m.addColorScale(smoothColorScale);
// Add glare up to radius 116 (= region inside border)
m.addGlare(116);
}
else if (chartIndex == 1)
{
// Add the smooth color scale starting at radius 62 with zero width and ending at
// radius 40 with 22 pixels outer width
m.addColorScale(smoothColorScale, 62, 0, 40, 22);
// Add glare up to radius 116 (= region inside border), concave and spanning 190
// degrees
m.addGlare(116, -190);
}
else if (chartIndex == 2)
{
// Add the smooth color scale starting at radius 111 with zero width and ending at
// radius 111 with 12 pixels inner width
m.addColorScale(smoothColorScale, 111, 0, 111, -12);
// Add glare up to radius 116 (= region inside border), concave and spanning 190
// degrees and rotated by 45 degrees
m.addGlare(116, -190, 45);
}
else if (chartIndex == 3)
{
// Add the high/low color scale at the default position
m.addColorScale(highLowColorScale);
}
else if (chartIndex == 4)
{
// Add the smooth color scale at radius 44 with 16 pixels outer width
m.addColorScale(smoothColorScale, 44, 16);
// Add glare up to radius 116 (= region inside border), concave and spanning 190
// degrees and rotated by -45 degrees
m.addGlare(116, -190, -45);
}
else
{
// Add the step color scale at the default position
m.addColorScale(stepColorScale);
}
// Add a text label centered at (125, 175) with 15pt Arial Italic font
m.addText(125, 175, "CPU", "Arial Italic", 15, Chart.TextColor, Chart.Center);
// Add a readout to some of the charts as demonstration
if (chartIndex == 0 || chartIndex == 2)
{
// Put the value label center aligned at (125, 232), using black (0x000000) 14pt
// Arial font on a light blue (0x99ccff) background. Set box width to 50 pixels with
// 5 pixels rounded corners.
ChartDirector.TextBox t = m.addText(125, 232, m.formatValue(value,
"<*block,width=50,halign=center*>{value|1}"), "Arial", 14, 0x000000,
Chart.BottomCenter);
t.setBackground(0x99ccff);
t.setRoundedCorners(5);
}
// Add a red (0xff0000) pointer at the specified value
m.addPointer2(value, 0xff0000);
// Output the chart
viewer.Chart = m;
}
//Main code for creating charts
public void createChart(WPFChartViewer viewer, int chartIndex)
{
// The value to display on the meter
double value = 75.35;
// Create a LinearMeter object of size 250 x 75 pixels with very light grey (0xeeeeee)
// backgruond and a light grey (0xccccccc) 3-pixel thick rounded frame
LinearMeter m = new LinearMeter(70, 260, 0xeeeeee, 0xcccccc);
m.setRoundedFrame(Chart.Transparent);
m.setThickFrame(3);
// Set the scale region top-left corner at (28, 30), with size of 20 x 196 pixels. The
// scale labels are located on the left (default - implies vertical meter)
m.setMeter(28, 30, 20, 196);
// Set meter scale from 0 - 100, with a tick every 10 units
m.setScale(0, 100, 10);
// Demostrate different types of color scales and putting them at different positions
double[] smoothColorScale = { 0, 0x6666ff, 25, 0x00bbbb, 50, 0x00ff00, 75, 0xffff00, 100,
0xff0000 };
double[] stepColorScale = { 0, 0x33ff33, 50, 0xffff33, 80, 0xff3333, 100 };
double[] highLowColorScale = { 0, 0x6666ff, 70, Chart.Transparent, 100, 0xff0000 };
if (chartIndex == 0)
{
// Add the smooth color scale at the default position
m.addColorScale(smoothColorScale);
}
else if (chartIndex == 1)
{
// Add the step color scale at the default position
m.addColorScale(stepColorScale);
}
else if (chartIndex == 2)
{
// Add the high low scale at the default position
m.addColorScale(highLowColorScale);
}
else if (chartIndex == 3)
{
// Add the smooth color scale starting at x = 28 (left of scale) with zero width and
// ending at x = 28 with 20 pixels width
m.addColorScale(smoothColorScale, 28, 0, 28, 20);
}
else if (chartIndex == 4)
{
// Add the smooth color scale starting at x = 38 (center of scale) with zero width
// and ending at x = 28 with 20 pixels width
m.addColorScale(smoothColorScale, 38, 0, 28, 20);
}
else
{
// Add the smooth color scale starting at x = 48 (right of scale) with zero width
// and ending at x = 28 with 20 pixels width
m.addColorScale(smoothColorScale, 48, 0, 28, 20);
}
// In this demo, we demostrate pointers of different shapes
if (chartIndex < 3)
{
// Add a blue (0x0000cc) pointer of default shape at the specified value
m.addPointer(value, 0x0000cc);
}
else
{
// Add a blue (0x0000cc) pointer of triangular shape the specified value
m.addPointer(value, 0x0000cc).setShape(Chart.TriangularPointer, 0.7, 0.5);
}
// Add a title using 8pt Arial Bold font with a border color background
m.addTitle("Temp C", "Arial Bold", 8, Chart.TextColor).setBackground(0xcccccc);
// Add a text box at the bottom-center. Display the value using white (0xffffff) 8pt
// Arial Bold font on a black (0x000000) background with rounded border.
ChartDirector.TextBox t = m.addText(m.getWidth() / 2, m.getHeight() - 8, m.formatValue(
value, "2"), "Arial Bold", 8, 0xffffff, Chart.Bottom);
t.setBackground(0x000000);
t.setRoundedCorners(3);
t.setMargin2(5, 5, 2, 1);
// Output the chart
viewer.Chart = m;
}
//Main code for creating charts
public void createChart(WinChartViewer viewer, int chartIndex)
{
// The value to display on the meter
double value = 75.35;
// Create a LinearMeter object of size 260 x 80 pixels with very light grey (0xeeeeee)
// backgruond and a light grey (0xccccccc) 3-pixel thick rounded frame
LinearMeter m = new LinearMeter(260, 80, 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);
// Demostrate different types of color scales
double[] smoothColorScale = { 0, 0x0000ff, 25, 0x0088ff, 50, 0x00ff00, 75, 0xdddd00, 100,
0xff0000 };
double[] stepColorScale = { 0, 0x00dd00, 50, 0xffff00, 80, 0xff0000, 100 };
double[] highLowColorScale = { 0, 0x0000ff, 40, Chart.Transparent, 60, Chart.Transparent,
100, 0xff0000 };
double[] highColorScale = { 70, Chart.Transparent, 100, 0xff0000 };
if (chartIndex == 0)
{
// Add a blue (0x0088ff) bar from 0 to value with glass effect and 4 pixel rounded
// corners
m.addBar(0, value, 0x0088ff, Chart.glassEffect(Chart.NormalGlare, Chart.Top), 4);
// Add a 5-pixel thick smooth color scale at y = 48 (below the meter scale)
m.addColorScale(smoothColorScale, 48, 5);
}
else if (chartIndex == 1)
{
// Add a green (0x00cc00) bar from 0 to value with bar lighting effect
m.addBar(0, value, 0x00cc00, Chart.barLighting());
// Add a 5-pixel thick step color scale at y = 48 (below the meter scale)
m.addColorScale(stepColorScale, 48, 5);
}
else if (chartIndex == 2)
{
// Add a purple (0x8833dd) bar from 0 to value with glass effect and 4 pixel rounded
// corners
m.addBar(0, value, 0x8833dd, Chart.glassEffect(Chart.NormalGlare, Chart.Top), 4);
// Add a 5-pixel thick high/low color scale at y = 48 (below the meter scale)
m.addColorScale(highLowColorScale, 48, 5);
}
else if (chartIndex == 3)
{
// Add an orange (0xff8800) bar from 0 to value with cylinder lighting effect
m.addBar(0, value, 0xff8800, Chart.cylinderEffect());
// Add a high only color scale at y = 48 (below the meter scale) with thickness
// varying from 0 to 8
m.addColorScale(highColorScale, 48, 0, 48, 8);
}
else if (chartIndex == 4)
{
// Add a red (0xee3333) bar from 0 to value with glass effect and 4 pixel rounded
// corners
m.addBar(0, value, 0xee3333, Chart.glassEffect(Chart.NormalGlare, Chart.Top), 4);
// Add a 5-pixel thick smooth color scale at y = 48 (below the meter scale)
m.addColorScale(smoothColorScale, 48, 5);
}
else
{
// Add a grey (0xaaaaaa) bar from 0 to value
m.addBar(0, value, 0xaaaaaa);
// Add a 5-pixel thick step color scale at y = 48 (below the meter scale)
m.addColorScale(stepColorScale, 48, 5);
}
// Add a label right aligned to (243, 65) using 8pt Arial Bold font
m.addText(243, 65, "Temperature C", "Arial Bold", 8, Chart.TextColor, Chart.Right);
// Add a text box left aligned to (18, 65). Display the value using white (0xffffff) 8pt
// Arial Bold font on a black (0x000000) background with depressed rounded border.
ChartDirector.TextBox t = m.addText(18, 65, m.formatValue(value, "2"), "Arial", 8,
0xffffff, Chart.Left);
t.setBackground(0x000000, 0x000000, -1);
t.setRoundedCorners(3);
// Output the chart
viewer.Chart = m;
}
//Main code for creating charts
public void createChart(WinChartViewer viewer, int chartIndex)
{
// The value to display on the meter
double value = 75.35;
// The background, border and bar colors of the meters
int[] bgColor = { 0xbbddff, 0xccffcc, 0xffddff, 0xffffaa, 0xffdddd, 0xeeeeee };
int[] borderColor = { 0x000088, 0x006600, 0x880088, 0xee6600, 0x880000, 0x666666 };
int[] barColor = { 0x0088ff, 0x00cc00, 0x8833dd, 0xff8800, 0xee3333, 0x888888 };
// Create a LinearMeter object of size 260 x 80 pixels with a 3-pixel thick rounded
// frame
LinearMeter m = new LinearMeter(260, 80, bgColor[chartIndex], borderColor[chartIndex]);
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);
if (chartIndex % 4 == 0)
{
// Add a 5-pixel thick smooth color scale at y = 48 (below the meter scale)
double[] smoothColorScale = { 0, 0x0000ff, 25, 0x0088ff, 50, 0x00ff00, 75, 0xdddd00,
100, 0xff0000 };
m.addColorScale(smoothColorScale, 48, 5);
}
else if (chartIndex % 4 == 1)
{
// Add a 5-pixel thick step color scale at y = 48 (below the meter scale)
double[] stepColorScale = { 0, 0x00cc00, 50, 0xffdd00, 80, 0xff3333, 100 };
m.addColorScale(stepColorScale, 48, 5);
}
else if (chartIndex % 4 == 2)
{
// Add a 5-pixel thick high/low color scale at y = 48 (below the meter scale)
double[] highLowColorScale = { 0, 0x0000ff, 40, Chart.Transparent, 60,
Chart.Transparent, 100, 0xff0000 };
m.addColorScale(highLowColorScale, 48, 5);
}
else
{
// Add a 5-pixel thick high only color scale at y = 48 (below the meter scale)
double[] highColorScale = { 70, Chart.Transparent, 100, 0xff0000 };
m.addColorScale(highColorScale, 48, 0, 48, 8);
}
// Add a bar from 0 to value with glass effect and 4 pixel rounded corners
m.addBar(0, value, barColor[chartIndex], Chart.glassEffect(Chart.NormalGlare, Chart.Top
), 4);
// Add a label right aligned to (243, 65) using 8pt Arial Bold font
m.addText(243, 65, "Temperature C", "Arial Bold", 8, Chart.TextColor, Chart.Right);
// Add a text box left aligned to (18, 65). Display the value using white (0xffffff) 8pt
// Arial Bold font on a black (0x000000) background with depressed rounded border.
ChartDirector.TextBox t = m.addText(18, 65, m.formatValue(value, "2"), "Arial", 8,
0xffffff, Chart.Left);
t.setBackground(0x000000, 0x000000, -1);
t.setRoundedCorners(3);
// Output the chart
viewer.Chart = m;
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer, int chartIndex)
{
// The value to display on the meter
double value = 72.3;
// Create an AngularMeter object of size 250 x 250 pixels with transparent background
AngularMeter m = new AngularMeter(250, 250, Chart.Transparent);
// Set the default text and line colors to dark grey (0x333333)
m.setColor(Chart.TextColor, 0x333333);
m.setColor(Chart.LineColor, 0x333333);
// Demonstration two different meter scale angles
if (chartIndex % 2 == 0)
{
// Center at (125, 125), scale radius = 111 pixels, scale angle -140 to +140 degrees
m.setMeter(125, 125, 109, -140, 140);
}
else
{
// Center at (125, 125), scale radius = 111 pixels, scale angle -180 to +90 degrees
m.setMeter(125, 125, 109, -180, 90);
}
// Add a black (0x000000) circle with radius 123 pixels as background
m.addRing(0, 123, 0x000000);
// Background gradient color from white (0xffffff) at the center to light grey (0xdddddd) at
// the border
double[] bgGradient = { 0, 0xffffff, 0.75, 0xeeeeee, 1, 0xdddddd };
// Add circle with radius 123 pixels as background using the background gradient
m.addRing(0, 123, m.relativeRadialGradient(bgGradient, 123));
// Gradient color for the border to make it silver-like
double[] ringGradient = { 1, 0x999999, 0.5, 0xdddddd, 0, 0xffffff, -0.5, 0xdddddd, -1,
0x999999 };
// Add a ring between radii 114 and 123 pixels using the silver gradient with a light grey
// (0xbbbbbb) edge as the meter border
m.addRing(114, 123, m.relativeLinearGradient(ringGradient, 45, 123), 0xbbbbbb);
// Meter scale is 0 - 100, with major/minor/micro ticks every 10/5/1 units
m.setScale(0, 100, 10, 5, 1);
// Set the scale label style to 15pt Arial Italic. Set the major/minor/micro tick lengths to
// 12/9/6 pixels pointing inwards, and their widths to 2/1/1 pixels.
m.setLabelStyle("Arial Italic", 15);
m.setTickLength(-12, -9, -6);
m.setLineWidth(0, 2, 1, 1);
// Demostrate different types of color scales and putting them at different positions
double[] smoothColorScale = { 0, 0x3333ff, 25, 0x0088ff, 50, 0x00ff00, 75, 0xdddd00, 100,
0xff0000 };
double[] stepColorScale = { 0, 0x00cc00, 60, 0xffdd00, 80, 0xee0000, 100 };
double[] highLowColorScale = { 0, 0x00ff00, 70, Chart.Transparent, 100, 0xff0000 };
if (chartIndex == 0)
{
// Add the smooth color scale at the default position
m.addColorScale(smoothColorScale);
}
else if (chartIndex == 1)
{
// Add the smooth color scale starting at radius 62 with zero width and ending at radius
// 40 with 22 pixels outer width
m.addColorScale(smoothColorScale, 62, 0, 40, 22);
}
else if (chartIndex == 2)
{
// Add the smooth color scale starting at radius 109 with zero width and ending at radius
// 109 with 12 pixels inner width
m.addColorScale(smoothColorScale, 109, 0, 109, -12);
}
else if (chartIndex == 3)
{
// Add the high/low color scale at the default position
m.addColorScale(highLowColorScale);
}
else if (chartIndex == 4)
{
// Add the smooth color scale at radius 44 with 16 pixels outer width
m.addColorScale(smoothColorScale, 44, 16);
}
else
{
// Add the step color scale at the default position
m.addColorScale(stepColorScale);
}
// Add a text label centered at (125, 175) with 15pt Arial Italic font
m.addText(125, 175, "CPU", "Arial Italic", 15, Chart.TextColor, Chart.Center);
// Add a readout to some of the charts as demonstration
if (chartIndex == 0 || chartIndex == 2)
{
// Put the value label center aligned at (125, 232), using white (0xffffff) 14pt Arial
// font on a dark grey (0x222222) background. Set box width to 50 pixels with 5 pixels
// rounded corners.
ChartDirector.TextBox t = m.addText(125, 232, m.formatValue(value,
"<*block,width=50,halign=center*>{value|1}"), "Arial", 14, 0xffffff,
Chart.BottomCenter);
t.setBackground(0x222222);
t.setRoundedCorners(5);
}
// Add a red (0xff0000) pointer at the specified value
m.addPointer2(value, 0xff0000);
// Output the chart
viewer.Image = m.makeWebImage(Chart.PNG);
}