ChartDirector 7.1 (.NET Edition)

Crosshair with Axis Labels (Web)




NOTE: This section describes Crosshair with Axis Labels for web applications only. For Windows applications, please refer to Crosshair with Axis Labels (Windows).

This sample program demonstrates a track cursor programmed as a crosshair cursor with axis labels. In additional, it demonstrates using hot spot events to pop up a box when the mouse is over a data point or the trend line, showing information about these objects with HTML formatting.

The key elements of the server side charting code are as follows:

Source Code Listing

[ASP.NET Web Forms - C# version] NetWebCharts\CSharpASP\crosshair.aspx
(Click here on how to convert this code to code-behind style.)
<%@ Page Language="C#" Debug="true" %> <%@ Import Namespace="ChartDirector" %> <%@ Register TagPrefix="chart" Namespace="ChartDirector" Assembly="netchartdir" %> <script runat="server"> // // Page Load event handler // protected void Page_Load(object sender, EventArgs e) { // The XY data of the first data series double[] dataX = {50, 55, 37, 24, 42, 49, 63, 72, 83, 59}; double[] dataY = {3.6, 2.8, 2.5, 2.3, 3.8, 3.0, 3.8, 5.0, 6.0, 3.3}; // Create a XYChart object of size 520 x 490 pixels XYChart c = new XYChart(520, 490); // Set the plotarea at (60, 40) and of size 450 x 400 pixels, with white background and a light // grey border (0xc0c0c0). Turn on both horizontal and vertical grid lines with light grey color // (0xc0c0c0) c.setPlotArea(60, 40, 450, 400, 0xffffff, -1, 0xc0c0c0, 0xc0c0c0, -1); // Add a title to the chart using 18 point Times Bold Itatic font. c.addTitle(" Chemical X Thermal Conductivity", "Times New Roman Bold Italic", 18); // Add titles to the axes using 12pt Arial Bold Italic font c.yAxis().setTitle("Thermal Conductivity (W/K)", "Arial Bold Italic", 12); c.xAxis().setTitle("Concentration (g/liter)", "Arial Bold Italic", 12); // Set the axes line width to 3 pixels c.yAxis().setWidth(3); c.xAxis().setWidth(3); // Add a scatter layer using (dataX, dataY) ScatterLayer scatterLayer = c.addScatterLayer(dataX, dataY, "", Chart.GlassSphereShape, 13, 0xcc0000); // Show custom Javascript tooltip for the scatter layer scatterLayer.setHTMLImageMap("", "", "onmouseover='showDataPointToolTip({x}, {value})' onmouseout='hideToolTip()'"); // Add a trend line layer for (dataX, dataY) TrendLayer trendLayer = c.addTrendLayer2(dataX, dataY, 0xcc0000); // Set the line width to 3 pixels trendLayer.setLineWidth(3); // Add a 95% confidence band for the line trendLayer.addConfidenceBand(0.95, unchecked((int)0x806666ff)); // Add a 95% confidence band (prediction band) for the points trendLayer.addPredictionBand(0.95, unchecked((int)0x8066ff66)); // Show custom Javascript tooltip for the trend layer trendLayer.setHTMLImageMap("", "", "onmouseover='showTrendLineToolTip({slope}, {intercept})' onmouseout='hideToolTip()'"); // Add a legend box at (60, 35) (top of the chart) with horizontal layout. Use 10pt Arial Bold // Italic font. Set the background and border color to Transparent and use line style legend // icons. LegendBox legendBox = c.addLegend(60, 35, false, "Arial Bold Italic", 9); legendBox.setBackground(Chart.Transparent); legendBox.setLineStyleKey(true); // Add entries to the legend box legendBox.addKey("95% Line Confidence", unchecked((int)0x806666ff)); legendBox.addKey("95% Point Confidence", unchecked((int)0x8066ff66)); legendBox.addKey("Trend Line: y = " + Math.Round(trendLayer.getSlope(), 4) + " x + " + Math.Round(trendLayer.getIntercept(), 4), 0xcc0000, 3); // Output the chart WebChartViewer1.Image = c.makeWebImage(Chart.SVG); // Include tool tip for the chart WebChartViewer1.ImageMap = c.getHTMLImageMap(""); // Output Javascript chart model to the browser to suppport tracking cursor WebChartViewer1.ChartModel = c.getJsChartModel(); } </script> <!DOCTYPE html> <html> <head> <title>Crosshair with Axis Labels</title> <script type="text/javascript" src="cdjcv.js"></script> </head> <body style="margin:5px 0px 0px 5px"> <script type="text/javascript"> // // Use the window load event to set up the MouseMovePlotArea event handler // JsChartViewer.addEventListener(window, 'load', function() { var viewer = JsChartViewer.get('<%=WebChartViewer1.ClientID%>'); // Draw track cursor when mouse is moving over plotarea. Hide it when mouse leaves plot area. viewer.attachHandler(["MouseMovePlotArea", "TouchStartPlotArea", "TouchMovePlotArea", "ChartMove"], function(e) { this.preventDefault(e); // Prevent the browser from using touch events for other actions crossHairAxisLabel(viewer, viewer.getPlotAreaMouseX(), viewer.getPlotAreaMouseY()); viewer.setAutoHide("all", ["MouseOutPlotArea", "TouchEndPlotArea"]); }); }); // // Draw cross hair cursor with axis labels // function crossHairAxisLabel(viewer, x, y) { // Show cross hair viewer.showCrossHair(x, y); // The chart, its plot area and axes var c = viewer.getChart(); var xAxis = c.xAxis(); var yAxis = c.yAxis(); // The axis label style var labelStyle = "padding:2px 4px; font: bold 8pt arial; border:1px solid black;" + "background-color:#DDDDFF; -webkit-text-size-adjust:100%;"; // Draw x-axis label var yPos = xAxis.getY() + ((xAxis.getAlignment() == JsChartViewer.Top) ? -2 : 3); var alignment = (xAxis.getAlignment() == JsChartViewer.Top) ? JsChartViewer.Bottom : JsChartViewer.Top; viewer.showTextBox("xAxisLabel", x, yPos, alignment, c.getXValue(x).toPrecision(4), labelStyle); // Draw y-axis label var xPos = yAxis.getX() + ((yAxis.getAlignment() == JsChartViewer.Left) ? -2 : 3); var alignment = (yAxis.getAlignment() == JsChartViewer.Left) ? JsChartViewer.Right : JsChartViewer.Left; viewer.showTextBox("yAxisLabel", xPos, y, alignment, c.getYValue(y, yAxis).toPrecision(4), labelStyle); } // // Show custom tooltip for data points // function showDataPointToolTip(x, y) { var viewer = JsChartViewer.get('<%=WebChartViewer1.ClientID%>'); viewer.showTextBox("toolTipBox", viewer.getChartMouseX() + 20, viewer.getChartMouseY() + 20, JsChartViewer.TopLeft, "<table><tr><td>Concentration</td><td>: " + x.toPrecision(4) + " g/liter</td></tr><tr><td>Conductivity</td><td>: " + y.toPrecision(4) + " W/K</td></tr></table>", "padding:0px; font:bold 8pt arial; border:1px solid black; background-color:#DDDDFF"); } // // Show custom tooltip for the trend line // function showTrendLineToolTip(slope, intercept) { var viewer = JsChartViewer.get('<%=WebChartViewer1.ClientID%>'); viewer.showTextBox("toolTipBox", viewer.getChartMouseX() + 20, viewer.getChartMouseY() + 20, JsChartViewer.TopLeft, "Trend Line: y = " + slope.toFixed(4) + " x + " + intercept.toFixed(4), "padding:2px 4px; font:bold 8pt arial; border:1px solid black; background-color:#DDDDFF"); } // // Hide custom tooltip // function hideToolTip() { var viewer = JsChartViewer.get('<%=WebChartViewer1.ClientID%>'); viewer.hideObj("toolTipBox"); } </script> <div style="font-size:18pt; font-family:verdana; font-weight:bold"> Crosshair with Axis Labels </div> <hr style="border:solid 1px #000080" /> <div style="font-size:10pt; font-family:verdana; margin-bottom:1.5em"> <a href="viewsource.aspx?file=<%=Request["SCRIPT_NAME"]%>">View Source Code</a> </div> <!-- ****** Here is the chart image ****** --> <chart:WebChartViewer id="WebChartViewer1" runat="server" /> </body> </html>

[ASP.NET Web Forms - VB Version] NetWebCharts\VBNetASP\crosshair.aspx
(Click here on how to convert this code to code-behind style.)
<%@ Page Language="VB" Debug="true" %> <%@ Import Namespace="ChartDirector" %> <%@ Register TagPrefix="chart" Namespace="ChartDirector" Assembly="netchartdir" %> <script runat="server"> ' ' Page Load event handler ' Protected Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) ' The XY data of the first data series Dim dataX() As Double = {50, 55, 37, 24, 42, 49, 63, 72, 83, 59} Dim dataY() As Double = {3.6, 2.8, 2.5, 2.3, 3.8, 3.0, 3.8, 5.0, 6.0, 3.3} ' Create a XYChart object of size 520 x 490 pixels Dim c As XYChart = New XYChart(520, 490) ' Set the plotarea at (60, 40) and of size 450 x 400 pixels, with white background and a light ' grey border (0xc0c0c0). Turn on both horizontal and vertical grid lines with light grey color ' (0xc0c0c0) c.setPlotArea(60, 40, 450, 400, &Hffffff, -1, &Hc0c0c0, &Hc0c0c0, -1) ' Add a title to the chart using 18 point Times Bold Itatic font. c.addTitle(" Chemical X Thermal Conductivity", "Times New Roman Bold Italic", 18) ' Add titles to the axes using 12pt Arial Bold Italic font c.yAxis().setTitle("Thermal Conductivity (W/K)", "Arial Bold Italic", 12) c.xAxis().setTitle("Concentration (g/liter)", "Arial Bold Italic", 12) ' Set the axes line width to 3 pixels c.yAxis().setWidth(3) c.xAxis().setWidth(3) ' Add a scatter layer using (dataX, dataY) Dim scatterLayer As ScatterLayer = c.addScatterLayer(dataX, dataY, "", Chart.GlassSphereShape, _ 13, &Hcc0000) ' Show custom Javascript tooltip for the scatter layer scatterLayer.setHTMLImageMap("", "", _ "onmouseover='showDataPointToolTip({x}, {value})' onmouseout='hideToolTip()'") ' Add a trend line layer for (dataX, dataY) Dim trendLayer As TrendLayer = c.addTrendLayer2(dataX, dataY, &Hcc0000) ' Set the line width to 3 pixels trendLayer.setLineWidth(3) ' Add a 95% confidence band for the line trendLayer.addConfidenceBand(0.95, &H806666ff) ' Add a 95% confidence band (prediction band) for the points trendLayer.addPredictionBand(0.95, &H8066ff66) ' Show custom Javascript tooltip for the trend layer trendLayer.setHTMLImageMap("", "", _ "onmouseover='showTrendLineToolTip({slope}, {intercept})' onmouseout='hideToolTip()'") ' Add a legend box at (60, 35) (top of the chart) with horizontal layout. Use 10pt Arial Bold ' Italic font. Set the background and border color to Transparent and use line style legend ' icons. Dim legendBox As LegendBox = c.addLegend(60, 35, False, "Arial Bold Italic", 9) legendBox.setBackground(Chart.Transparent) legendBox.setLineStyleKey(True) ' Add entries to the legend box legendBox.addKey("95% Line Confidence", &H806666ff) legendBox.addKey("95% Point Confidence", &H8066ff66) legendBox.addKey("Trend Line: y = " & FormatNumber(trendLayer.getSlope(), 4) & " x + " & _ FormatNumber(trendLayer.getIntercept(), 4), &Hcc0000, 3) ' Output the chart WebChartViewer1.Image = c.makeWebImage(Chart.SVG) ' Include tool tip for the chart WebChartViewer1.ImageMap = c.getHTMLImageMap("") ' Output Javascript chart model to the browser to suppport tracking cursor WebChartViewer1.ChartModel = c.getJsChartModel() End Sub </script> <!DOCTYPE html> <html> <head> <title>Crosshair with Axis Labels</title> <script type="text/javascript" src="cdjcv.js"></script> </head> <body style="margin:5px 0px 0px 5px"> <script type="text/javascript"> // // Use the window load event to set up the MouseMovePlotArea event handler // JsChartViewer.addEventListener(window, 'load', function() { var viewer = JsChartViewer.get('<%=WebChartViewer1.ClientID%>'); // Draw track cursor when mouse is moving over plotarea. Hide it when mouse leaves plot area. viewer.attachHandler(["MouseMovePlotArea", "TouchStartPlotArea", "TouchMovePlotArea", "ChartMove"], function(e) { this.preventDefault(e); // Prevent the browser from using touch events for other actions crossHairAxisLabel(viewer, viewer.getPlotAreaMouseX(), viewer.getPlotAreaMouseY()); viewer.setAutoHide("all", ["MouseOutPlotArea", "TouchEndPlotArea"]); }); }); // // Draw cross hair cursor with axis labels // function crossHairAxisLabel(viewer, x, y) { // Show cross hair viewer.showCrossHair(x, y); // The chart, its plot area and axes var c = viewer.getChart(); var xAxis = c.xAxis(); var yAxis = c.yAxis(); // The axis label style var labelStyle = "padding:2px 4px; font: bold 8pt arial; border:1px solid black;" + "background-color:#DDDDFF; -webkit-text-size-adjust:100%;"; // Draw x-axis label var yPos = xAxis.getY() + ((xAxis.getAlignment() == JsChartViewer.Top) ? -2 : 3); var alignment = (xAxis.getAlignment() == JsChartViewer.Top) ? JsChartViewer.Bottom : JsChartViewer.Top; viewer.showTextBox("xAxisLabel", x, yPos, alignment, c.getXValue(x).toPrecision(4), labelStyle); // Draw y-axis label var xPos = yAxis.getX() + ((yAxis.getAlignment() == JsChartViewer.Left) ? -2 : 3); var alignment = (yAxis.getAlignment() == JsChartViewer.Left) ? JsChartViewer.Right : JsChartViewer.Left; viewer.showTextBox("yAxisLabel", xPos, y, alignment, c.getYValue(y, yAxis).toPrecision(4), labelStyle); } // // Show custom tooltip for data points // function showDataPointToolTip(x, y) { var viewer = JsChartViewer.get('<%=WebChartViewer1.ClientID%>'); viewer.showTextBox("toolTipBox", viewer.getChartMouseX() + 20, viewer.getChartMouseY() + 20, JsChartViewer.TopLeft, "<table><tr><td>Concentration</td><td>: " + x.toPrecision(4) + " g/liter</td></tr><tr><td>Conductivity</td><td>: " + y.toPrecision(4) + " W/K</td></tr></table>", "padding:0px; font:bold 8pt arial; border:1px solid black; background-color:#DDDDFF"); } // // Show custom tooltip for the trend line // function showTrendLineToolTip(slope, intercept) { var viewer = JsChartViewer.get('<%=WebChartViewer1.ClientID%>'); viewer.showTextBox("toolTipBox", viewer.getChartMouseX() + 20, viewer.getChartMouseY() + 20, JsChartViewer.TopLeft, "Trend Line: y = " + slope.toFixed(4) + " x + " + intercept.toFixed(4), "padding:2px 4px; font:bold 8pt arial; border:1px solid black; background-color:#DDDDFF"); } // // Hide custom tooltip // function hideToolTip() { var viewer = JsChartViewer.get('<%=WebChartViewer1.ClientID%>'); viewer.hideObj("toolTipBox"); } </script> <div style="font-size:18pt; font-family:verdana; font-weight:bold"> Crosshair with Axis Labels </div> <hr style="border:solid 1px #000080" /> <div style="font-size:10pt; font-family:verdana; margin-bottom:1.5em"> <a href="viewsource.aspx?file=<%=Request("SCRIPT_NAME")%>">View Source Code</a> </div> <!-- ****** Here is the chart image ****** --> <chart:WebChartViewer id="WebChartViewer1" runat="server" /> </body> </html>

[ASP.NET MVC - Controller] NetMvcCharts\Controllers\CrosshairController.cs
using System; using System.Web.Mvc; using ChartDirector; namespace NetMvcCharts.Controllers { public class CrosshairController : Controller { // // Default Action // public ActionResult Index() { createChart(ViewBag.Viewer = new RazorChartViewer(HttpContext, "chart1")); return View(); } // // Create chart // private void createChart(RazorChartViewer viewer) { // The XY data of the first data series double[] dataX = {50, 55, 37, 24, 42, 49, 63, 72, 83, 59}; double[] dataY = {3.6, 2.8, 2.5, 2.3, 3.8, 3.0, 3.8, 5.0, 6.0, 3.3}; // Create a XYChart object of size 520 x 490 pixels XYChart c = new XYChart(520, 490); // Set the plotarea at (60, 40) and of size 450 x 400 pixels, with white background and a // light grey border (0xc0c0c0). Turn on both horizontal and vertical grid lines with light // grey color (0xc0c0c0) c.setPlotArea(60, 40, 450, 400, 0xffffff, -1, 0xc0c0c0, 0xc0c0c0, -1); // Add a title to the chart using 18 point Times Bold Itatic font. c.addTitle(" Chemical X Thermal Conductivity", "Times New Roman Bold Italic", 18); // Add titles to the axes using 12pt Arial Bold Italic font c.yAxis().setTitle("Thermal Conductivity (W/K)", "Arial Bold Italic", 12); c.xAxis().setTitle("Concentration (g/liter)", "Arial Bold Italic", 12); // Set the axes line width to 3 pixels c.yAxis().setWidth(3); c.xAxis().setWidth(3); // Add a scatter layer using (dataX, dataY) ScatterLayer scatterLayer = c.addScatterLayer(dataX, dataY, "", Chart.GlassSphereShape, 13, 0xcc0000); // Show custom Javascript tooltip for the scatter layer scatterLayer.setHTMLImageMap("", "", "onmouseover='showDataPointToolTip({x}, {value})' onmouseout='hideToolTip()'"); // Add a trend line layer for (dataX, dataY) TrendLayer trendLayer = c.addTrendLayer2(dataX, dataY, 0xcc0000); // Set the line width to 3 pixels trendLayer.setLineWidth(3); // Add a 95% confidence band for the line trendLayer.addConfidenceBand(0.95, unchecked((int)0x806666ff)); // Add a 95% confidence band (prediction band) for the points trendLayer.addPredictionBand(0.95, unchecked((int)0x8066ff66)); // Show custom Javascript tooltip for the trend layer trendLayer.setHTMLImageMap("", "", "onmouseover='showTrendLineToolTip({slope}, {intercept})' onmouseout='hideToolTip()'"); // Add a legend box at (60, 35) (top of the chart) with horizontal layout. Use 10pt Arial // Bold Italic font. Set the background and border color to Transparent and use line style // legend icons. LegendBox legendBox = c.addLegend(60, 35, false, "Arial Bold Italic", 9); legendBox.setBackground(Chart.Transparent); legendBox.setLineStyleKey(true); // Add entries to the legend box legendBox.addKey("95% Line Confidence", unchecked((int)0x806666ff)); legendBox.addKey("95% Point Confidence", unchecked((int)0x8066ff66)); legendBox.addKey("Trend Line: y = " + Math.Round(trendLayer.getSlope(), 4) + " x + " + Math.Round(trendLayer.getIntercept(), 4), 0xcc0000, 3); // Output the chart viewer.Image = c.makeWebImage(Chart.SVG); // Include tool tip for the chart viewer.ImageMap = c.getHTMLImageMap(""); // Output Javascript chart model to the browser to suppport tracking cursor viewer.ChartModel = c.getJsChartModel(); } } }

[ASP.NET MVC - View] NetMvcCharts\Views\Crosshair\Index.cshtml
@{ Layout = null; } <!DOCTYPE html> <html> <head> <title>Crosshair with Axis Labels</title> @Scripts.Render("~/Scripts/cdjcv.js") </head> <body style="margin:5px 0px 0px 5px"> <script type="text/javascript"> // // Use the window load event to set up the MouseMovePlotArea event handler // JsChartViewer.addEventListener(window, 'load', function() { var viewer = JsChartViewer.get('@ViewBag.Viewer.ID'); // Draw track cursor when mouse is moving over plotarea. Hide it when mouse leaves plot area. viewer.attachHandler(["MouseMovePlotArea", "TouchStartPlotArea", "TouchMovePlotArea", "ChartMove"], function(e) { this.preventDefault(e); // Prevent the browser from using touch events for other actions crossHairAxisLabel(viewer, viewer.getPlotAreaMouseX(), viewer.getPlotAreaMouseY()); viewer.setAutoHide("all", ["MouseOutPlotArea", "TouchEndPlotArea"]); }); }); // // Draw cross hair cursor with axis labels // function crossHairAxisLabel(viewer, x, y) { // Show cross hair viewer.showCrossHair(x, y); // The chart, its plot area and axes var c = viewer.getChart(); var xAxis = c.xAxis(); var yAxis = c.yAxis(); // The axis label style var labelStyle = "padding:2px 4px; font: bold 8pt arial; border:1px solid black;" + "background-color:#DDDDFF; -webkit-text-size-adjust:100%;"; // Draw x-axis label var yPos = xAxis.getY() + ((xAxis.getAlignment() == JsChartViewer.Top) ? -2 : 3); var alignment = (xAxis.getAlignment() == JsChartViewer.Top) ? JsChartViewer.Bottom : JsChartViewer.Top; viewer.showTextBox("xAxisLabel", x, yPos, alignment, c.getXValue(x).toPrecision(4), labelStyle); // Draw y-axis label var xPos = yAxis.getX() + ((yAxis.getAlignment() == JsChartViewer.Left) ? -2 : 3); var alignment = (yAxis.getAlignment() == JsChartViewer.Left) ? JsChartViewer.Right : JsChartViewer.Left; viewer.showTextBox("yAxisLabel", xPos, y, alignment, c.getYValue(y, yAxis).toPrecision(4), labelStyle); } // // Show custom tooltip for data points // function showDataPointToolTip(x, y) { var viewer = JsChartViewer.get('@ViewBag.Viewer.ID'); viewer.showTextBox("toolTipBox", viewer.getChartMouseX() + 20, viewer.getChartMouseY() + 20, JsChartViewer.TopLeft, "<table><tr><td>Concentration</td><td>: " + x.toPrecision(4) + " g/liter</td></tr><tr><td>Conductivity</td><td>: " + y.toPrecision(4) + " W/K</td></tr></table>", "padding:0px; font:bold 8pt arial; border:1px solid black; background-color:#DDDDFF"); } // // Show custom tooltip for the trend line // function showTrendLineToolTip(slope, intercept) { var viewer = JsChartViewer.get('@ViewBag.Viewer.ID'); viewer.showTextBox("toolTipBox", viewer.getChartMouseX() + 20, viewer.getChartMouseY() + 20, JsChartViewer.TopLeft, "Trend Line: y = " + slope.toFixed(4) + " x + " + intercept.toFixed(4), "padding:2px 4px; font:bold 8pt arial; border:1px solid black; background-color:#DDDDFF"); } // // Hide custom tooltip // function hideToolTip() { var viewer = JsChartViewer.get('@ViewBag.Viewer.ID'); viewer.hideObj("toolTipBox"); } </script> <div style="font-size:18pt; font-family:verdana; font-weight:bold"> Crosshair with Axis Labels </div> <hr style="border:solid 1px #000080" /> <!-- ****** Here is the chart image ****** --> @Html.Raw(ViewBag.Viewer.RenderHTML()) </body> </html>