Platforms to show: All Mac Windows Linux Cross-Platform
/ChartDirector/Tracking Cursor/Track Line Web2
Function:
You find this example project in your Plugins Download as a Xojo project file within the examples folder: /ChartDirector/Tracking Cursor/Track Line Web2
This example is the version from Mon, 16th Jan 2022.
Function:
You find this example project in your Plugins Download as a Xojo project file within the examples folder: /ChartDirector/Tracking Cursor/Track Line Web2
This example is the version from Mon, 16th Jan 2022.
Project "Track Line Web2.xojo_binary_project"
Class App Inherits WebApplication
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
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 Web1
- /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.
Feedback: Report problem or ask question.