Dojo Charts Part 3 - Stacked Bar Charts

Tweet

Continuing the series of posts on Dojo charting, this week I'm looking at stacked bar charts.  This is nboStacked bar charts allow a single bar to display more than one category of data.  My example shows the SLA status for a set of records.

As usual, the Visualforce page pulls in the cross domain Dojo build from Google, and delegates responsibility for the production of the chart to a custom component:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<apex:page >      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"         djConfig="parseOnLoad: true,         modulePaths: {             'dojo': 'https://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo',             'dijit': 'https://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit',             'dojox': 'https://ajax.googleapis.com/ajax/libs/dojo/1.5/dojox'                 }         ">     </script>         <apex:sectionheader title="Dojo Stacked Bar Chart"/>            <c:DojoStackedBarChart name1="Inside SLA"         series1="1,3,1"         colour1="green"         click1="http://www.google.com"         name2="Escalated"         series2="3,8,5"         colour2="yellow"         click2="http://www.google.com"         name3="Breached SLA"         series3="4,13,8"         colour3="red"         click3="http://www.google.com"         divId="stackedBars"         title="SLA Status"         /> </apex:page>

each stacked bar in the chart is set up via the series/colour/click/name indexed parameters. I haven't made this a live page, but it would be straightforward to store the series1-3 values in a custom controller and add apex:inputField components that allowed the user to update them. Where this differs from previous posts is the click parameters - this allows the user to click on one of the stacked bars and be taken to another page. I've simply sent the user to www.google.com, but when I've used this technique in a real project the user is taken to a drill down page or report that shows the detail behind that particular stacked bar. The component markup is shown below:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

<apex:component > <apex:attribute name="name1" type="String" description="Name of first series (first stack)"/> <apex:attribute name="series1" type="String" description="Comma seperated values for first series"/> <apex:attribute name="colour1" type="String" description="Colour of first series"/> <apex:attribute name="click1" type="String" description="The destination if the user clicks on the first series"/> <apex:attribute name="name2" type="String" description="Name of second series (second stack)"/> <apex:attribute name="series2" type="String" description="Comma seperated values for second series"/> <apex:attribute name="colour2" type="String" description="Colour of second series"/> <apex:attribute name="click2" type="String" description="The destination if the user clicks on the first series"/> <apex:attribute name="name3" type="String" description="Name of third series (third stack)"/> <apex:attribute name="series3" type="String" description="Comma seperated values for first series"/> <apex:attribute name="colour3" type="String" description="Colour of first series"/> <apex:attribute name="click3" type="String" description="The destination if the user clicks on the first series"/> <apex:attribute name="divId" type="String" description="ID of the div to store the chart in"/> <apex:attribute name="title" type="String" description="Title of the chart"/>   <script type="text/javascript"> dojo.require("dojox.charting.Chart2D"); dojo.require("dojo.colors"); dojo.require("dojox.charting.themes.Tufte"); dojo.require("dojox.charting.widget.Legend");       makeCharts = function(){         var chart2=new dojox.charting.Chart2D("{!divId}");         // use the Tufte theme as this gives transparent background         chart2.setTheme(dojox.charting.themes.Tufte);         chart2.addPlot("default", {type: "StackedBars"});                   chart2.addSeries("{!name1}", [{!series1}], {fill: "{!colour1}"});         chart2.addSeries("{!name2}", [{!series2}], {fill: "{!colour2}"});         chart2.addSeries("{!name3}", [{!series3}], {fill: "{!colour3}"});         chart2.addAxis("x", {includeZero: true});                   chart2.connectToPlot("default", this, function(evt)            {                 if(!evt.shape||(evt.type != 'onclick')){                     return;                 }                 var link="";                 if (evt.run.name=="{!name1}")                 {                    link="{!click1}";                 }                 else if (evt.run.name=="{!name2}")                 {                    link="{!click2}";                 }                 else if (evt.run.name=="{!name3}")                 {                    link="{!click3}";                 }                 if (""!=link)                 {                     window.open(link, "_blank");                 }            }         );         chart2.render();         var legend1 = new dojox.charting.widget.Legend({chart: chart2}, "legend1"); };   dojo.addOnLoad(makeCharts);   </script>   <div id="{!divId}" style="width: 600px; height: 200px;"></div> <div id="legend1"></div> <div style="margin-top: 40px; font-size:14px; font-weight:bold; width: 400px; text-align:center">{!title}</div> </apex:component>

Most of this will be familiar to regular readers - create the chart, define the series, add plots and axes etc. The interesting part (for this week at least) is the function that handles the event when the user clicks on a stacked bar.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

chart2.connectToPlot("default", this, function(evt)         {              if(!evt.shape||(evt.type != 'onclick')){                  return;              }              var link="";              if (evt.run.name=="{!name1}")              {                 link="{!click1}";              }              else if (evt.run.name=="{!name2}")              {                 link="{!click2}";              }              else if (evt.run.name=="{!name3}")              {                 link="{!click3}";              }              if (""!=link)              {                  window.open(link, "_blank");              }         }      );

The bar can be identified based on the run.name attribute of the event and is simply matched up with the associated click parameter. The generated chart is shown below: