Add a timeline diagram chart to your APEX app - Part 2 of the HighChart Series

How to add a timeline diagram chart to your APEX app using HighCharts and JQuery.  This is the second in the series of blog posts showing you how to add HighCharts to your APEX application.

Demo

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.  

I work for the University of Glasgow and the next project I am starting is an APEX project where staff members apply for academic promotion. There are many stages to the application process, manager approval, board of review, college review, etc.  A timeline diagram displaying the process to the users will be ideal.  This is how I will do it.

As an aside, for American readers this is a fascinating story I have recently learned about the University.  James McCune Smith born a slave and the first African American to receive a medical degree, when he applied for entry to several American universities he was refused admission on account of his race. Founded in 1451, the University of Glasgow the fourth oldest university in the English-speaking world stepped in and offered him a place, which he took up in 1832.  The University has recently opened a building in his name which I am immensely proud of.

Anyway back to the blog.........

The chart reads the data points from an Interactive Report on the page. Create the Interactive Region with static ID IR_STATIC_ID using the following SQL source;

select 'First dogs' as VALUE_1,

 '1951: First dogs in space' as VALUE_2, 

'22 July 1951 First dogs in space (Dezik and Tsygan) ' as VALUE_3 from DUAL

Union

select 'Apollo–Soyuz Test Project' as VALUE_1, 

'1975: First multinational manned mission' as VALUE_2, 

'The mission included both joint and separate scientific experiments, and provided 

useful engineering experience for future joint US–Russian space flights, 

such as the Shuttle–Mir Program and the International Space Station. ' as VALUE_3 

from DUAL

Union

select 'First space station' as VALUE_1, 

'1971: First space station' as VALUE_2, 

'Salyut 1 was the first space station of any kind, launched into low Earth 

orbit by the Soviet Union on April 19, 1971.' as VALUE_3 from DUAL

Union

select 'First human on the Moons' as VALUE_1, 

'1969: First human on the Moon' as VALUE_2, 

'First human on the Moon, and first space launch from a celestial body

 other than the Earth. First sample return from the Moon' as VALUE_3 from DUAL

Union

select 'First human spaceflight' as VALUE_1,

 '1961: First human spaceflight (Yuri Gagarin)' as VALUE_2, 

'First human spaceflight (Yuri Gagarin), and the first human-crewed orbital 

flight ' as VALUE_3 from DUAL

Union

select 'Sputnik 1' as VALUE_1, '1957: First artificial satellite' as VALUE_2, 

'4 October 1957 First artificial satellite. First signals from space. ' as VALUE_3 

from DUAL

Create a static region which will display the timeline diagram chart in the Header and Footer section header text;

<script src="https://code.highcharts.com/highcharts.js"></script>

<script src="https://code.highcharts.com/modules/timeline.js"></script>

<script src="https://code.highcharts.com/modules/exporting.js"></script>

<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">

    <div id="container"></div>

</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: 'timeline'

    },

    accessibility: {

        screenReaderSection: {

            beforeChartFormat: '<h5>{chartTitle}</h5>' +

                '<div>{typeDescription}</div>' +

                '<div>{chartSubtitle}</div>' +

                '<div>{chartLongdesc}</div>' +

                '<div>{viewTableButton}</div>'

        },

        point: {

            valueDescriptionFormat: '{index}. {point.label}. {point.description}.'

        }

    },

    xAxis: {

        visible: false

    },

    yAxis: {

        visible: false

    },

    title: {

        text: 'Timeline of Space Exploration'

    },

    subtitle: {

        text: 'Info source: <a href="https://en.wikipedia.org/wiki/Timeline_of_space_exploration">www.wikipedia.org</a>'

    },

    colors: [

        '#4185F3',

        '#427CDD',

        '#406AB2',

        '#3E5A8E',

        '#3B4A68',

        '#363C46'

    ],

 series: [{

        data: getDataFromInteractiveReport('IR_STATIC_ID')

    }]

});

(You can have a play with configuration options in HighCharts Fiddle and then change the options in the code)

the chart reads the data from the Interactive Report to display on the chart;

function getDataFromInteractiveReport(staticID){

    var result = []; // array of [name, label, description] 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(),

                 label: $(this).find("td:eq(1)").text(),

                    description: $(this).find("td:eq(2)").text()});

        }

    });

    var result = result.reverse();

    return result;

}

Highcharts needs the Interactive Report to be present on the page to get the values to plot on the graph. In this case I  don't need the Interactive report displayed on the page, so I will 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 1 - Dumbell Chart