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.
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.
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.
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.
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.
Run the project with Xojo.
Click “Open Chart” and select the chart.htm file that came with the example.
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.
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?
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)) + "]")
wend
// render chart with data
htmlChart.ExecuteJavaScript("showChart(" + dataset.ToString() + ");")
end if
End Sub
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?
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:
