Easy to Use Javascript Charting

I am currently working on a PL/SQL application which requires some simple charting. I have a defined set of trend data for which I must created a line chart...thus, displaying the trend for the data. I Googled javascript charting and found this javascript library. I cannot perform a complete review of the library because I have only used the line charting thus far, but I can tell you that the library is easy to use, flexible, and works great.

Using this library, it is possible to create one or many different charts on a web page. You can define static sets of data (does anyone do this anymore?) or use your database. I have found the line charting simple...especially with PL/SQL. The advantage of using PL/SQL to perform dynamic javascripting tasks is that your data is easily accessible.

I'll wrap up this blog with a quick example of line charting using PL/SQL and the JSGraph javascript library. If you have the need for a dynamic charting solution in your application, give JSGraph a look.

The following is an example of line charting in PL/SQL. In my particular case, I've defined a package which contains many different procedures. I recommmend using the PL/SQL Web Toolkit to define PL/SQL web applications. This is an exerpt from the procedure within my PL/SQL web package which defines my line chart:

(Please ignore the "-" within the tags...this blogger does not print tags well)

procedure GRAPH_TREND (in_trend_id number) is

cursor trend_cur is
select *
from my_trend_data
where trend_id = in_trend_id;

... more definitions ...

begin

... PL/SQL Code ...

-- Define Chart (Static data for this example)
htp.htmlopen;
htp.headopen;
htp.p('<-script language="JavaScript1.2" src="jsgraph.js"><-/script>


<-script language="JavaScript1.2">
var graph = new JSGraph();
graph.graphLeftPaddingOverride = 30;
graph.yAxis(4, 200);
graph.xAxis(4, 300);
graph.addBackground('#FFF8DC');
graph.addTrellis(40, 1, '#FF0000', 'blah1','tahoma,sans-serif',9);
graph.addTrellis(80, 1, '#FF0000', 'blah2','tahoma,sans-serif',9);
graph.addTrellis(120, 1, '#FF0000', 'blah3','tahoma,sans-serif',9);
graph.addTrellis(160, 1, '#FF0000', 'blah4','tahoma,sans-serif',9);
graph.addTrellis(200, 1, '#FF0000', 'blah5','tahoma,sans-serif',9);
graph.addLinePlot(0);
graph.addLinePlot(30,1,'maroon',1,'Foo 1','tahoma,sans-serif','maroon',9);
graph.addLinePlot(50,1,'maroon',1,'Foo 2','tahoma,sans-serif','black',9);
graph.addLinePlot(178,1,'maroon',1,'Foo 3','tahoma,sans-serif','maroon',9);
graph.addLinePlot(200,1,'maroon',1,'Foo 4','tahoma,sans-serif','black',9);
graph.addLinePlot(36,1,'maroon',1,'Foo 5','tahoma,sans-serif','maroon',9);
graph.addLinePlot(0,1,'maroon',1,'Foo 6','tahoma,sans-serif','black',9);
graph.addLinePlot(146,1,'maroon',1,'Foo 7','tahoma,sans-serif','maroon',9);
graph.addLinePlot(12,1,'maroon',1,'Foo 8','tahoma,sans-serif','black',9);
graph.addLinePlot(191,1,'maroon',1,'Foo 9','tahoma,sans-serif','maroon',9); <-/script>
');
htp.headclose;
htp.bodyopen;
htp.p('
<-div id="lineplotGraph1" style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; LEFT: 50px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; POSITION: absolute; TOP: 50px">
<-script language="JavaScript">
graph.makeGraph();
<-/script>
<-/div>
');
htp.bodyclose;
htp.htmlclose;

...

end GRAPH_TREND;