< Previous | Next >

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

Before you begin this lesson, install Mozilla Firefox.
Note: Steps may vary depending on the version of Firebug and Firefox you are using.

Procedure

  1. Configure the web application to run on Firefox by clicking Window > Web Browser > Firefox.
  2. 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",
  3. Add the following div under the MonthlyPayment div you created to display the result:
    <div id="chart" style="width: 350px; height: 350px"></div>
  4. 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.
  5. Continue typing .charting.C and you should see the list begin to filter down. Select dojox.charting.Chart2D and insert it on your page.
  6. 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);
  7. 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.
  8. Enter dojox.charting.themes.Dollar as the parameter:
    chart.setTheme(dojox.charting.themes.Dollar);
  9. Copy the following code on the next line. You can invoke content assist on the various methods and types if you want.
    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");
    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.
  10. Inside the dojo.connect function, under the existing code, add the following code:
    // 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()
    This code adds a new series of data to the chart and renders it each time that users change an input value.
    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>
  11. Save the page and run the page on server.
  12. Enter a loan amount and view the pie chart.
    monthly payment

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
< Previous | Next >
Icon that indicates the type of topic Tutorial lesson topic
Timestamp icon Last updated: July 17, 2017 21:58

File name: loan_lesson4.html