How to add a DumbBell chart to your APEX app using HighCharts and JQuery. This is the first in the series of blog posts showing you how to add HighCharts to your APEX application.
I have been using HighCharts in my web apps for a number of years and in my opinion its the best charting JavaScript library out there, its free to use for non-commercial use, robust, well documented, mobile friendly and a great addition to your APEX app.
The chart reads the data points from an Interactive Report.
Create an Interactive Region with static ID
IR_STATIC_ID using the following SQL source;
select 'Australie' as VALUE_1, 60 as VALUE_2, 70 as VALUE_3 from DUAL
UNION
select 'New Zealand' as VALUE_1, 70 as VALUE_2, 80 as VALUE_3 from DUAL
UNION
select 'Scotland' as VALUE_1, 80 as VALUE_2, 90 as VALUE_3 from DUAL
UNION
select 'England' as VALUE_1, 50 as VALUE_2, 70 as VALUE_3 from DUAL
UNION
select 'France' as VALUE_1, 55 as VALUE_2, 90 as VALUE_3 from DUAL
UNION
select 'Spain' as VALUE_1, 67 as VALUE_2,98 as VALUE_3 from DUAL
UNION
select 'United States' as VALUE_1, 82 as VALUE_2, 89 as VALUE_3 from DUAL
UNION
select 'Peru' as VALUE_1, 70 as VALUE_2, 79 as VALUE_3 from DUAL
UNION
select 'Portugal' as VALUE_1, 55 as VALUE_2, 95 as VALUE_3 from DUAL
UNION
select 'India' as VALUE_1, 65 as VALUE_2, 85 as VALUE_3 from DUAL
UNION
select 'Senegal' as VALUE_1, 45 as VALUE_2, 65 as VALUE_3 from DUAL
Create a static region which will display the BarBell chart in the Header and Footer section header text;
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/dumbbell.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
</p>
</figure>
(reading directly from HighCharts, if it works for you download them to static application files)
Add the following code to execute when page loads. This is the code that contains the configuration of the chart and loads the data from the Interactive Report;
Highcharts.chart('container', {
chart: {
type: 'dumbbell',
inverted: true
},
legend: {
enabled: false
},
subtitle: {
text: '1960 vs 2018'
},
title: {
text: 'Change in Life Expectancy'
},
tooltip: {
shared: true
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Life Expectancy (years)'
}
},
series: [{
name: 'Life expectancy change',
data: getDataFromInteractiveReport('IR_STATIC_ID')
}]
});
(You can have a play with configuration options in HighCharts Fiddle and then change the options in the code)
this code reads the data from the Interactive Report to display on the chart;
function getDataFromInteractiveReport(staticID){
var result = []; // array of [name, low, high] to pass to HighCharts
// For each row in the IR
var data =$.each($('#'+staticID+' tr'), function(index, tr){
if ($(this).find("td:eq(0)").text())
result.push( {name: $(this).find("td:eq(0)").text(),
low:Number($(this).find("td:eq(1)").text()),
high:Number($(this).find("td:eq(2)").text())});
});
return result;
}
Highcharts needs the Interactive Grid to be present on the page to get the values to plot on the graph. If you dont need the Interactive report displayed on the page you can hide the interactive report using the following CSS;
#IR_STATIC_ID {
display: none;
}
Highcharts is free to use for personal projects, school websites, and non-profit organizations. For commercial applications you must purchase a license.
Part 2 - Add a timeline diagram chart to your APEX app
Part 3 - Add a timeline series chart to your APEX app
Comments
Post a Comment