Dojo Charts Part 4 - Line Charts

Tweet

This week the Dojo chart under the microscope is the line chart, where a series of points are plotted on the graph and joined by lines.  In my example there are two series allowing comparison of made up information about the English counties of Suffolk and Norfolk.

Following the now familiar pattern is a page with associated controller that pulls in the cross domain Dojo build, manages the data and delegates the chart production to a custom component:

<apex:page controller="DojoLineChartController">
<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:form >
  <table>
    <tr>
      <td>Labels:</td>
      <td>
         <apex:inputText value="{!labels}" size="80"/>
      </td>
    </tr>
    <tr>
      <td>Series 1:</td>
      <td>
        <apex:inputText value="{!series1}"/>
      </td>
    </tr>
    <tr>
      <td>Series 2:</td>
      <td>
        <apex:inputText value="{!series2}"/>
      </td>
    </tr>
  </table>
  <apex:commandButton value="Update"/>
</apex:form>
<c:DojoLineChart id="linechart" miny="0" maxy="12" stepy="3" 
        labelsx="{!xAxisLabels}"   
        title1="Essex" 
        series1="{!series1}"
                 color1="#000"
        title2="Norfolk" 
        series2="{!series2}"
                 color2="#C00"
        />
</apex:page>

The controller manages three String properties:

• A comma separated list of labels, used to produce the x axis labels
• A comma separated list of values for the first series to plot
• A comma separated list of values for the second series to plot

<apex:component >
  <apex:attribute name="miny" description="Minimum Y Axis value" type="Integer"/>
  <apex:attribute name="maxy" description="Maximum Y Axis value" type="Integer"/>
  <apex:attribute name="stepy" description="Maximum Y Axis value" type="Integer"/>
  <apex:attribute name="labelsx" description="X Axis Labels" type="String" />
  <apex:attribute name="title1" description="Plot series 1 title - displayed in legend" type="String" />
  <apex:attribute name="series1" description="Plot series 1, comma separated values" type="String" />
  <apex:attribute name="color1" description="Plot series 1 colour" type="String" />
  <apex:attribute name="title2" description="Plot series 2 title - displayed in legend" type="String" />
  <apex:attribute name="series2" description="Plot series 2, comma separated values" type="String" />
  <apex:attribute name="color2" description="Plot series 2 colour" type="String" />
  <apex:attribute name="title3" description="Plot series 3 title - displayed in legend" type="String" />
  <apex:attribute name="series3" description="Plot series 3, comma separated values" type="String" />
  <apex:attribute name="color3" description="Plot series 3colour" type="String" />
  <apex:attribute name="height" description="Chart Height" type="Integer" default="300"/>
  <apex:attribute name="width" description="Chart Width" type="Integer" default="800"/>
  <apex:attribute name="showLegend" description="Show Legend" type="Boolean" default="true"/>
  
  
<script type="text/javascript">

  dojo.require("dojox.charting.Chart2D");
  dojo.require("dojox.charting.widget.Legend");

  makeCharts = function(){

        var chart1 = new dojox.charting.Chart2D("simplechart", {fill:"transparent"});
        chart1.addPlot("default", {type: "Lines", markers: "true", hAxis: "x", vAxis: "y"});
        chart1.addAxis("x", {
       <apex:outputText rendered="{!NOT(ISBLANK(labelsx))}">
            labels:
               [
                 {!labelsx}
               ]
            </apex:outputText>
  });
  
        chart1.addAxis("y", 
                      {
                       <apex:outputText value="min:{!miny}," rendered="{!NOT(ISBLANK(miny))}"/> 
                       <apex:outputText value="max:{!maxy}," rendered="{!NOT(ISBLANK(maxy))}"/> 
                       <apex:outputText value="majorTickStep:{!stepy}," rendered="{!NOT(ISBLANK(stepy))}"/> 
                       vertical: true, 
                       natural: false});
        <apex:outputPanel layout="none" rendered="{!NOT(ISBLANK(title1))}">
           chart1.addSeries("{!title1}", [{!series1}],
                {plot: "other", stroke: {color:"{!color1}"}});
        </apex:outputPanel>
        
        <apex:outputPanel layout="none" rendered="{!NOT(ISBLANK(title2))}">
           chart1.addSeries("{!title2}", [{!series2}],
                {plot: "other", stroke: {color:"{!color2}"}});
        </apex:outputPanel>
        
        <apex:outputPanel layout="none" rendered="{!NOT(ISBLANK(title3))}">
           chart1.addSeries("{!title3}", [{!series3}],
                {plot: "other", stroke: {color:"{!color3}"}});
        </apex:outputPanel>
        chart1.render();
        <apex:outputText rendered="{!showLegend}">
  var legend1 = new dojox.charting.widget.Legend({chart: chart1, horizontal: false}, "legend1");
  </apex:outputText>        
};

dojo.addOnLoad(makeCharts);

</script>

<table>
   <tr>
     <td>
    <div id="simplechart" style="width: 800px; height: 300px;"></div>
  </td>
     <td style="vertical-align:middle">
    <div id="legend1"></div>
  </td>
   </tr>
</table> 
 
</apex:component>

The chart is created with a plot and x and y axes. The component can take up to 3 series - these are conditionally added to to chart via apex:outputPanel components, along with the line colour. The component can also display a legend for the chart - if the showLegend attribute is set to true. When first opened, the page appears as:

Updating the values in the chart and clicking the Update button causes the graph to be redrawn with the  new values:

This example, like the others in this series, is available in the Google Code project