- 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();
});
});
}
}
});