D3.js Charts with Xojo desktop app

So recently I’ve stumbled across a data visualization library/concept for JavaScript better known as Data-Driven Documents (created by Mike Bostock).

After spending a few days playing with this library, I was truly enlightened on how data should be mapped to a visual representation (e.g. chart). The learning curve of D3 might be a bit steeper than that of other charting libraries, but the reward is exponentially greater IMO.

Here is a link to some amazing data visualization examples created with d3.js, to tempt your interest.

I was so intrigued by D3 that I decided to put together an example on how to access this powerful visualization library from a normal Xojo Desktop app using the HTMLViewer (Webkit) control.

Here is a screenshot of the results…

…and a link to the example project for those that might be interested…


The example is based on the tutorials created by Scott Murray. If you are new to d3.js then I highly recommend you work through his tutorials. He also has a book on the topic of “Interactive Data Visualization”.

You can basically design and build your visualization views with d3.js, and then render them from a Xojo Desktop app, by passing data from your app to a HTMLViewer control.


Thanks for the link Alwyn, some really clever stuff in there. I downloaded your example project but nothing happens when I click the button. I tried running in the IDE and as a compiled app but no joy.

I’m running on OSX 10.9.2

You’re welcome Paul.

Perhaps make sure that the project does NOT use the build folder. The chart.htm and d3.v3.js files need to be located right next to the exe file for it to run correctly.

PS. I wrote and tested the example on Windows… if the above doesn’t fix it, I’ll test it this evening at home on my Mac.

It doesn’t work on my Mac either (OS X 10.9.2)
This is the screen after I pressed the “Random Data”-button

Ok, I’ll test and fix this for you guys as soon as I get a chance to run it on my Mac.

UPDATE: I’ve been able to reproduce the issue on my Mac. Working on a solution and will update the example project as soon as possible with a fix.

Hi Alwyn,

were you able to fix the problem?

Sorry guys, still working on this…

The first problem I found was that the location of the html file needs to be determined differently on OS X than on Windows. I got this fixed, but for some reason the rendering algorithm now only prints out the datum values instead of plotting the chart. Once I’ve fixed this I’ll post a link to the new project file.

I’ll try to get it sorted out this weekend for you.

Thanks for the update.

Good news, the example now runs on OS X as well.

Just some info on the issue… d3.js uses inline SVG to render visualizations of data. I discovered that Safari only supports inline SVG from version 5.1 upward.

If you have a lower version of Safari then you will have to upgrade it to version 5.1 or higher to run the demo.

  1. Run the project with Xojo.
  2. Click “Open Chart” and select the chart.htm file that came with the example.
  3. Click Random Data to generate random data for the chart.

The same mechanism used by the example to interacts with the d3.js JavaScript library, could potentially also be a workaround to render SVG images with the desktop.

The fixed project can be downloaded from www.xojo3d.com/d3example2.zip.

PS. I’ve tested the example on OS X 10.6.8.

Here is another great tutorial website on how to build data visualizations with D3…


Hi Alwyn,

thank you for your example. I am newbie in Xojo and your example is very interesting for me. In this example, you have used a random data set but would be it possible to replace them by a list of values from a text list? How do I do it?

Thanks again.

Hi Sergio,

Sorry for only getting back to you now… I’ve been on holiday. Here is an example of how you can load the data from a tab delimited text file:


The data.txt contains the following data:

10	40
30	23
50	76
20	34
5	23
98	88
32	34
10	23
12	100
23	50

And the LoadData method then loads and displays this data from the file:

Sub LoadData()
  Dim dataset As JSONItem
  Dim tis As TextInputStream
  Dim dlg As new OpenDialog
  Dim f As FolderItem
  Dim dataElements() As String
  f = dlg.ShowModal()
  if f <> nil then
    // read data from file
    dataset = new JSONItem
    tis = TextInputStream.Open(f)
    while not tis.EOF
      dataElements = Split(tis.ReadLine, Chr(9))
      dataset.Append new JSONItem("[" + Str(dataElements(0)) + "," + Str(dataElements(1)) + "]")
    // render chart with data
    htmlChart.ExecuteJavaScript("showChart(" + dataset.ToString() + ");")
  end if
End Sub

Here is a screenshot of the result:

Hope this helps.

You can pull your data from anywhere imaginable, and then simply store the data in a JSON array. Once the data is stored in a JSON array you can then render the chart from it.

I also a newbie to xojo. Your example works great for a desktop app, but not from a web app. Specifically, it throws an error “Could not execute return javascript: showChart is not defined.” How do you reference the underlying javascript code from a web app as opposed to a desktop app?

Hi Chuck,

The example was written specifically for desktop apps. Unfortunately I don’t have much experience with Xojo web apps, but I think you could probably use the Web SDK to somehow create a custom control for D3 charts by using the WebControlWrapper class as a super.

As a starting point, perhaps have a look at the tutorial given in WebControlSDK.pdf. The pdf is located in the Extras\WebSDK folder in your main Xojoj folder.

Here are also a few links I found after a quick search that touches on the topic of including custom javascript code in your web project: