Be Responsive!

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!

No related content found.

Tags: , ,

Top

Clicky

PHP Charts & Graphs
Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.