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