Crystalreportsacee
Posts: 3
Joined: Thu Jun 30, 2011 12:52 am

Why would the code hangs?

This small app is a demo of using highcharts.
if you notice the button called 'Dietary Department' i am not sure what I want to do with it, when clicked it displays a empty page. i would rather it redisplayed the first page then.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Highchart Dashboard samples</title>
<script src="Javascript/jquery-1.5.1.js" type="text/javascript"></script>
<script src="Javascript/highcharts/highcharts.js" type="text/javascript"></script>
<script src="Javascript/highcharts/modules/exporting.js" type="text/javascript"></script>
</head>


<script language="javascript" type="text/javascript">
var chart;
$(document).ready(function() {

var colors = Highcharts.getOptions().colors,
categories = ['Meat', 'Beverages', 'Fish', 'Dairy', 'Groceries'],
name = 'Dietary Department ',


data = [{
y: 55.11,
color: colors[0],
drilldown: {
name: 'Meat Category',
categories: ['Chicken 1/8', 'Frozen Chopped Meat', 'Chicken Cutlet', 'Meatballs'],
data: [33.06, 10.85, 7.35, 2.41],
color: colors[0]
}
}, {
y: 21.63,
color: colors[1],
drilldown: {
name: 'Beverages Category',
categories: ['Snapple', 'Pepsi', 'Poland Springs', 'Kedem Grape Juice', 'Apple Juice'],
data: [13.52, 5.43, 1.58, 0.83, 0.20],
color: colors[1]
}
}, {
y: 11.94,
color: colors[2],
drilldown: {
name: 'Fish',
categories: ['Tilapia', 'Tuna Fish', 'Salmon', 'Gefilte', 'Flounder',
'Fish1', 'Fish2', 'Fish3'],
data: [9.91, 0.50, 0.36, 0.32, 0.22, 0.19, 0.12, 0.12],
color: colors[2]
}
}, {
y: 7.15,
color: colors[3],
drilldown: {
name: 'Dairy',
categories: ['Milk', 'hard cheese', 'Cottage Cheese', 'Yogurt', 'Ice Cream',
'Dairy', 'Dairy'],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
color: colors[3]
}
}, {
y: 2.14,
color: colors[4],
drilldown: {
name: 'Groceries',
categories: ['Paper wrap', 'Coffee', 'Tea'],
data: [1.65, 0.37, 0.12],
color: colors[4]
}
}];

function setChart(name, categories, data, color) {
chart.xAxis[0].setCategories(categories);
chart.series[0].remove();
chart.addSeries({
name: name,
data: data,
color: color || 'white'
});
}

chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Category Spending, June 2011'
},
subtitle: {
text: 'Click the columns to view low and high. Click again to view category.'
},
xAxis: {
categories: categories
},
yAxis: {
title: {
text: 'Total percent Category'
}
},
plotOptions: {
column: {
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
} else { // restore
setChart(name, categories, data);
}
}
}
},
dataLabels: {
enabled: true,
color: colors[0],
style: {
fontWeight: 'bold'
},
formatter: function() {
return this.y +'%';
}
}
}
},
tooltip: {
formatter: function() {
var point = this.point,
s = this.x +':<b>'+ this.y +'% Spending</b><br/>';
if (point.drilldown) {
s += 'Click to view '+ point.category +' versions';
} else {
s += 'Click to return to browser brands';
}
return s;
}
},
series: [{
name: name,
data: data,
color: 'white'
}],
exporting: {
enabled: false
}
});


});

</script>


<%--<script language="javascript" type="text/javascript">
function CallPage()
{
alert('1');
}
var chart;
$(document).ready(function() {


chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'bar',
marginRight: 130,
marginBottom: 50
},
title: {
text: 'Top item by category',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
// categories: ['Meat', 'Beverages', 'Canned Fruit', 'Fish', 'Frozen Vegetables', 'Nutrional Supplements',
// 'Produce', 'Dairy', 'Groceries']


categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Value (Kg)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
// formatter: function() {
// return '<b>'+ this.series.name +'</b><br/>'+
// this.x +': '+ this.y +'Kg';


formatter: function() {
return '<b>'+ this.series.name +'</b>' + '<a href="#" onclick="CallPage();">click</a>' +'<br/>'+
this.x +': '+ this.y +'Kg';
}
},
point:{
events: {
click: function(event) {
hs.htmlExpand($('<a href="test.php?category='+ this.category + '"></a>')[0], { objectType: 'ajax'})
return false;


}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
exporting: {
url: "http://localhost:2001/highcharts_export.aspx"
}
,
series: [{
name: 'Meat',
data: [5, 15, 20]
}, {
name: 'Beverages',
data: [3, 5,10,15]
}, {
name: 'Canned fruit',
data: [2, 10, 15, 18]
}, {
name: 'fish',
data: [4,6,10,15]
},{
name: 'frozen vegetables',
data: [5, 8,13,20]
},
{
name: 'Nutrional supplements',
data: [2, 6,10,14]
},
{
name: 'produce',
data: [1.5,2,4,6]
}
,
{
name: 'dairy',
data: [5,13,15,20]
}
,
{
name: 'groceries',
data: [ 14,16,18,20]
}
]
});


});

</script>--%>

<body>
<form id="form1" runat="server">
<div id="container" style="width:900px;">

</div>
</form>
</body>
</html>

Return to “Highcharts Usage”