You find this example project in your Plugins Download as a Xojo project file within the examples folder: /ChartDirector/Tracking Cursor/Track Line with Data Labels
Class App Inherits Application
Const kEditClear = "&Löschen"
Const kFileQuit = "Beenden"
Const kFileQuitShortcut = ""
End Class
Class Window1 Inherits Window
Control Canvas1 Inherits MyControl
ControlInstance Canvas1 Inherits MyControl
End Control
End Class
MenuBar MenuBar1
MenuItem FileMenu = "&Ablage"
MenuItem FileQuit = "#App.kFileQuit"
MenuItem EditMenu = "&Bearbeiten"
MenuItem EditUndo = "&Rückgängig"
MenuItem UntitledMenu1 = "-"
MenuItem EditCut = "&Ausschneiden"
MenuItem EditCopy = "&Kopieren"
MenuItem EditPaste = "&Einfügen"
MenuItem EditClear = "#App.kEditClear"
MenuItem UntitledMenu0 = "-"
MenuItem EditSelectAll = "&Alles auswählen"
End MenuBar
Class MyControl Inherits Canvas
EventHandler Sub MouseMove(X As Integer, Y As Integer)
trackLineLegend x
pic = c.makeChartPicture
me.Invalidate
End EventHandler
EventHandler Sub Open()
// Data for the chart as 3 random data series
dim r as new CDRanSeriesMBS(127)
dim data0() as double = r.getSeries(100, 100, -15, 15)
dim data1() as double = r.getSeries(100, 150, -15, 15)
dim data2() as double = r.getSeries(100, 200, -15, 15)
dim timeStamps() 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)
// Add a legend box at (50, 25) using horizontal layout. Use 10pts Arial Bold as font. Set the
// background and border color to Transparent.
c.addLegend(50, 25, false, "arialbd.ttf", 10).setBackground(CDBaseChartMBS.kTransparent)
// 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
call layer.setXData(timeStamps)
call layer.addDataSet(data0, &hff3333, "Alpha")
call layer.addDataSet(data1, &h008800, "Beta")
call layer.addDataSet(data2, &h3333cc, "Gamma")
// Assign the chart to the WinChartViewer
pic = c.makeChartPicture
me.Invalidate
// fix some properties if set wrong in IDE
me.DoubleBuffer = false
me.EraseBackground = false
#if RBVersion >= 2013.0 then
me.Transparent = False
#endif
End EventHandler
EventHandler Sub Paint(g As Graphics, areas() As REALbasic.Rect)
if pic <> nil then
g.DrawPicture pic, 0, 0
end if
End EventHandler
Sub trackLineLegend(mouseX 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))
// Draw a label on the x-axis to show the track line position.
dim xlabel as string
xlabel = "<*font,bgColor=000000*> " + c.xAxis.getFormattedLabel(xValue, "mmm dd, yyyy") + " <*/font*>"
dim t as CDTTFTextMBS = d.text(xlabel, "arialbd.ttf", 8)
// Restrict the x-pixel position of the label to make sure it stays inside the chart image.
dim xLabelPos as integer = max(0, min(xCoor - t.getWidth / 2, c.getWidth - t.getWidth))
t.draw(xLabelPos, plotArea.getBottomY + 6, &hffffff)
t.destroy
// Iterate through all layers to draw the data labels
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)
dim dataSetName as string = dataSet.getDataName
// Get the color, name and position of the data label
dim colorvalue as integer = dataSet.getDataColor
dim yCoor as integer = c.getYCoor(dataSet.getPosition(xIndex), dataSet.getUseYAxis)
// Draw a track dot with a label next to it for visible data points in the plot area
if ((yCoor >= plotArea.getTopY) and (yCoor <= plotArea.getBottomY) and (colorvalue <> CDBaseChartMBS.kTransparent) and dataSetName.len>0) then
d.circle(xCoor, yCoor, 4, 4, colorvalue, colorvalue)
dim label as string
dim h as string = hex(colorvalue)
while h.len<6
h = "0" + h
wend
label = "<*font,bgColor=" + h + "*> " + c.formatValue(dataSet.getValue(xIndex), "{value|P4}") + " <*font*>"
t = d.text(label, "arialbd.ttf", 8)
// Draw the label on the right side of the dot if the mouse is on the left side the
// chart, and vice versa. This ensures the label will not go outside the chart image.
if (xCoor <= (plotArea.getLeftX + plotArea.getRightX) / 2) then
t.draw(xCoor + 5, yCoor, &hffffff, CDBaseChartMBS.kLeft)
else
t.draw(xCoor - 5, yCoor, &hffffff, CDBaseChartMBS.kRight)
t.destroy
end if
end if
next
next
End Sub
Note "Notes"
Property c As CDXYChartMBS
Property pic As Picture
End Class