highcharts_ui_page_bubbles.js

<?xml version="1.0" encoding="utf-8" ?>    
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">    
<script language="javascript" src="/scripts/prototype-adapter.jsx" />   
<script language="javascript" src="/scripts/GlideV2ChartingIncludes.jsx" />   
<script>  
document.observe("dom:loaded", function() {    
    var chart1 = new Highcharts.Chart({    
        chart: {
            renderTo: 'newchart',
            type: 'bubble',
            width: 600,
            height: 600
        },
        title: {
            text: 'Look... Bubbles!'
        },
        yAxis: {
            max: 100
        },
        xAxis: {
            max: 100
        },
        series: [
            {name: 'Jane', data: [ [10,20,30], [30,30,50], [40,40,70] ] },     
            {name: 'Bob', data: [ [80,100,30], [30,34,50], [40,80,70] ] },     
            {name: 'Dex', data: [ [97, 36, 10], [94, 74, 30], [68, 76, 78], [64, 87, 100] ] }
        ]
    });
});
</script>
<div id="highwrapper" style="width: 940px; height: 680px; position:relative;">
    <div id="newchart" style="width: 400px; height: 600px; margin: 20; position:absolute;top:0px;left:0px;"></div>
</div>
</j:jelly>

This code is used in the HTML section of a ServiceNow UI Page to access the HighCharts Pluging and generate a demo bubble chart using sample data.