Add a Sparkline to an Interactive Report

This post will show you how to add a sparkline with interactive mouse-over to an Interactive Report with a couple of lines of JavaScript.

Demo

It's highly customisable where you can change the type of sparkline in the sparkline config. This is a box plot;

We are using JQuery sparklines, You can change the sparkline to any of the ones listed below.  Use the 'try it out' section on JQuery sparklines to get the sparkline type and  custom values you require;

First upload jquery.sparkline.js to static application files and include it on your page;

Create an Interactive Report region giving it a static id of IR_STATIC_ID, use the following SQL source;

select 'Product 1' as PRODUCT, '90' as VALUE_0,100.3 as VALUE_1, 

200 as VALUE_2, '121' as VALUE_3, '' as Sparkline from DUAL

UNION

select 'Product 2' as PRODUCT, '80' as VALUE_0, 103 as VALUE_1, 

140 as VALUE_2, '99' as VALUE_3, '' as Sparkline from DUAL

UNION

select 'Product 3' as PRODUCT, '1,345' as VALUE_0, 1000 as VALUE_1, 

900 as VALUE_2, '1,200' as VALUE_3, '' as Sparkline from DUAL

UNION

select 'Product 4' as PRODUCT, '7' as VALUE_0, 10 as VALUE_1, 

7 as VALUE_2, '124' as VALUE_3, '' as Sparkline from DUAL

UNION

select 'Product 5' as PRODUCT, '756' as VALUE_0, 432.99 as VALUE_1, 

632 as VALUE_2, '134' as VALUE_3, '' as Sparkline from DUAL

UNION

select 'Product 6' as PRODUCT, '66' as VALUE_0, 34 as VALUE_1, 

333 as VALUE_2, 'non number' as VALUE_3, '' as Sparkline from DUAL

add this code into execute when page loads. The code should work on your existing IR as long as you add a new column at the end to display the sparkline.  In my dummy SQL above the column is called Sparkline.

// Uses JQuery sparkline to add sparklines to an APEX Interactive Report.

// https://omnipotent.net/jquery.sparkline/#s-about

//

// Comments welcome, how about building this into an Apex Plugin?

// davielang@gmail.com

$(function(){  

// Get column values for each row and place them in the cols array 

var data =$.each($('#IR_STATIC_ID tr'), function(index, tr){

    var cols = []; // place the row column data in here

    // for each column in the row

    $.each($(tr).find("td").not(":first"), function(columnIndex, td){                       

        // add column value to cols array only if its a number and not empty

        if(!isNaN($(td).text().replace(',','')) && $(td).text().length > 0)

            cols.push($(td).text().replace(',',''));

      

        // if we are at the last column then add the sparkline.

        if ((columnIndex+2)==$('#IR_STATIC_ID').columnCount()){

            var dataSpan = $("<span>").appendTo($(td));       

            dataSpan.sparkline(cols, {

                // For more options, see https://omnipotent.net/jquery.sparkline/#common

                type: 'box',

                barWidth : '10px',

                width : '100px'

            });

        }    

    })

  });

})

$.fn.columnCount = function() {

    return $('th', $(this).find('tbody')).length;

};

 (Note the code expects the first column to be text, if you do not have this change the code accordingly.)

I was having difficulty showing the tooltip as I assume the APEX CSS was causing the sparkline tooltip some issues.  Add this to page inline CSS;

    .jqstooltip { box-sizing: content-box;}

The above example is a box plot.  To get a bar sparkline change type: 'box' to type: 'bar' and refresh the page;

Type can be one of 'line', 'bar', 'tristate', 'discrete', 'bullet', 'pie' or 'box'. Try them all out!