With a little tricks with Javascript and CSS, the phpChart can be responsive. It stretches and shrinks based on the page width, perfect for mobile devices such as iOS and Android.
The following code snippet works on any charts. Simply copy and paste them to the END of your page before </body> tag.
CSS:
1 2 3 4 5 6 | .jqplot-target{ position: relative !important; width: auto !important; /* max-width: 1000px; */ /* OPTIONAL */ min-width: 300px; /* OPTIONAL */ } |
Javascript:
Please note that canvas object name is the chart id with underscore prefix. For instance, if id is “chart1”, then the javascript name is “_chart1”.
1 2 3 4 5 6 7 | <script>// <![CDATA[ $(document).ready(function(){ $(window).resize(function() { _chart1.replot( { resetAxes: true } ); }); }); // ]]></script> |
Live demo – Try resize the window using mouse!
