How to add a Dojo Chart to a Domino Form
Glen Urban November 25 2009 09:27:49 AM
Creating a Dojo chart in Domino took a step forward with release 8.5.1. When you install or upgrade a Domino server Dojo 1.3.1 comes as standard.If your looking to get started on Dojo charts then you should take a look at this guide on sitepen: A Beginner’s Guide to Dojo Charting.
The following builds on the code shown in that guide and describes how to add a Dojo chart to a Domino form. The JavaScript below needs to be in the JavaScript Header. I used pass through HTML on to my Domino form so added an opening and closing <head></head> tag (at the start of step 1 and the end of step 3).
1. Include a reference to the Dojo library
<head>
<script type="text/javascript" src="/domjs/dojo-1.3.2/dojo/dojo.js" djConfig="locale: 'en-gb', isDebug:false"></script>
2. Populate your JavaScript Variables from your Domino Data
<script type="text/javascript">
var fc = "<Computed Value>" ; // the Fill Color for the columns
var sc = "<Computed Value>" ;// the Stroke Color i.e. column outline colour
var series1 = [<Computed Value>]; // an array of data for the chart
var xlabels = [<Computed Value>]; // an array of x axis labels
</script>
Because I have written pass thru HTML on my form I can use Computed Text to reference data in my Notes application. For example, the formula within the Computed Text used to define variable fc is just "lightblue". This could easily reference a field on the form or do a look up to a configuration document.
Variable series1 needs to be an array. Here the Computed Text references a multi value field on my form. Again this field could look up data on the same form or elsewhere in your database. Keep in mind that JavaScript arrays are delimited by commas so this should evaluate to something like "1, 9, 9, 3, 5, 3, 2, 7, 9, 10"
The xlabels variable is a bit more complicated. It needs to be formatted like this:
{value: 1, text: "a"}, {value: 2, text: "b"}, {value: 3, text: "c"}, and so on...
To achieve this I have a multi value field on my form that lists the x axis labels i.e. "a":"b":"c":"d":"e":"f":"g":"h":"i":"j".
The Computed Text uses the following @Formula to parse it into the format necessary for Dojo.
@For(n :=1; n<=@Elements(XaxisLabels); n:= n + 1;
lblTxt := @If( n=1;
"{value: " + @Text(n) + ", text: \"" + XaxisLabels[n] + "\"}" ;
lblTxt : ( "{value: " + @Text(n) + ", text: \"" + XaxisLabels[n] + "\"}" )
)
);
lblTxt
3. Add the JavaScript code that will generate the graph
<script type="text/javascript">
dojo.require("dojox.charting.Chart2D");
var chart1;
makeCharts = function(){
chart1 = new dojox.charting.Chart2D("simplechart");
chart1.addPlot("default", {type: "Columns" , gap: 2});
chart1.addAxis("x" , {labels: xlabels } );
chart1.addAxis("y", {vertical: true , min: 0});
chart1.addSeries("Series1", series1 , {stroke: {color: sc, width: 2}, fill: fc } );
chart1.render();
};
dojo.addOnLoad(makeCharts);
</script>
</head>
4. Add a HTML Div tag to your form
Now all that's needed is to place a div on your form, using pass thru HTML, wherever you want your chart to appear. Alter the height and width options to specify the size of your chart.
<div id="simplechart" style="width: 500px; height: 250px;"></div>
The resulting chart will look something like this
This chart is very basic and there is much more you can do with Dojo: multiple data series, 3D charts, stacked charts and so on.
- Comments [0]
