CODEWITHSUNDEEP
javascriptjquerymobilecharts
randomtechdude
randomtechdude

Reputation: 41

Google Chart change size based on screen size

I have a question, I am working on a web app, and I have some google charts involved with it. I have successfully managed to get the size of the graphs to change depending on the screen size, although what I want to know is, if there is any way to have the charts change size after someone switches their phone or tablet from portrait to landscape. Right now, once the charts graph, and you switch your phone orientation, the graphs stay the same size, so really it only detects what size the phone screen is once you have the charts graph the first time.

Here is some code (if anyone has a better way of doing this, please let me know...)

function graph(depData, indepData, seriesTitle, title, xTitle,  yTitle, chartTitle, bg) {
    var rlen = 5;
    var graph_string = "http://chart.apis.google.com/chart?cht=lxy";
    graph_string += "&chd=t:";

    var biggest, biggest_indep, biggest_dep; 
    biggest_indep = indepData[0];

    var min_indep = 0;

    //BEGIN FIRST DATA SET
    graph_string += indepData[0];
    for (var i = 1; i < 100; i++) {
        graph_string += ",";
        graph_string += Math.round(indepData[i] * Math.pow(10, rlen)) / Math.pow(10, rlen);
        if (indepData[i] > biggest_indep) {
            biggest_indep = indepData[i];
        }
        if (indepData[i] < min_indep) {
            min_indep = indepData[i];   
        }
    }

    biggest_dep = depData[0];

    graph_string += "|";

    graph_string += Math.round(depData[0] * Math.pow(10, rlen)) / Math.pow(10, rlen);
    for (i = 1; i < 100; i++) {
        graph_string += ",";
        graph_string += Math.round(depData[i] * Math.pow(10, rlen)) / Math.pow(10, rlen);
        if (depData[i] > biggest_dep) {
            biggest_dep = depData[i];
        }
    } 
    //END FIRST DATA SET
    biggest = Math.max(biggest_dep, biggest_indep);
    var biggest_indep_dec = biggest_indep.toFixed(3); 
    var biggest_indep_dec_half = ((biggest_indep + min_indep) / 2).toFixed(3);
    var biggest_indep_dec_fourth = ((biggest_indep + min_indep) / 4).toFixed(3);
    var biggest_indep_dec_three_fourths = ((biggest_indep + min_indep) * 0.75).toFixed(3);

    min_indep = min_indep.toFixed(3);
    //min_indep = Math.min(min_indep, 0);  Shouldn't be necessary if min_indep initialized to 0

    var chart_size = Math.round(biggest_dep + 160);                         //increase range to compensate for title
    //alert(biggest + ", " + biggest_dep + ", " + biggest_indep);
    graph_string += "&chds=" + (min_indep) + "," + (biggest_indep_dec) + ",0," + (biggest_dep * 4 / 3).toFixed(3);      //specify range

    //change labels appropriately: if in terms of %Speed, want 25, 50, 75, 100
    if (xTitle === "%%20Speed") {
        min_indep = 0;
        biggest_indep_dec = 100;
        biggest_indep_dec_half = 50;
        biggest_indep_dec_fourth = 25;
        biggest_indep_dec_three_fourths = 75;
    }
    biggest_dep = Math.round(biggest_dep * 100);
    biggest_dep = Math.round(parseInt(biggest_dep, 10) / 5) * 5; //round to the nearest 5

    //only use linear stripes if bg is true:
    //  plan to use them on main page but not on summary page
    if (bg) {
        graph_string += "&chf=c,ls,90,BBBBBB,0.25,DDDDDD,0.25"; //linear stripes
    }
    graph_string += "&chco=0000FF";
                        //,0000FF";                 //line colors
    //graph_string += "&chdl=" + seriesTitle;
                        //|Second";                 //legend
    graph_string += ("&chtt=" + chartTitle);                //chart title (parameter)




        function adjustStyle(width) {
    width = parseInt(width);
    if (width < 240) {
        graph_string += "&chs=232x";
    } else if ((width >= 240) && (width < 250)) {
       graph_string += "&chs=232x";
    } else if ((width >= 250) && (width < 260)) {
       graph_string += "&chs=242x";   
    } else if ((width >= 260) && (width < 270)) {
       graph_string += "&chs=252x";
    } else if ((width >= 270) && (width < 280)) {
       graph_string += "&chs=262x";   
    } else if ((width >= 280) && (width < 290)) {
       graph_string += "&chs=272x";   
    } else if ((width >= 290) && (width < 300)) {
       graph_string += "&chs=282x";
    } else if ((width >= 300) && (width < 310)) {
       graph_string += "&chs=292x";
    } else if ((width >= 310) && (width < 320)) {
       graph_string += "&chs=302x";   
    } else if ((width >= 320) && (width < 330)) {
       graph_string += "&chs=312x";
    } else if ((width >= 330) && (width < 340)) {
       graph_string += "&chs=322x";   
    } else if ((width >= 340) && (width < 350)) {
       graph_string += "&chs=332x";   
    } else if ((width >= 350) && (width < 360)) {
       graph_string += "&chs=342x";
    } else if ((width >= 360) && (width < 370)) {
       graph_string += "&chs=352x";
    } else if ((width >= 370) && (width < 380)) {
       graph_string += "&chs=362x";   
    } else if ((width >= 380) && (width < 390)) {
       graph_string += "&chs=372x";
    } else if ((width >= 390) && (width < 400)) {
       graph_string += "&chs=382x";   
    } else if ((width >= 400) && (width < 410)) {
       graph_string += "&chs=392x";   
    } else if ((width >= 410) && (width < 420)) {
       graph_string += "&chs=402x";
    } else if ((width >= 420) && (width < 430)) {
       graph_string += "&chs=412x";
    } else if ((width >= 430) && (width < 440)) {
       graph_string += "&chs=422x";   
    } else if ((width >= 440) && (width < 450)) {
       graph_string += "&chs=432x";
    } else if ((width >= 450) && (width < 460)) {
       graph_string += "&chs=442x";   
    } else if ((width >= 460) && (width < 470)) {
       graph_string += "&chs=452x";   
    } else if ((width >= 470) && (width < 480)) {
       graph_string += "&chs=462x";
    } else if ((width >= 480) && (width < 490)) {
       graph_string += "&chs=472x";
    } else if ((width >= 490) && (width < 500)) {
       graph_string += "&chs=482x";   
    } else if ((width >= 500) && (width < 510)) {
       graph_string += "&chs=492x";
    } else if ((width >= 510) && (width < 520)) {
       graph_string += "&chs=502x";   
    } else if ((width >= 520) && (width < 530)) {
       graph_string += "&chs=512x";   
    } else if ((width >= 530) && (width < 540)) {
       graph_string += "&chs=522x";
    } else if ((width >= 540) && (width < 550)) {
       graph_string += "&chs=532x";
    } else if ((width >= 550) && (width < 560)) {
       graph_string += "&chs=542x";   
    } else if ((width >= 560) && (width < 570)) {
       graph_string += "&chs=552x";
    } else if ((width >= 570) && (width < 580)) {
       graph_string += "&chs=562x";   
    } else if ((width >= 580) && (width < 590)) {
       graph_string += "&chs=572x";   
    } else if ((width >= 590) && (width < 600)) {
       graph_string += "&chs=582x";
    } else if ((width >= 600) && (width < 610)) {
       graph_string += "&chs=592x";
    } else if ((width >= 610) && (width < 620)) {
       graph_string += "&chs=602x";   
    } else if ((width >= 620) && (width < 630)) {
       graph_string += "&chs=612x";
    } else if ((width >= 630) && (width < 640)) {
       graph_string += "&chs=622x";   
    } else if ((width >= 640) && (width < 650)) {
       graph_string += "&chs=632x";   
    } else if ((width >= 650) && (width < 660)) {
       graph_string += "&chs=642x";
    } else if ((width >= 660) && (width < 670)) {
       graph_string += "&chs=652x";
    } else if ((width >= 670) && (width < 680)) {
       graph_string += "&chs=662x";   
    } else if ((width >= 680) && (width < 690)) {
       graph_string += "&chs=672x";
    } else if ((width >= 690) && (width < 700)) {
       graph_string += "&chs=682x";   
    } else if ((width >= 700) && (width < 710)) {
       graph_string += "&chs=692x";   
    } else if ((width >= 710) && (width < 720)) {
       graph_string += "&chs=702x";       
    } else if ((width >= 720) && (width < 730)) {
       graph_string += "&chs=712x";
    } else if ((width >= 730) && (width < 740)) {
       graph_string += "&chs=722x";   
    } else if ((width >= 740) && (width < 750)) {
       graph_string += "&chs=732x";
    } else if ((width >= 750) && (width < 760)) {
       graph_string += "&chs=742x";   
    } else if ((width >= 760) && (width < 770)) {
       graph_string += "&chs=752x";   
    } else if ((width >= 770) && (width < 780)) {
       graph_string += "&chs=762x";
    } else if ((width >= 780) && (width < 790)) {
       graph_string += "&chs=772x";
    } else if ((width >= 790) && (width < 800)) {
       graph_string += "&chs=782x";   
    } else if ((width >= 800) && (width < 810)) {
       graph_string += "&chs=792x";
    } else if ((width >= 810) && (width < 820)) {
       graph_string += "&chs=802x";   
    } else if ((width >= 820) && (width < 830)) {
       graph_string += "&chs=812x";   
    } else if ((width >= 830) && (width < 840)) {
       graph_string += "&chs=822x";
    } else if ((width >= 840) && (width < 850)) {
       graph_string += "&chs=832x";
    } else if ((width >= 850) && (width < 860)) {
       graph_string += "&chs=842x";   
    } else if ((width >= 860) && (width < 870)) {
       graph_string += "&chs=852x";
    } else if ((width >= 870) && (width < 880)) {
       graph_string += "&chs=862x";   
    } else if ((width >= 880) && (width < 890)) {
       graph_string += "&chs=872x";   
    } else if ((width >= 890) && (width < 900)) {
       graph_string += "&chs=882x";
    } else if ((width >= 900) && (width < 910)) {
       graph_string += "&chs=892x";
    } else if ((width >= 910) && (width < 920)) {
       graph_string += "&chs=902x";   
    } else if ((width >= 920) && (width < 930)) {
       graph_string += "&chs=912x";
    } else if ((width >= 930) && (width < 940)) {
       graph_string += "&chs=922x";   
    } else if ((width >= 940) && (width < 950)) {
       graph_string += "&chs=932x";   
    } else if ((width >= 950) && (width < 960)) {
       graph_string += "&chs=942x";
    } else if ((width >= 960) && (width < 970)) {
       graph_string += "&chs=952x";
    } else if ((width >= 970) && (width < 980)) {
       graph_string += "&chs=962x";   
    } else if ((width >= 980) && (width < 990)) {
       graph_string += "&chs=972x";
    } else if ((width >= 990) && (width < 1000)) {
       graph_string += "&chs=982x";
    } else {
       graph_string += "&chs=982x"; 
    }
}

jQuery(function() {
    adjustStyle(jQuery(this).width());
    jQuery(window).resize(function() {
        adjustStyle(jQuery(this).width());
    });
});





    graph_string += chart_size;                             //y dimension: dynamic

Upvotes: 3

Views: 4023

Answers (2)

Pixic
Pixic

Reputation: 1345

I looked at @Antonio's solution and came up with a different solution.

I included Antonio's function in the Google Chart script and wrapped the putQR function around the Google Chart Options and the

var chart = new google.visualization.LineChart(document.getElementById('myweight'));
chart.draw(data, options);

Beside the...

$(document).ready(function () {
  putQR();
});

...I also added...

$(window).resize(function () {
  putQR();
});

...in order to have the Chart resized whenever a user resizes the browser.

I guess this is the actual function that you are asking for, as it resizes the graph when the browser width is changed, i.e. must be the same thing when switching from normal handheld phone to landscape.

I also added that the graphHeight should be 80% of graphWidth and not higher than 800.

Check out the code here...

JSfiddle

...and you can see it live on Pixic.se

Upvotes: 1

Antonio
Antonio

Reputation: 11

One solution may be to obtain measures of the container and then create the graph with the height and width that interests you.

<!DOCTYPE>
<html>
    <head>
        <title></title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                putQR();
            });
            function putQR(){
                var chartParent = $('#chartParent');
                var width = $(chartParent).width();
                var height = $(chartParent).height();
                var source = "https://chart.googleapis.com/chart?chs="+width+"x"+height+"&amp;cht=qr&amp;choe=UTF-8&amp;chl=http://www.kikiriki.org/copy/agtraWtpcmlraW9yZ3IRCxIJQ29weXBhc3RlGPOEDgw";
                $(chartParent).append('<img id="qr" src="'+source+'" alt="qr" />');
            }
        </script>
        <style>
            #chartParent{
                width: 500px;
                height: 500px;
            }
        </style>
    </head>
    <body>
        <div id="chartParent"></div>
    </body>
</html>

Upvotes: 1

Related Questions