Tornado Class Library

Special Topic - Charting

Just like a report template, ASP-db Charting modules are pre-programmed to accept both DB and user data. This data form mix is important as it is common to process the data prior to the plot. When data is coming from a field just specify #FieldNameOrNumber#. When data comes from user just input as it delimited by commas. If a Legend is needed, just specify Legend=True (Leg=t) the all the spacing will be adjusted. If Axis titles are needed the specify them in ChartParams and setting will be adjusted. All the commonly used charts are pre-programmed to accept minimum data. All charts HTML code are exported and can be retrieved with GD.Get_Chart(Unit). Chart HTML code can be easily inserted into the Web Controls. All applicable chart type supports 3D and multiple data sets (40).

 

Pie Chart

dbPieChart = "Legend| Label | Value"

Keyword Description
LegendTrue|false(Def) - Display Legends.
LabelField Value of FieldNameNumber to use as Pie labels.
ValueField Value of FieldNameNumber to use as Pie values.
<script language="VB" runat="server">
Sub Page_Load(Src As Object, E As EventArgs)
  Dim Pie As New Tornado.z
  With Pie
    .dbQP = "U=6| S=Moon| D=nwind| ni=none|th=Ti=Grid Chart Mode"
    .dbMode = "GridChart"
    .dbSQL = "SELECT TOP 5 OrderID, CustomerID, Freight From Orders"
    .dbPieChart = "Value=#2#| Label=#CustomerID#"
    Dim Pc = "width=400| PercentLabelsOff=true|Titlestring=My title"
    .dbChartParams = Pc
    .ASPdbNET()
  End With
</script> 

 

Get Chart HTML export code via GetData.Get_Chart

The following example produce a Grid-Chart. Made invisible and extract only the Chart. Primary Pie property Value and Label fields are specified and optional parameters are set in the dbChartParams property.

<script language="VB" runat="server">
Sub Page_Load(Src As Object, E As EventArgs)
  Dim GD As New Tornado.GetData
  Dim Mydb As New Tornado.z
  With Mydb
    .dbQP = "U=6| S=Moon| D=nwind| ni=none|th=Ti=Grid Chart Mode|Iv=t"
    .dbMode = "GridChart"
    .dbSQL = "SELECT TOP 5 OrderID, CustomerID, Freight From Orders"
    .dbPieChart = "Value=#2#| Label=#CustomerID#"
    .dbChartParams = "width=400| PercentLabelsOff=true|Titlestring=My title"
    .ASPdbNET()
    Response.Write(GD.Get_Chart(6))
  End With
End Sub
</script> 

 

Pie Chart Optional Properties
 
Keyword Description
ExplodeSlice Exploded slice number
TextLabelsOn Display string label
ValueLabelsOn Display numeric labels
PercentLabelsOn Display % labels
LabelPosition 0: at center of slice, 1: at edge of slice, 2: outside edge of slice with pointer
StartDegrees degrees counterclockwise from 3 o'clock for first slice
xLoc x Location for center of pie (between 0 & 1, default 0.5)
yLoc y Location for center of pie (between 0 & 1, default 0.5)
PieWidth % of window for pie diameter (default .6 = 60%)
PieHeight % of window for pie diameter (default .6 = 60%)
PointerLengths a values to redefine the pointer lengths for external labels. By default, this value is 0.2.
lineColor redefines the color used for pie slice pointers
dataset0Links Comma delimited links for pie.

 

 

Bar Chart

dbBarChart = "Legend| Label | DataSet0| ....DataSet39

Keyword Description
LegendTrue|false(Def) - Display Legends.
LabelField Value of FieldNameNumber to use as Bar labels.
DataSet? Value of FieldNameNumber to use for Bar ?. ?=0-39.

The following example defines 2 Bar data set - UnitPrice and Quantity

<script language="VB" runat="server">
Sub Page_Load(Src As Object, E As EventArgs)
  Dim Bar As New Tornado.z
  With Bar
    .dbQP = "U=15| D=nwind| S=13| PS=10| M=Gc"
    .dbSQL = "SELECT OrderID, sum(UnitPrice) as UnitPrice, sum(Quantity) as Qty from [Order details] Group by OrderId"
    .dbBarChart = "Label=#0#| DataSet0=#1#| DataSet1=#2#| DataSet2=43,89,21,65,52,157,10,47,76,111"
    .dbTextHolder = "Title=Bar Chart"
    .ASPdbNET()
  End With
End Sub
</script> 

 

 

Column Chart

dbColumnChart = "Legend| Label | DataSet0| ...DataSet39

Keyword Description
LegendTrue|false(Def) - Display Legends.
LabelField Value of FieldNameNumber to use as Bar labels.
DataSet0 - 39 Value of FieldNameNumber to use for Bar 0 to 39.

Column Chart is similar to BarChart except the orientation.

The following example defines 2 Bar data set - UnitPrice and Quantity

<script language="VB" runat="server">
Sub Page_Load(Src As Object, E As EventArgs)
  Dim Col As New Tornado.z
  With Col
    .dbQP = "U=25| D=nwind| S=13| PS=10| M=Gc"
    .dbSQL = "SELECT OrderID, sum(UnitPrice) as UnitPrice, sum(Quantity) as Qty from [Order details] Group by OrderId"
    .dbChartParams = "xAxisLabelAngle=45|yAxisTitle=My Y-Axis Title| xAxisTitle=My X-Axis Title| yAxisOptions=rotateTitle=true"
    .dbColumnChart = "Legend=t| Label=#0#| DataSet0=#1#| DataSet1=#2#| DataSet2=27,59,51,95,92,67,100,37,56,111"
    .dbTextHolder = "Title=Column Chart"
    .ASPdbNET()
  End With
End Sub
</script> 

 

Line Chart

dbLineChart = "Legend| Name0 | X0 | Y0 | ....Name39| X39| Y39"

Keyword Description
LegendTrue|false(Def) - Display Legends.
Name? Name of DataSet
X? Value of FieldNameNumber to use for X-axis.
Y? Value of FieldNameNumber to use for Y-axis.

The following example defines a 3 line data set. Two from a created Csv file and one manually -

<script language="VB" runat="server">
Sub Page_Load(Src As Object, E As EventArgs)
  Dim CSV As String = "F1,F2,F3" & vbCrLf & "100,22,176" & vbCrLf & "150,23,67" & vbCrLf & "200,49,50" & vbCrLf
  CSV &= "250,150,95" & vbCrLf & "300,231,48" & vbCrLf & "350,280,102" & vbCrLf & "400,654,200" & vbCrLf
  CSV &= "450,534,100" & vbCrLf & "500,678,123" & vbCrLf & "550,654,32" & vbCrLf & "600,978,45" & vbCrLf & "650,654,100"
  Dim util As New Tornado.Util
  util.WriteFile("c:\inetpub\wwwroot\tornado\scratch\TestLine.Csv", CSV)
  Dim Bar As New Tornado.z
  With Bar
    .dbQP = "U=5| S=17| PS=-1| Ni=none| M=Gc| Q=Select * From TestLine.Csv| Dt=TEXT| Pv=OLEDB"
    .dbDSN = "/tornado/scratch"
    Dim Cp As String = "TitleString=3 Lines| dataset2image=./_greenball.gif"
    Cp &= "|yAxisTitle=My Y-Axis Title| xAxisTitle=My X-Axis Title| yAxisOptions=rotateTitle=true"
    .dbChartParams = Cp
    .dbLineChart = "leg=t| Name0=Line Zero| X0=#0#| Y0=#1#| Name1=Line One|X1=#0#|Y1=#2#| " & _ 
        "Name2=Line Two|X2=15,19,29,78,231,290|Y2=321,543,890,123,890,576"
    .dbTextHolder = "Title=Line Chart"
    .ASPdbNET()
  End With
End Sub
</script> 

 

DateLine Chart

Mydb.dbDateLineChart = "Legend| InputDateFormat| AxisDateFormat| Name | Date0| Value0|.. Name39|Date39| Value39"

Keyword Description
LegendTrue|false(Def) - Display Legends.
InputDateFormat Date format of input dates like MM-dd-yyyy; yyyy-MM-dd.
AxisDateFormat X-Axis date format like yyyy; MM-yyyy.
Name DataSet Name.
Date X-axis Date.
Value Y-axis value.

 

This example creates a csv file, save to scratch directory and then open it as csv datasource with 3 columns - F1, F2 and F3. F1 is the x-axis and F2, F3 are the two datasets. The dbLineChart will plot the two lines with default settings. A third line is created manually in dbChartParams with it's own settings.

<script language="VB" runat="server">
Sub Page_Load(Src As Object, E As EventArgs)
  Dim CSV As String = "F2,F3" & vbCrLf & "1/1/1919,176" & vbCrLf & "2/1/1929,56" & vbCrLf & "3/1/1929,50" & vbCrLf
  CSV &= "10/2/1930,200" & vbCrLf & "6/1/1935,76" & vbCrLf & "7/1/1940,26"
  Dim util As New Tornado.Util
  util.WriteFile("c:\inetpub\wwwroot\tornado\scratch\TestDateLine.Csv", CSV)
  Dim Dl As New Tornado.z
  With Dl
    .dbQP = "U=5| S=plain| PS=-1| Ni=none| M=Gc| Q=Select * From TestDateLine.Csv| Dt=TEXT| Pv=OLEDB"
    .dbDSN = "/tornado/scratch"
    Dim Cp As String = "TitleString=3 Date Lines| dataset1image=./_greenball.gif"
    Cp &= "|yAxisTitle=My Y-Axis Title| xAxisTitle=My X-Axis Title| yAxisOptions=rotateTitle=true" 
    .dbChartParams = Cp
    Dim DLChart as string = "legend=t| inputDateFormat=MM/dd/yyyy| Name0=DB Line| Date0=#0#| "
    DLchart &= "Value0=#1#|Name1=My Line| Date1=1/1/1955,2/1/1981,3/1/1987| Value1=50,60,70"
    .dbDateLineChart = DLChart
    .dbTextHolder = "Title=DateLine Chart"
    .ASPdbNET()
  End With
End Sub
</script> 

 

Area Chart

Obj.dbAreaChart = "Legend| Label | Name0| Y0| ...... Name39| Y39"
 

Keyword Description
Label Value of FieldNameNumber to use for X-axis.
Name DataSet Caption.
Y Value of FieldNameNumber to use for Y-axis.

This example creates a csv file with one label and 2 datasets, save to scratch directory and then open it as csv datasource with 3 columns - F1, F2 and F3. F1 is the label-axis and F2, F3 are the two datasets. The dbAreaChart will plot the two areas with default settings. A third line is created manually in dbChartParams with it's own settings.

<script language="VB" runat="server">
Sub Page_Load(Src As Object, E As EventArgs)
  Dim CSV As String = "F1,F2,F3" & vbCrLf & "L1,22,176" & vbCrLf & "L2,23,67" & vbCrLf & "L3,49,50" & vbCrLf
  CSV &= "L4,150,95" & vbCrLf & "L5,231,48" & vbCrLf & "L6,280,102" & vbCrLf & "L7,654,200" & vbCrLf
  CSV &= "L8,534,100" & vbCrLf & "L9,678,123" & vbCrLf & "L10,654,32" & vbCrLf & "L11,978,45" & vbCrLf & "L12,654,100"

  Dim util As New Tornado.Util
  util.WriteFile("c:\inetpub\wwwroot\tornado\scratch\TestArea.Csv", CSV)
  Dim Area As New Tornado.z
  With Area
    .dbQP = "U=5| S=14| PS=-1| Ni=none| M=Gc| Q=Select * From TestArea.Csv| Dt=TEXT| Pv=OLEDB"
    .dbDSN = "/tornado/scratch"
    Dim Cp As String = "dataset2yValues=321,543,890,123,890,576,400,300,200,250,400,500"
    Cp &= "|dataset2name=Area Two| TitleString=3 Areas"
    .dbChartParams = Cp
    .dbAreaChart = "Label=#0#| Name0=Area Zero| Y0=#1#| Name1=Area One| Y1=#2#"
    .dbTextHolder = "Title=Area Chart"
    .ASPdbNET()
  End With
End Sub
</script>

 

 

Bubble Chart and Options

Bubble chart is a 3-D plot - X (dataset?xValues), Y (dataset?yValues) and Size (dataset?y2Values).

dbBubbleChart = "Legend| Name0 | X0 | Y0 | S0 .... Name39| X39| Y39| S39"

 

Bubble Chart Optional Properties

Keyword Value Description
setZScale double A multiplier used to adjust how the y2/z values becomes radius so that the chart looks good.  Autoscale usually does a good job of this
zAutoScaleOff Anything When you use this parameter it turns of the zScale autoscaling.  In other words it allows the user to set the z scale multiplier instead of doing this automatically.  Probably shouldn't be used unless you are having a problem with the radius of the bubbles.
maxDiameter integer This is the user input to set the maximum diameter of the bubbles in pixels.  Again, this is only needed if you are having a problem with the size of the bubbles.
fillBubbles true|false Just draws filled bubbles instead of just outlines.
crossAxes double The x value at which the y axis will cross the x axis, if crossAxes = true.
xCrossVal double The x value at which the y axis will cross the x axis, if crossAxes = true.
yCrossVal double Similar to xCrossVal.

This example creates a Csv data source with 3 columns used for X, Y and Size. dbChartParams specifies the limit of the chart such that all the bubbles stays inside the plot area. User bubble added as 'My Bubble'.

<script language="VB" runat="server">
Sub Page_Load(Src As Object, E As EventArgs)
  Dim CSV As String = "F1,F2,F3,F4,F5,F6" & vbCrLf & "-5,0,50,0,80,80" & vbCrLf & "0,-200,200,8,100,70" & vbCrLf
  CSV &= "-5,250,150,3,300,150"
  Dim util As New Tornado.Util
  util.WriteFile("c:\inetpub\wwwroot\tornado\scratch\TestBubble.Csv", CSV)
  Dim Area As New Tornado.z
  With Area
    .dbQP = "U=5| S=oceanbelow| PS=-1| Ni=none| M=Gc| Q=Select * From TestBubble.Csv| Dt=TEXT| Pv=OLEDB"
    .dbDSN = "/tornado/scratch"
    Dim Bc As String = "Name0=Bubble Zero| X0=#0#| Y0=#1#| S0=#2#| Name1=Bubble One| X1=#3#| Y1=#4#| S1=#5#|"
    Bc &= "Name2=My Bubble| X2=-7,-5,7| Y2=6,-200,-150| S2=100,150,100|leg=f"
    .dbBubbleChart = Bc
    .dbTextHolder = "Title=Bubble Chart"
    .ASPdbNET()
  End With
End Sub
</script>


Common Chart Parameters

Keyword Value Description
networkInterval Integer Applets that use URL datasets will check for new data every networkInterval seconds.
dwellLabelsOn true/false Tells the applet whether to use dwell labels.
dwellUseLabelString true/false Tells the applet whether to use each datapoint's label as a part of the popup dwell labels.
dwellUseXValue true/false Tells the applet whether to use each datapoint's X value as a part of the popup dwell labels.
dwellUseYValue true/false Tells the applet whether to use each datapoint's Y value as a part of the popup dwell labels.
dwellXString String A text string containing the character "#" to add descriptive text to the dwell label X value. Example: "Category #"
dwellYString String A text string containing the character "#" to add descriptive text to the dwell label Y value. Example: "Unit Sales: $#"
dwellLabelDateFormat String A format string for describing dates in the dwell label (e.g. yyyy = 2001)
dwellLabelPrecision Integer Number of digits of precision for dwell label values. For example, if precision is "2", labels will look like this: 123.45 or 123,45.
dataset0Links list a list of URLs for hyperlinks from dataset0. Dataset0 through dataset39 available.
target String Target frame for hyperlink drill-down results

 

Keyword Value Description
titleString String Chart Title (default none) 
titleFont font Font name, size, & style for chart title (default TimesRoman, plain, 12 pt)
titleColor color color of text in Title (default black)
subTitleString String Chart Sub-Title (default none) 
subTitleFont font Font name, size, & style for chart title (default TimesRoman, plain, 12 pt)
subTitleColor color color of text in Title (default black)
labelsOn anything determines whether bar, line, pie, etc., labels will be visible
labelAngle integer the number of degrees to rotate datum labels
labelPrecision integer the number of digits of precision for datum labels
legendOn anything make the legend visible
legendOff anything make the legend invisible (default)
legendColor color sets the background color of a legend
legendVertical anything legend icons in vertical list (default)
legendHorizontal anything legend icons in horizontal list
legendLabelFont font Font name, size, & style for legend (default TimesRoman, plain, 12 pt)
legendLabelColor color color of text in legend (default black)
legendllX double X location of lower left legend corner (default 0.2)
legendllY double Y location of lower left legend corner (default 0.2)
iconWidth double width of legend icon (default 0.07)
iconHeight double height of legend icon (default 0.05)
iconGap double gap between icon and next legend entry (default 0.01)
plotAreaTop double top of the plotting area
plotAreaBottom double bottom of the plotting area
plotAreaRight double right side of the plotting area
plotAreaLeft double left side of the plotting area
plotAreaColor color color of plotting area background (default white)
backgroundColor color color of chart background (default white)
3D anything turns on 3D effects for this chart (default 2D)
2D anything turns on 2D effects for this chart (default 2D)
XDepth integer number of pixels of offset in X direction for 3D effect (default 15)
YDepth integer number of pixels of offset in y direction for 3D effect (default 15)
locale String Your charts will automatically change things like month labels, number formatting, and so on, depending on whether your viewers are in, say, France, or Japan. You can override the locale with this parameter. Valid locales include canada, canada_french, china, chinese, english, france, french, german, germany, italian, italy, japan, japanese, korea, korean, prc, simplified_chinese, taiwan, traditional_chinese, uk, and us.
delimiter String the separator character for list parameters. Default is comma (e.g. "123.432.123").
defaultFont Font A new default font overrides the default font setting. This parameter sets a new default for all graphics running within the Java Virtual Machine in the current session, so you should use it cautiously. Its primary value is for settings that wish to start with consistent font usage for all charts.
backgroundImage URL or file name Charts can replace the solid background color with a GIF or JPEG image for added effect.
outlineColor Color Color to use for outlining bars, plotareas, etc. (Default none). Using this param automatically enables outlining for most objects
outlineDataRepresentation true|false If outlineColor is set to some color, you can selectively turn the outlining off for the DataRepresentation (Bars, Pie, Area, etc.) by setting this property to "false". Default is "true".
outlinePlotarea true|false If outlineColor is set to some color, you can selectively turn the outlining off for the Plotarea (the region bounded by the x and y axes) by setting this property to "false". Default is "true".
outlineBackground true|false If outlineColor is set to some color, you can selectively turn the outlining off for the Background (the total chart image area) by setting this property to "false". Default is "true".
outlineLegend true|false If outlineColor is set to some color, you can selectively turn the outlining off for the chart Legend by setting this property to "false". Default is "true".

 


Send comments on this topic.
Copyright 1998-2006 ASP-db