from table to chart in WordPress

96

After having discovered HighCharts, I’ve been cursed by its elegance and simplicity. So I started to make some experiments and then I’ve decided to build a little WordPress plugin which allows everyone to automatically create charts starting from tables of numerical data in blog posts.

Eventually I’ve given birth a plugin which, with a monstruous effort of imagination, I’ve called Table2Chart.

Update: the plugin page has moved here

What does it do? Table2Chart read the numerical data of a table and it put them in a chart which can be defined in the type (horizontal bars, vertical bars, line, area) and other several options (size, titles, colors, etcetera).

In its simplest version it suffices to write down 

[Table2Chart]

to draw the chart corresponding to the first table in the post with default settings. Obviously it is possible to specify additional parameters, as for example

[Table2Chart width="600" background="#808080"]

The complete parameter list which can be specified includes:

attribute description default value
table number which indicates the cardinal position of the table (first, second, etcetera) in the post to gather the data from 1
width chart width in pixel 500
height chart height in pixel 400
type chart type to choose from bar (horizontal bars), column (vertical bars), line, area column
title chart title (empty)
subtitle chart subtitle (empty)
titleX category axis title (empty)
titleY value axis title (empty)
order row if series lie on rows, column if they lie on columns column
namecol position of the row containing the series or category titles 1
namerow position of the column containing the series or category titles 1
background background color in hexadecimal format #ffffff
color colors of data series #ff0000,#00ff00,#0000ff,
#00ffff,#ff00ff,#ffff00
convert true if numerical values in the table are in continental format and they have to be converted in JS format (dot as decimal separator and comma as thousand separator), false otherwise true

Let consider as an example the following table about distribution by sector of energy consumption in three European Countries, gathered from eurostat:

industry transport residential services other
Spain 24% 42% 19% 11% 4%
Italy 25% 34% 26% 13% 2%
Romania 31% 23% 35% 8% 3%

Shortcode [Table2Chart] generates:

whereas shortcode [Table2Chart type="line" background="#fffff0" color="#50a0f0,#f0a050,#a0f050,#a050f0,f050a0"] returns

and shortcode [Table2Chart order="row" type="bar" background="#b0b0b0"] returns

What more does this plugin offer with respect to other plugins already listed in WordPress plugin repository which allow to draw charts? In my opinion two things: the support of a more complete and powerful library than the other ones (try to click on the series names in the legend to realize the high level of interactivity) and, through the link to tables, a more structured and user friendly way to write down data to draw, especially if a dedicated plugin is already installed. Anyway if someone wants only to draw the chart without the table he need only to assigning the css style display:none for it.

Obviouly several improvements are possible. Among the first ones which come to my mind there are the addition of two optional parameters to include or exclude specific rows and columns (useful for example in tables having totals which aren’t to be drawn) and the extension of the type set to scatterplot and bubblechart (no, I’m sorry but most times pie chart are abused, even if an up and coming person could realize that …).

To install the plugin it suffices to download it from the below link and then upload and activate it from the administration panel in WordPress.

Download Table2Chart from WordPress repository.


96 thoughts on “from table to chart in WordPress”

  1. I downloaded and tested your Table2Chart plugin and it is really nice.

    I was wondering whether it might be possible to create the graphs from custom tables inserted in the WordPress database (i.e. that the data used for the graph is not necessarilty obtained form the table on the page or blog-post?).

    Kind Regards,
    Danie Ludick

  2. The simplest way to avoid using a table in the post is to specify the data in the shortcode, as in the following toy example: [Table2Chart data=”[{x:’blue’, y:15], [x:’red’, y:23], [x:’yellow’, y:41]]”. I can consider to allow this in next version. I do not know custom tables; it should be possible to use them, even if I think it is a more demanding task. Anyway, do you have any reading about custom tables to suggest me?

    • Thank you for your reply Antonio!

      Regarding the custom tables that I had in mind: I want to extract data for each member on my site using some form of user-ID.

      One would then possibly have to do is to create a table with as primary index the user ID from the user meta table that WP creates.

      Once you have the user ID from the get_current_user_ID function you can then query your table for a record for that user and read the info you need. This info can then be plotted using HighCharts?

      There are a few links that might be of help: be of help http://codex.wordpress.org/Function_Reference/get_user_meta and http://codex.wordpress.org/WPMU_Functions/get_current_user_id

      Kind Regards,
      Danie

      • Can you insert your custom table in the post content using php?
        If yes, then yes, you can plot it using Tbale2Chart.

  3. I have some tables created with TablePress that are programmatically updated. Sometimes there may be several rows at the bottom of the table that are blank. Will table rows with no data be included in a chart?
    | x
    | x x x
    | x x x x x
    | x x x x x
    |__x__x___x__x__x____________________________________________

    Or does the chart adjust to show only actual data?

    | x
    | x x x
    | x x x x x
    | x x x x x
    |__x__x___x__x__x__

    Thanks

    • I can add a parameter to exclude certain (fixed) rows/columns. If you are willing, you can test next version of my plugin which I hope to release next week.

  4. Further question: the HighCharts installation instructions say:

    “In the example above the JavaScript files are loaded from ajax.googleapis.com and code.highcharts.com. The Highcharts files can be downloaded from highcharts.com and put on your webpage. Here is an example with jQuery and highcharts served from your own server:
    4.

    ”

    Is Table2Chart setup to use the Highchart files from my own server?

  5. I have prepared a new version which loads the scripts from the blog server and adds the exclude parameters. Does anybody want to test it?

  6. Yes, I’d like to test it. I never tried the first version because I wasn’t sure how to install HighCharts. Is the installation for your new version different?

    • You hadn’t to do anything apart installing my plugin. It loads Hicharts library automatically.
      The new version is here:
      http://goo.gl/8KvHR
      If (but only if) you do not see any chart, try to delete highcharts.js from the plugin directory.
      You can exclude certain rows and columns by specifying excluderows and excludecols parameters. Multiple rows and columns have to be separated by commas. For example: excluderows=2,3,7

      • This was interesting, I have been using this plugin alongside tablepress as well. However, after installing the latest version referenced above, the exclude function does not seem to work.

      • Are you sure to have used the “excluderows” or “excludecols” argument? For example [Table2chart excluderows=5]
        If yes, can you send me the html source of your page? (you can do it privately through contatti page)

      • At present you can edit table2chart.js file in plugin directory adding the following line:
        credits: {enabled: false},
        just before the line which starts with:
        xAxis: {

      • No Chart Showing
        I installed and activated Table2Chart. Then inserted [Table2Chart] immediately above a TablePress table. A space was created where a chart might go but no chart appeared. Following your instructions above, I removed highcharts.js from the Table2Chart02 directory, de-activated and reactivated the Table2Chart plug in with the same result — a space but no chart.

        Here is the page:
        http://expansion.vedicpandits.org/funding-growth/
        you’ll need this password to get in as it’s under development
        NOTforSHARING

        You’ll see the space above the table. That’s where the [Table2Chart] is inserted.

        I did a recursive search of my root directory and highcharts.js only appeared once — in the Table2Chart directory (that was before I deleted it).

        Would be happy for any suggestions

      • There are two problems: your template does not load jQuery and table numbers are formatted as currency values. I need to prepare a patch.

      • OK, thanks. In the meantime, should I put the highcharts.js file back into the table2chart02 directory?

  7. No Chart Showing
    I installed and activated Table2Chart. Then inserted [Table2Chart] immediately above a TablePress table. A space was created where a chart might go but no chart appeared. Following your instructions above, I removed highcharts.js from the Table2Chart02 directory, de-activated and reactivated the Table2Chart plug in with the same result — a space but no chart.

    Here is the page:
    http://expansion.vedicpandits.org/funding-growth/
    you’ll need this password to get in as it’s under development
    NOTforSHARING

    You’ll see the space above the table. That’s where the [Table2Chart] is inserted.

    I did a recursive search of my root directory and highcharts.js only appeared once — in the Table2Chart directory (that was before I deleted it).

    Would be happy for any suggestions

  8. Sorry for double posting. The first one got hung up for a long time so I tried again.

  9. Your patch worked. I successfully made use of several of the additonal parameters although I was not sure why the chart interprets $80,000 as $80. I set the parameter ‘convert’ to both true and false but the Y axis values were unchanged. Also I couldn’t get the ‘titleY’ to produce a Y Axis label.
    Lastly, if you plan to do an update, what would be great for me, and I imagine for others, is in addition to “exclude” (which is perfect for ignoring my third column), the inverse, an “includerows” would allow users to select only the first 5 or 10 out of a much larger group to graph.

    Thanks

    • Thank you for your acknowledgment. I have corrected the bug about the conversion of large numbers (>=1,000).
      For the other things you ask for I will do them surely. Anyway I pray you to wait for a little, because the new HighCharts library has a bug preventing Table2Chart to work anymore and I want to be sure that all other people using my plugin will not suffer any struggle (as I have already signaled at https://wordpress.org/support/topic/graphing?replies=27#post-4010094).
      You have to not worry absolutely: such problem is already corrected in the version you use, but now I have to check that the new version will be spreaded as soon as possible for all other users.

      • Thank you Antonio. I updated the table upon which the Chart is created (I added another column of data to the table) and now the chart appears with its title, background colour and legend all looking fine, but no Y axis nor bars for data. Now I’m not sure if this is a highcharts issue or I’ve done something wrong.

        You can see at
        http://expansion.vedicpandits.org/funding-growth/
        password: NOTforSHARING

        The chart is based on the first table on the page which I intend to hide later.

        Thanks

      • It’s a wrong parsing of empty cells. I’m preparing a patch.

      • The patch to correct conversion of empty cells is ready to dowload. I have also corrected the bug about the axis titles and I’ll put new version online soon.

      • Thanks Antonio. I imagine publishing a Plug-In is like having a baby. Now you have to look after it.

  10. Charts are broken since update… pages display

    {“table”:5,”type”:”bar”,”color”:”#c6d9f1,#4f81bd,#053c7f”,”background”:”#ffffff”,”order”:”column”,”namecol”:”1″,”namerow”:”1″,”convert”:false}

    • I fear that the cause is an incompatibility with some other plugin.
      To be sure, unistall table2chart and reinstall previous version from http://goo.gl/ZYWuU. Then, edit table2chart.php in the plugin directory and change “http://code.highcharts.com/highcharts.js” on line 51 to “//cdnjs.cloudflare.com/ajax/libs/highcharts/2.3.5/highcharts.js”.
      If the charts aren’t displayed, think deeply: which other plugin have you installed or updated in the last two weeks?
      I have tried to read your page as it is now. The charts aren’t displayed simply because the plugin scripts are not loaded. However I do not know why, even because I’m not familiar with CloudFlare service.

      • No new plugins have been installed. The issues started after your announcment for the 2c revision.

        I also tried changing line 51 in your recommendation, now no charts are being displayed with the older version.

        wp_enqueue_script(“highcharts”, “http://cdnjs.cloudflare.com/ajax/libs/highcharts/2.3.5/highcharts.js”,array(“jquery”),null,true);

        Cloudflare is disabled if you use the subdomain direct. in front of any page…

        ie. direct.computingondemand.com

  11. Then a popup is displayed:

    DataTables warning (table id = ‘tablepress-2’): Cannot reinitialise DataTable.

    To retrieve the DataTables object for this table, pass no arguments or see the docs for bRetrieve and bDestroy

    • I think this is TablePress issue. Anyway this supports the hypothesis of a trouble in some of your other installed plugins or CloudFlare settings.

  12. Ugh… I got it working.

    1. I rolled back to the original version of the plugin.
    2. Copied the highcharts.js to a local folder on my website.
    3. Modified table2chart.php (line 51) to reflect the new location of the highcharts.js

    Line 51:
    Original: wp_enqueue_script(“highcharts”, “http://code.highcharts.com/highcharts.js”,array(“jquery”),null,true);
    New: wp_enqueue_script(“highcharts”, “http://domain.com/folder/highcharts.js”,array(“jquery”),null,true);

    • Thank you for your acknowledgment. And for your debugging, which has been better than mine… :)
      I think that you can try to do the same thing after updating the plugin to version to 0.2c.
      Modify the path on line 52 for highcharts.js (and maybe on line 53 for table2chart.js) as you have already done…
      Are you able?

  15. On your Plug-In page, the current version is showing as 0.2c. Will your new version correcting the empty cells and axis titles come with a new number?

    • Yes, it is ready. You can download it from the link at the bottom of this post (see “last testing release”). To specify axis titles please use titlex and titley in place of titleX and titleY. You can also specify includerows and includecols parameters. I will appreciate your acknowledgment.

      • It’s just above the comments section. Search for “Download Table2Chart last testing release”.

    • I think there is an issue with TablePress plugin. It should be useful to investigate such issue with Tobias if you create a test page (it seems to me from the page you linked that you have disabled Table2Chart or haven’t used the shortcode).

  17. The new version 0.3 is working well for me. The chart has Y Axis values and label, and bars, see

    http://expansion.vedicpandits.org/funding-growth

    This chart draws its data from the table immediately underneath it which I would like to hide. This is the code for that table right now

    [table id=3 automatic_url_conversion=true/]

    I see you indicate “display:hidden” above if I want to hide a table, but where would I put this?

    • Well, so I can update WordPress repository.
      When you edit the post switch to “Text mode” and add the following line:
      <style>.tablepress-id-3 {display:hidden}</style>
      in a whatever line.
      Anyway, I’m thinking to add the option in the next version.

    • P.S.: I’ve confused hidden with none. Please write
      <style>.tablepress-id-3 {display:none}</style>
      I update the article consequently.

  18. Thanks Antonio. I asked Tobias at tablepress and he also gave me display: none; so my page is displaying fine now.

    • In the next version I will support HighCharts syntax so you will be able to do what you are asking for and much more.

  21. Hi,

    We are having display issues with the chart in this page, we have determined it works in most browsers our issue seems to be Internet Explorer 9 and below.
    It works fine in Chrome (All), Safari (5.1+), Firefox (4+), Opera (All), IE 10+.
    Is there anything we have missed? or can do to correct this?
    Thanks
    Chris

    • I’m trying to check but it’s very difficult because CloudFlare (oh noooo, again it!) service scrambles html source a lot.
      In the while, are you able to disable it for that page and tell me if the chart is displayed?
      Thank you.

    • Ok, I think to have identified the source(s) of the problem. They are two:
      1) CloudFlare puts some extra tags (“code”) in the html which prevent the script to identify the table position in the DOM tree;
      2) There is an incompatibility (I suppose) between IExplorer and a function in HighCharts library. If you give me your consent, I will send a preparatory patch to your private mailbox.

    • You have another plugin which dinamically inserts another table in the post. Try putting table=1 or table=2 instead of table=0. And please read carefully my next message.

  25. I thank all of you for reporting issues and bugs. Your warnings help me to make the plugin better for all the people using it. However, please understand that the more active plugins you have, the more hard is for me to debug the problem. Even because I cannot work on the configuration of your site.
    So, I would be very grateful to you if before describing here your problem you run the debug task which is much much easier for you than for me: make a quick test checking if table2chart plugin works after deactivating all your other plugins. If it should work, then reactivate your plugins one at a time checking every time if table2chart works again, and write down the one(s) which conflicts with it.
    Thanks for your understanding.

  26. Great plugin!! Works like a charm. Thank you for your hard work. Would you consider adding a feature that allows the user to toggle all data points off and on? It seems that when you have a large dataset on a line chart (10 or more lines), it is very difficult to look at a few lines only because you have to toggle off many lines to look at just a few. For instance, my dataset has over 40 lines. And if I want to look at just two lines, I have to turn off more than 35 lines! It would be awesome to be able to toggle all data points off.

    Thanks!!

    • I’m not sure to have understood well. I think that the feature you’re asling for does already exist: it suffices to click on the markers in the legend to turn off/on the corresponding chart series.
      If you mean something else, can you make an example linking a test web page with an ad hoc chart?

      • Sorry, the first time I’ve read your message I did it too quickly. You were clear, you want ho hide many series at once and not just one at a time.
        I have two questions for you:
        1) how would you implement such a feature?
        2) do you know a bit of JavaScript?

      • Thanks for your reply. Unfortunately, I do not know much javascript. If I were capable of coding it, I would try write code for an action in the shortcode (e.g. loadall=”true”/”false”) that forces the script to load or to not load all datapoints as the page loads (at the beginning). I think the only other options is to make a button in the chart that turns all datapoints off. But I think that would be much more difficult. It would be easiest if all datapoints just didn’t load right away, then the user could just turn on the datapoints when they need them on. I don’t know. Anyone have any ideas? Thanks again…

      • The action you want requires just one code line.
        However in general the button solution is preferable. I will implement something in that direction, even I’m not sure when (maybe in one or two months). Anyway you will have to add your two or three code lines by youlself. I will suggest you how to do it.

  27. Hello,
    I have problems using you plugin on my page http://bestcpucoolers.com/best-cpu-cooler-reviews/cpu-cooler-roundup-part-i-1/2/
    It uses space like where chart would go, but it only displays
    , [x:’red’, y:23], [x:’yellow’, y:41]]”]
    Going by your first comment, i was using the following code, maybe there is something wrong in it?
    [Table2Chart order=”row” type=”bar” background=”#b0b0b0″ data=”[[x:’blue’, y:15], [x:’red’, y:23], [x:’yellow’, y:41]]”]
    I used that code just as a reference point, to see what I would get, in order to make my own customizations, but had no luck…
    Thanks in advance.

    • My comment you are referring to showed only an example of an hypothetical argument which is not available yet.
      For the moment the plugin needs a table to display a chart, and it seems to me that your page does not contain any table.

      • In the last months I have added several other features. For example you can use the hide argument to draw a chart without displaying the corresponding table.
        Anyway the feature you are asking for is on the top of my list since other people are interested in.
        Sorry, I am on vacation and I will not be active in the next days.

      • Can you please further explain ‘hide argument’… so there is a way to not show the table but the chart will work? Btw, I got it working now when there is a table, everything seems ok, but I would really like not to show the table since its going to be huge at some point…

      • Oh.. you meant via css? I was complicating too much, thinking your script needs editing and stuff… Disregard my last question. Happy vacation :)

    • I figured out that you cant use [ ] so i corrected the code to
      [Table2Chart order=”row” type=”bar” background=”#b0b0b0″ data=”{{x:’blue’, y:15}, {x:’red’, y:23}, {x:’yellow’, y:41}}”]
      but still there is no chart drawn. I think that I am missing something form your example… Sorry for the noob question.

  28. Could you consider implementing a feature that would draw numbers inside the bars, so that the visitors could read the numbers without needing to point on the bar with a mouse. Thanks

  29. Awesome plug-in … how do I go about re-ordering a date series on the x-axis? My dates show in an order like 9,8,7,6,5 where I’d like to show 5,6,7,8,9?

    • At the moment you can enlarge your table putting for example columns in this order: 9,8,7,6,5,6,7,8,9 and then hiding the first four ones.

      • Ok thanks, that gets me a bit closer. I’m still a bit confused on how to set the order, I basically want to create a line graph that shows the data point and latest date on the left, and the most recent date on the right.

  30. Hi Antonio,

    I hope you had a great vacation! Have you written the code for turning all data off? I would love to implement this line of code on my tables, and I think it would be a great addition to your already excellent plugin.

    Thanks so much!
    Eric

    “Antonio Rinaldi
    il 31/05/2013 alle 11:15 pm scrive:
    The action you want requires just one code line.
    However in general the button solution is preferable. I will implement something in that direction, even I’m not sure when (maybe in one or two months). Anyway you will have to add your two or three code lines by youlself. I will suggest you how to do it.”

  31. I’ve written a new version of the plugin. It supports scatterplots and bubble charts and it allows to do many and many chart customizations, among which the ones you have asked to me. Anyway, I need some days to write a new post about the new features and explain how to use them. When I finish I will close this page and redirect all the users to the new page.

Comments are closed.