Dojox Charting Tutorial – Part Five: Line Chart HTML Markup

In the previous parts of this tutorial (accessible from the link on the left-hand side of this page) I have shown how to use the dojox charting code to create pie charts, bar charts, column charts, and a line chart via javascript. In this part, I will create a line chart similar to the one created in the previous part, but this time using an HTML table data store and markup HTML. This took a bit of trial and error because, although there are plenty of examples on the web of charts created with javascript, the examples of charts created using HTML tend to only cover the basics.

As with the other charts, I add the dojo modules and code to force compatibility mode. With the javascript line chart I showed one line for each client. On this chart I am going to show one line for each contract and allow the user to select the client from a combobox.

So my combobox is bound to a viewScope variable called custReport. It provides a list of clients and onchange triggers a partial refresh of the chartPanel xp:panel. The onchange calls the client-side javascript function loading() and the onComplete calls the corresponding function stoploading(), both in the loading client-side javascript library. This shows and then hides a dijit dialog underlay with a background image, to show the user that something is happening and prevent them clicking anywhere else on the screen. Thanks to Mark Hughes for blogging on how to do this, and it’s a nice touch for making your applications look slick.

Then I have the chartPanel xp:panel, in which I put the reference to the view, the HTML table store and the chart. By specifying the view in the panel I’m refreshing onchange of the combobox I can just do a partial refresh only return the data I need. Note that the viewScope variable is null when you first open the page, so in that case I set the key to the first client in the view.

After the dominoView data definition, I have a repeat control to create for each contract for the current client a dojox.data.HTMLStore and an HTML table that the dojox.data.HTMLStore references. This is exactly the same technique used by Chris Connor, except I’m adding the rowNo to each tableStore and tableExample, because these are divs and tables, not xp:divs and xp:tables, so I need to make sure the ids are unique. After completing the table and closing the repeat control, I’m ready to start creating the chart itself.

The first part is the div for the chart itself, defining the parameters – the style and the theme. If I understand the logic behind how the markup HTML works, it appears that within the div for the chart there are then additional divs for the different elements of the chart like the axes, the plots, the series, the animations etc.

Within the div for the chart the first elements I create are the two axes, x and y. These are divs with class set as axis. The names of the properties of the axes are the same as the javascript properties – as you’ll see from the screenshot below of the javascript code I used in chart2.xsp.

As with the javascript version, the markup HTML expects a JSON object for the labels. (Note that when I tried an HTML table with a dojox.data.HTMLStore, it that did not work.) The only other difference is that the other parameters need to have text passed, otherwise you cannot save the XPage. After the axes I create divs with, one for the plot type to be used for the default series shown on the chart, the second to add a grid – again, all the parameter names are the same.

Next I add a repeat control to add the series. Within the repeat control I create a div with. I’m binding it to the view I used when I created the dojox.data.HTMLStore divs, which allows me to put the contract name into the “name” parameter for each series and also to use rowNo to get the corresponding HTMLStore I created earlier. The format and parameters I have used for the series divs are as on the dojocampus website, but the valueFn parameter (which was not used in the javascript charts) is used in the dojox.charting.widget.Chart2D.js file in the buildRendering function. I think it creates an array of series, though my understanding of the javascript in the dojo files is somewhat limited.

Finally I add a div with. This kind of div is used for the various types of animation, in this case I’ve defined this div as a Tooltip. Here I’m using the basic tooltip of the value returned from the series. After closing the chart’s div I add the legend. Here one parameter is slightly different. Whereas in javascript the parameter was “chart”, in markup HTML it’s “chartRef”. The final chart can be viewed here. The sample database can downloaded here. Please note, this has been updated to include a couple of minor additions I’ve made while writing up these tutorials.

The final part of this tutorial will provide an appendix of further reading as well as some additional miscellaneous information and resources I’ve learnt since starting the blog posts.