This sample program demonstrates a track cursor programmed with the following features:
- A vertical line that follows the mouse cursor on the plot area and snaps to the nearest x data value.
- Small dots that shows the data points at the nearest x data value.
- Dynamically updated legend entries that shows the value of the data points at the nearest x data value.
On the server side, the code draws the chart as usual, and outputs both the image and the
Javascript Chart Model of the chart.
On the browser side, in the window onload event handler, Javascript is used to set up the event handler for the
MouseMovePlotArea,
TouchStartPlotArea,
TouchMovePlotArea ,
ChartMove and
Now events. The event handler calls
trackLineLegend to draw the track cursor.
The
trackLineLegend Javascript function is the routine that draws the track cursor. Its key elements are:
[Web Version (in ASP)] aspdemo\tracklegend.asp
<%@ language="vbscript" %>
<%
Set cd = CreateObject("ChartDirector.API")
' Data for the chart as 3 random data series
Set r = cd.RanSeries(127)
data0 = r.getSeries(100, 100, -15, 15)
data1 = r.getSeries(100, 150, -15, 15)
data2 = r.getSeries(100, 200, -15, 15)
timeStamps = r.getDateSeries(100, DateSerial(2011, 1, 1), 86400)
' Create a XYChart object of size 640 x 400 pixels
Set c = cd.XYChart(640, 400)
' Add a title to the chart using 18pt Times New Roman Bold Italic font
Call c.addTitle(" Product Line Global Revenue", "Times New Roman Bold Italic", 18)
' Set the plotarea at (50, 55) with width 70 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).
Call c.setPlotArea(50, 55, c.getWidth() - 70, c.getHeight() - 90, c.linearGradientColor(0, 55, 0, _
c.getHeight() - 35, &Hf0f6ff, &Ha0c0ff), -1, cd.Transparent, &Hffffff, &Hffffff)
' Set axis label style to 8pt Arial Bold
Call c.xAxis().setLabelStyle("Arial Bold", 8)
Call c.yAxis().setLabelStyle("Arial Bold", 8)
' Set the axis stem to transparent
Call c.xAxis().setColors(cd.Transparent)
Call c.yAxis().setColors(cd.Transparent)
' Configure x-axis label format
Call c.xAxis().setMultiFormat(cd.StartOfYearFilter(), "{value|mm/yyyy} ", cd.StartOfMonthFilter(), _
"{value|mm}")
' Add axis title using 10pt Arial Bold Italic font
Call c.yAxis().setTitle("USD millions", "Arial Bold Italic", 10)
' Add a line layer to the chart using a line width of 2 pixels.
Set layer = c.addLineLayer2()
Call layer.setLineWidth(2)
' Add 3 data series to the line layer
Call layer.setXData(timeStamps)
Call layer.addDataSet(data0, &Hff3333, "Alpha")
Call layer.addDataSet(data1, &H008800, "Beta")
Call layer.addDataSet(data2, &H3333cc, "Gamma")
' Create the WebChartViewer object
Set viewer = cd.WebChartViewer(Request, "chart1")
' Output the chart
Call viewer.setChart(c, cd.SVG)
' Output Javascript chart model to the browser to support tracking cursor
viewer.ChartModel = c.getJsChartModel()
%>
<!DOCTYPE html>
<html>
<head>
<title>Track Line with Legend</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('<%=viewer.Id%>');
// Draw track cursor when mouse is moving over plotarea
viewer.attachHandler(["MouseMovePlotArea", "TouchStartPlotArea", "TouchMovePlotArea", "ChartMove", "Now"],
function(e) {
this.preventDefault(e); // Prevent the browser from using touch events for other actions
trackLineLegend(viewer, viewer.getPlotAreaMouseX());
});
});
//
// Draw track line with legend
//
function trackLineLegend(viewer, mouseX)
{
// Remove all previously drawn tracking object
viewer.hideObj("all");
// The chart and its plot area
var c = viewer.getChart();
var plotArea = c.getPlotArea();
// Get the data x-value that is nearest to the mouse, and find its pixel coordinate.
var xValue = c.getNearestXValue(mouseX);
var xCoor = c.getXCoor(xValue);
if (xCoor == null)
return;
// Draw a vertical track line at the x-position
viewer.drawVLine("trackLine", xCoor, plotArea.getTopY(), plotArea.getBottomY(), "black 1px dotted");
// Array to hold the legend entries
var legendEntries = [];
// Iterate through all layers to build the legend array
for (var i = 0; i < c.getLayerCount(); ++i)
{
var layer = c.getLayerByZ(i);
// The data array index of the x-value
var xIndex = layer.getXIndexOf(xValue);
// Iterate through all the data sets in the layer
for (var j = 0; j < layer.getDataSetCount(); ++j)
{
var dataSet = layer.getDataSetByZ(j);
// We are only interested in visible data sets with names, as they are required for legend entries.
var dataName = dataSet.getDataName();
var color = dataSet.getDataColor();
if ((!dataName) || (color == null))
continue;
// Build the legend entry, consist of a colored square box, the name and the data value.
var dataValue = dataSet.getValue(xIndex);
legendEntries.push("<nobr>" + viewer.htmlRect(7, 7, color) + " " + dataName + ": " +
((dataValue == null) ? "N/A" : dataValue.toPrecision(4)) + viewer.htmlRect(20, 0) + "</nobr> ");
// Draw a track dot for data points within the plot area
var yCoor = c.getYCoor(dataSet.getPosition(xIndex), dataSet.getUseYAxis());
if ((yCoor != null) && (yCoor >= plotArea.getTopY()) && (yCoor <= plotArea.getBottomY()))
{
viewer.showTextBox("dataPoint" + i + "_" + j, xCoor, yCoor, JsChartViewer.Center,
viewer.htmlRect(7, 7, color));
}
}
}
// Create the legend by joining the legend entries.
var legend = "<nobr>[" + c.xAxis().getFormattedLabel(xValue, "mm/dd/yyyy") + "]" + viewer.htmlRect(20, 0) +
"</nobr> " + legendEntries.reverse().join("");
// Display the legend on the top of the plot area
viewer.showTextBox("legend", plotArea.getLeftX(), plotArea.getTopY(), JsChartViewer.BottomLeft, legend,
"width:" + plotArea.getWidth() + "px;font:bold 11px Arial;padding:3px;-webkit-text-size-adjust:100%;");
}
</script>
<div style="font-size:18pt; font-family:verdana; font-weight:bold">
Track Line with Legend
</div>
<hr style="border:solid 1px #000080" />
<div style="font-size:10pt; font-family:verdana; margin-bottom:1.5em">
<a href="viewsource.asp?file=<%=Request("SCRIPT_NAME")%>">View Source Code</a>
</div>
<!-- ****** Here is the chart image ****** -->
<%=viewer.renderHTML()%>
</body>
</html>
© 2021 Advanced Software Engineering Limited. All rights reserved.