MobileChart

Matching the features available for iOS, MobileChart lets you create a wide variety of charts to show in your Android app.

MobileColorPicker

This new control, as its name suggests, lets you use the system color picker to select a color.

MobilePDFViewer

Last year Android added PDFDocument support for creating your own PDFs, and now we’ve added MobilePDFViewer to give you an easy way to show PDF document files from your Android apps.

Zip/Unzip

The FolderItem class now supports the Zip and Unzip methods to make it simple to compress and uncompressed Zip files.

Android Keeps Getting Better

There are also improvements to MobileTabPanel, MobileTextArea, MobileSlider, MobileScrollableArea, Barcode and more. With each release, Android gets closer to feature parity with iOS!

And of course, we continue to squash framework and compiler bugs.

Be sure to check out the full release notes for all the details!

Paul learned to program in BASIC at age 13 and has programmed in more languages than he remembers, with Xojo being an obvious favorite. When not working on Xojo, you can find him talking about retrocomputing at Goto 10 and on Mastodon @lefebvre@hachyderm.io.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

For this example, we’ll use the x and y coordinate values of the sine and cosine functions as the data for our scatter DataSets. Go ahead and create a new Desktop project in the Xojo IDE.

Next, select the default Window1 and drag a DesktopChart control from the Library panel into the Layout Editor for Window1. Adjust the right margin to the recommended right layout guide, then lock the Top, Left, and Right layout locks for the Chart1 instance using the Inspector. At this point, your design should look similar to this:

While you’re there, select Chart1 and, in the Inspector, set the option Behavior > Mode to Scatter.

Next, with Window1 selected, add two properties using the following values:

Property 1:

• Name: CosStyle
• Type: ChartLinearStyle
• Scope: Private

Property 2

• Name: SineStyle
• Type: ChartLinearStyle
• Scope: Private

These properties will be used to store references to the Style objects associated with the cosine and sine function DataSets.

Finally, with Window1 still selected, add the Opening event and enter the following lines of code into the associated code editor:

CosStyle = New ChartLinearStyle
CosStyle.Line = ChartLinearStyle.LineTypes.Dashed

SineStyle = New ChartLinearStyle
SineStyle.Line = ChartLinearStyle.LineTypes.Solid

DrawScatterChart

In brief, this code creates new ChartLinearStyle instances for the properties added earlier. It assigns a solid line style to connect the cosine function data points and a dashed line style to connect the sine function data points. After that, it calls the DrawScatterChart method, which is responsible for rendering the sine and cosine functions on the Chart1 instance.

Now, let’s create that method on Window1 using the following values in the Inspector:

• Name: DrawScatterChart
• Scope: Private

Type the following snippet of code in the associated Code Editor for the method:

// These are the Array variables in charge of storing the Scatter data points
// for the Sine and Cosine functions
Var sinePoints() As ChartScatterDatapoint
Var cosinePoints() As ChartScatterDatapoint

// …and these variables will handle the DataSet instances
// for the previous arrays of data points on both functions
Var sineDataSet As ChartScatterDataset
var cosDataSet As ChartScatterDataset

Const pi = 3.14159265359
Var y As Double
Var maxXValue As Double = 2.0 * pi

// Using a simple loop to feed the x and y
// values for the Sine and Cosine
For x As Double = 0.0 To maxXValue Step 0.5
  
  y = Sin(x)
  sinePoints.Add(New ChartScatterDatapoint(x, y, 1))
  
  y = Cos(x)
  cosinePoints.Add(new ChartScatterDatapoint(x, y, 1))
  
Next

// Next, we create the new instances for the Scatter DataSets
sineDataSet = New ChartScatterDataset(Color.Blue, sinePoints)
cosDataSet = New ChartScatterDataset(color.Red, cosinePoints)

// …and we set the Style to be used on each of them
sineDataSet.Style = SineStyle
cosDataSet.Style = CosStyle

// … and of course the labels to be shown on the Legend section
// of the chart itself
sineDataSet.Label = "Sine Function"
cosDataSet.Label = "Cos Function"

// As the last step, we add both DataSets to the chart
// so these can be rendered
Chart1.AddDatasets(sineDataSet, cosDataSet)

Run the app, and it should look similar to this:

A change of Style… on the fly!

As with many aspects of DesktopChart, any changes made at runtime are reflected immediately, without the need to redraw the chart, re-feed the data sets, or perform any other complex operations. Let’s take advantage of this by changing the sine and cosine styles at runtime, allowing users of our example app to toggle whether the points are connected.

Add two DesktopCheckBox controls below the bottom margin of the Chart1 instance on Window1. Set the Caption of the first checkbox to “Connect Sine Points” and the second to “Connect Cos Points.” For both checkboxes, use the Inspector to set Initial State > Visual State to Checked.

The final layout should look similar to this:

Lastly, add the ValueChanged event to both CheckBox instances. Then, for the checkbox with the caption “Connect Sine Points,” add the following lines of code to its event handler:

If Me.Value Then
  SineStyle.Line = ChartLinearStyle.LineTypes.Dashed
Else
  SineStyle.Line = ChartLinearStyle.LineTypes.None
End If

Add the following lines of code to the ValueChanged event handler for the checkbox with the caption “Connect Cos Points”:

If Me.Value Then
  CosStyle.Line = ChartLinearStyle.LineTypes.Solid
Else
  CosStyle.Line = ChartLinearStyle.LineTypes.None
End If

Run the app again and, this time, click each checkbox to see how the points are no longer connected when a checkbox is unchecked, and are connected when it is selected.

Summary

As you can see, styles can be used not only to connect points in a Scatter chart, but also to customize the point endpoints beyond the default appearance. For example, you can set the endpoint to “None” or choose from many other available options. Even better, any changes made to a style at runtime are applied immediately.

Javier Menendez is an engineer at Xojo and has been using Xojo since 1998. He lives in Castellón, Spain and hosts regular Xojo hangouts en español. Ask Javier questions on Twitter at @XojoES or on the Xojo Forum.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

For this project, I created a small iPhone app to track my expenses – something I personally needed. While it’s designed for tracking holiday and travel spending, it works just as well for managing general monthly expenses.

Far from perfect, but useful for the described scenarios, this iPhone app lets the user set a trip location, add a description and even define a budget. That way, they can check in at any time to see how things are going during a trip or when tracking general monthly expenses. (It doesn’t make much sense to offer this kind of app for iPad.)

When it comes to entering new expenses, I wanted to keep it as simple as possible with minimal input and just a few taps. So, aside from entering the amount and the place where the expense occurred, the app automatically captures the geolocation. This helps me better remember places like restaurants, gas stations or points of interest I might want to stop at or visit again when traveling the same route.

When tracking monthly expenses, the app lets you duplicate existing entries so details like the expense location remain the same, and you only need to enter the new amount. This is especially handy if you tend to refuel at the same gas station or do your weekly grocery shopping at the same store.

So, what about charts? Honestly, this area has plenty of room for improvement and could eventually include a wide range of stats and visualizations. But for this initial release, I kept it simple to meet my own needs. In addition to the basic ‘Total Budget vs. Current Expenses’ stats, the app includes a Pie chart that breaks down spending by category.

Of course, you can download the full source code here and adapt or improve it so it suits your own needs.

Want to give it a try? The iOS app is available for free on the App Store: https://apple.co/3EGL33r

VoyageExpenses is built entirely with Xojo. It’s 100% Xojo code, with only two small exceptions where Declares were needed. It was published to the App Store using the Publish feature introduced in Xojo 2025r1.

Visit the Xojo Docs to learn more about using charts in Xojo. Visual elements like charts can make the data in your apps more memorable and impactful. We’ve written extensively on charting throughout the Xojo Blog.

Year of Code Project

• Year of Code: Kickoff
• January Project: Desktop Apps | Forum Discussion
• February Project: Database Apps | Forum Discussion
• March Project: Web Apps | Forum Discussion
• April Project: User Interface | Forum Discussion
• May Project: Mobile Apps | Forum Discussion
• June Project: Code Sharing | Forum Discussion
• July Project: Charting | Forum Discussion
• August Project: Console Apps | Forum Discussion
• September Project: Games | Forum Discussion
• October Project: Multi-Platform | Forum Discussion
• November Project: PDF | Forum Discussion

How to Play:

Each month we’ll announce a new theme and share an example project of our own. Share your projects to the Xojo Forum thread for that month via GitHub (all the links you need are posted above ↑ ). Learn how to use Xojo and GitHub.

The Prizes:

Monthly winners get $100 at the Xojo store. Every month you submit a project is another chance to win the grand prize. The grand prize is $250 cash plus a Xojo Pro license and a year of GraffitiSuite and will be announce in December. Learn more about the prizes.

Javier Menendez is an engineer at Xojo and has been using Xojo since 1998. He lives in Castellón, Spain and hosts regular Xojo hangouts en español. Ask Javier questions on Twitter at @XojoES or on the Xojo Forum.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

Granular Control on DataSets

The ChartDataset subclasses add three new properties. Now you can choose to allow the interaction from the user (for example when clicking or taping on data points or over a displayed legend in the Chart), you can also choose what legends are visible at the top area of the Chart, as well as choosing to display a Popover when the user moves the mouse over a given rendered datapoint for the associated ChartDataset.

• AllowInteraction: When it is set to False, then the displayed legend for the ChartDataset doesn’t respond to interaction (that is enabling/disabling the associated data in the Chart) or raises the Pressed event for the Chart. Also, it doesn’t fire the Pressed event when the user clicks on any of the rendered data points in the Chart for that particular DataSet.
• IsLegendVisible: When it is set to False, the Legend for the associated ChartDataset is not displayed at the top area of the Chart (always that the Chart.HasLegend property is set to True). This allows a more granular control over the legends that are displayed, so you can have some of the rendered data sets with their legend displayed while others not.
• AllowPopover: When this property is set to False in the ChartDataset, then the Popover won’t be displayed when the user hovers the cursor over any of its rendered points in the Chart.

New Events for Chart on Desktop

Starting with Xojo 2024r4 you can decide how the Chart should draw the data points for any of the rendered ChartDatasets on Desktop. This is done by implementing the two new Event Handlers on the Chart instance:

• DrawPointAt(g As Graphics, x As Double, y As Double, data As ChartDataSet, index As Integer) As Boolean. This event receives from the “g” parameter the graphic context for the datapoint, so you can use any of the available methods and properties of the Graphics class to draw the datapoint. In order to know what datapoint and from what ChartDataset, these are given in the “index” and “data” parameters, respectively. Also, the “x” and “y” parameters receive the coordinates for the top-left corner of the data point to be drawn. These coordinates are relatives to the Chart control instance position. Returning True from this Event means that your code handled the datapoint drawing; otherwise the datapoint will be rendered as usual.
• DrawMouseOverPointAt(g As Graphics, x As Double, y As Double, data As ChartDataSet, index As Integer) As Boolean. This event behaves in the same way as the previous one, the only difference is that it will be raised when the user hovers the cursor over a given datapoint, so you have the chance to decide how to draw the highlighted version of the datapoint.

You can learn more about the Chart control in the Xojo Documentation at: https://documentation.xojo.com/api/user_interface/controls/chart.html#chart
You can learn more about the ChartDataset class (and subclasses) in the Xojo Documentation at: https://documentation.xojo.com/api/user_interface/charts/chartdataset.html#chartdataset

A big thank you for all of you providing feedback and suggestions about how to improve Charts on Xojo! All of these new additions are a direct response from request made from you, so we are happy to make it work the way you need to adhere even more to your needs!

Javier Menendez is an engineer at Xojo and has been using Xojo since 1998. He lives in Castellón, Spain and hosts regular Xojo hangouts en español. Ask Javier questions on Twitter at @XojoES or on the Xojo Forum.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

What’s New in Xojo 2024r4

Xojo 2024r4 brings a range of exciting updates that enhance cross-platform development, improve security, and provide more tools for creating dynamic and interactive applications. Here are some of the standout features:

Web Framework
Enjoy smoother and more efficient web applications with updates to Xojo’s Web Framework. Improved memory usage and numerous bug fixes ensure that your web apps run reliably and perform optimally, providing a better experience for your users.

Discover Web Framework Improvements

These updates and enhancements are designed to make your development process more efficient, productive, and enjoyable. Whether you’re building new applications or enhancing existing ones, Xojo 2024r4 provides the tools and capabilities you need to succeed.

Get Started

To learn more about Xojo 2024 Release 4 and begin your development journey, please visit the Xojo 2024r4 Release Notes. The update is available for download now from the Xojo downloads page.

What’s Next?

We’re continuously working on new features, updates, and enhancements to our platform. If you have any suggestions or ideas, please add them to the Xojo tracker. We’re always looking to improve and expand Xojo to better serve our community.

Thank you for being part of the Xojo community. We’re excited to see what you create with Xojo 2024r4!

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

DarkMode

All of the chart types now have the ability to render themselves properly in both light and dark modes. For that to happen, using different colors for data representation when the light or dark modes are enabled, all you need to do is assign ColorGroup instances instead of Color values when creating the DataChart instance.

For example, this snippet of code will create two data sets using ColorGroup instances for the values:

Var dsInflaction As New ChartLinearDataset("Dollar", New colorGroup(Color.red, Color.orange), True, dollar)
Var dsTemp As New ChartLinearDataset("Euro", New colorgroup(Color.blue, Color.white), True, euro)

And this is how it is rendered in light and dark modes:

More Grid Flexibility

We added three new properties the the Chart control itself to better handle the way you want the chart grid to be rendered:

• IsGridVisible
• IsYAxisVisible
• IsXAxisVisible

For example, in previous releases you needed to set the GridColor property to Color.Clear to avoid the drawing of the grid lines in the chart. Now, you can set the GridColor to any other color you (or your app user) may want, and simply control if the grid is rendered or not setting the IsGridVisible property to the True/False boolean value.

In addition to the grid itself, you have the flexibility to decide if the rendered chart will display the X or the Y axis along their values through the IsXAxisVisible and the IsYAxisVisible boolean properties. As with the IsGridVisible property, you can change these values at runtime and the chart will be updated accordingly:

Inline Labels

Also, starting with Xojo 2024r2, for all the chart representations based on a ChartCircularDataset, you will be able to decide if you want the Labels to be rendered inline in addition to these rendered by default in the upper section of the chart, or instead of these. This can get a better identification of the label representing every Pie chart section, requiring less screen space.

In order to display the Inline labels all you need to do is set the ChartCircularDataset.HasInlineLabels property to True.

Conclusion

As always, we look forward to keep improving Charts and see how do you use them in you Xojo developed apps and solutions!

Javier Menendez is an engineer at Xojo and has been using Xojo since 1998. He lives in Castellón, Spain and hosts regular Xojo hangouts en español. Ask Javier questions on Twitter at @XojoES or on the Xojo Forum.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

Stacked Chart Type

In addition to the already existing Line and Bar charts, you can now render Stacked charts using the same LinearChartDatasets objects set to Bar mode. It is also possible to switch between Bar and Stacked with the same data on the fly.

More Line Styles and Endings

Originally, the bullet ending was the only available option for Line charts rendered since we first introduced WebChart back in 2020, and for DesktopChart and MobileChart introduced in Xojo 2023r1. Now there are more options to choose from, including “None”, in order to further customize the look of a Line chart as well as Scatter and Bubble charts.

It is also possible to set the line mode to solid or dashed for Line, Scatter and Bubble chart types. This means that, in Scatter and Bubble charts, you’ll be able to connect the rendered data dots to provide more meaning to your charts.

“None” is also now available as one of the style options for Line charts so you can render them with no connected end points. For example, the following snippet of code will create a new ChartLinearDataset with the line ending set to dross and the line type set to dashed:

Var data2() As Double

For i As Integer = 1 To 12
  data2.Add(System.Random.InRange(5, 40))
Next
Var myset As ChartLinearDataset = New ChartLinearDataset("Line Data", Color.Blue, True, data2)

myset.Style.EndPoint = ChartLinearStyle.EndPoints.Cross
mySet.Style.Line = ChartLinearStyle.LineTypes.Dashed
Me.AddDataset(myset)

More Customization Options

In previous releases, the font name, font size and font color were common to the drawing of all the strings in the chart. Now you can set different attributes for Title, Legends and Axis in order to further customize the look of your charts. For example, in a single chart you can set one font and text color for the Title and an entirely different font and text color for Legend and Axis.

Additionally, it is now possible to set prefix and suffix values to be used along the Y axis. It is also possible to use the Format property to format the Y axis values. The placeholders and syntax used in the expected Format string are the same you are familiar with in other areas of the Xojo framework when working with Strings.

Watch a related video New Features and Improvements for Charts and visit the Xojo Documentation for more on DesktopChart, MobileChart, and WebChart.

Javier Menendez is an engineer at Xojo and has been using Xojo since 1998. He lives in Castellón, Spain and hosts regular Xojo hangouts en español. Ask Javier questions on Twitter at @XojoES or on the Xojo Forum.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

Dark Mode Support and Bootstrap 5

You can now create web applications with Xojo that respects users’ Dark Mode preference with Bootstrap 5.

There is a new WebSession.ColorMode property you can use. It will be set as Auto by default, meaning it will match the user’s OS appearance preference, but it can also be forced to Light or Dark. It can be changed at runtime and per session.

While not everyone likes Dark Mode, some of your end users will appreciate this. Due to medical circumstances, they might actually need it, so please consider adding support even if you don’t like dark interfaces.

If you want to enable Dark Mode in your previous projects, you will have to manually enable the setting in the Shared Build Settings section (which is turned on by default on new projects):

Color Groups can also be used nearly everywhere, and they will be used in the IDE preview when you toggle between Light and Dark Mode:

In order get Dark Mode support ready for Web, we had to upgrade our internal Bootstrap dependency from v4.6.1 to v5.3.0, which is a huge leap by itself. Bootstrap 5 comes with a refreshed color palette, new components, modernized existing controls and bug fixes. Please check our previous Bootstrap 5 is Coming to the Xojo Web Framework blog post.

If your application wasn’t using a custom Bootstrap Theme (bootstrap.min.css), everything should look more or less the same except for the subtle color palette differences and rounder buttons. Bootstrap 4 themes aren’t supported in Bootstrap 5, please replace it with a v5 theme if needed. Not every theme supports Dark Mode, but the one included in Xojo does.

If you are a theme builder, please check the Bootstrap’s Color Modes documentation. You can also find free Bootstrap 5 themes available at Bootswatch.

We also want to send a big thank you to our third party developers for their effort adapting their Open Source and Commercial plugins and controls to Bootstrap 5. You can learn about what they offer at the Xojo Extras Store and in the Open Source Projects page in the Xojo Documentation.

Accessibility

Navigating and using web applications with the keyboard makes everyone’s life easier. In Xojo 2023r2 we’ve upgraded WebPagination and WebBreadcrumb controls, which are composed of more than one focusable item. Your users will be able to properly use the tab key to go through them.

We plan to continue working on improving Accessibility. Please open a new Issue if you find anything that can help you and your end users.

WebListBox

DataTables, the internal dependency we use for bringing your tables to life, has been upgraded from v1.10.20 to v1.13.4. This recent version includes support for Bootstrap 5 and a few bug fixes that some users were facing in their web projects.

You can now disable your WebListBox by setting its Enabled property to False so your users won’t be able to interact with it. And also, if you were missing this feature that’s in the DesktopListBox, you can now add Variant tags to your columns, using the new WebListBox.ColumnTagAt.

Last but not least, this control comes with a visual Inline Editor, like in its Desktop counterpart:

WebChart

Chart.js, the underlying library we use for WebChart, has been upgraded from v2.9.3 to v4.2.1. Again, we’ve done everything we could on our side so you don’t have to do anything.

The only exception is with the WebChart.OverrideOptions event. If you are currently using it, you’ll have to check the library documentation as the internal options JSON has changed.

You can expect the new DesktopChart features to be working on WebChart, like configuring how the lines look like (including the endpoints), background images or prefix and suffixes. Read New Additions to DesktopChart, MobileChart and WebChart to learn more.

Web SDK

If you are using third party controls, you will notice some of them now have a custom icon in the IDE Library. But even more important, they will use less memory at runtime.

Are you developing Open Source or Commercial Web SDK controls? Remember there is a dedicated Web SDK forum where you can ask any questions you may have.

IDE Performance and Improved CSS Support

Bootstrap 5 makes use of the latest CSS features. We took the opportunity to rethink our CSS parser and improve its performance at the same time. As a result, the IDE preview looks even closer to what you see in the browser, and we render everything faster.

Wrapping Up

Over 50 bug fixes and features were included just for Xojo Web in Xojo 2023r2. Please find a full list in the Release Notes. read more about Bootstrap 5 and updates to WebChart on the Xojo Programming Blog. We are looking forward to hearing your thoughts and seeing what you’re building with Xojo! See you in the forum!

Ricardo has always been curious about how things work. Growing up surrounded by computers he became interested in web technologies in the dial-up connections era. Xojo has been his secret weapon and language of preference since 2018. When he’s not online, chances are he will be scuba diving … or crocheting amigurumis. Find Ricardo on Twitter @piradoiv.

Just as with Xojo’s WebChart, DesktopChart and MobileChart offer the following chart types: Line, Bar, Pie, Doughnut, PolarArea, Scatter, Bubble and Radar. You can access these charts using the Inspector Panel or via code through the Mode property. You can even change the Mode (or chart type) at runtime on Desktop and Mobile.

Line and Bar types are similar; both display sets of data that have been set to Line or Bar Modes. Display as many data sets as you need in your DesktopChart or MobileChart by setting the Mode to Line or Bar. The only difference is how these will be displayed along the x axis.

To better understand, let’s write some code in the Opening Event Handler of a DesktopChart control added to a Desktop project:

Var labels() As String
Var firstSetOfData() As Double
Var secondSetOfData() As Double
Var thirdSetOfData() As Double

For n As Integer = 0 To 9
  labels.add "LB"+n.ToString
  firstSetOfData.add System.Random.InRange(0,1000)
  secondSetOfData.add System.Random.InRange(0,1000)
  thirdSetOfData.add System.Random.InRange(0,1000)
Next

Me.mode = DesktopChart.Modes.Line
Me.Title = "Chart Example With Two Datasets"
Me.AddLabels labels

Var DS1 As New ChartLinearDataset("DS1", Color.Blue, True, firstSetOfData)
DS1.ChartType = ChartLinearDataset.ChartTypes.Line

Var DS2 As New ChartLinearDataset("DS2", Color.Red, True, secondSetOfData)
DS2.ChartType = ChartLinearDataset.ChartTypes.Bar

Var DS3 As New ChartLinearDataset("DS2", Color.Green, True, thirdSetOfData)
DS3.ChartType = ChartLinearDataset.ChartTypes.Bar

Me.AddDatasets DS1, DS2, DS3

This is how it will look when the Chart has been set to Line, displaying three data sets: one of which has been set to Line and the other two to Bar:

As you can see, when the ChartType is Line, the data sets that are set to Line start drawing at the origin of the X axis, where the labels are also drawn for each column of data. This also happens when drawing data sets whose ChartType is set to Bar; thus, the first bar on the first column has half the width.

Below shows the same data sets but the ChartType is Bar. Now the Bar data sets overlay the position for the labels drawn along the X axis (they are centered on each column), and also have full the width. However, because of that, the data set whose ChartType is set to Line starts drawing at half the width of the column.

You can add as many new data sets as you want, remove them, update their values, color, etc. The chart will update to reflect the changes, including the minimum and maximum values displayed in the Y axis. Keep in mind, if a chart’s Mode has been set to Line or Bar it will only display data sets created as ChartLinearDataset (by default they are set to the Line ChartType). WebChart will behave the same, starting with Xojo 2023r1.

One difference to note when using ChartLinearDataset is that you can set the Transparency property ranging from 0 (fully opaque) to 100 (fully transparent), as well as the CornerSize when the ChartLinearDataset ChartType is set to Bar.

ChartDataset and Chart Modes

I already showed you that a chart set to Line or Bar only displays data sets created from the ChartLinearDataset class. A similar rule applies when the chart is set to other Modes. For example, Pie, Doughnut, PolarArea or Radar charts only display data sets created from the ChartCircularDataset class.

• In the same vein, Scatter and Bubble charts only display data sets created from the ChartScatteredDataset class.

DesktopChart and MobileChart, additional Properties

DesktopChart and MobileChart offer additional customisation properties. For example, you can set the font, font size and font color for the title, legend, labels and values on the Y axis.

When setting the maximum font size used for the drawing of the Y axis values based on the chart control instance size (height), if the height of the control is not enough to display the values at the specified font size, it automatically adjusts.

Other properties to further customize the look of the chart include BackgroundColor and GridColor.

Tip: You may want to set the color to Color.Clear if you want your charts to be drawn or “visible”, like if you plan to layout the chart control on top of other UI controls.

In addition, you can control whether or not to display that popup that shows the underlying value as the user moves the cursor (or while dragging their finger, on iOS). This is done through the AllowPopover property (True, by default).

Set the background and text color in the Popover using the PopoverBackgroundColor and PopoverTextColor properties. These expect a ColorGroup instance, so they can adjust when the control is in Light or Dark Mode.

Getting informed

As you may expect from their WebChart counterpart, DesktopChart and MobileChart offer a Pressed event handler to receive the index and dataset instance over which the user clicked/tapped.

Because the chart control can handle different ChartDatasets you’ll probably want to cast the received ChartDataset instance received in the Pressed handler to the right one before proceeding with any actions that are not common to all kind of ChartDatasets.

Draw it!

You can call the DrawInto method on a chart, provide the expected graphic context and also the left and top values to proceed with the drawing. For example, this is what a DesktopChart looks like when drawn on a Picture of the same size:

It is also possible to render the chart to PDF in a vectorial way using the AddChart method on a PDFDocument instance. The parameters this method expects are the chart instance itself, the X and Y values (where it will be placed in the current PDF page), and the width and height values for the rendering.

For example, this code will create a PDF file in the Desktop with the same height value of the chart instance, with the width set to the width of the page, minus the margins:

Var d As New PDFDocument
Var g As Graphics = d.Graphics
d.AddChart(chart1, 20, 20, g.Width-40, chart1.Height )
d.Save(SpecialFolder.Desktop.Child("ChartPDF.PDF"))

In summary

As you can see, now it is possible to add Graphical Charts to your Desktop and iOS projects with the same ease and in the same way it is already possible on web projects, plus some more customization options. Watch a quick video on this topic. No license is required to learn, develop and test your projects in the latest Xojo release! Download Xojo 2023r1 today!

Javier Menendez is an engineer at Xojo and has been using Xojo since 1998. He lives in Castellón, Spain and hosts regular Xojo hangouts en español. Ask Javier questions on Twitter at @XojoES or on the Xojo Forum.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

A heatmap is a grid of fields that can have different sizes and colors. Heatmaps are often used to analyze website user behavior. Each area is assigned a color, and heat maps let you see the high and the low of that area. They often look like the image of a thermal camera, which is where the name comes from. Of course, a heatmap can also be used for displaying different temperatures, as its name so aptly describes. In this example we want to do that. We have the monthly mean temperature for a city for the last 10 years and we want to display this temperature by colors in a heatmap. 

The Data

To do this, we first create an array in which we write the years we have and an array with the individual month names: The information in these arrays will be needed later for the labelling of the axes. 

In order to be able to display values in a diagram, we want to write the values into a single array with all the months following with their values. We will combine the values as follow: 

Array( Jan ( 0 ) … Jan ( 9 ) , Feb ( 0 ) … Feb ( 9 ) , Mar ( 0 ) … , … Dec ( 9 ) )

We start with the January values and append the other months behind it. We can highlight special parts of the heatmap by adding a star, a polygon or a cross of any color to the area. 

Creating the Heatmap

Now we come to the creation of the actual diagram. We create an area 600 x 500 pixels in size; on this area we will later draw our chart and the legend. To do this, we create an instance of the class CDXYChartMBS and pass the size in the parameters. 

Dim c As New CDXYChartMBS(600, 500)

Above the chart, with addTitle, we can add a title that describes our chart. Our chart should be on an area of 400 x 400 pixels and have a distance of 80 pixels from the top edge. The background color, as well as the grid color is transparent. 

Dim p As CDPlotAreaMBS = c.setPlotArea(80, 80, 400, 400, -1, -1, CDBaseChartMBS.kTransparent, CDBaseChartMBS.kTransparent)

Now our symbol for minimum temperature is added. The minimum temperature is a small circle in a light blue color. In the addScatterLayer method we first specify the X and Y coordinate arrays as parameters then the title that will later be displayed in the legend next to the diagram and the shape of the symbol. Here we use PolygonShape. The number in the brackets behind the shape indicates the number of sides of the polygon. If this is 0, we see a circle. Then in the parameters follows the size of the symbol and the color. The structure is the same for other marks.

Call c.addScatterLayer(symbolX, symbolY, "Min value", CDBaseChartMBS.PolygonShape(0), 15, &hc6e2ff)

Now we create the heatmap with the method addDiscreteHeatMapLayer. It should have a size of 10 x 12 cells. 10 cells on the x axis and 12 cells on the y axis. In the parameters we first specify the array with the data and then the amount of cells on the x axis. For this we have to determined the array size of the array of the years. The cell amount for y axis is automatically determined from the amount of data. 

Dim layer As CDDiscreteHeatMapLayerMBS = c.addDiscreteHeatMapLayer(zData, xLabels_size)

We now set the labels for the axes. With the method setLabels we specify the text. With the method xAxis.setLabelStyle we specify the font and the font color. The label should be rotated by 90 degrees on the x axis so that it is easier to read. With setLabelOffset we set the distance of the text to the grid border. With a value of 0, the text would be on the left or upper edges of the cell and not in the middle. With setXAxisOnTop we indicate that the text of the x axis should be above the diagram. 

The setting of the y axis labels is similar

Call c.xAxis.setLabels(xLabels) 
Call c.xAxis.setLabelStyle("Arial Bold", 10, CDBaseChartMBS.kTextColor, 90) c.xAxis.setColors(CDBaseChartMBS.kTransparent, CDBaseChartMBS.kTextColor) 
c.xAxis.setLabelOffset(0.25) 
c.setXAxisOnTop 

Call c.yAxis.setLabels(yLabels) 
Call c.yAxis.setLabelStyle("Arial Bold", 10) c.yAxis.setColors(CDBaseChartMBS.kTransparent, CDBaseChartMBS.kTextColor) 
c.yAxis.setLabelOffset(0.25) 
c.yAxis.setReverse

Now we want to specify the individual colors for the value ranges. For this we create a new array. In this array we first enter the lower limit of the temperature that the color should describe, then the color value in hexadecimal followed by the uppermost value. The uppermost value is at the same time the lowermost value of the next color, so we don’t enter it twice, but give directly the next color. Our values all have a distance of 3 degrees. Afterwards we create the array colorLabels, which describes the text for our legend

Dim colorScale() As Double = Array(0.0, &h104E8B, 0.0, &h00BFFF, 3.0, &h7FFFD4, 6.0, &hFFFF00, 9.0, &hFFC125, 12.00, &hFF7F00, 15.00, &hff4500, 18.00, &hcd0000, 21.00,&h8B0000, 21.10) 
Dim colorLabels() As String = Array("<0.0", "0.0-3.0", "3.1-6.0", "6.1-9.0", "9.1-12.0", "12.1-15.0", "15.1-18.0", "18.1-21.0", „>21.0“)

We then apply the colors with colorAxis.setColorScale on the layer level.

layer.colorAxis.setColorScale(colorScale)

We place the legend 20 pixels to the right of the diagram. We use the font Arial Bold in size 10. With setKeySize we set the size of the legend boxes and with setKeySpacing the vertical distance between the individual legend entries.

Dim b As CDLegendBoxMBS = c.addLegend(p.getRightX + 20, p.getTopY, True, "Arial Bold", 10) 
b.setBackground(CDBaseChartMBS.kTransparent, CDBaseChartMBS.kTransparent) 
b.setKeySize(15, 15) 
b.setKeySpacing(0, 8) 
b.addText("Temp in °C“)

For the colors we use a trick, we read only the colors from the array that contains the color values and the temperature ranges by looking only at every second value. With the method addKey we then add the tag with the name and the extracted color. 

For i As Integer = colorLabels_size - 1 DownTo 0 
 Dim n As Integer = colorScale(i * 2 + 1) 
 b.addKey(colorLabels(i), n) 
Next

With the method makeChartPicture we get our diagram as picture:

pic = c.makeChartPicture

And you can show this picture as backdrop to better draw it with the paint event. If you use MakeChart with PDF type as parameter, you can get a PDF file to embed in a PDF page as vector graphics.

Then we can run the program and see our heatmap. You can then continue to work with this heatmap according to your own preferences. The final heat map looks like this:

As I mentioned at the beginning of this post, you’ll need the MBS Xojo ChartDirector Plugin which you can purchase on the MonkeyBread Software website; or, at the moment, it’s included in super the Omegabundle deal. Besides ChartDirector, Omegabundle includes a ton of other tools for the sensational price of 399.99$. For example, you also get a DynaPDF Starter license with which you can use to write the chart into a PDF file. If you want to attend the Xojo Developer Conference 2022 in London and meet us, Omegabundle includes a discount of 100$ for the conference! Read articles from the Xdev developer magazine on the way to the conference, because it’s also included in the bundle! Have a look at the Omegabundle. It’s worth it. I hope you enjoy the heatmap!

Stefanie Juchmes studies computer science at the University of Bonn. She came in touch with Xojo due to the work of her brother-in-law and got a junior developer position in early 2019 at Monkeybread Software. You may have also read her articles in Xojo Developer Magazine. 

The best thing is that implementing this feature in your Xojo Web projects is really easy to do, and extremely flexible to set-up! Just drag and drop the WebChart control from the Library to your page (or ContainerControl) layout, set the Mode (type) of the chart you want to use and other properties in the Inspector Panel and you’re almost done.

Then, add your DataSet instances for your chart to display. Every one of these DataSets just needs to receive the Label to use, the data to display and the colors associated with each value or datapoint. For example, the following snippet of code creates a new WebChartCircularDataSet (WebChartLinearDataset and WebChartScatterDataset are other DataSet classes available, each of these use their own set of parameters in the Constructor):

Var sales() As Double = Array(12500.0, 30200, 25600, 15800)
Var colors() As Color = Array(Color.Orange, Color.Brown, Color.Purple, Color.DarkGray)
Var ds As New WebChartCircularDataset("Test", sales, Colors)

Every DataSet can be configured so it can fill or not fill the graphical object in the chart representing the value, and also associate another object with it via the usual Tag property.

Once we have a DataSet in place, we can add it to the chart simply calling the AddDataSet method on the WebChart instance. You can also add it to a specific position index or even remove a DataSet from the currently available ones in the WebChart instance. In this case T is the variable pointing to a WebChart:

T.AddDataset(ds)

Of course it is also possible to add labels to the WebChart itself. For example, if our DataSet has a total of four values, then we probably would want to add the same amount of labels to the chart instance:

T.AddLabels("Q1", "Q2", "Q3", "Q4")

In addition, one visually appealing thing is that the WebChart instance will animate the presentation of the dataset values; something it will do again every time we add a new DataSet to it. It is also possible to disable this behavior for the WebChart both via code and using the Inspector Panel.

Of course, you can add new DataSets to the WebChart once it is already shown in the webpage if you need to. But what you can’t do at runtime is changing the Mode (or type) of the WebChart itself. That is, if you did set a WebChart instance with the Mode set to Line, then you can’t change the mode via code to Bar.

All in all, I really think this is one of the (many) exceptional features introduced with Web 2.0 that will make your web apps shine even more and without much effort! Definitively, the icing on the Pie.

Questions? Ask me about Xojo programming on Twitter @XojoES or on the Xojo Forum.

In this example we create a pie chart. A pie chart has one-dimensional data, that means that we need to filled one array with data. Here is our example: 

Imagine a bakery making $1,500 a day. We now want to read from our chart what percentage of the profit is made by bread, buns, cakes and cookies. For this we enter in our array the 600$ of bread, 335$ of buns, 309$ of cake and 256$ of cookies. 

So our array definition looks like this: 

Dim data(-1) As Double = Array (600, 335, 309, 256)

We don’t have to worry about the percentage, because it is automatically calculated based on the specified array. 

Now we create another array with the corresponding labels. It must be ensured that the label sequence corresponds to the order of the data sequence. 

Dim labels(-1) As String = Array (“Bread”, “Buns”, “Cake”, “Cookies”)

We also arrange the colors of the individual circle sections as an array. Here is a small tip: You can use already known color combinations, lists of color combinations that harmonize well with each other can be found in the Internet in large numbers. 

I have chosen a combination of pink and purple tones: 

Dim colors(-1) As Integer
colors.Append &hBB397A
colors.Append &h7B448D
colors.Append &hDE69A5
colors.Append &h9672c6

Then we create our diagram working environment. 

Dim c As New CDPieChartMBS(600, 400, &hffffff, &hffffff, 0)

In the parameters we can set the height and width of the working environment, the background color, the edge color and the stars of the elevation effect. 

In the image you can see a working environment with a red background, blue edge color and the elevation of 5, additionally the corners have been rounded with the method setRoundedFrame.

But for our example we take a white background.

Then we can insert the title of the diagram that should appear in the middle of the upper side. In the parameters we can set the text, font, font size, font color, font box background color and the text box border color. In our example we define only the text and leave the remaining parameters at the default values.

call c.addTitle(“Pie Chart Demonstration”) 

Now we can make some settings for the chart.

First we define the size and position of the pie chart. 

c.setPieSize(300, 200, 110)

Our working area has a size of 600×400 which means that if we want to position the chart in the middle of our working area we have to halve these values so we get 300 and 200 which we then specify in the parameters. The third parameter describes the size of the pie chart with the radius. If we had a ring chart instead of a pie chart, the inner radius would be given in a fourth parameter and the called function would be setDonutSize. 

Afterwards we can specify the color of the data areas. 

In the first parameter we specify that we want to set the data color, because the SetColors method can be used in many more areas. In the second parameter we specify the already created array colors :

c.setColors(c.kDataColor, colors)

Then we can set that our pie chart should be shown as a 3D figure and with the command: 

c.set3D(deeps, 45, False)

Set the heights of the segments so that they look like stairs and the angle with which we look at the chart. The point of view depends on the shadow mode, which is switch off by default. 

With Shadow Mode (2) and without Shadow Mode (3)

We prefer that the angle of the first segment does not start straight up, for this we use the SetStartAngle method. Also, the individual segments should not stick to each other and there should be a small gap between them. We want to highlight the largest segment a bit more and move it further out. In the SetExplode method we first specify the data segment we want to push out of the circle and the amount by which it should be pushed out:

c.setStartAngle(-20)
c.setExplode(0, 20)
c.setExplode(1, 20)
c.setExplode(2, 2)
c.setExplode(3, 2)

So that our data can also be displayed we have to pass the data to the diagram. With SetData we specify the data and assign the right labels to them. Both informations we find in the already prepared arrays:

c.setData(data, labels)

Our labels do not look handsome yet. We would like to change that now by defining their style. The label name should be italic, bold and a little bit bigger, than the other labels. Underneath it should be the given value in US$ and in brackets behind it the percentage value

The definition of this style is as given here in a format string:

c.setLabelFormat(“<*block,halign=left*><*font=timesbi.ttf,size=12,underline=0*>{label}<*/font*><*br*>US$ {value} ({percent}%)”) 

In the style sting we first define the text alignment. This should be left-aligned. Then we specify timerbi.ttf as font. This font is already italics and bold (recognizable by the b and i at the end). In addition, we specify the font size with 12 and that the text is not underlined. These specifications refer to the label text. This is specified with {label} in the style string. After a line break the text US$ and the value of the segment that is specified with {value} is following. In the default case it is assumed that the value is a number. But if it is a date we can format it with the following additions: {value|mm/dd/yyyyy}, {value|mm/yyyyy} or {value|yyyyy}. In our example, the percentage with {percent} in brackets follows.

If you want your segment description texts to be highlighted in the individual segment colors and have lines to the individual segments, you can add the following line:

c.setLabelLayout(c.kSideLayout)

Finally, we want to display our diagram in the window as a background picture. To do this, we adjust our window size to the size of the diagram. Then we create a picture with the method makeChartPicture, which we then set as the backdrop. 

w.Height = c.getHeight
w.Width = c.getWidth
w.Backdrop = c.makeChartPicture

Of course we could have used the picture also to write it into a file. For this we can use the method Save in combination with a folder item or we could have used the picture to insert it into a PDF file with DynaPDF. 

There are many more possibilities to design charts with Chart Director, but this example should give you a short insight to the work with Chart Director. 

To use these functionalities you need a license of the MBS ChartDirector Plugin. You get it either in the Xojo store, on our website or currently in the OmegaBundle 2020.

I wish you a lot of fun with the charts in Xojo. Download the project.

Stefanie Juchmes studies computer science at the University of Bonn. She came in touch with Xojo due to the work of her brother-in-law and got a junior developer position in early 2019 at Monkeybread Software. You may have also read her articles in Xojo Developer Magazine.