Pocket Query DataTables

[Mark Robinson]

Hi,

I am trying to create a Column Chart using Pocket Query. Could you please tell me how to create a DataTable like this: (I would place this in the Template)

var dataTable = new google.visualization.DataTable();

Assuming this is accepted by this line:

PocketQuery.chart('ColumnChart', {
    dataTable: dataTable,
    options: options
});

Or tell me the data array format required to create a stacked column chart showing dates on the X-axis and stacked values of data on the Y-Axis.

[Mark Robinson · Accepted solution]

Christian, 

I agree with you and that works to a point see below. First of all I have three SUM'ed values since I would like a stacked chart so I send in options too.

Like this: (Quick Example Code)

var options = {
interpolateNulls: true,
chartArea: {left: 100, width: '85%', height: '60%'},
title: 'Total Hours over Time',
titleTextStyle: {fontSize: 15},
vAxis: {
title: 'Accumulated Hours',
minValue: 0,
maxValue: 18000
},
legend: {position: 'top', maxLines: 3}
};

// Could pass this
options.isStacked = true;

PocketQuery.chart('ColumnChart', options);

and it creates the chart below. 

But the dates are converted from the Human readable date shown in the Table below to the number of seconds which is unless. Therefore I wanted to re-construct the DataTable array applying new Date(X-Axis.value) to every element then send the new form Data Table to the PocketQuery Chart Function like this:

// 
PocketQuery.chart('ColumnChart', {
dataTable: dataTable,
options: options
});

But it won't let me create a google DataTable and I don't know the format required if its built as an array.

So close, thanks for your assistance and quick response. I am liking Pocket Query.

PocketQuery_ColumnChart_Wrong_Date.PNG

[Christian Koch]

The simplest way to change that is to use date_format in the SQL statement

SELECT DATE_FORMAT(your_date ,'%Y-%m-%d') ...

[Felix Grund (Scandio)]

Hi Mark,

Thank you for your interest in PocketQuery! The dataTable option must be an array of arrays representing the values of your table. You can call PocketQuery.queryArray() to obtain the result of your query and then iterate over it creating your own array.

Something along these lines:

(function() {
	var result = PocketQuery.queryArray();
	var dataTable = [];
	jQuery.each(PocketQuery.queryArray(), function(index, row) {
		dataTable.push([row.column1name, row.column2name, row.column3name]);
	});
	PocketQuery.chart('ColumnChart', {dataTable: dataTable});
}());

When you create the new rows for the dataTable, you can do arbitrary transformations with the values using JavaScript.

Please also check this: https://answers.atlassian.com/questions/32983676 and this: https://answers.atlassian.com/questions/39138318

Best, Felix (Scandio)

[Christian Koch]

Hi Mark,

if your SQL statement results proper columns PocketQuery.chart() handles the data for you. For example you use a statement like this

SELECT DISTINCT month, SUM(value) as result FROM table GROUP BY month;

then your template is very simpe

<script>
PocketQuery.chart('ColumnChart')
</script>

and it works. If you want to use Google chart options this is a second parameter. You'll find more information in the documentation https://www.scandio.de/atlassian/en/plugins/pocketquery in the template section and in the JavaScript API section.

Update:

If you want to stacked column the use

<script>
PocketQuery.chart('ColumnChart', {isStacked: true})
</script>

But in that case your statement must return more columns.