Lesson 4: Add a pie chart using the Dojo charting API (optional)
In this optional lesson, you use content assist and the Dojo charting API to add a pie chart to your results page. The pie chart displays the percentage of total loan costs going towards interest and principal.
Before you begin
Note: Steps may vary depending on the version
of Firebug and Firefox you are using.
Procedure
- Configure the web application to run on Firefox by clicking Window > Web Browser > Firefox.
- In the index.html file add the following require statements
to the existing script tag:
"dojox/charting/Chart", "dojox/charting/plot2d/Pie", "dojox/charting/action2d/Highlight", "dojox/charting/action2d/MoveSlice", "dojox/charting/action2d/Tooltip", "dojox/charting/themes/Dollar",
- Add the following div under the MonthlyPayment div
you created to display the result:
<div id="chart" style="width: 350px; height: 350px"></div>
- In the existing dojo.ready function, type var chart = new dojox before the connect function and invoke content assist. You should see a list of all available Dojo types in the dojox namespace.
- Continue typing .charting.C and you should see the list begin to filter down. Select dojox.charting.Chart2D and insert it on your page.
- Add two parameters: chart and null ,
and the id for the div node where it will be located on your page:
var chart = new dojox.charting.Chart("chart", null);
- On the next line type chart.set and invoke content assist. You should see the setTheme method. Select this method and insert it into the page.
- Enter dojox.charting.themes.Dollar as
the parameter:
chart.setTheme(dojox.charting.themes.Dollar);
- Copy the following code on the next line. You can invoke
content assist on the various methods and types if you want.
This code adds plotting information to your chart and sets up highlighting and tooltips for when users hover over the pie chart slices. For more information on Dojo charting APIs see: www.dojotoolkit.org/reference-guide/dojox/charting.html#dojox-charting.chart.addPlot("default", { type: "Pie", labelOffset: -30, radius: 90 }); chart.addSeries("paymentSeries", []); new dojox.charting.action2d.MoveSlice(chart, "default"); new dojox.charting.action2d.Highlight(chart, "default"); new dojox.charting.action2d.Tooltip(chart, "default");
- Inside the dojo.connect function, under the existing code,
add the following code:
This code adds a new series of data to the chart and renders it each time that users change an input value.// add the data series to the chart and render chart.updateSeries("paymentSeries", [ { y: loanWidget.principal, stroke: "black", tooltip: "Principle" }, { y: loanWidget.interestPaid, stroke: "black", tooltip: "Interest" }]); chart.render()
The resulting source is similar to the following:<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" type="text/css" href="dojo/dijit/themes/dijit.css"> <link rel="stylesheet" type="text/css" href="dojo/dijit/themes/claro/claro.css"> <title>t1</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" data-dojo-config="isDebug: false, async: true, parseOnLoad: true" src="dojo/dojo/dojo.js"></script> <script type="text/javascript"> require( // Set of module identifiers [ "dojo", "dijit/registry", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "loan/LoanInput", "dojo/currency", "dojox/charting/Chart", "dojox/charting/plot2d/Pie", "dojox/charting/action2d/Highlight", "dojox/charting/action2d/MoveSlice", "dojox/charting/action2d/Tooltip", "dojox/charting/themes/Dollar", ], // Callback function, invoked on dependencies evaluation results function(dojo, registry) { dojo.ready(function() { var chart = new dojox.charting.Chart("chart", null); chart.setTheme(dojox.charting.themes.Dollar); chart.addPlot("default", { type : "Pie", labelOffset : -30, radius : 90 }); chart.addSeries("paymentSeries", []); new dojox.charting.action2d.MoveSlice(chart, "default"); new dojox.charting.action2d.Highlight(chart, "default"); new dojox.charting.action2d.Tooltip(chart, "default"); // get the LoanInput widget loanWidget = registry.byId('LoanInput'); // handle "calculate" from widget "LoanInput" dojo.connect(dijit.registry.byId("LoanInput"), "calculate", function(event) { var payment = loanWidget.monthlyPayment; if (payment == NaN) { payment = 0; } // update the result field var formattedValue = dojo.currency.format(payment, {currency: "USD"}); dojo.attr("monthlyPayment", "innerHTML", formattedValue); // update the chart chart.updateSeries("paymentSeries", [ { y : loanWidget.principal, stroke : "black", tooltip : "Principal" }, { y : loanWidget.interestPaid, stroke : "black", tooltip : "Interest" } ]); chart.render(); }); }); }); </script> </head> <body class="claro"> <div id="BorderContainer" style="height: 500px; width: 500px" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'"> <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">Loan Payment Calculator</div> <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"> <div id="LoanInput" data-dojo-type="loan.LoanInput"></div> <div>Monthly Payment: <span id="monthlyPayment"></span></div> <div id="chart" style="width: 350px; height: 350px"></div> </div> </div> </body> </html>
- Save the page and run the page on server.
- Enter a loan amount and view the pie chart.
Lesson checkpoint
You added a pie chart to your page and tested it on a server.
You learned:
- How to use content assist and the Dojo charting API to add a pie chart to a web page

