0

I'm a greenhorn in JavaScript & other JavaScript technologies. I've got some graphs plotted using google charts on a html page. I'd like to do the below on every chart on the page.

  1. Have a maximize button like the one in videos to maximize every the chart to full screen when I click on the maximize icon.
  2. Restore it back to it's original size when I exit the full screen mode.

If adding the button to maximize is a big task, being able to maximize on double clicking the graph is also fine.

I've plotted each of the graphs in a html 'div' as instructed in googlechart examples. I'd love to hear from anyone willing to help please.

The graphs get plotted in div elements plot4,plot8 & plot13.

<div>
    <div id="plot4" class="plot_graph" style="float: left; width: 31%;"></div>
    <div id="plot8" class="plot_graph" style="float: left; width: 31%;"></div>
    <div id="plot13" class="plot_graph" style="float: right; width: 32%;"></div>
</div>
User12345
  • 325
  • 1
  • 7
  • 20
  • Duplicate: http://stackoverflow.com/questions/16308779/how-can-i-hide-show-a-div-when-a-button-is-clicked – Sukima Jun 14 '15 at 23:36
  • Hello Sukima - I don't think it's a duplicate of another question. My question is about maximize/minimize & adding an icon to the graph to maximize/minimize. I'd appreciate any pointers to that please. – User12345 Jun 14 '15 at 23:45
  • I think this is more of a duplicate of http://stackoverflow.com/questions/18464554/how-can-i-stretch-a-div-to-full-screen-upon-clicking-a-button – tavnab Jun 14 '15 at 23:46
  • Hello - I've reviewed the posts & got an idea of what is to be done & hence, this next question. My structure of html page is as per the question. (I've updated the contents.). I'm coding the size of the tables containing the graphs to be 33% in width. Could you please help address the maximizing/minimizing in my particular case? – User12345 Jun 15 '15 at 00:38
  • I changed my code to contain only div. Tables in there made no sense obviously. Learnt a different way to do things. Now, the div element expands however the chart still remains the same size. Should I do a redraw chart to new size? Any guidance please? I've updated the question with my new code. I've added this to handle the click - $(function(){ $('div#plot4').click(function (){ $(this).css('height',"100%").css('width',"100%"); }); }); – User12345 Jun 15 '15 at 01:46

0 Answers0