Creating queries for individual charts inside a dashboard with multiple charts

Chip Davis

unread,

Aug 2, 2016, 12:02:09 PM8/2/16

to Google Visualization API

I have a dashboard that queries from sheets.

The response becomes my datatable.

I have table charts inside my dashboard and I would like these tables to populate based on queries of my datatable. I can not figure out how to have one table (made in Chartwrapper) run a its own query. The next table would have a separate query. My current workaround is to build my queries inside sheets and place these in added columns in sheets. As a result....my google sheet is starting to get really cluttered. I would rather have these queries inside my charts (script) and keep my sheets data uncluttered. How do I do this?

thx in advance...

Chip Davis

Daniel LaLiberte

unread,

Aug 2, 2016, 12:19:15 PM8/2/16

to Google Visualization API

Chip,

All the charts and controls in one Dashboard are provided data from the dashboard.draw() call, so there is no way to provide different data inside that dashboard (other than by filtering the one data source via controls). But is there a reason you need to put all the charts in one dashboard?

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/93b08e0f-9745-4f2c-9f20-d10ff9b7a3e5%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com 5CC, Cambridge MA

Chip Davis

unread,

Aug 3, 2016, 7:22:36 PM8/3/16

to Google Visualization API

I really just need them to appear on one page so I could create another query outside my drawVis function BUT.....I have tried I am an not knowledgeable enough to now where to place the script to get that to work.   Would it go after the final close "}" (see below)? NOTE ALSO: I would like to be able to pass a control filter selection made in dashboard to chart outside of dashboard...is this doable?

// Create the dashboard.
       var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')).

       bind([CompanyFilter], [RRR, EBITDAMarg, CACTrend, PortfolioWeightingFMV, FMVPortfolio,Description, RevSummary, EBITDASummary, PaybackSummary]).
       //, EBITDAMarg, CACTrend, PortfolioWeightingFMV, FMVPortfolio,Description
       bind([LPFilter],[LPAccounts]).
        // Draw the dashboard
       draw(view);


    });

}
</script>

Daniel LaLiberte

unread,

Aug 4, 2016, 9:42:01 AM8/4/16

to Google Visualization API

We can't tell just from that snippet where you should insert code to do another query. Generally, you want the following code structure.

google.charts.load(...)

google.charts.setOnLoadCallback(drawVisFunction);

function drawVisFunction () {

// Everything to fetch data and draw visualizations .

// fetch some data

// draw a charts or dashboard, via handler for fetching data

...

// fetch some different data

// draw a charts or dashboard, via handler for fetching data

...

}

</script>

You can handle events from controls, get the state of what was selected in the control, and do whatever you want with that.

--

You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.

Visit this group at https://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/aa3bc9da-1be6-426d-99db-4bbce986ffaf%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Chip Davis

unread,

Aug 5, 2016, 2:00:58 PM8/5/16

to Google Visualization API

here is there code: please tell me exactly where (near the bottom) I can place the get new data and draw additions...I have tried a few places and keep blowing up. I am a simpleton.

apologies,

cld

<html>

<head>

google.load('visualization', '1', {'packages':['controls']});

google.setOnLoadCallback(drawVisualization);

function drawVisualization () {

var queryString = encodeURIComponent('SELECT *');

var query = new google.visualization.Query('https://docs.google.com/spreaz/tq?gid=0&headers2&tq= + queryString);

query.send(function (response) {

if (response.isError()) {

alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());

return;

}

var data = response.getDataTable();

var view = new google.visualization.DataView(data);

// Filter by Company

var CompanyFilter = new google.visualization.ControlWrapper({

'controlType': 'CategoryFilter',

'containerId': 'control_div',

'options': {

'filterColumnIndex': 1,

'ui': {

label: '',

allowTyping: false,

allowMultiple: false,

allowNone: false,

//selectedValuesLayout: 'top',

// 'caption': 'Choose metric',

cssClass: 'columnFilter_class'

}

},

state: {

selectedValues: ['LiquidFrameworks']

},

});

var RRR = new google.visualization.ChartWrapper({

'chartType': 'ComboChart',

'containerId': 'RevenueRunRate',

'options': {

'explorer': { actions: ['dragToZoom', 'rightClickToReset'] },

'focusTarget': 'category',

'width': 425,

'height': 275,

'hAxis': {direction: 1, bold: true, format: 'MMM-yy'},

'legend': 'bottom',

'title': 'Growth: (Revenue Run Rate & Bookings)',

'tooltipWidth':40,

'tooltipHeight':40,

'tooltipFontSize':12,

'vAxes': {

0: {title:'Bookings', format: '$#,###',textStyle: {color: '#707B7C'}},

1: {title: 'Revenue Run Rate',format: '$#,###',textStyle: {color: '#2E86C1'}}

},

'series': {1: {targetAxisIndex:0, type: 'line', lineWidth: 5, color:'#2E86C1' , legend: {position:'bottom' }},

0: {targetAxisIndex:1, type: 'area', lineWidth: 5,curveType: 'function', lineDashStyle: [8,2],color:'#707B7C', legend: 'bottom' }

},

'animation': {

duration: 1000,

easing: 'inAndOut'

},

view: {

columns: [0,5,14]

},

});

var EBITDAMarg = new google.visualization.ChartWrapper({

'chartType': 'ComboChart',

'containerId': 'EBITDAMargin',

'options': {

'explorer': { actions: ['dragToZoom', 'rightClickToReset'] },

'focusTarget': 'category',

'width': 425,

'height': 275,

'hAxis': {direction: 1, format: 'MMM-yy'},

'legend': 'bottom',

'vAxes': {

1: {title:'Operating Leverage', textStyle: {color: '3498DB'}},

0: {title: 'EBITDA Margin',textStyle: {color: '#AAB7B8'}}

},

'colors': ['#AAB7B8','3498DB'],

'title': 'Maturity: (EBITDA Margin / Operating Leverage)',

'tooltipWidth':40,

'tooltipHeight':40,

'tooltipFontSize':12,

'seriesType': 'bars',

'series': {1: {type: 'bar'}},

'series': {0: {targetAxisIndex:0, type:'bar'},

1: {targetAxisIndex:1, type: 'line', lineWidth: 5, curveType: 'function', lineDashStyle: [8,2]},

},

'trendlines': {1: {type: 'exponential', lineWidth: 5, tooltip: false, labelInLegend: 'Trend Line'}},

'animation': {

duration: 1000,

easing: 'inAndOut'

},

'view': {

columns: [0, 8,9]

},

});

var CACTrend = new google.visualization.ChartWrapper({

'chartType': 'LineChart',

'containerId': 'CACTrend',

'options': {

'explorer': { actions: ['dragToZoom', 'rightClickToReset'] },

'focusTarget': 'category',

'width': 425,

'height': 275,

'legend': 'bottom',

'hAxis': {direction: 1, format: 'MMM-yy'},

'vAxis': { title: 'Months', format:'#'},

'colors': ['3498DB'],

'title': 'Scalability: (Payback Period)',

'tooltipWidth':40,

'tooltipHeight':40,

'tooltipFontSize':12,

'curveType':'function',

'lineWidth':6,

'series': {0: {lineDashStyle: [8,2]}},

'trendlines': { 0: {}, tooltip: false },

'animation': {

duration: 1000,

easing: 'inAndOut'

},

view: {columns: [0,15]},

});

var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')).

bind([CompanyFilter], [RRR, EBITDAMarg, CACTrend]).

draw(view);

});

}

</script>

On Tuesday, August 2, 2016 at 11:02:09 AM UTC-5, Chip Davis wrote:

Reply all

Reply to author

Forward