Introduction
Highcharts is a bare-metal browser-based JavaScript API for adding interactive charts to HTML pages.
Highcharts is powerful, well documented and (relatively) easy to use, plus it's been around a long time (2009), it's popular and it's commercially successful.
Here's the Highcharts version of Hello, World!:
Demo, Chart!
[ Click the buttons to see data, then move the mouse to see tooltips ]( if the buttons don't work, try the Static, Chart! demo instead )
Demo, Chart! is one of three demonstrations, all of which look the same but work differently:
Demo, Chart! Static, Chart! Hello, Chart! Where does it run? In this blog post In a website (no CORS) In a SQL Anywhere 17 database HTML location: blogspot.com bcarter.com SQL Anywhere 17 database Highcharts JavaScript: code.highcharts.com code.highcharts.com SQL Anywhere 17 database Data location: CSV files in static website bcarter.com CSV files in static website bcarter.com SQL Anywhere 17 database Data retrieval: Static file via XMLHttpRequest() Static file via XMLHttpRequest() Web service via XMLHttpRequest() CORS headers: github.com/Rob--W/cors-anywhere Not required Not required
The code for Demo, Chart! is under your fingertips: View page source, then Find <!-- Start Demo, Chart! code in blog post... -->
The code for Static, Chart! is here:
https://www.bcarter.com/blog/Highcharts/static.html https://www.bcarter.com/blog/Highcharts/demochart1.csv https://www.bcarter.com/blog/Highcharts/demochart2.csv
The third demo is shown below.
Hello, Chart! Is Embedded In SQL Anywhere
There are advantages to storing code together with the data in a relational database. For example, application deployment, backup, recovery, portability, security all involve a single *.db file, and the Rules For Relational Databases guarantee consistency among various components.
If you have SQL Anywhere 17 installed, embedding Hello, Chart! is a two-step "Download And Go" process:
Step 1: Download four files into a local folder.
This command file uses the wget utility for Windows to download the files into C:\temp:
Step 2: Load the code and launch it in a browser.
The following command file
- creates a new SQL Anywhere 17 database chart.db via dbinit.exe,
- starts the database via dbsrv17.exe
- with the builtin HTTP server running on port 54321,
- loads the code and data by running setup_hello.sql.txt via dbisql.com
- and then uses the Windows START command to launch the hello.html web service in a browser window:
Here's what it looks like in Edge:
How Hello, Chart! Works
Here's how the code works, starting at the point the web browser launches http://localhost:54321/hello.html.
Step 1: The browser passes the request for "hello.html" to the HTTP server embedded inside the SQL Anywhere 17 process dbsrv17.exe, which is listening for HTTP traffic on port 54321 because of the option -xs http(port=54321).
It could use port 80, but this is a demo, and demos are supposed to work, not generate conflicts with existing software :)
Step 2: SQL Anywhere passes the request to the web service named "hello.html" that is defined in this snippet.
CREATE SERVICE "hello.html" TYPE 'RAW' AUTHORIZATION OFF USER DBA AS CALL get_static_text_file ( 'hello.html' );
Step 3: The web service passes the request on to the procedure shown in this snippet.
The RESULT clause on line 61 specifies that the procedure will return a result set to the caller (the browser) consisting of a single LONG VARCHAR column.The CALL on line 75 sets the HTTP Content-Type header to 'text/html' because the input file extension is 'html'.
The SELECT on line 91 gets the text file data from a table rather than an actual file; this is the SELECT that defines the RESULT set returned by this procedure.
CREATE PROCEDURE get_static_text_file ( IN @file_name VARCHAR ( 255 ) )
RESULT ( text_string LONG VARCHAR )
BEGIN
DECLARE @extension_pos INTEGER;
DECLARE @extension VARCHAR ( 100 );
SET @extension_pos = LOCATE ( @file_name, '.', -1 );
SET @extension
= IF @extension_pos = 0
THEN ''
ELSE SUBSTR ( @file_name, @extension_pos + 1 )
ENDIF;
CALL dbo.sa_set_http_header (
'Content-Type',
CASE @extension
WHEN 'css' THEN 'text/css'
WHEN 'csv' THEN 'text/csv'
WHEN 'htm' THEN 'text/html'
WHEN 'html' THEN 'text/html'
WHEN 'js' THEN 'application/javascript'
WHEN 'json' THEN 'application/json'
WHEN 'xml' THEN 'application/xml'
ELSE 'text/plain'
END CASE );
IF EXISTS ( SELECT *
FROM static_text_file
WHERE static_text_file.file_name = @file_name ) THEN
SELECT static_text_file.file_text
FROM static_text_file
WHERE static_text_file.file_name = @file_name;
ELSE
SELECT STRING ( '[', @file_name, ' not found]' );
END IF;
END;
Step 4: At this point in "how the code works", the browser receives the text for hello.html and starts processing by loading two Highcharts Javascript text files from SQL Anywhere...
<script src="get_static_text_file?f=highcharts.js"></script> <script src="get_static_text_file?f=data.js"></script>
...using another web service that calls the same stored procedure shown earlier:
CREATE SERVICE get_static_text_file TYPE 'RAW' AUTHORIZATION OFF USER DBA AS CALL get_static_text_file ( :f );
Here's where all the "static text file" data came from: it was pre-loaded via xp_read_file() calls from actual files into the static_text_file table.
CREATE TABLE static_text_file (
file_name VARCHAR ( 255 ) NOT NULL,
file_text LONG VARCHAR NOT NULL,
PRIMARY KEY ( file_name ) );
INSERT static_text_file ON EXISTING UPDATE VALUES
( 'highcharts.js',
dbo.xp_read_file ( 'C:\\temp\\highcharts.js' ) );
INSERT static_text_file ON EXISTING UPDATE VALUES
( 'data.js',
dbo.xp_read_file ( 'C:\\temp\\data.js' ) );
INSERT static_text_file ON EXISTING UPDATE VALUES
( 'hello.html',
dbo.xp_read_file ( 'C:\\temp\\setup_hello.html' ) );
COMMIT;
Step 5: When the browser has finished loading hello.html, it displays this...
