Posts Tagged: dynamic

Javascript is probably the most awesome tool a web developer can use to make a website both functional and look nice. Javascript has also evolved over the years with the DOM it has become much easier to develop.

One useful piece of code I always end up using when writing Javascript is getElementById, the way Javascript evolved has given it much more compatibility with different browsers and in turn means you need less code to do more.

getElementById allows you to modify any html element with a given ID. so for example if you have a <div> with the ID jstest it might look like this

<div id=”jstest”>howdy</div>

Using document.getElementById(‘jstest’) we can modify this element dynamically with javascript changing anything from its appearance or position with styling or use it within our javascript code.

using document.getElementById(‘jstest’).innerHTML we could change or get the contents of the div.

Another pretty awesome use for the getElementById method would be to change the style of an element dynamically, maybe you want it to disappear when clicked or have a border when highlighted.

To change the background of an element we could use document.getelementById(‘jstest’).style.background-color = ‘#dedede’  this will work with any styling you could apply to an element.

If you are like 90% of the old school web developers I know you probably don’t like using javascript but the modern DOM it is couldn’t be easier.

API’s are becoming more popular on the web as many of the big online companies such as Google, Yahoo and Facebook offer there own open source code for web developers to use freely and easily.

To begin with I am going to go through how to use the Charts Basics API from Google. This is an extremely easy one to start off with as you don’t require an API key or to install anything, you don’t even need a dynamic server side script to get some nice results.

For this example I am going to jazz it up with a bit of PHP using an associative array but you can easily replace this with a database or XML feed.

To call a chart we use the query string linking to the API which will end up looking something like this.

<img src="http://chart.apis.google.com/chart?chs=250x100&amp;chd=t:10,80,35,10&amp;cht=lc&amp;chl=wk1|wk2|wk3|wk4"
alt="Sample chart" />

To generate this dynamicaly I used the following code

$arr = array();

$arr['Jan']['wk1'] = 10;
$arr['Jan']['wk2'] = 80;
$arr['Jan']['wk3'] = 35;
$arr['Jan']['wk4'] = 10;

$chart= 'http://chart.apis.google.com/chart?';
$chartsize = 'chs=250x100';
$type = "cht=lc";
$vals = 'chd=t:';
$keys = 'chl=';
$alt = "January";

foreach( $arr['Jan'] as $key => $value){
	$vals .= $value.',';
	$keys .= $key.'|';
	}

And Lastly to pull all the code together.

<img src="<? echo $chart;?>
<? echo $chartsize;?>
&amp;<? echo substr("$vals", 0, -1);?>
&amp;<? echo $type;?>
&amp;<? echo substr("$keys", 0, -1);?>"
alt="Sample chart" />

To develop this example further use the official documentation available here Google Chart Basic