Google Chart API. Extended encoding with scaling
I am using the Google Charts API to produce the path profiles in my Microwave Feasibility Tool and my Pedometer
Initially I used the Text Encoding with scaling method but the URL’s became too long for profiles over 30km as I check the height every 100m. I therefore changed to using the Extended Encoding method to request the charts but found it difficult to scale according to the whichever of my arrays had the highest and lowest points. I have eventually figured it out and here is the method I used as a script which you can copy and adapt for your own purposes. You can view this online at Extended Encoding
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>Google Chart API Extended Encoding Example</title>
</head>
<body onload=”load()”>
<input id=”arrayA” value=”1,2,3,4,5,6,7,8,100,8,7,6,5,4,3,2,1″ size=”60″ type=”text” /> Array0<br />
<input id=”arrayB” value=”0,10,20,30,40,50,60,70,80,90,80,70,60,50,40,30,20,10,0″ size=”60″ type=”text” /> Array1<br />
<input id=”arrayC” value=”20,20,30,40,200,50,50″ size=”60″ type=”text” /> Array2<br />
<input type=”button” value=”Draw New Chart” onclick=”load()”/><br />
<div id=”chart” style=”width: 100%; height: 220px;” onclick=”newWindow()” ></div><script type=”text/javascript”>
var max;
var min;
var scale;
var legend;function load() {
var hiPoints= [];
var loPoints= [];
var array0= document.getElementById(“arrayA”).value
var array1= document.getElementById(“arrayB”).value;
var array2= document.getElementById(“arrayC”).value;
array0= array0.split(‘,’);
array1= array1.split(‘,’);
array2= array2.split(‘,’);
var arrays=[array0,array1,array2];for(i=0; i<arrays.length; i++) {
var maxHeight = Math.max.apply(null, arrays[i]);
hiPoints.push(maxHeight);
var minHeight = Math.min.apply(null, arrays[i]);
loPoints.push(minHeight);
}
var maxBiggest = Math.max.apply(null, hiPoints);
var maxRound = Math.ceil(maxBiggest/10)*10;
max= maxRound;
var minLowest = Math.min.apply(null, loPoints);
min= Math.floor(minLowest/10)*10;
var yaxis=”0:|” + min + “|” + max/2 + “|” + max ;
legend = “&chxt=y&chxl=” + yaxis;var firstArrayScaled= scaling(array0);
var secondArrayScaled = scaling(array1);
var thirdArrayScaled = scaling(array2);var chartBaseUrl = “http://chart.apis.google.com/chart?”;
var chartParams = “cht=lc&chs=450×220&chls=3,1,0|3,1,0|3,1,0|3,1,0&chco=005500,ff0000,000099,000000″;
var values = “&chd=e:”;
var title = “&chtt=Steve\’s%20Eample%20of%20Extended%20Encoding%20with%20scaling”;
values = values + extendedEncode(firstArrayScaled) + “,” + extendedEncode(secondArrayScaled) + “,” + extendedEncode(thirdArrayScaled);
document.getElementById(‘chart’).innerHTML = “<img src=” + chartBaseUrl + chartParams + title + values + legend + “>”;
}
function scaling(values) {
var ymin=0;
var ymax=4095;
var arraylength = values.length;
var newvalues = new Array();
for (var i=0; i<arraylength;i++){
var v = values[i];
var y=Math.round((((ymin-ymax)/(max-min))*(max-v))+ymax);
newvalues.push(y);
}
return newvalues;
}function extendedEncode(values) {
var encodingString = ‘ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-.’;
var chartData = [''];
var esln = encodingString.length;
var firstChar, secondChar;
for (var i = 0; i < values.length; i++) {
var currentValue = values[i];
if (!isNaN(currentValue) && currentValue >= 0) {
firstChar = encodingString.charAt(Math.floor(currentValue/esln));
secondChar = encodingString.charAt((currentValue % esln));
chartData.push(firstChar+secondChar);
}
else {
chartData.push(‘__’);
}
}
return chartData.join(”);
}
</script>
</body>
</html>
