How to integrate jQuery and HighCharts?

Find code here before you post.
Locked
linb
Site Admin
Posts: 102
Joined: Thu Apr 25, 2013 6:51 am

How to integrate jQuery and HighCharts?

Post by linb »

Integrated-HighCharts.PNG
Integrated-HighCharts.PNG (22.54 KiB) Viewed 8386 times
   
Class('App', 'xui.Com',{
    Instance:{
        iniComponents : function(){
            // [[code created by CrossUI RAD Tools
            var host=this, children=[], append=function(child){children.push(child.get(0))};
            
            append(
                (new xui.UI.Dialog)
                .setHost(host,"ctl_dialog1")
                .setLeft(49)
                .setTop(10)
                .setWidth(430)
                .setHeight(460)
                .setCaption("How to integrate jQuery and HighCharts?")
            );
            
            host.ctl_dialog1.append(
                (new xui.UI.Div)
                .setHost(host,"ctl_div13")
                .setDomId("a_container")
                .setLeft(8)
                .setTop(9)
                .setWidth(400)
                .setHeight(400)
            );
            
            return children;
            // ]]code created by CrossUI RAD Tools
        },
        events : {"onReady":"_com_onready"},
        _buildChart:function(){
            // Use jQuery code :
            // Build the chart
            $('#a_container').highcharts({
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: 'Browser market shares at a specific website, 2010'
                },
                tooltip: {
                    pointFormat: '{series.name}: {point.percentage}%',
                    percentageDecimals: 2
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: false
                        },
                        showInLegend: true
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Browser share',
                    data: [
                        ['Firefox',   45.0],
                        ['IE',       26.8],
                        {
                            name: 'Chrome',
                            y: 12.8
                        },
                        ['Safari',    8.5],
                        ['Opera',     6.2],
                        {name:'Others', y:  0.7}
                    ]
                }]
            });
        },
        _com_onready : function (com, threadid){
            var ns=this;
            // You can include them in html file
            xui.include("$","//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){
                xui.include("Highcharts","//crossui.com/test3parts/highcharts/highcharts.js",function(){
                    ns._buildChart();
                });
            });
        }
    }
});
Class('App', 'xui.Com',{
    Instance:{
        iniComponents : function(){
            // [[code created by CrossUI RAD Tools
            var host=this, children=[], append=function(child){children.push(child.get(0))};
            
            append(
                (new xui.UI.Dialog)
                .setHost(host,"ctl_dialog1")
                .setLeft(49)
                .setTop(10)
                .setWidth(430)
                .setHeight(460)
                .setCaption("How to integrate jQuery and HighCharts?")
            );
            
            host.ctl_dialog1.append(
                (new xui.UI.Div)
                .setHost(host,"ctl_div13")
                .setDomId("a_container")
                .setLeft(8)
                .setTop(9)
                .setWidth(400)
                .setHeight(400)
            );
            
            return children;
            // ]]code created by CrossUI RAD Tools
        },
        events : {"onReady":"_com_onready"},
        _buildChart:function(){
            // Use jQuery code :
            // Build the chart
            $('#a_container').highcharts({
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: 'Browser market shares at a specific website, 2010'
                },
                tooltip: {
                    pointFormat: '{series.name}: {point.percentage}%',
                    percentageDecimals: 2
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: false
                        },
                        showInLegend: true
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Browser share',
                    data: [
                        ['Firefox',   45.0],
                        ['IE',       26.8],
                        {
                            name: 'Chrome',
                            y: 12.8
                        },
                        ['Safari',    8.5],
                        ['Opera',     6.2],
                        {name:'Others', y:  0.7}
                    ]
                }]
            });
        },
        _com_onready : function (com, threadid){
            var ns=this;
            // You can include them in html file
            xui.include("$","//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){
                xui.include("Highcharts","//crossui.com/test3parts/highcharts/highcharts.js",function(){
                    ns._buildChart();
                });
            });
        }
    }
});
   

Locked