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 |
|---|---|
| Legend | True|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 |
|---|---|
| Legend | True|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 |
|---|---|
| Legend | True|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 |
|---|---|
| Legend | True|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 |
|---|---|
| Legend | True|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". |