Creating the Series
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.
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 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.