Highcharts Sugar Dashlet Example

highcharts-example.hbs

{{! Copyright 2016 SugarCRM Inc.  Licensed by SugarCRM under the Apache 2.0 license. }}
<h3>Example Button</h3>
{{! Unicorn UI styled buttons }}
<span class="button-wrap">
    <a class="button button-pill button-raised button-royal">Go</a>
</span>
<a class="button button-3d button-primary button-rounded">Check out the new site!</a>
<h3>Example Highchart</h3>
{{! 
    div element we are reserving for use with our Highchart.
    
    Please don't use element IDs for this purpose, this is a
    bad practice for Sidecar components, especially Dashlets,
    since they can appear on page more than once.
}}
<div class="highchart-div" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

highcharts-example.js

/**
 * Copyright 2016 SugarCRM Inc.  Licensed by SugarCRM under the Apache 2.0 license.
 */
({
    // ADD YOUR PLUG-INS HERE!
    plugins: ['Dashlet', 'ScriptLoader', 'CssLoader'],

    // For ScriptLoader, you can specify a list of scripts to load concurrently here
    scripts: [
        /* "http://code.highcharts.com/highcharts.js" */
    ],
    // For CssLoader, specify your required Stylesheets here
    css: [
        "http://unicorn-ui.com/buttons/css/buttons.css"
    ],

    /**
     * Load Highcharts.js then Exporting.js
     * 
     * We need to load these scripts in sequence, exporting.js is dependent on highcharts.js.
     * 
     * @param options
     */
    initialize: function(options){
        this._super('initialize', [options]);
        // Leverage a callback in our call to the Sidecar plug-in's loadScript function.
        this.loadScript(["http://code.highcharts.com/highcharts.js"], function(){
            this.loadScript(["http://code.highcharts.com/modules/exporting.js"]);
        });

    },

    // When scripts are loaded, lets call the Highcharts jQuery plug-in to render the chart on the appropriate div.
    onLoadScript: function(){
        /**
         * 
         * Please use this.$() when possible!
         * 
         * Global selectors are often slower and will cause bugs if your Dashlet appears on multiple places on page.
         * 
         **/
        this.$(".highchart-div").highcharts({
            chart: {
                type: 'area'
            },
            title: {
                text: 'Historic and Estimated Worldwide Population Growth by Region'
            },
            subtitle: {
                text: 'Source: Wikipedia.org'
            },
            xAxis: {
                categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
                tickmarkPlacement: 'on',
                title: {
                    enabled: false
                }
            },
            yAxis: {
                title: {
                    text: 'Billions'
                },
                labels: {
                    formatter: function () {
                        return this.value / 1000;
                    }
                }
            },
            tooltip: {
                shared: true,
                valueSuffix: ' millions'
            },
            plotOptions: {
                area: {
                    stacking: 'normal',
                    lineColor: '#666666',
                    lineWidth: 1,
                    marker: {
                        lineWidth: 1,
                        lineColor: '#666666'
                    }
                }
            },
            // Dummy data for our chart
            series: [{
                name: 'Asia',
                data: [502, 635, 809, 947, 1402, 3634, 5268]
            }, {
                name: 'Africa',
                data: [106, 107, 111, 133, 221, 767, 1766]
            }, {
                name: 'Europe',
                data: [163, 203, 276, 408, 547, 729, 628]
            }, {
                name: 'America',
                data: [18, 31, 54, 156, 339, 818, 1201]
            }, {
                name: 'Oceania',
                data: [2, 2, 2, 6, 13, 30, 46]
            }]
        });
    }
});

highcharts-example.php

<?php
/**
 * Copyright 2016 SugarCRM Inc.  Licensed by SugarCRM under the Apache 2.0 license.
 */
$viewdefs['base']['view']['highcharts-example'] = array(
    'dashlets' => array(
        array(
            'label' => 'Highcharts Example',
            'description' => 'Highcharts example dashlet',
            'config' => array(
            ),
            'preview' => array(
            ),
            'filter' => array(
            )
        ),
    ),
);