Monday Feb 25, 2008

Embedding charts in web applications using NetBeans

You'll be surprised how easy is to build a web application that charts data using the jMaki framework and NetBeans 6. So let's assume that you want to plot the % of revenue an organization receives every month of an year. A pie chart would likely be your best bet:

So how does one build such a chart? These few steps should get you started:

  • First of all you'll need to get install the jMaki plugin from the NetBeans update center (Tools | Plugins | Available Plugins | jMaki Ajax support)
  • Next get the corresponding charting library - a java.net project and install it in NetBeans (Tools | Palette | Add jMaki Library)
  • Create a new web project and select the jMaki framework in the project wizards dialog
  • Drag and drop the "Google Pie"component from the palette (look for a section called - jmaki-charting-widget ...) after the <body> tag in the index.jsp default page of the project
  • Deploy the application and customize as needed

If you are not a Java guy and want to achieve the same results in a PHP project and application use the following code snippet to build the chart.

<?php
  addWidget( array(
                         "name" =>"jmaki.charting.plotkit.pie",
                         "args"=>"{colorScheme:2}",
                         "value"=>"{
                   xAxis : {
                   title : 'Months',
                   labels : [{ label : 'January'},
                             { label : 'February'},
                             { label : 'March'},
                             { label : 'April'},
                             { label : 'May'},
                             { label : 'June'},
                             { label : 'July'},
                             { label : 'August'},
                             { label : 'September'},
                             { label : 'October'},
                             { label : 'November'},
                             { label : 'December'}
                             ]
                             },
                             data : [
                  {label : 'Set 1', values : [25, 45, 25, 45, 50, 25, 35, 25, 25, 20, 35, 45] },



                  ]
              }";));
?>

About

octav

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
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
   
       
Today