Category Archives: Web Development

A Symfony Plugin for Generating Charts using Googles Visualization API (sdInteractiveChartPlugin)

Posted on by
2

Last week I released the first (beta) version of my interactive charting plugin for the Symfony PHP framework. It is currently only version 0.1.2 so it’s a bit rusty round the edges, but over the next couple of weeks I will be improving it and adding extra functionality to it. I also intend to package up another version (which I will host on my blog) for anyone not using Symfony to use in there PHP projects. Below are just a few details on the plugin:

UPDATE: The plugin has been updated to version 0.2.0 (Available on the Symfony website), more of the APIs options have been implemented along with an improved callback function and more streamlined code.

Overview:

The plugin allows you to insert Javascript powered charts into any page of your site without writing any Javascript. It is especially useful when the data for the chart and possibly even the type of chart is based upon an authenticated users preferences (i.e. creating different charts for each user). The plugin handles the loading of the required libraries and creation of the correct chart object as well loading the data in via AJAX if you want. It also helps to keep your HTML page code as neat and tidy as possible by only writing exactly what’s needed into the dynamic page and storing all the rest in a general JS file which is the same for all users.

Chart Types:

It can create a number of different charts:

  • Area Charts
  • Bar Charts
  • Column Charts
  • Gauges
  • Line Graphs
  • Pie Charts

Usage:

Head to: http://www.symfony-project.org/plugins/sdInteractiveChartPlugin

“b[0] is undefined” error when using Google’s Visualization API

Posted on by
Reply

When playing around with google’s visualization API I came across the following error, which just appeared in the place of lovely colourful chart. No javascript errors were thrown or anything else.

b[0] is undefined

After searching the internet a bit I did not manage to find any answers, at which point I decided it was time to change values passed to the API at random and see when it started working.

The Fix:

It turns out is was the width and height properties it didn’t like, apparently they were too small?!?

Original Code:

function drawVisualization() {
var data = new google.visualization.DataTable();
 data.addColumn('string', 'fruit');
 data.addColumn('number', 'quantity');
 data.addRows(4);
 data.setValue(0, 0, 'Oranges');
 data.setValue(0, 1, 3);
 data.setValue(1, 0, 'Bananas');
 data.setValue(1, 1, 4);
 data.setValue(2, 0, 'Grapes');
 data.setValue(2, 1, 2);
 data.setValue(3, 0, 'Apples');
 data.setValue(3, 1, 6);
 
 var chart = new google.visualization.BarChart(document.getElementById('visualization'));
 chart.draw(data, {width: 150, height: 200, title: 'Fruit',
 vAxis: {title: 'Type of Fruit', titleTextStyle: {color: 'blue'}}
 });
 
}

When I modified width and height values I gave to the draw function (as so):

chart.draw(data, {width: 190, height: 200, title: 'Fruit',
 vAxis: {title: 'Type of Fruit', titleTextStyle: {color: 'blue'}}
 });

It started working again. Not quite sure why setting small sizes on the charts causes this, or why it only produces are fairly useless error message.

By the way: At first I was just testing out the API using Googles Code Playground, which is quite smart!

Any way this is how my chart looked after the fix (and I bit more resizing)

Flat image of bar graph created using Google's Visualization API

Flat image of bar graph created using Google's Visualization API

Connecting to an Amazon RDS via PHP

Posted on by
Reply

If your trying to connect from an Amazon EC2 instance to an RDS instance in PHP and finding that the connection keeps timing out (i.e. you get a mysql 2003 error). try using the IP address for the RDS instance instead of the hostname (or ‘Endpoint’ as Amazon calls it).

So instead of using:

$link = mysql_connect('mydbinstance.c7hszkfowzmc.us-east-1.rds.amazonaws.com:3306', 'mysql_user', 'mysql_password');

Use something like this (obviously replacing the IP address below with the IP of your RDS):

$link = mysql_connect('77.44.77.11:3306', 'mysql_user', 'mysql_password');

Saving PNG files for the web using Fireworks CS5

Posted on by
Reply

When you save an image/photo/icon for the web you want the file-size to be as small as possible. Why… you ask, firstly it reduces the time taken to download the image (i.e. the image loads faster in the users browser), and secondly it reduces your bandwidth usage.

This little tutorial covers the basics of saving PNG files in Fireworks CS5 for use on the internet, and goes through a few different versions of the PNG format to show you their differences.
Continue reading →

Changing PHP settings with FastCGI and suPHP

Posted on by
Reply

Recently I needed to change the upload_max_filesize for php running on one of my sites. As this can only be done in either .htaccess (when running php as an apache module) or using php.ini, I was forced to use the php.ini method.

So I created a new php.ini file and added the following lines:

upload_max_filesize = 32M
post_max_size = 64M

The post max size all ways needs to be greater than the upload max filesize other wise the upload max filesize can never be reached as it will get limited by the post max size before hand. Uploaded this to the server and I a look at the phpinfo() output. But still the post_max_size was set to 2MB.

After scouring the internet for quite a while wondering why my php.ini file was not being picked up by php running in FastCGI mode I finally discovered I had to add an extra line into my .htaccess file to tell suPHP where to find my php.ini file.

I opened up my .htaccess file directly under my web root and added the line:

suPHP_ConfigPath /<path to my public_html>/public_html

And like magic PHP picked up the new php settings and the upload_max_filesize went upto 32MB.

I hope this helps someone else having the same issue solve it far quicker than I did.

Optimizing Images: Improving Your Sites Performance

Posted on by
Reply

Now even more important than ever, is having a fast loading web site. Google now takes this into account when ranking pages (Google Blog). As well as potentially better position on Google is the possibility of keeping more users on your site (reducing the bounce rate) and if you’re an ecommerce site, increasing the conversion rate.

Decreasing The Size of Your Web Pages

A really easy way to speed up a website is to decrease the amount of data that needs to be downloaded in order to view a certain page. Put another way, decrease the total file size of a web page (this includes all the images, css, javascript, and any other media such as Flash).

The rest of this post is going to focus solely on reducing the size of your images, I will hopefully cover other topics relating to improving the performance of a website in the next few weeks.

Making Your Images Really Small

As most web sites today rely on using a large number of images, decreasing the file size of these can instantly decrease the size of a web page and improve its performance. When I say decreasing the file size I mean decreasing it without reducing the quality of the image (i.e. lossless compression).

A couple of tools for optimizing images are:

  • Pngcrush
  • Yahoo! Smush.it

Continue reading →

Comparing preg_replace and str_ireplace (Rude Word(s) Filter)

Posted on by
Reply

Filtering users input is unfortunately something that needs to be done these days. Possibly even more so when the content is coming from another website/service (such as twitter or facebook).  Swearing/rude words is quite a serious area, as you really don’t want to offend any visitors to your site by displaying a live thread showing comment or a ‘tweet’ or similar containing offensive langauge (tends to go down badly). So on this very note I set out today to add a live twitter feed to my current project (www.wsaf.co.uk), but decided once I had pulled the data from twitter I should probably remove any swearing before displaying it on the site!

As the site is written in php funnily enough this was also going to be. As I like to make my code as fast a possible I decided I would test the speed to different functions that could be used for this purpose:

preg_replace();
//and...
str_ireplace();

Continue reading →

Latest Project!

Posted on by
Reply

So my current web dev related project is the 2010 WSAF website (Warwick Student Arts Festival – Massive student run arts festival, music, comedy, theatre, so name it. It’s there!) I did the site last year and I got the impression they quite liked it (http://old.wsaf.org.uk). So the new exec for WSAF this year asked me to do it again… Allbeit with some help this time around.

http://www.wsaf.co.uk

This year I have two computer science students to help out with the coding and two people who are very good at graphics to help with making the site look amazing! So all in all should turn out looking really really nice.