Google Visualization available in Plomino

A new field type allows to display Google Visualization tools into Plomino forms.

Google Visualizations offers a large choice of data graphical rendering like organizational charts, maps, motion charts, etc. (see here for more information about Google Visualization).

Basic example:

• create a form and add a new field,
• select "Google visualization" type
• go to the settings tab, here you can insert your Google Visualization javascript code. Just keep the default value (which build an organizational chart)
• create a new document with this form, and enter the following value in your field:

'Arthur','Arthur<div style="color:red; font-style:italic">King</div>'|''|'King Arthur'
'Merlin'|'Arthur'|'Wizard'
'Lancelot'|'Arthur'|'Knight'
'Galahad'|'Lancelot'|'Son'

Once saved, you will see your chart (see attached screenshot).

As you can see the datatable is provided using newline and pipe separators.

But the storage fomat is a basic Python list of lists.

So you may produce your chart using a formula by changing its type to Computed for display, and by providing a formula like this:

[['\'Arthur\',\'Arthur<div style="color:red; font-style:italic">King</div>\'', "''", "'King Arthur'"], ["'Merlin'", "'Arthur'", "'Wizard'"], ["'Lancelot'", "'Arthur'", "'Knight'"], ["'Galahad'", "'Lancelot'", "'Son'"]]

Regarding the Javascript code, you can use all the APIs described in the Google documentation, the only requirements are:

• create a var named gvisudata to handle the data table
• do not declare rows and cells, but call the getGVisuCells() method (which declare the correct number of rows and provide the cells values using the Plomino field value)
• the target DIV element is necessarily named googlevisualization_div, so use this id when instanciating your chart

Here is an example to display a motion chart:

google.load('visualization', '1', {'packages':['motionchart']});
google.setOnLoadCallback(drawChart);
var gvisudata;
      function drawChart() {
        gvisudata = new google.visualization.DataTable();
        gvisudata.addColumn('string', 'Fruit');
        gvisudata.addColumn('date', 'Date');
        gvisudata.addColumn('number', 'Sales');
        gvisudata.addColumn('number', 'Expenses');
        gvisudata.addColumn('string', 'Location');
        getGVisuCells();
        var chart = new google.visualization.MotionChart(document.getElementById('googlevisualization_div'));
        chart.draw(gvisudata, {width: 600, height:300});
      }