sample.tcl

Sample page for Highcharts

Location:
/packages/highcharts/www/sitewide-admin/sample.tcl
Author:
Gustaf Neumann
Created:
Oct 23, 2022

Related Files

[ hide source ] | [ make this the default ]

File Contents

ad_page_contract {
    Sample page for Highcharts
    @author Gustaf Neumann

    @creation-date Oct 23, 2022
} {
}

set title "Highcharts Sample Page"
set context [list [list "." "Highcharts"] $title]

#
# Include Generic URLs (based on URN)
#
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')]
                           ]
                }
            }
        }]

    });
}