Platforms to show: All Mac Windows Linux Cross-Platform
/ChartDirector/High Resolution Chart Examples/linefill
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/High Resolution Chart Examples/linefill
This example is the version from Sun, 17th Mar 2012.
Project "linefill.xojo_binary_project"
Class App Inherits Application
Const kEditClear = "&Löschen"
Const kFileQuit = "Beenden"
Const kFileQuitShortcut = ""
End Class
Class PicWindow Inherits Window
EventHandler Sub Open()
const f=3 // scale factor, 1 for screen and 4 or more for printing
// The data for the line chart
dim data0(-1) as double = array(70.0, 73, 80, 90, 95, 93, 82, 77, 82, 101, 111, 115)
dim data1(-1) as double = array(90.0, 96, 89, 77, 82, 96, 109, 109, 99, 108, 96, 91)
dim data2(-1) as double = array(58.0, 34, 25, 49, 64, 10, 16, 40, 25, 49, 40, 22)
// The labels for the line chart
dim labels(-1) as string = array("2008-01", "2008-02", "2008-03", "2008-04", "2008-05", "2008-06", "2008-07", "2008-08", "2008-09", "2008-10", "2008-11", "2008-12")
// Create a XYChart object of size 450 x 450 pixels
dim c as new CDXYChartMBS(f*450, f*450)
Width=f*450
Height=f*450
// Add a title to the chart using 15 pts Arial Italic font.
dim title as CDTextBoxMBS = c.addTitle("Inter-line Coloring", "ariali.ttf", f*15)
// Add a legend box where the top-center is anchored to the horizontal center of
// the chart, just under the title. Use horizontal layout and 10 points Arial
// Bold font, and transparent background and border. Use line style legend key.
dim legendBox as CDLegendBoxMBS = c.addLegend(c.getWidth / 2, title.getHeight, false, "arialbi.ttf", f*10)
legendBox.setBackground(CDXYChartMBS.kTransparent, CDXYChartMBS.kTransparent)
legendBox.setAlignment(CDXYChartMBS.kTopCenter)
legendBox.setLineStyleKey
// Tentatively set the plotarea at (70, 65) and of (chart_width - 100) x
// (chart_height - 110) in size. Use light grey (c0c0c0) border and horizontal
// and vertical grid lines.
dim plotArea as CDPlotAreaMBS = c.setPlotArea(f*70, f*65, c.getWidth - f*100, c.getHeight - f*110, -1, -1, &hc0c0c0, &hc0c0c0, -1)
plotArea.setGridWidth(f,f)
// Add a title to the y axis using 12 pts Arial Bold Italic font
call c.yAxis.setTitle("Axis Title Placeholder", "arialbi.ttf", f*12)
// Add a title to the x axis using 12 pts Arial Bold Italic font
call c.xAxis.setTitle("Axis Title Placeholder", "arialbi.ttf", f*12)
// Set the axes line width to 3 pixels
c.xAxis.setWidth(f*3)
c.yAxis.setWidth(f*3)
c.yaxis.setlinearscale(0,130,10)
c.xaxis.setTickLength(f*3)
c.xaxis.setTickWidth(f)
c.yaxis.setTickLength(f*3)
c.yaxis.setTickWidth(f)
// Set the labels on the x axis.
call c.xAxis.setLabels(labels)
// Use 8 points Arial rotated by 90 degrees as the x-axis label font
call c.xAxis.setLabelStyle("Arial", f*8, CDXYChartMBS.kTextColor, 90)
call c.yAxis.setLabelStyle("Arial", f*8)
// Add a spline curve to the chart
dim layer0 as CDSplineLayerMBS = c.addSplineLayer(data0, &hff0000, "Data Set 0")
layer0.setLineWidth(f*2)
// Add a normal line to the chart
dim layer1 as CDLineLayerMBS = c.addLineLayer(data1, &h008800, "Data Set 1")
layer1.setLineWidth(f*2)
// Color the region between the above spline curve and normal line. Use the
// semi-transparent red (80ff000000) if the spline curve is higher than the
// normal line, otherwise use semi-transparent green (80008800)
call c.addInterLineLayer(layer0.getLine, layer1.getLine, &h80ff0000, &h80008800)
// Add another normal line to the chart
dim layer2 as CDLineLayerMBS = c.addLineLayer(data2, &h0000ff, "Data Set 2")
layer2.setLineWidth(f*2)
// Add a horizontal mark line to the chart at y = 40
dim mark as CDMarkMBS = c.yAxis.addMark(40, -1, "Threshold","",f*8)
mark.setLineWidth(f*2)
// Set the mark line to purple (880088) dash line. Use white (ffffff) for the
// mark label.
mark.setMarkColor(c.dashLineColor(&h880088), &hffffff)
// Put the mark label at the left side of the mark, with a purple (880088)
// background.
mark.setAlignment(CDXYChartMBS.kLeft)
mark.setBackground(&h880088)
// Color the region between the above normal line and mark line. Use the
// semi-transparent blue (800000ff) if the normal line is higher than the mark
// line, otherwise use semi-transparent purple (80880088)
call c.addInterLineLayer(layer2.getLine, mark.getLine, &h800000ff, &h80880088)
// Layout the legend box, so we can get its height
call c.layoutLegend
// Adjust the plot area size, such that the bounding box (inclusive of axes) is
// 10 pixels from the left edge, just under the legend box, 25 pixels from the
// right edge, and 10 pixels from the bottom edge.
c.packPlotArea(f*10, legendBox.getTopY + legendBox.getHeight, c.getWidth - f*25, c.getHeight - f*10)
// After determining the exact plot area position, we may adjust the legend box
// and the title positions so that they are centered relative to the plot area
// (instead of the chart)
legendBox.setPos(plotArea.getLeftX + (plotArea.getWidth - legendBox.getWidth) / 2, legendBox.getTopY)
title.setPos(plotArea.getLeftX + (plotArea.getWidth - title.getWidth) / 2, title.getTopY)
// Output the chart
Backdrop=c.makeChartPicture
End EventHandler
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
End Project
See also:
- /ChartDirector/High Resolution Chart Examples/cone
- /ChartDirector/High Resolution Chart Examples/contour
- /ChartDirector/High Resolution Chart Examples/legendpie2
- /ChartDirector/High Resolution Chart Examples/multivmeter
- /ChartDirector/High Resolution Chart Examples/polarzones
- /ChartDirector/High Resolution Chart Examples/softlightbar
- /ChartDirector/High Resolution Chart Examples/surface
- /ChartDirector/High Resolution Chart Examples/surface3
- /ChartDirector/High Resolution Chart Examples/surfacewireframe
- /ChartDirector/High Resolution Chart Examples/threeddonutshading
The items on this page are in the following plugins: MBS ChartDirector Plugin.