How to integrate jQuery and HighCharts?

Find code here before you post.

How to integrate jQuery and HighCharts?

Postby linb » Mon May 06, 2013 12:28 pm

Integrated-HighCharts.PNG
Integrated-HighCharts.PNG (22.54 KiB) Viewed 3524 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}: <b>{point.percentage}%</b>',
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("$","http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){
xui.include("High"+"charts","http://www.crossui.com/test3parts/high"+"charts/highcharts.js",function(){
ns._buildChart();
});
});
}
}
});
   
linb
Site Admin
 
Posts: 102
Joined: Thu Apr 25, 2013 6:51 am

Return to CrossUI Code Snaps

Who is online

Users browsing this forum: No registered users and 1 guest

cron