Responsive/fluid Line Chart?

[Julien]

Hi,

Is there any way I can make a responsive line chart, i.e., a line
chart whose width wouldn't be hardcoded but would depend e.g. on the
CSS container's width?

Thanks!

Julien

[asgallant]

I believe that if you set the 'width' option to a percentage, it will draw the chart based on the container div's dimensions.

[Julien Chaumond]

Thanks for your answer.

That would not work if I resize my browser window though, would it?

(An example of what I mean using Flot: http://people.iola.dk/olau/flot/examples/resize.html)

Julien

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/zCCBLC_BAisJ.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[asgallant]

No, it would not.  You have to redraw the chart to make it have different dimensions.

[Suja Arjunan]

Hi Julien,

i need to generate responsive chart. Have you find any solution for responsive layout other than redraw it again ? 

Thanks,

Suja Arjunan

[Daniel LaLiberte]

Hi Suja (and Julien if he is still paying attention),

Once a chart is drawn, it is not adaptable to changes in container size or any other kinds of changes in options or data without redrawing.  However, you may be surprised at how fast redrawing is since there are various optimizations in place to reduce the amount of work required in redrawing.  Is there a reason you might not be able to do a redraw?

dan

--

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 http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.

--

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   562D 5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Mickey Kay]

Hi Daniel,

This is exactly what I need as well. Can you point me to more info on how to redraw the chart on window resize/orientation-change? I need to create some responsive charts, and if fluid percentage widths won't work, I'll need to figure out this redraw solution. Thanks!

[Andrew Gallant]

You can add this to the end of your chart drawing function (assumes "chart" is your chart object, "data" is your DataTable/DataView, and "options" is your chart options, this should work whether you are using plain chart objects, ChartWrappers, or a Dashboard).

Plain javascript example:

function resizeCharts () {
    // redraw charts, dashboards, etc here
    chart.draw(data, options);
}
if (window.addEventListener) {
    window.addEventListener('resize', resizeCharts);
}
else if (window.attachEvent) {
    window.attachEvent('onresize', resizeCharts);
}
else {
    window.onresize = resizeCharts;
}

jQuery example:

function resizeCharts () {
    // redraw charts, dashboards, etc here
    chart.draw(data, options);
}
$(window).resize(resizeCharts);

[Henry Noerdlinger]

Gold, Andrew, your solution is golden.

[northatl...@mac.com]

Wow - that makes a big difference. Set me thinking that it also is a great way to deal with mobile devices - for example:

$(window).on("resize orientationchange", function(){

    drawChart();

});