Pocket Query DataTables

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.

 

3 answers

1 accepted

This widget could not be displayed.

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

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

SELECT DATE_FORMAT(your_date ,'%Y-%m-%d') ...
This widget could not be displayed.

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.

This widget could not be displayed.

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)

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted 4 hours ago in Europe

ABUG-20 Livestream: The 20th Atlassian Belgian User Group (including a Summit 2018 Recap)

You can't/couldn't make it to our User Group today? Don't worry, we'll be live streaming and recording the event for your sake. Comments, questions, basically any reactions can be posted below! New...

29 views 0 0
View post

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you