How To Add An Excel Chart to WordPress

Adding an Excel chart to WordPress can be easy: just create your chart in Excel, make a screenshot of it and include it as a picture in your post. But there are several drawbacks with this approach.

I’ll show you in this blog how to add an Excel chart to WordPress and display it as a resolution independent, always up-to-date and fast loading chart in your page or blog.

When adding an Excel chart to WordPress as an image you must first choose the picture’s ‘right’ resolution. The picture shouldn’t be to big to load fast. But it should also display enough details (what makes it bigger) to look good. Users like clear and clean pictures. They don’t like fuzzy, hardly readable text and messy lines and circles. And your site gives a bad impression too! And when you update the Excel data you must always repeat this process in order to display the most recent data on the website.

Chartoon will facilitate your work tremendously

Consider simple sales summary chart created from some spreadsheet data like this:

Sales Summary Example

Here is the point where Chartoon will facilitate your work tremendously. Chartoon takes the data from a spreadsheet and renders it for you.

There are to ways to do this:

  1. Copy/paste the Excel data in to the Chartoon Editor.
  2. Save the file on your web server and reference it with Chartoon.

The first approach is quick and easy. If the data does not change very often. With the second approach you can just change the data in Excel and save it. The Chartoons on the website show the new data immediately. You are already done.

The implementation is really easy

The implementation of both approaches is really easy. For both approaches start with downloading and installing Chartoon Editor. Actually Chartoon Editor supports bar-, pie- and line- charts. And its free!

If Chartoon Editor is up and running there are two steps

  1. Select the chart type (bar-, pie or line chart) in the Chartoon General tab.
  2. Copy the Excel data and paste it into Chartoon Editor’s data field. Choose tsv as mimetype and press the ok button (click and see figure 1).
Select the mimetype and paste the data
Figure 1: Select the mimetype and paste the data

You’re done (figure 3). Of course you can refine the chart further, changing colors, fonts, date formats. There’s a lot what Chartoon can do, explore it if you have some time. But basically you are done.

Display the data as a pie-chart? Just select pie-chart in Chartoon Editors’s General tab.

The results are even on a smaller smart phone astonishing

And now load your page on your smart phone or iPad. Zoom in and out. You will always see a perfect sharp picture.

But what about our second approach which offers immediately up-to-date charts on the website? Instead of copy/pasting the data, you save it in a folder on your web server. For example in a folder /data that contains all your data files. To make sure that browsers can access this file it must be allowed in a .htaccess file inside this folder. Ask your technical support for help if necessary. It’s worth it.

Caption
Figure 2: Select the mimetype and enter the url of your data file

No need to touch the chart in the future

Once this is done you can just enter the url in the Chartoon Editors data tab, select again tsv as mimetype, press the ok button and the chart is displayed (figure 2). Chartoon fetches the data now from the file on the server. No need to touch the chart in the future. It will always reflect the data on the server.

Figure 3: Sales Summary

Hint: Touch the bars with the mouse or your finger, a tooltip will show up that displays additional information for each day.

Additional templates and color palettes are available in our shop. Feel free to contact us in the forum or with the contact form.

Share This On
Tweet about this on TwitterShare on LinkedInShare on FacebookShare on Google+Pin on PinterestShare on TumblrEmail this to someone

Leave a Reply