You need to sign in to do that
Don't have an account?
Alo Sen
'columnrange' highchart in apex page
We have been successfully using the hightcharts in our apex pages. There is a need for a column range chart and I was just trying to render the page as is from a highchart example. Somehow the apex does not like chart: {
type: 'columnrange'
}
Other charts like bar, column can be easily rendered.
Here is the code:
<apex:page >
<head>
</head>
<body>
<apex:outputLink target="_Blank" value="/apex/test_portfolio" id="theLink" ><apex:image id="ITPR_EnlargeIcon" value="{!$Resource.ITPR_EnlargeIcon}" /></apex:outputLink>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="{!URLFOR($Resource.Highcharts)}"></script>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
title: {
text: 'Temperature variation by month'
},
subtitle: {
text: 'Observed in Vik i Sogn, Norway, 2009'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature ( °C )'
}
},
tooltip: {
valueSuffix: '°C'
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
return this.y + '°C';
}
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
data: [
[-9.7, 9.4],
[-8.7, 6.5],
[-3.5, 9.4],
[-1.4, 19.9],
[0.0, 22.6],
[2.9, 29.5],
[9.2, 30.7],
[7.3, 26.5],
[4.4, 18.0],
[-3.1, 11.4],
[-5.2, 10.4],
[-13.5, 9.8]
]
}]
});
});
</script>
</body>
</apex:page>
What could be the reason for this code to not work within the apex page? Is there any other suggestions on creating a column range chart?
Here is the link to the actual example in Highchart.
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/columnrange/
I had originally posted this question to the Salesforce community and Deepak Anand had advised to look for JS errors.
I do see two same errors
Failed to load resource: the server responded with a status of 404 (Not Found) on a .png file. Not that I understand what the actual issue is.
type: 'columnrange'
}
Other charts like bar, column can be easily rendered.
Here is the code:
<apex:page >
<head>
</head>
<body>
<apex:outputLink target="_Blank" value="/apex/test_portfolio" id="theLink" ><apex:image id="ITPR_EnlargeIcon" value="{!$Resource.ITPR_EnlargeIcon}" /></apex:outputLink>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="{!URLFOR($Resource.Highcharts)}"></script>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
title: {
text: 'Temperature variation by month'
},
subtitle: {
text: 'Observed in Vik i Sogn, Norway, 2009'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature ( °C )'
}
},
tooltip: {
valueSuffix: '°C'
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
return this.y + '°C';
}
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
data: [
[-9.7, 9.4],
[-8.7, 6.5],
[-3.5, 9.4],
[-1.4, 19.9],
[0.0, 22.6],
[2.9, 29.5],
[9.2, 30.7],
[7.3, 26.5],
[4.4, 18.0],
[-3.1, 11.4],
[-5.2, 10.4],
[-13.5, 9.8]
]
}]
});
});
</script>
</body>
</apex:page>
What could be the reason for this code to not work within the apex page? Is there any other suggestions on creating a column range chart?
Here is the link to the actual example in Highchart.
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/columnrange/
I had originally posted this question to the Salesforce community and Deepak Anand had advised to look for JS errors.
I do see two same errors
Failed to load resource: the server responded with a status of 404 (Not Found) on a .png file. Not that I understand what the actual issue is.
Here is the page which I ran in IE and seems working.
- Harsha