Platforms to show: All Mac Windows Linux Cross-Platform
/ChartDirector/Tracking Cursor/Crosshair with Axis Labels
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/Crosshair with Axis Labels
This example is the version from Wed, 13th Dec 2016.
Project "Crosshair with Axis Labels.xojo_binary_project"
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)
crosshair x,y
pic = c.makeChartPicture
me.Invalidate
End EventHandler
EventHandler Sub Open()
// The XY data of the first data series
dim dataX() as double = array(50.0, 55, 37, 24, 42, 49, 63, 72, 83, 59)
dim dataY() as double = array(3.6, 2.8, 2.5, 2.3, 3.8, 3.0, 3.8, 5.0, 6.0, 3.3)
dim noOfPoints as integer = UBound(dataX)+1
// Create a XYChart object of size 520 x 490 pixels
c = new CDXYChartMBS(520, 490)
// Set the plotarea at (60, 40) and of size 450 x 400 pixels, with white background and a light
// grey border (&hc0c0c0). Turn on both horizontal and vertical grid lines with light grey color
// (&hc0c0c0)
call c.setPlotArea(60, 40, 450, 400, &hffffff, -1, &hc0c0c0, &hc0c0c0, -1)
// Add a title to the chart using 18 point Times Bold Itatic font.
call c.addTitle(" Chemical X Thermal Conductivity", "timesbi.ttf", 18)
// Add titles to the axes using 12 pts Arial Bold Italic font
call c.yAxis.setTitle("Thermal Conductivity (W/K)", "arialbi.ttf", 12)
call c.xAxis.setTitle("Concentration (g/liter)", "arialbi.ttf", 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 CDScatterLayerMBS = c.addScatterLayer(dataX, dataY, "", c.kGlassSphereShape, 13, &hcc0000)
// Tooltip for the scatter layer
scatterLayer.setHTMLImageMap("", "", "title='Concentration: {x} g/liter, Conductivity: {value} W/K'")
// Add a trend line layer for (dataX, dataY)
dim trendLayer as CDTrendLayerMBS = c.addTrendLayer(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)
// Tool tip for the trend layer
trendLayer.setHTMLImageMap("", "", "title='Trend Line: y = {slope|P4} x + {intercept|P4}'")
// Add a legend box at (60, 35) (top of the chart) with horizontal layout. Use 10 pts Arial Bold
// Italic font. Set the background and border color to Transparent and use line style legend
// icons.
dim legendBox as CDLegendBoxMBS = c.addLegend(60, 35, false, "arialbi.ttf", 9)
legendBox.setBackground(c.kTransparent)
legendBox.setLineStyleKey(true)
// Add entries to the legend box
legendBox.addKey("95% Line Confidence", &h806666ff)
legendBox.addKey("95% Point Confidence", &h8066ff66)
dim trendLegend as string
trendLegend = "Trend Line: y = " + c.formatValue(trendLayer.getSlope, "{value|4}") + " x = " + c.formatValue(trendLayer.getIntercept, "{value|4}")
legendBox.addKey(trendLegend, &hcc0000, 3)
// Include tool tip for the chart
'viewer.setImageMap(c.getHTMLImageMap(""))
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 crosshair(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
// Draw a vertical line and a horizontal line as the cross hair
d.vline(plotArea.getTopY, plotArea.getBottomY, mouseX, d.dashLineColor(&h000000, &h0101))
d.hline(plotArea.getLeftX, plotArea.getRightX, mouseY, d.dashLineColor(&h000000, &h0101))
// Draw y-axis label
dim ylabel as string
ylabel = "<*block,bgColor=FFFFDD,margin=3,edgeColor=000000*>" + c.formatValue(c.getYValue(mouseY, c.yAxis), "{value|P4}") + "<*/*>"
dim t as CDTTFTextMBS = d.text(ylabel, "arialbd.ttf", 8)
t.draw(plotArea.getLeftX - 5, mouseY, &h000000, c.kRight)
t.destroy
// Draw x-axis label
dim xlabel as string
xlabel = "<*block,bgColor=FFFFDD,margin=3,edgeColor=000000*>" + c.formatValue(c.getXValue(mouseX), "{value|P4}") + "<*/*>"
t = d.text(xlabel, "arialbd.ttf", 8)
t.draw(mouseX, plotArea.getBottomY + 5, &h000000, c.kTop)
t.destroy
End Sub
Note "Notes"
This sample program demonstrates a track cursor programmed as a crosshair cursor with axis labels.
The code first draws the chart.
We hide tracking if mouse is out of plotarea.
The track cursor is configured to automatically hide itself when the mouse leaves the plot area.
The crossHair method is the routine that draws the track cursor. Its key elements are:
* To draw dynamic contents on the chart, the code obtains the DrawArea object for drawing on the dynamic layer of the chart using BaseChart.initDynamicLayer.
* The code draws a vertical line (using DrawArea.vline) and a horizontal line (using DrawArea.hline) at the mouse cursor position. This creates the crosshair.
* The code also draws x and y axis labels using DrawArea.text.
Property c As CDXYChartMBS
Property pic As Picture
End Class
End Project
See also:
- /ChartDirector/Tracking Cursor/Finance Chart Track Line
- /ChartDirector/Tracking Cursor/Track Box with Legend
- /ChartDirector/Tracking Cursor/Track Line Web
- /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.