Pin It

Dojox Charting Tutorial – Part Four: Line Chart Via Javascript

So far in the tutorial I have shown how to create series in javascript, generate a pie chart on an XPage with animations and a legend, and generate bar and column charts using a custom tooltip to show more than just the content of the series. In this part I will show how to generate the first of two line charts. You can see the output here. This will use javascript functions, in the same way we have so far, adding axes with custom labels, a grid and a legend. In the next part I will show a similar line chart using an HTML data store and rendered using HTML markup.

Creating the Series

What I’m creating here is a line chart with one line per Client, showing the totals of various types of calls. I will pass over the standard code added to the XPage (adding the dominoView data element, the dojoModules, and the beforePageLoad code to force compatibility mode in Internet Explorer). I will move directly to the code used to create the javascript series. Previously I’ve used one Computed Field control to generate the series and a second Computed Field control to generate the javascript code. Now that I have demonstrated a few examples of that, I’m making it a bit more complex, and combining both steps into a single Computed Field. Furthermore, I’m creating multiple series, one for each line on the chart, and I shall put all those series into one javascript variable. Then I will create a separate array for the values I want to show in the legend.

Computed Field code for series

I create the Computed Field control, again setting escape=”false” to make the output HTML. The value is computed javascript, in which I first create a “result” variable where we will assemble the output. I initialise this variable with a script tag and a variable array called “series”. In the previous charts I created a string object because it was containing a single series. But this time because I’m creating an array of series, one for each line of the report, I have chosen to create an array and add series to elements in the array. Each line will be for a client and contain numbers for New, Closed, Open, UAT, Maintenance and Long calls. So the “series” array will look like this:

series[0]=[0,0,8,0,0,8];series[1]=[0,0,28,18,0,23];series[2]=[0,0,1,0,0,0];series[3]=[1,0,5,2,0,0];series[4]=[0,0,1,0,0,1];

The comment at the top is some background to alternative options I considered for creating the series. The first was to use formula language, @Sum(@DbLookup(… to calculate totals for each call type for each contract. The second was to use getAllEntriesByKey and sum the values in server-side javascript. However, because I’m using a view that is not expected to hold too many entries, I’m looping through all entries in the view, which I suspect should be quicker. If my view should ever grow to have so many entries that my code becomes efficient, the chances are I have also got a large number of lines on my chart, which means it will be too cluttered for it to be of any use to the users and needs splitting into separate charts anyway.

I begin by getting the first row from the view. I’m using a categorised view (which you can see by opening the sample database in Notes Client), so my first entry is a category row for the first client. I initialise a variable (“i”) to increment the array index of the series, and a second variable (“test”) to make sure that there are some calls for that client: if there are no calls, I don’t want to create a line. I also then create a variable called “title”. This will hold a second series, “seriesT”, in the same format we used for previous charts, that will hold the client names to use in the legend.

Finally I get to the loop, and for each category I create an element of the “series” array, write the client name + “,” to the “seriesT” string, and get the next sibling. Note I check to make sure ent is not the total row at the bottom of the view, which is also a sibling of the categories. After the loop is completed, I add title to the client-side javascript in result, first removing the trailing comma and replacing it with a closing “]”. I close the script tag in result and then return the whole client-side javascript.

Creating the Chart

As before I add xp:panels to hold the chart and a script block to add an onLoad function, like so:

Line Chart Script Block

Line charts, area charts, scatter graphs etc are all very similar and take the same parameters. The diference is the styling (if any) of what joins the markers. I have also added a grid and axes named “x” and “y”. As I mentioned before, by default x and y are the axis names applied to any plot, so they are not allocated to the default plot. The default for any axis is “vertical: false”, so for the y axis I set vertical to true.

For the x plot I force a max to give a bit of space at the right-hand side of the chart. This allows the user to see the whole marker assigned to Long, otherwise you could only see the left half of the marker image. I also override the labels, replacing “1″ with “New”, “2″ with “Closed”, “3″ with “Open” etc., ensuring 7 is removed. Using the same idea you could override the y axis to include the word “calls” against each number.

Again, animations such as moveSlice do not work on a line chart, so I just use the tooltip, this time using the default value (the number of calls) that was put into the series. On this chart I feel it has benefit, to help see the actual number when the ticks are at every 10 calls.

I then add the series. You will remember that “series” contained an array of series, one relating to each client. Consequently I loop through that array calling chart1.addSeries for each element. The second parameter is the series itself. The first parameter is the series name, so I get the corresponding element of seriesT (the array of client names). This parameter is what will be used in the legend, which again I force to be vertical.

In the next part I will show how to create a similar chart using an HTML data table and HTML markup to create the chart.