It’s been a while since I last wrote anything on dojox charting, but there is always more. Anyone who was at BLUG or has downloaded the sample database I created for that session will have seen that I extended dojox charting to allow the user to click on a pie chart and navigate through the database to specific documents. For me, this is the real power of XPages, using repeat controls to produce innovative and dynamic methods of navigation. Outlines or menus are okay, but we can do so much more. Dashboards look nice, but allow your users to click on the charts to drill down to the underlying data and they become so much more than just a nice picture to print out.

You can see the sample I’ve put together here. You’ll see it’s a pie chart of Open Calls and, as you click on each slice of the pie, the table on the right changes. All I am using is a pie chart (along the lines of the chart created in Part Two) and a view panel. The code for the series is very similar.

  1. while (viewEnt != null) {
  2.     if (viewEnt.isCategory() & !viewEnt.isTotal()) {
  3.         if (viewEnt.getColumnValues()[5] > 0) {
  4.         /* parameters:
  5.         @y: number, corresponding to size of pie
  6.         @text: label (can be suppressed by setting ‘labels’ parameter of pie is set to false)
  7.         @color: colour of the pie section. Can be a colour name (e.g. “blue”), rgb or hex colours.
  8.             If dojox.charting.action2d.Highlight is used, the highlight colour is the negative (so if color is black, highlight is white)
  9.         @legend: can be used to override the text parameter for legends
  10.         @tooltip: if dojox.charting.action2d.Tooltip is used, this is the tooltip that’s added.
  11.         */
  12.             labelName = (viewEnt.getColumnValues()[5] > 20) ? viewEnt.getColumnValues()[0] : “”;
  13.             output += “{y: “ + viewEnt.getColumnValues()[5] + “, text: + labelName + ,legend: + viewEnt.getColumnValues()[0] + },”;
  14.         }
  15.     }
  16.     viewEnt = viewNav.getNext(viewEnt);
  17. }

The difference between this and the code for PartTwo is that Im only getting the data for each client where open calls are greater than zero. I’m then (line 12) generating a label name if there are more than 20 open calls. The text parameter for my series element is the label name the legend is the client name. This means I’m showing a label for the larger slices of the pie, not showing a label for the smaller slices, but showing the client name for all slices in the legend.

There are then two additions. An Edit Box control, hidden using style=”display:none” so it’s available for javascript but hidden from view, called category, bound to a viewScope called category. Here’s the code: 

  1. <xp:inputText id=“category” style=“display:none”
  2.     value=“#{viewScope.category}”>
  3. </xp:inputText> 

The second addition is javascript to set this field and call a partial refresh of my view panel:

     var catField=“#{id:category}”;

  1.     chart1.connectToPlot(“default”, function(o){
  2.         /* o @params
  3.         @type: onclick, onmouseover, onmouseout
  4.         @element: marker, bar, column, circle, slice – this depends on the chart type and should be self-explanatory, so slice for pie chart
  5.         @x: a number, the value on the x axis, defined in your series
  6.         @y: a number, the value of the y axis, defined in your series
  7.         @index: a number, the index of the data point, so the nth element of the series
  8.         @run: the data run object, gets a handle on the original series, from whcih we can get the properties defined for the series
  9.         @plot: the plot object defined above, in this case “default”
  10.         @hAxis: the h axis object for the plot, more relevant for other chart types
  11.         @vAxis: the v axis object for the plot, more relevant for other chart types
  12.         @event: the event that started the event processing
  13.         @shape: the shape object that represents a data point
  14.         @outline: the outline object defined for the shape, only for specific chart types
  15.         @shadow: the shadow object defined for the shape, only for specific chart types
  16.         @cx: a number, the value of the visual centre of the shape on the x axis
  17.         @cy: a number, the value of the visual centre of the shape on the y axis
  18.         @cr: a number, the value of the radius of a circle or pie
  19.         */
  20.         if (o.type == “onclick” && o.element == “slice”) {
  21.             // Set the category field and call a partial refresh on the viewPanel.
  22.             // onStart etc. add a mask in case it takes a while
  23.             dojo.byId(catField).value = o.run.data[o.index].legend;
  24.             XSP.partialRefreshPost(“#{id:refreshPanel}”, {
  25.                 onStart:loading(),
  26.                 onComplete:stoploading(),
  27.                 onError:stoploading()
  28.             })
  29.         }
  30.     });

 So this code adds a function to chart1, connected to the default plot. For other chart types where you may have more than one plot, you can add different events to different plots. Then we create the code to trigger, using attributes of o. So here, if it’s an onclick event taking place on a slice of the pie, we set the category field’s value to be the legend attribute of the relevant element of the series. We then do a partial refresh of a panel with the id refreshPanel. The code within that just adds a mask while the partial refresh is happening, using code Mark Hughes blogged about. The view panel’s data is filtered based upon the viewScope variable category, which we’ve just set y setting the field on line 24.

I’ve updated the sample charting database with this new chart, and it can be downloaded here.

I’ve had one big frustration, and if anyone can solve it I’ll be very happy, as I’m sure will the community. The event handler we add to plot prevents the tooltips working. The other actions like magnify work fine, but the tooltip just doesn’t show. I tried generating the tooltip by adding an onmouseover event into the event handler. I tried using the normal dijit.Tooltip module, but this throws an error because it can’t change the style of the relevant parent dom node. That’s why I’m adding a label onto the larger slices of the pie, so there are enough labels to cross-reference with the legend, but not so many that the chart becomes unreadable. It’s not wonderful, but at the moment it’s the best I can do.

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.