Charting

Charting is mandatory in any formal presentation of numeric data. It should be part of your data query tool and not a separate one. One of the classic application of data charting is the Stock Tracking application. Because of the real time web based nature of this application, Java Charting applets are used throughout. Only the less sophisticated ones are made up of local exe type modules. Tornado charting engine is Java applet based and there are enough features in it to develop the most demanding real time charting applications. The following illustration present the Freight column of the Northwind database in two flavors - Pie and Bar. All needs to be changed are the chart type and canvas dimension.

Grid - Chart Plot

<script language="vb" runat="server">
Sub Page_Load(Source as Object, E as EventArgs)
   Dim DBChart2 As New Tornado.Z()
   With DBChart2
      .dbQP="U=14| D=nwind.mdb| S=13| M=GC"
      .dbSQL="select Employeeid, sum(freight) as Freight FROM orders Where Freight <> 0 Group by employeeid Order by employeeid"
      .dbChartData="dataset0yValues=#1#| dataset0Labels=#0#"
      .dbChartParams="TitleString='Freight Cost'| titleFont='Arial,14,1| Type=26| Archieve=/tornado/Jars/| Width=250| Height=250| 3D=True| textLabelsOn=True| BackgroundColor=lightgray| pieWidth=.45| pieHeight=.45| valueLabelsOn=True| defaultFont=Arial,10,1|PlotAreaLeft=.25| ExplodeSlice=2| outlineColor=black"
      .dbGridTemplate="<center><table border=0><tr valign=top><td>[[Grid]]</td><td>[[Chart]]</td></tr> </table></center>"
      .dbTextHolder="Title=Business Graphics - Spinning Pie Chart<br>"
      .ASPdbNET()

      response.write("<P>")

      .dbQP="U=15| D=nwind.mdb| S=13| M=GC| nh=t"
      .dbSQL="select Employeeid, sum(freight) as Freight FROM orders Where Freight <> 0 Group by employeeid Order by employeeid"
      .dbChartData="dataset0yValues=#1#| dataset0Labels=#0#"
      .dbChartParams="TitleString='Freight Cost'| titleFont='Arial,14,1| Type=17| Archieve=/tornado/Jars/| Width=350| Height=200| 3D=True| textLabelsOn=True| BackgroundColor=lightgray| pieWidth=.45| pieHeight=.45| valueLabelsOn=True| defaultFont=Arial,10,1|PlotAreaLeft=.25| ExplodeSlice=2| outlineColor=black"
      .dbGridTemplate="<center><table border=0><tr valign=top><td>[[Grid]]</td><td>[[Chart]]</td></tr> </table></center>"
      .dbTextHolder="Title=Business Graphics - Bar Chart<br>"
      .ASPdbNET()
   End With
End Sub
</script>

Interval Data Plot

There is an internal timer in the chart (not the html page refresh) available to implement interval data collection. The following illustration set the timer at 1 second and the data is changed using an internal random number generator.

<script language="vb" runat="server">
Sub Page_Load(Source as Object, E as EventArgs)
   Dim Rm1 As New Tornado.Z()
   With Rm1
      .dbQP="U=123| S=8| M=UserChart| Gtp=<center>[[Chart]]</center>"
      .dbChartData = "dataset0yURL= Fake | dataset0Name=Machine #1| dataset1yURL=Fake| dataset1Name=Machine #2|networkInterval=2| dataset0Labels=Product 1,Porduct 2,Product 3, Product 4,Product 5|dataset1Labels=Product 1,Porduct 2,Product 3, Product 4,Product 5|plotAreaColor=Cyan|backgroundColor=cyan|legendOn=true|legendHorizontal=true|legendColor=cyan| outlineColor=black"
      .dbChartParams = "ID=2| Type=2| Archieve=/tornado/Jars/| Width=380| Height=310| titleFont='Arial,14,1'| TitleString='Auto Data Collection'| 3D=True| dataset0Color=Blue|dataset1Color=Yellow|dwellUseLabelString =true|dwellUseXValue=false| networkInterval=1"
      response.write(.ASPdbUserChart())
   End With
End Sub
</script>

Negative Data Plot

A customer submitted the following SS data and ask us to make a plot cause his charting tool cannot handle this one at all.

<script language='vb' runat='server'>
Sub Page_Load(Source as Object, E as EventArgs)
   Dim T As New Tornado.Z()
   T.dbQP="dt=TEXT| Pv=ODBC| S=Aspdb| Ps=-1| M=Ty=Grid-Chart"
   T.dbDSN = "Driver={Microsoft Text Driver (*.txt; *.csv)}; ColNameHeader=true; DBQ=C:\Inetpub\wwwroot\Tornado\DB"
   T.dbSQL = "SELECT * FROM churn.csv"
   T.dbChartData = "(;+)dataset0Labels=OCT,NOV,DEC,JAN,FEB,MAR,APR,To Date| _yValues={0}+{1}+{2}+{3}| _Name=[0]| Blockout=0"
   T.dbChartParams = "(;+)Type=-stackcolumn| Width=500| Height=400| titleString=Negative Stack Chart| titleFont=Arial,14,1| legendOn=true| legendllX=0.01| legendllY=0.01| iconWidth=0.05| iconHeight=0.02| iconGap=0.005| 3D=on| outlineColor=black"
   T.dbGridTemplate = "<center><table border=0><tr valign=top><td align=center>[[Grid]]</td></tr><tr><td align=center><br>[[Chart]]</td></tr></table></Center></center>"
   T.ASPdbNET()
End Sub
</Script>

HyperLinked Charts

All Tornado charts are hyperlinked by default. Just specify the corresponding linked URLs.

<script language="vb" runat="server">
Sub Page_Load(Source as Object, E as EventArgs)
   Dim HN As New Tornado.Z()
   Dim Tmp As String = "<Center><h3>Tornado Demo - HyperLink Charts<br>Two lines does it All!<br>Click column or Pie to see pictures</h3> <TABLE><TR><TD>[[Chart_10]]</td><td>[[Chart_11]]</td></tr></table></Center></center>"
   With HN
      .Unit = 10
      .dbSkin = 6
      .dbChartParams = "ID=1| Type=26| Archieve=/tornado/Jars/| Width=350| Height=350| 3D=True| TitleString='Spinning Exploded HyperLinked Pie Chart'| titleFont='Arial,14,1| textLabelsOn=True| pieWidth=.45| pieHeight=.45| valueLabelsOn=True| ExplodeSlice=0"
      .dbChartData = "(,;)dataset0yValues=51,40,20,17,14,11| dataset0Labels=Frank,Polly,Ivy,Irene,Iris,Amanda| dataset0Links=img/frank.gif,img/Polly.gif,img/Ivy.gif,img/Irene.gif,img/Iris.gif,img/Mende.gif| target=pic| dwellUseLabelString=true"
      Tmp = Replace(Tmp, "[[chart_10]]", .ASPdbUserChart(), , , 1)

      .dbUnit = 11
      .dbChartParams = "ID=2| Type=18| Archieve=/tornado/Jars/| Width=350| Height=350| 3D=True| TitleString='HyperLinked Column Chart'|titleFont='Arial,14,1| textLabelsOn=True| titlefont=Arial,12,5|xAxislabelangle=90| dwellUseXValue=false| dwellUseYValue=false| PlotareaTop=0.8| PlotAreaBottom=0.3| PlotAreaLeft=0.2| PLotAreaRight=0.8| xAxisTitleFont=Arial,12,5| target=pic"
      .dbChartData = "(,;)dataset0yValues=51,40,20,17,14,11| dataset0Labels=Frank,Polly,Ivy,Irene,Iris,Amanda| dataset0Links=img/frank.gif,img/Polly.gif,img/Ivy.gif,img/Irene.gif,img/Iris.gif,img/Mende.gif| target=_blank| dwellUseLabelString=true"
      Tmp = Replace(Tmp, "[[chart_11]]", .ASPdbUserChart(), , , 1)

      Response.Write(Tmp)
   End With
End Sub
</Script>