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());
}
//
// 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);
}
