CDW200

Create HTML Chart

 Last Revised: 12/08/16

This called routine is used to produce the HTML code that will display various types of Google charts in a browser.

With minimal coding, you can create some incredible charts. Example

Calling Format:

CALL "CDW200", ERR=XXXX, Y$, W200$, HTML$

CDW200 Arguments
Argument Passed To/From Description
ERR=XXXX N/A

Error branch taken if:

  • HTML$ is passed, but the [CHARTn] placeholder is missing
  • W200.TYPE$ is invalid
Y$ To Session Control Variable
W200$ To
NO The chart number on the page
TYPE$

Supported Types are

"LineChart"
"PieChart"
"BarChart"
"ColumnChart"
TITLE$ Optional chart title
WIDTH Overall width of chart in pixels. Will use default value if not passed.
HEIGHT Overall height of chart in pixels. Will use default value if not passed.
  The following CA fields below, refer to the Chart Area. The Chart Area is the central region of the chart excluding the axes and legends. These fields are all optional as the default values are often satisfactory. The CA fields can be expressed as a number of pixels, or as a percentage as in "15%".
CA_HEIGHT$ Chart Area Height - You may need to set this if the legend below the horizontal axis is cut off.
CA_WIDTH$ Chart Area Width - You may need to set this if the legend to the right of the Chart Area is cut off.
CA_TOP$ Chart Area top margin - Can be used to position that Chart Area up or down
CA_LEFT$ Chart Area left margin - Can be used to position the Chart Area up or down
BKGCOLOR$ Optional Background color of chart expressed as color word or color#, i.e., red, #123 or #112233.
COLORS$ Optional array of Colors to use for the data sets, including square brackets, i.e., ['red','green','blue','#223344']. Be sure to have as many elements in the array as there are data sets.
LEGEND$ Array of Data Set Legend Text including square brackets, i.e., ['System','User','Idle']. Be sure to have as many elements in the array as there are data sets.
DATA$ Comma separated arrays containing the data sets. Use apostrophe's for text fields. ['Mon',2,3],['Tue',2,4],['Wed',10,1]
HTML$ To/From

If passed in as null, then HTML will be returned as complete HTML including DOC TYPE, html, head, and body sections. This option is useful when the page is going to be written to a file, and not displayed immediately in a browser, as when using Dynaweb.

If passed as non-null, then HTML must include placeholders [CHARTn] within body to be replaced with HTML generated by CDW200. The 'n' represents the chart number on the page, W200.NO.
STBL("TITLE") To If HTML$ is passed as null, you can set the Page Title using this Global Variable.
Pie Chart Example

0100 REM "CDW200-1 - 04/06/13 Dynaweb Pie Chart Example

0120 CALL "CDS041","CDW200",W200$,"YY"

0130 LET W200.NO=1

0140 LET W200.TYPE$="PieChart"

0150 LET W200.TITLE$="Revenue by Source"

0160 LET W200.LEGEND$="['Category','YTD Sales']"

0170 LET W200.DATA$="['Sales',220000],['Service',103000],['Rental',78000]"

0180 LET TMP$=STBL("TITLE","Example Pie Chart")

0190 CALL "CDW200",Y$,W200$,HTML$

0200 RUN "CDW999"
Result
Line Chart Example

0100 REM "CDW200-2 - 04/06/13 Dynaweb Line Chart Example

0120 CALL "CDS041","CDW200",W200$,"YY"

0130 LET W200.NO=1

0140 LET W200.TYPE$="LineChart"

0150 LET W200.TITLE$="Sales & Cost by Month"

0160 LET W200.LEGEND$="['Month','Sales','Cost']"

0170 LET W200.DATA$="['Jan',1000,700],['Feb',1100,750],['Mar',800,550],
['Apr',1000,710],['May',1200,840],['Jun',1150,800],
['Jul',1350,900],['Aug',1200,810],['Sep',1000,750],
['Oct',1200,870],['Nov',1250,900],['Dec',1400,1000]"

0180 LET TMP$=STBL("TITLE","Example Line Chart")

0190 CALL "CDW200",Y$,W200$,HTML$

0200 RUN "CDW999"
Result
Bar Chart Example

0100 REM "CDW200-3 - 04/06/13 Dynaweb Bar Chart Example

0120 CALL "CDS041","CDW200",W200$,"YY"

0130 LET W200.NO=1

0140 LET W200.TYPE$="BarChart"

0150 LET W200.TITLE$="Flower Sales by Quarter"

0160 LET W200.LEGEND$="['Quarter','Azalea','Daffodil','Forsythia']"

0170 LET W200.DATA$="['Jan-Mar',10,20,30],
['Apr-Jun',20,30,40],
['Jul-Sep',15,40,60],
['Oct-Dec',15,25,45]"

0180 LET TMP$=STBL("TITLE","Example Bar Chart")

0190 CALL "CDW200",Y$,W200$,HTML$

0200 RUN "CDW999"
Result
Column Chart Example

0100 REM "CDW200-4 - 04/06/13 Dynaweb Column Chart Example

0120 CALL "CDS041","CDW200",W200$,"YY"

0130 LET W200.NO=1

0140 LET W200.TYPE$="ColumnChart"

0150 LET W200.TITLE$="Flower Sales by Quarter"

0160 LET W200.LEGEND$="['Quarter','Azalea','Daffodil','Forsythia']"

0170 LET W200.DATA$="['Jan-Mar',10,20,30],['Apr-Jun',20,30,40],
['Jul-Sep',15,40,60],['Oct-Dec',15,25,45]"

0180 LET TMP$=STBL("TITLE","Example Column Chart")

0190 CALL "CDW200",Y$,W200$,HTML$

0200 RUN "CDW999"
Result
Multiple Charts per Page Example

0100 REM "CDW200-5 - 04/06/13 Dynaweb Multiple Chart Example

0110 SETESC 8000; SETERR 8000

0120 GOSUB INIT

0130 GOSUB CHART1

0140 GOSUB CHART2

0150 GOSUB CHART3

0160 GOSUB CHART4

0170 RUN "CDW999"

 

1000 INIT:

1010 CALL "CDS041","CDW200",W200$,"YY"

1020 LET W200.WIDTH=450

1030 LET W200.HEIGHT=200

1040 LET W200.CA_WIDTH$="275"

1050 LET HTML$="<!DOCTYPE HTML SYSTEM>"

1060 LET HTML$=FNH$("<html>")

1070 LET HTML$=FNH$("<head>")

1080 LET HTML$=FNH$("<title>Dynaweb Chart</title>")

1090 LET HTML$=FNH$("<link rel=stylesheet type='text/css' href='http://

www.excellware.com/docs/tools/tools.css'>")

1100 LET HTML$=FNH$("</head>")

1110 LET HTML$=FNH$("<body>")

1120 LET HTML$=FNH$("<div align='center'>")

1130 LET HTML$=FNH$("<img src='http://www.excellware.com/docs/tools/images/

banner.gif' alt='logo' style='margin-bottom:10px'>")

1140 LET HTML$=FNH$("<p style='font-size:14pt;font-weight:bold'>Dynamo Tools

by Excellware, Inc.</p>")

1150 LET HTML$=FNH$("<p style='font-size:14pt;'>Example Multi-chart Page</p>")

1160 LET HTML$=FNH$("<table class='plain'>")

1170 LET HTML$=FNH$("<tr><td>[CHART1]</td><td>[CHART2]</td></tr>")

1180 LET HTML$=FNH$("<tr><td>[CHART3]</td><td>[CHART4]</td></tr>")

1190 LET HTML$=FNH$("</table>")

1200 LET HTML$=FNH$("</body>")

1210 LET HTML$=FNH$("</html>")

1220 RETURN

 

1300 CHART1:

1310 LET W200.NO=1

1320 LET W200.TYPE$="PieChart"

1330 LET W200.TITLE$="Revenue by Source"

1340 LET W200.LEGEND$="['Category','YTD Sales']"

1350 LET W200.DATA$="['Sales',220000],['Service',103000],['Rental',78000]"

1360 LET TMP$=STBL("TITLE","Example Pie Chart")

1370 CALL "CDW200",Y$,W200$,HTML$

1380 RETURN

 

1400 CHART2:

1410 LET W200.NO=2

1420 LET W200.TYPE$="LineChart"

1430 LET W200.TITLE$="Sales & Cost by Month"

1440 LET W200.LEGEND$="['Month','Sales','Cost']"

1450 LET W200.DATA$="['Jan',1000,700],['Feb',1100,750],['Mar',800,550],['Apr',

1000,710],['May',1200,840],['Jun',1150,800],['Jul',1350,900],['Aug',1200,

810],['Sep',1000,750],['Oct',1200,870],['Nov',1250,900],['Dec',1400,1000]"

1460 LET TMP$=STBL("TITLE","Example Line Chart")

1470 CALL "CDW200",Y$,W200$,HTML$

1480 RETURN

 

1500 CHART3:

1510 LET W200.NO=3

1520 LET W200.TYPE$="BarChart"

1530 LET W200.TITLE$="Flower Sales by Quarter"

1540 LET W200.LEGEND$="['Quarter','Azalea','Daffodil','Forsythia']"

1550 LET W200.DATA$="['Jan-Mar',10,20,30],['Apr-Jun',20,30,40],['Jul-Sep',15,

40,60],['Oct-Dec',15,25,45]"

1560 LET TMP$=STBL("TITLE","Example Bar Chart")

1570 CALL "CDW200",Y$,W200$,HTML$

1580 RETURN

 

1600 CHART4:

1610 LET W200.NO=4

1620 LET W200.TYPE$="ColumnChart"

1630 LET W200.TITLE$="Flower Sales by Quarter"

1640 LET W200.LEGEND$="['Quarter','Azalea','Daffodil','Forsythia']"

1650 LET W200.DATA$="['Jan-Mar',10,20,30],['Apr-Jun',20,30,40],['Jul-Sep',15,

40,60],['Oct-Dec',15,25,45]"

1660 LET TMP$=STBL("TITLE","Example Column Chart")

1670 CALL "CDW200",Y$,W200$,HTML$

1680 RETURN

 

1700 FUNCTIONS:

1710 DEF FNH$(TXT$)=HTML$+TXT$+$0A$

1720 RETURN

 

8000 REM "Call Error/Escape Routine

8010 CALL "CDS063",STR(TCB(5)),Y$,PGM(-2)

8020 ON Y.ERRSTS GOTO 8030,8040,8050,8060

8030 SETERR 0

8040 RETRY

8050 RETURN

8060 RETRY

 

9000 EOJ:

9010 IF TCB(13) THEN EXIT

9020 RUN "CDS001"
Result