For developer information, look into the Highcharts Manual. +
For a quick test, check the Sample page.
Index: openacs-4/packages/highcharts/www/sitewide-admin/index.tcl
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/highcharts/www/sitewide-admin/index.tcl,v
diff -u -N
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ openacs-4/packages/highcharts/www/sitewide-admin/index.tcl 23 Oct 2022 18:41:18 -0000 1.1.2.1
@@ -0,0 +1,19 @@
+ad_page_contract {
+ @author Gustaf Neumann
+
+ @creation-date Aug 6, 2018
+} {
+}
+
+set version $::highcharts::version
+set resource_info [::highcharts::resource_info]
+set download_url download
+
+set title "[dict get $resource_info resourceName] Package - Sitewide Admin"
+set context [list $title]
+
+# Local variables:
+# mode: tcl
+# tcl-indent-level: 4
+# indent-tabs-mode: nil
+# End:
Index: openacs-4/packages/highcharts/www/sitewide-admin/sample.adp
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/highcharts/www/sitewide-admin/sample.adp,v
diff -u -N
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ openacs-4/packages/highcharts/www/sitewide-admin/sample.adp 23 Oct 2022 18:41:18 -0000 1.1.2.1
@@ -0,0 +1,14 @@
+@title;noquote@
+
+
+
Index: openacs-4/packages/highcharts/www/sitewide-admin/sample.tcl
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/highcharts/www/sitewide-admin/sample.tcl,v
diff -u -N
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ openacs-4/packages/highcharts/www/sitewide-admin/sample.tcl 23 Oct 2022 18:41:18 -0000 1.1.2.1
@@ -0,0 +1,167 @@
+ad_page_contract {
+ Sample page for Highcharts
+ @author Gustaf Neumann
+
+ @creation-date Oct 23, 2022
+} {
+}
+
+set resource_info [::bootstrap_icons::resource_info]
+
+set title "Highcharts Sample Page"
+set context [list [list "." "Highcharts"] $title]
+
+#
+# Collect generic names
+#
+
+#
+# Generic URL for CSS (based on URN)
+#
+#set CSS_URL urn:ad:css:bootstrap-icons
+
+template::add_body_script -src urn:ad:js:highcharts
+template::add_body_script -src urn:ad:js:highcharts-more
+template::add_body_script -src urn:ad:js:highcharts/modules/exporting
+
+#template::head::add_css -href $CSS_URL
+
+template::head::add_style -style {
+ #container {
+ height: 400px;
+ }
+
+ .highcharts-figure,
+ .highcharts-data-table table {
+ min-width: 310px;
+ max-width: 800px;
+ margin: 1em auto;
+ }
+
+ .highcharts-data-table table {
+ font-family: Verdana, sans-serif;
+ border-collapse: collapse;
+ border: 1px solid #ebebeb;
+ margin: 10px auto;
+ text-align: center;
+ width: 100%;
+ max-width: 500px;
+ }
+
+ .highcharts-data-table caption {
+ padding: 1em 0;
+ font-size: 1.2em;
+ color: #555;
+ }
+
+ .highcharts-data-table th {
+ font-weight: 600;
+ padding: 0.5em;
+ }
+
+ .highcharts-data-table td,
+ .highcharts-data-table th,
+ .highcharts-data-table caption {
+ padding: 0.5em;
+ }
+
+ .highcharts-data-table thead tr,
+ .highcharts-data-table tr:nth-child(even) {
+ background: #f8f8f8;
+ }
+
+ .highcharts-data-table tr:hover {
+ background: #f1f7ff;
+ }
+}
+
+#
+# JavaScript
+#
+template::add_body_script -script {
+ Highcharts.chart('container', {
+
+ chart: {
+ type: 'bubble',
+ plotBorderWidth: 1,
+ zoomType: 'xy'
+ },
+
+ title: {
+ text: 'Highcharts bubbles with radial gradient fill'
+ },
+
+ xAxis: {
+ gridLineWidth: 1,
+ accessibility: {
+ rangeDescription: 'Range: 0 to 100.'
+ }
+ },
+
+ yAxis: {
+ startOnTick: false,
+ endOnTick: false,
+ accessibility: {
+ rangeDescription: 'Range: 0 to 100.'
+ }
+ },
+
+ series: [{
+ data: [
+ [9, 81, 63],
+ [98, 5, 89],
+ [51, 50, 73],
+ [41, 22, 14],
+ [58, 24, 20],
+ [78, 37, 34],
+ [55, 56, 53],
+ [18, 45, 70],
+ [42, 44, 28],
+ [3, 52, 59],
+ [31, 18, 97],
+ [79, 91, 63],
+ [93, 23, 23],
+ [44, 83, 22]
+ ],
+ marker: {
+ fillColor: {
+ radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
+ stops: [
+ [0, 'rgba(255,255,255,0.5)'],
+ [1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]
+ ]
+ }
+ }
+ }, {
+ data: [
+ [42, 38, 20],
+ [6, 18, 1],
+ [1, 93, 55],
+ [57, 2, 90],
+ [80, 76, 22],
+ [11, 74, 96],
+ [88, 56, 10],
+ [30, 47, 49],
+ [57, 62, 98],
+ [4, 16, 16],
+ [46, 10, 11],
+ [22, 87, 89],
+ [57, 91, 82],
+ [45, 15, 98]
+ ],
+ marker: {
+ fillColor: {
+ radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
+ stops: [
+ [0, 'rgba(255,255,255,0.5)'],
+ [1, Highcharts.color(Highcharts.getOptions().colors[1]).setOpacity(0.5).get('rgba')]
+ ]
+ }
+ }
+ }]
+
+ });
+}
+
+
+