javascript - Chart Formatting in ChartWrapper in Google Charts -
i'm creating variety of charts using dashboard portion of google charts.
to make charts i'm using convention:
var chartname = new google.visualization.chartwrapper({ // lots of options here });
however, there customization details not being called when enter them inside chartwrapper object.
in particular, trendlines, changing bars horizonta on bar chart, , making bars stacked.
there others, these should suffice question because they're contained within single chart i'm trying troubleshoot.
i assume there's common element i'm missing in of these, why thought best include them in single question. there must detail chartwrapper syntax i'm not getting right.
for of above mentioned items i'm first placing these in 'options' object, , own key directly inside chartwrapper() without additional nesting.
to more specifics:
code:
here's example code that's not working:
var childrenhelpedchart = new google.visualization.chartwrapper({ 'charttype' : 'bar', 'containerid' : 'chart_div2', 'view' : { 'columns' : [0, 2, 3] }, 'options' : { 'height' : 400, 'trendlines' : {0 : {}}, 'isstacked' : 'percent', 'bar' : 'horizontal' }, });
the chart use responds 'height' variable, 'trendlines', 'isstacked' , 'bar' fall on deaf ears.
however, if place them outside 'options' object don't show in chart.
for example, below code has no effect.
code2:
var childrenhelpedchart = new google.visualization.chartwrapper({ 'charttype' : 'bar', 'containerid' : 'chart_div2', 'view' : { 'columns' : [0, 2, 3] }, 'options' : { 'height' : 400 }, 'trendlines' : { 0 : {} }, 'bar' : 'horizontal', isstacked : 'percent' });
i see 2 similar questions here , here, neither of have answers.
if it's helpful here's entire script i'm using generate chart:
script:
google.charts.setonloadcallback(initialize); function initialize() { var query = new google.visualization.query('https://docs.google.com/spreadsheets/d/1lmmpjs2bz3efqwexb4kxq_ujwollq1pmcahy6w4ipce/gviz/tq?gid=1104676809'); query.send(drawdashboard) } function drawdashboard(response) { var data = response.getdatatable(); var dashboard = new google.visualization.dashboard( document.getelementbyid('dashboard_div')); var storytimedatefilter2 = new google.visualization.controlwrapper({ 'controltype': 'daterangefilter', 'containerid': 'date_filter_div2', 'options' : { 'filtercolumnindex' : 0 } }); var childrenhelpedchart = new google.visualization.chartwrapper({ 'charttype' : 'bar', 'containerid' : 'chart_div2', 'view' : { 'columns' : [0, 2, 3] }, 'options' : { 'height' : 400 }, 'trendlines' : { 0 : {} }, 'bar' : 'horizontal', 'isstacked' : 'percent' }); dashboard.bind(storytimedatefilter2, childrenhelpedchart); dashboard.draw(data); }
the charts using material charts
there several options not work material charts
can find list here --> tracking issue material chart feature parity #2143
to correct, use core chart versions,
additional option --> theme: 'material'
material = 'bar'
var childrenhelpedchart = new google.visualization.chartwrapper({ 'charttype' : 'bar', // <- material version 'containerid' : 'chart_div2', 'view' : { 'columns' : [0, 2, 3] }, 'options' : { 'height' : 400, 'trendlines' : {0 : {}}, 'isstacked' : 'percent', 'bar' : 'horizontal' }, });
core = 'barchart'
(horizontal) -- or -- 'columnchart'
(vertical)
var childrenhelpedchart = new google.visualization.chartwrapper({ 'charttype' : 'barchart', // <-- core version 'containerid' : 'chart_div2', 'view' : { 'columns' : [0, 2, 3] }, 'options' : { 'height' : 400, 'trendlines' : {0 : {}}, 'isstacked' : 'percent', 'theme' : 'material' // <- material theme }, });
Comments
Post a Comment