Google Chart change size based on screen size
Question
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
2 answers
solution1
1 2012-07-19 16:13:16
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+"&cht=qr&choe=UTF-8&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>
solution2
1 2013-11-26 03:46:44
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, ie 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...
...and you can see it live on Pixic.se
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
how to not let google chart width size shrink if screen size small
how to change font size of Google Chart Tooltip
Change $scope variable based on screen size
How to change my table based on screen size?
HTML Change Class Name Based on Screen Size
Change image based on screen size (Bootstrap template)
How to change webpage zoom based on screen size?
fullCalendar - Change calendar view based on screen size
How do I change the size of a Div based on the screen size with Jquery
resize based on screen size?
Related Tags