Platforms to show: All Mac Windows Linux Cross-Platform
/ChartDirector/Tracking Cursor/Track Line Web
Required plugins for this example: MBS ChartDirector Plugin
You find this example project in your Plugins Download as a Xojo project file within the examples folder: /ChartDirector/Tracking Cursor/Track Line Web
This example is the version from Sun, 5th Nov 2022.
Project "Track Line Web.xojo_binary_project"
Class App Inherits WebApplication
End Class
Class Session Inherits WebSession
Const ErrorDialogCancel = "Do Not Send"
Const ErrorDialogMessage = "This application has encountered an error and cannot continue."
Const ErrorDialogQuestion = "Please describe what you were doing right before the error occurred:"
Const ErrorDialogSubmit = "Send"
Const ErrorThankYou = "Thank You"
Const ErrorThankYouMessage = "Your feedback helps us make improvements."
Const NoJavascriptInstructions = "To turn Javascript on, please refer to your browser settings window."
Const NoJavascriptMessage = "Javascript must be enabled to access this page."
End Class
Class WebPage1 Inherits WebPage
Control Label1 Inherits WebLabel
ControlInstance Label1 Inherits WebLabel
End Control
Control MyControl1 Inherits MyControl
ControlInstance MyControl1 Inherits MyControl
End Control
End Class
Class MyControl Inherits WebImageViewer
EventHandler Sub Opening()
// for high dpi
CDBaseChartMBS.ScaleFactor = 2
// Data for the chart as 3 random data series
Dim r As New CDRanSeriesMBS(127)
Dim data0(-1) As Double = r.getSeries(100, 100, -15, 15)
Dim data1(-1) As Double = r.getSeries(100, 150, -15, 15)
Dim data2(-1) As Double = r.getSeries(100, 200, -15, 15)
Dim timeStamps(-1) As Double = r.getDateSeries(100, CDBaseChartMBS.chartTime(2011, 1, 1), 86400, False)
// Create a XYChart object of size 640 x 400 pixels
c = New CDXYChartMBS(640, 400)
// Add a title to the chart using 18 pts Times New Roman Bold Italic font
Call c.addTitle(" Product Line Global Revenue", "timesbi.ttf", 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, CDBaseChartMBS.kTransparent, &hffffff, &hffffff)
// Set legend icon style to use line style icon, sized for 8pt font
c.getLegend.setLineStyleKey
c.getLegend.setFontSize(8)
// Set axis label style to 8pts Arial Bold
Call c.xAxis.setLabelStyle("arialbd.ttf", 8)
Call c.yAxis.setLabelStyle("arialbd.ttf", 8)
// Set the axis stem to transparent
c.xAxis.setColors(CDBaseChartMBS.kTransparent)
c.yAxis.setColors(CDBaseChartMBS.kTransparent)
// Configure x-axis label format
Call c.xAxis.setMultiFormat(CDBaseChartMBS.StartOfYearFilter, "{value|mm/yyyy} ", CDBaseChartMBS.StartOfMonthFilter, "{value|mm}")
// Add axis title using 10pts Arial Bold Italic font
Call c.yAxis.setTitle("USD millions", "arialbi.ttf", 10)
// Add a line layer to the chart using a line width of 2 pixels.
Dim layer As CDLineLayerMBS = c.addLineLayer
layer.setLineWidth(2)
// Add 3 data series to the line layer
layer.setXData(timeStamps)
Call layer.addDataSet(data0, &hff3333, "Alpha")
Call layer.addDataSet(data1, &h008800, "Beta")
Call layer.addDataSet(data2, &h3333cc, "Gamma")
// Include track line with legend for the latest data values
trackLineLegend(c.getPlotArea.getRightX, 0)
pic = c.makeChartPicture
Me.Picture = pic
End EventHandler
EventHandler Sub Pressed(x as Integer, y as Integer)
trackLineLegend x, y
pic = c.makeChartPicture
If pic <> Nil Then
Me.Picture = pic
End If
End EventHandler
Sub trackLineLegend(mouseX as integer, mousey as integer)
// Clear the current dynamic layer and get the DrawArea object to draw on it.
dim d as cdDrawAreaMBS = c.initDynamicLayer
// The plot area object
dim plotArea as cdPlotAreaMBS = c.getPlotArea
// check if we are outside the plotArea
if mousex<plotArea.getLeftX then Return
if mousey<plotArea.getTopY then Return
if mousex>plotArea.getRightX then Return
if mousey>plotArea.getBottomY then Return
// Get the data x-value that is nearest to the mouse, and find its pixel coordinate.
dim xValue as double = c.getNearestXValue(mouseX)
dim xCoor as integer = c.getXCoor(xValue)
// Draw a vertical track line at the x-position
d.vline(plotArea.getTopY, plotArea.getBottomY, xCoor, d.dashLineColor(&h000000, &h0101))
// Container to hold the legend entries
dim legendEntries(-1) as string
// Iterate through all layers to build the legend array
dim u as integer = c.getLayerCount-1
for i as integer = 0 to u
dim layer as CDLayerMBS = c.getLayerByZ(i)
// The data array index of the x-value
dim xIndex as integer = layer.getXIndexOf(xValue)
// Iterate through all the data sets in the layer
dim uu as integer = layer.getDataSetCount-1
for j as integer = 0 to uu
dim dataSet as CDDataSetMBS = layer.getDataSetByZ(j)
// We are only interested in visible data sets with names
dim dataName as string = dataSet.getDataName
dim colorvalue as integer = dataSet.getDataColor
if (dataName.len>0 and (colorvalue <> CDBaseChartMBS.kTransparent)) then
// Build the legend entry, consist of the legend icon, name and data value.
dim dataValue as double = dataSet.getValue(xIndex)
dim legendEntry as string
dim s as string = "N/A"
if dataValue <> CDBaseChartMBS.kNoValue then
s = c.formatValue(dataValue, "{value|P4}")
end if
legendEntry = "<*block*>" + dataSet.getLegendIcon + " " + dataName + ": " + s + "<*/*>"
legendEntries.Append legendEntry
// Draw a track dot for data points within the plot area
dim yCoor as integer = c.getYCoor(dataSet.getPosition(xIndex), dataSet.getUseYAxis)
if ((yCoor >= plotArea.getTopY) and (yCoor <= plotArea.getBottomY)) then
d.circle(xCoor, yCoor, 4, 4, colorvalue, colorvalue)
end if
end if
next
next
// Create the legend by joining the legend entries
dim legendText as string
legendText = "<*block,maxWidth=" + str(plotArea.getWidth) + "*><*block*><*font=arialbd.ttf*>[" + c.xAxis.getFormattedLabel(xValue, "mmm dd, yyyy") + "]<*/*>"
for i as integer = UBound(legendEntries) downto 0
legendText = legendText+ " " + legendEntries(i)
next
// Display the legend on the top of the plot area
dim t as CDTTFTextMBS = d.text(legendText, "arial.ttf", 8)
t.draw(plotArea.getLeftX + 5, plotArea.getTopY - 3, &h000000, CDBaseChartMBS.kBottomLeft)
't.destroy
End Sub
Property c As CDXYChartMBS
Property pic As Picture
End Class
Sign
End Sign
End Project
See also:
- /ChartDirector/Tracking Cursor/Crosshair with Axis Labels
- /ChartDirector/Tracking Cursor/Finance Chart Track Line
- /ChartDirector/Tracking Cursor/Track Box with Legend
- /ChartDirector/Tracking Cursor/Track Line with Axis Labels
- /ChartDirector/Tracking Cursor/Track Line with Data Labels
- /ChartDirector/Tracking Cursor/Track Line with Data Labels Retina
- /ChartDirector/Tracking Cursor/Track Line with Legend
- /ChartDirector/Tracking Cursor/Track Line with Legend Retina
The items on this page are in the following plugins: MBS ChartDirector Plugin.