//
// Draw the thumbnail chart in the WebViewPortControl
//
private void drawFullChart(RazorViewPortControl vp, RazorChartViewer viewer)
{
//
// For simplicity, in this demo, the data arrays are filled with hard coded data. In a real
// application, you may use a database or other data source to load up the arrays. As this is
// a small thumbnail chart, complete data may not be needed. For exmaple, if there are a
// million points, a random sample may already be sufficient for the thumbnail chart.
//
double[] dataX0 = { 10, 15, 6, -12, 14, -8, 13, -3, 16, 12, 10.5, -7, 3, -10, -5, 2, 5 };
double[] dataY0 = { 130, 150, 80, 110, -110, -105, -130, -15, -170, 125, 125, 60, 25, 150,
150, 15, 120 };
double[] dataX1 = { 6, 7, -4, 3.5, 7, 8, -9, -10, -12, 11, 8, -3, -2, 8, 4, -15, 15 };
double[] dataY1 = { 65, -40, -40, 45, -70, -80, 80, 10, -100, 105, 60, 50, 20, 170, -25, 50,
75 };
double[] dataX2 = { -10, -12, 11, 8, 6, 12, -4, 3.5, 7, 8, -9, 3, -13, 16, -7.5, -10, -15 };
double[] dataY2 = { 65, -80, -40, 45, -70, -80, 80, 90, -100, 105, 60, -75, -150, -40, 120,
-50, -30 };
// Create an XYChart object 120 x 120 pixels in size
XYChart c = new XYChart(120, 120);
// Set the plotarea to cover the entire chart and with no grid lines. Set 4 quadrant
// coloring, where the colors alternate between lighter and deeper grey (d8d8d8/eeeeee).
c.setPlotArea(0, 0, c.getWidth() - 1, c.getHeight() - 1, -1, -1, -1, Chart.Transparent
).set4QBgColor(0xd8d8d8, 0xeeeeee, 0xd8d8d8, 0xeeeeee, 0x000000);
// Set 4 quadrant mode, with both x and y axes symetrical around the origin
c.setAxisAtOrigin(Chart.XYAxisAtOrigin, Chart.XAxisSymmetric + Chart.YAxisSymmetric);
// The x and y axis scales reflect the full range of the view port
c.xAxis().setLinearScale(viewer.getValueAtViewPort("x", 0), viewer.getValueAtViewPort("x", 1
), Chart.NoValue);
c.yAxis().setLinearScale(viewer.getValueAtViewPort("y", 0), viewer.getValueAtViewPort("y", 1
), Chart.NoValue);
// Add scatter layer, using 5 pixels red (ff33333) X shape symbols
c.addScatterLayer(dataX0, dataY0, "Group A", Chart.Cross2Shape(), 5, 0xff3333);
// Add scatter layer, using 5 pixels green (33ff33) circle symbols
c.addScatterLayer(dataX1, dataY1, "Group B", Chart.CircleShape, 5, 0x33ff33);
// Add scatter layer, using 5 pixels blue (3333ff) triangle symbols
c.addScatterLayer(dataX2, dataY2, "Group C", Chart.TriangleSymbol, 5, 0x3333ff);
// Output the chart
vp.Image = c.makeWebImage(Chart.PNG);
}
private void drawFullChart(RazorViewPortControl vp, RazorChartViewer viewer)
{
// We need to draw a small thumbnail chart for the full data range. The simplest method is to
// simply get the full data to draw the chart. If the full data are very large (eg. millions
// of points), for such a small thumbnail chart, it is often acceptable to just retreive a
// small sample of the data.
//
// In this example, there are only around 5500 points for the 3 data series. This amount is
// not large to ChartDirector, so we simply pass all the data to ChartDirector.
RanTable r = getRandomTable();
// Get all the data from the random table
DateTime[] timeStamps = Chart.NTime(r.getCol(0));
double[] dataSeriesA = r.getCol(1);
double[] dataSeriesB = r.getCol(2);
double[] dataSeriesC = r.getCol(3);
// Create an XYChart object of size 640 x 60 pixels
XYChart c = new XYChart(640, 60);
// Set the plotarea with the same horizontal position as that in the main chart for
// alignment. The vertical position is set to equal to the chart height.
c.setPlotArea(55, 0, c.getWidth() - 80, c.getHeight() - 1, 0xc0d8ff, -1, 0x888888,
Chart.Transparent, 0xffffff);
// Set the x axis stem to transparent and the label font to 10pt Arial
c.xAxis().setColors(Chart.Transparent);
c.xAxis().setLabelStyle("Arial", 10);
// Put the x-axis labels inside the plot area by setting a negative label gap. Use
// setLabelAlignment to put the label at the right side of the tick.
c.xAxis().setLabelGap(-1);
c.xAxis().setLabelAlignment(1);
// Set the y axis stem and labels to transparent (that is, hide the labels)
c.yAxis().setColors(Chart.Transparent, Chart.Transparent);
// Add a line layer for the lines with fast line mode enabled
LineLayer layer = c.addLineLayer2();
layer.setFastLineMode();
// Now we add the 3 data series to a line layer, using the color red (0xff3333), green
// (0x008800) and blue (0x3333cc)
layer.setXData(timeStamps);
layer.addDataSet(dataSeriesA, 0xff3333);
layer.addDataSet(dataSeriesB, 0x008800);
layer.addDataSet(dataSeriesC, 0x3333cc);
// The x axis scales should reflect the full range of the view port
c.xAxis().setDateScale(viewer.getValueAtViewPort("x", 0), viewer.getValueAtViewPort("x", 1));
// For the automatic x-axis labels, set the minimum spacing to 75 pixels.
c.xAxis().setTickDensity(75);
// For the auto-scaled y-axis, as we hide the labels, we can disable axis rounding. This can
// make the axis scale fit the data tighter.
c.yAxis().setRounding(false, false);
// Output the chart
vp.Image = c.makeWebImage(Chart.PNG);
}
//
// Draw the chart
//
private void drawChart(RazorChartViewer viewer)
{
// Determine the visible x-axis range
DateTime viewPortStartDate = Chart.NTime(viewer.getValueAtViewPort("x", viewer.ViewPortLeft))
;
DateTime viewPortEndDate = Chart.NTime(viewer.getValueAtViewPort("x", viewer.ViewPortLeft +
viewer.ViewPortWidth));
// We need to get the data within the visible x-axis range. In real code, this can be by
// using a database query or some other means as specific to the application. In this demo,
// we just generate a random data table, and then select the data within the table.
RanTable r = getRandomTable();
// Select the data for the visible date range viewPortStartDate to viewPortEndDate. It is
// possible there is no data point at exactly viewPortStartDate or viewPortEndDate. In this
// case, we also need the data points that are just outside the visible date range to
// "overdraw" the line a little bit (the "overdrawn" part will be clipped to the plot area)
// In this demo, we do this by adding a one day margin to the date range when selecting the
// data.
r.selectDate(0, viewPortStartDate.AddDays(-1), viewPortEndDate.AddDays(1));
// The selected data from the random data table
DateTime[] timeStamps = Chart.NTime(r.getCol(0));
double[] dataSeriesA = r.getCol(1);
double[] dataSeriesB = r.getCol(2);
double[] dataSeriesC = r.getCol(3);
//
// Now we have obtained the data, we can plot the chart.
//
//================================================================================
// Configure overall chart appearance.
//================================================================================
// Create an XYChart object of size 640 x 350 pixels
XYChart c = new XYChart(640, 350);
// Set the plotarea at (55, 55) with width 80 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(55, 55, c.getWidth() - 80, c.getHeight() - 90, c.linearGradientColor(0, 55, 0,
c.getHeight() - 35, 0xf0f6ff, 0xa0c0ff), -1, Chart.Transparent, 0xffffff, 0xffffff);
// As the data can lie outside the plotarea in a zoomed chart, we need to enable clipping.
c.setClipping();
// Add a title to the chart using 18pt Times New Roman Bold Italic font
c.addTitle(" Zooming and Scrolling with Track Line", "Times New Roman Bold Italic", 18);
// Set the axis stem to transparent
c.xAxis().setColors(Chart.Transparent);
c.yAxis().setColors(Chart.Transparent);
// Add axis title using 10pt Arial Bold Italic font
c.yAxis().setTitle("Ionic Temperature (C)", "Arial Bold Italic", 10);
//================================================================================
// Add data to chart
//================================================================================
//
// In this example, we represent the data by lines. You may modify the code below to use
// other layer types (areas, scatter plot, etc).
//
// Add a line layer for the lines, using a line width of 2 pixels
LineLayer layer = c.addLineLayer2();
layer.setLineWidth(2);
// In this demo, we do not have too many data points. In real code, the chart may contain a
// lot of data points when fully zoomed out - much more than the number of horizontal pixels
// in this plot area. So it is a good idea to use fast line mode.
layer.setFastLineMode();
// Add up to 3 data series to a line layer, depending on whether the user has selected the
// data series.
layer.setXData(timeStamps);
if (viewer.GetCustomAttr("data0CheckBox") != "F")
{
layer.addDataSet(dataSeriesA, 0xff3333, "Alpha Series");
}
if (viewer.GetCustomAttr("data1CheckBox") != "F")
{
layer.addDataSet(dataSeriesB, 0x008800, "Beta Series");
}
if (viewer.GetCustomAttr("data2CheckBox") != "F")
{
layer.addDataSet(dataSeriesC, 0x3333cc, "Gamma Series");
}
//================================================================================
// Configure axis scale and labelling
//================================================================================
// Set the x-axis as a date/time axis with the scale according to the view port x range.
viewer.syncDateAxisWithViewPort("x", c.xAxis());
//
// In this demo, the time range can be from a few years to a few days. We demonstrate how to
// set up different date/time format based on the time range.
//
// If all ticks are yearly aligned, then we use "yyyy" as the label format.
c.xAxis().setFormatCondition("align", 360 * 86400);
c.xAxis().setLabelFormat("{value|yyyy}");
// If all ticks are monthly aligned, then we use "mmm yyyy" in bold font as the first label
// of a year, and "mmm" for other labels.
c.xAxis().setFormatCondition("align", 30 * 86400);
c.xAxis().setMultiFormat(Chart.StartOfYearFilter(), "<*font=bold*>{value|mmm yyyy}",
Chart.AllPassFilter(), "{value|mmm}");
// If all ticks are daily algined, then we use "mmm dd<*br*>yyyy" in bold font as the first
// label of a year, and "mmm dd" in bold font as the first label of a month, and "dd" for
// other labels.
c.xAxis().setFormatCondition("align", 86400);
c.xAxis().setMultiFormat(Chart.StartOfYearFilter(),
"<*block,halign=left*><*font=bold*>{value|mmm dd<*br*>yyyy}", Chart.StartOfMonthFilter(),
"<*font=bold*>{value|mmm dd}");
c.xAxis().setMultiFormat2(Chart.AllPassFilter(), "{value|dd}");
// For all other cases (sub-daily ticks), use "hh:nn<*br*>mmm dd" for the first label of a
// day, and "hh:nn" for other labels.
c.xAxis().setFormatCondition("else");
c.xAxis().setMultiFormat(Chart.StartOfDayFilter(), "<*font=bold*>{value|hh:nn<*br*>mmm dd}",
Chart.AllPassFilter(), "{value|hh:nn}");
//================================================================================
// Step 5 - Output the chart
//================================================================================
// Output the chart
viewer.Image = c.makeWebImage(Chart.PNG);
// Output Javascript chart model to the browser to suppport tracking cursor
viewer.ChartModel = c.getJsChartModel();
}
//
// Draw the chart
//
private void drawChart(RazorChartViewer viewer)
{
// Determine the visible x-axis range
DateTime viewPortStartDate = Chart.NTime(viewer.getValueAtViewPort("x", viewer.ViewPortLeft))
;
DateTime viewPortEndDate = Chart.NTime(viewer.getValueAtViewPort("x", viewer.ViewPortLeft +
viewer.ViewPortWidth));
// We need to get the data within the visible x-axis range. In real code, this can be by
// using a database query or some other means as specific to the application. In this demo,
// we just generate a random data table, and then select the data within the table.
RanTable r = getRandomTable();
// Select the data for the visible date range viewPortStartDate to viewPortEndDate. It is
// possible there is no data point at exactly viewPortStartDate or viewPortEndDate. In this
// case, we also need the data points that are just outside the visible date range to
// "overdraw" the line a little bit (the "overdrawn" part will be clipped to the plot area)
// In this demo, we do this by adding a one day margin to the date range when selecting the
// data.
r.selectDate(0, viewPortStartDate.AddDays(-1), viewPortEndDate.AddDays(1));
// The selected data from the random data table
DateTime[] timeStamps = Chart.NTime(r.getCol(0));
double[] dataSeriesA = r.getCol(1);
double[] dataSeriesB = r.getCol(2);
double[] dataSeriesC = r.getCol(3);
//
// Now we have obtained the data, we can plot the chart.
//
//================================================================================
// Configure overall chart appearance.
//================================================================================
// Create an XYChart object 600 x 300 pixels in size, with pale blue (f0f0ff) background,
// black (000000) rounded border, 1 pixel raised effect.
XYChart c = new XYChart(600, 300, 0xf0f0ff, 0x000000);
c.setRoundedFrame();
// Set the plotarea at (52, 60) and of size 520 x 205 pixels. Use white (ffffff) background.
// Enable both horizontal and vertical grids by setting their colors to grey (cccccc). Set
// clipping mode to clip the data lines to the plot area.
c.setPlotArea(55, 60, 520, 205, 0xffffff, -1, -1, 0xcccccc, 0xcccccc);
// As the data can lie outside the plotarea in a zoomed chart, we need to enable clipping.
c.setClipping();
// Add a top title to the chart using 15pt Times New Roman Bold Italic font, with a light
// blue (ccccff) background, black (000000) border, and a glass like raised effect.
c.addTitle("Product Line International Market Price", "Times New Roman Bold Italic", 15
).setBackground(0xccccff, 0x000000, Chart.glassEffect());
// Add a legend box at the top of the plot area with 9pt Arial Bold font with flow layout.
c.addLegend(50, 33, false, "Arial Bold", 9).setBackground(Chart.Transparent,
Chart.Transparent);
// Set axes width to 2 pixels
c.xAxis().setWidth(2);
c.yAxis().setWidth(2);
// Add a title to the y-axis
c.yAxis().setTitle("Price (USD)", "Arial Bold", 10);
//================================================================================
// Add data to chart
//================================================================================
//
// In this example, we represent the data by lines. You may modify the code below to use
// other representations (areas, scatter plot, etc).
//
// Add a line layer for the lines, using a line width of 2 pixels
LineLayer layer = c.addLineLayer2();
layer.setLineWidth(2);
// In this demo, we do not have too many data points. In real code, the chart may contain a
// lot of data points when fully zoomed out - much more than the number of horizontal pixels
// in this plot area. So it is a good idea to use fast line mode.
layer.setFastLineMode();
// Now we add the 3 data series to a line layer, using the color red (ff0000), green (00cc00)
// and blue (0000ff)
layer.setXData(timeStamps);
layer.addDataSet(dataSeriesA, 0xff0000, "Product Alpha");
layer.addDataSet(dataSeriesB, 0x00cc00, "Product Beta");
layer.addDataSet(dataSeriesC, 0x0000ff, "Product Gamma");
//================================================================================
// Configure axis scale and labelling
//================================================================================
// Set the x-axis as a date/time axis with the scale according to the view port x range.
viewer.syncDateAxisWithViewPort("x", c.xAxis());
// In this demo, we rely on ChartDirector to auto-label the axis. We ask ChartDirector to
// ensure the x-axis labels are at least 75 pixels apart to avoid too many labels.
c.xAxis().setTickDensity(75);
//================================================================================
// Output the chart
//================================================================================
// Output the chart
viewer.Image = c.makeWebImage(Chart.PNG);
// Include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("", "",
"title='[{dataSetName}] {x|mmm dd, yyyy}: USD {value|2}'");
}