Table2Chart: a WordPress Plugin to draw charts

55 pensieri su “Table2Chart: a WordPress Plugin to draw charts”

1. Hi Antonio,

   Great update! I am glad that you got it up and working. The new customizations look great and without limits. Well done.

   The new feature of “hide all” works! But it doesn’t work very well. I have tried it now in Firefox and Chrome. In Chrome, it does successfully hide all data points, but only after 15 seconds or so. The tab that is open just freezes as it executes the jquery command that hides all data points. In Firefox, when I click on ‘hide all’, it begins to execute the command, but then Firefox prompts the user and says there is an unresponsive script running. If I press ‘continue’, the script continues to hide data points until Firefox prompts the user once again and with the same error message. However, if I hit continue, it does hide all of the data points.

   I guess that when you have as many data points as I do, it takes a long time to hide all of the data. Do you think I can correct this issue? Have a look at my web site.

   Thanks so much for all of your hard work! This is great…
   Eric
   Pasadena, CA

   Rispondi ↓

   • Javascript is lazy but not so lazy…
     In order to identify the source of your problem I suggest you to apply the code to a simplified version of your chart. Try first with 5, then 10, then 15 data series, and so on. Moreover, notice that you are creating the “hide all” item destroying the first series! You have to input as many commas as the number of data series you have, just after the first “[“. So, if you try with 5 series, you have to write “[,,,,,”. Let me know.

     Rispondi ↓

2. Pingback: da tabella a grafico in Wordpress | sei-uno-zero-nove

3. One of the best charting tools I have seen. Very well documented and satisfies all my requirements

   Rispondi ↓

4. This is the best charting plugin I’ve found for WP!
   I’m displaying a table that has several columns of prices. When I try to chart those columns, the values are changed from, for example, 22.5 to 225
   Can you help me correct this?

   Rispondi ↓

   • Which value has your CONVERT parameter?
     Have you tried with [table2chart convert=true] ?
     Otherwise, please send me the link of your page containing the chart. Thank you.

     Rispondi ↓

     • Aha! Adding the attribute convert=”false” does the trick! Now all my prices are displaying correctly when charted. Thank you, I knew it had to be something simple!

       I noticed that I can create a pie chart using the attribute type=”pie”. It looks like the labels don’t work yet for pie charts. I’ve tried many chart plugins for WP and this one is the best by far! I can’t wait to see what you have planned in the next release – I hope it’s pie charts!

     • If you have read my original article, you should know that I don’t like
       pie charts. :)
       Anyway, as you have recognized, it is already possible to draw such a chart. And if you use the enclosing form for your shortcode, you can set labels like you desire.

5. Awsome plugin Antonio. Using it in our site now. How can we display the name in columns at 90 deg angle. for eg I show 10 columns but each name is pretty big so it kind of overlaps. If I show the name at 90 degree angle, that should solve the problem

   Rispondi ↓

   • Try the enclosing form with the following content:
     xAxis: {
     labels: {
     rotation: -90,
     align: ‘right’
     }
     }

     Rispondi ↓

     • Where will this code go ? Right now I am creating a wordpress post and using Table2 chart with abase plugin for eg
       [abase select=”name as Name , student as Total_Students” from=”college”]

       [Table2Chart width=”600″ background=”#f0f0ff” color=”#00d000,#00ffff,#ff00ff,” ]

     • Inside the opening and closing shortcode tag, as explained in the
       “advanced use” section of this page:
       [Table2Chart width=”600″ background=”#f0f0ff”
       color=”#00d000,#00ffff,#ff00ff,” ]
       put your code here
       [/Table2Chart]

6. Hi again!

   Is there a way to exclude the last row of the table? I have a page template that populates a table with database values. Sometimes the tables have 7 rows, sometimes they have 11 rows – it’s different each time. The final row of the table is always totals from the table columns. I need a way to exclude the last row so it doesn’t mess up the scale of the chart. At the moment I’m displaying the totals in a single row of a second table, but it’s not the best solution.

   Rispondi ↓

   • I found I can use the table header tag to show the last row of the table so that is not incorporated into the chart. It’s still not the perfect solution, but it works better than a second table.

     Rispondi ↓

7. Thank you for sharing your solution. Indeed, there wouldn’t be a simple option to exclude the last row if the table is dynamically build and the number of rows changes from time to time.

   Rispondi ↓

8. Antonio, do you have a solution for rendering the chart as images on the wordpress ? I could figure out a link on right which helps downlaod the chart as images This is example
   http://greprep.info/2014/04/21/top-10-post-with-link/
   Look on the right of the chart “Top 10 colleges with international student in MA ”
   I would like to have the chart rendered as image on wordpress so that users can share them. Do we have a way out ?
   I do not want to render charts as image on server.

   Rispondi ↓

   • > I would like to have the chart rendered as image on wordpress
     > so that users can share them. Do we have a way out ?
     > I do not want to render charts as image on server.

     It is not possible, by design.
     Render the chart as an image means work on the server side.
     Render the chart as a dynamic element of an html page means rely on the
     client side. There are libraries that create charts as swg elements
     (like in this plugin) and other ones that create charts as canvas elements.
     The button to download the chart as an image is the maximum you can get.

     Rispondi ↓

     • How do I enable the little button to enable the ability to download the chart as an image?

     • At present the plugin does not provide for it. I will add this feature in the next version. Or, if you want, I can give you the instructions to add it manually to the current version.

9. Thanks Anotnio.

   Rispondi ↓

10. Great plugin! Just one minor bug I discovered. If the table contains a footer (tfoot), the data don’t get interpreted correctly.

    Grazie mille,

    Chris

    Rispondi ↓

    • Thanks for your warning.
      Have you a link to highlight or can you post the html code of the table
      which raises the issue?

      Rispondi ↓

11. Is there some way to hack this to have a % width instead of pixels?
    Thanks

    Rispondi ↓

    • Yes. Use the enclosed syntax. If you link a page, I can show you.

      Rispondi ↓

12. Hi, I’d like to customise the credit line and values formating using Highchart API, from the shortcode (in the code tab of the wordpress text editor) : [Table2Chart excludecols=”2″ height=”200″ titley=”Effectif” includecols=”5″ color=”#a89957″]credits:{enabled:false}[/Table2Chart]

    but whenever I replace credits:{enabled:false} with something using ‘ to define parameters the graph disappears. It seems the ‘ is replaced by the character ascii code…

    Do you know where I should find the error ?

    Thanks a lot !

    Rispondi ↓

    • I am unable to reproduce what you point out. Can you make an example writing the precise content of your shortcode?

      Rispondi ↓

13. The plugin stopped working as I updated to WP 4. Is it normal?
    Thank you.

    Rispondi ↓

    • No, sure not. Currently I have it running on a 4.1 WP (updated from 4.0) website and it’s all ok. Maybe have you changed some other thing?

      Rispondi ↓

14. Works great in wp4.1. What would my table look like to have two series in a scatter chart.
    I want a scatter chart with markers colored according to column cat

    now i have all the same colors using this table
    item x y cat
    test1 1 1 a
    test2 1 2 b
    test3 1 3 a

    thanks

    Rispondi ↓

    • It comes to my mind a workaround which allows to choose the color depending on the item value, but not on value of another field, sorry.

      Rispondi ↓

      • and that workaround would be… Thanks.

      • Try
        [Table2Chart …]
        chart: {
        events: {
        load: function () {
        for (ct=0;ct

15. Great plugin! Was looking for something like this for the last weeks, will now check if I can get my spider and polar charts visible in WP with this ;)

    Btw – one little request for https websites… can you change “http://code.highcharts.com/” into “//code.highcharts.com/”?

    In that case it will use either the http:// OR the https:// version of the source file (both exist). So if you have your website accessible via http it will load http://code.highcharts.com and when the website is accessible via https it will load https://code.highcharts.com. This prevents SSL / https warnings/errors. Thanks!

    Rispondi ↓

    • Thank you for your suggestion. In the meantime you could change the plugin source code by yourself.

      Rispondi ↓

16. Hi Antonio,

    I’ve read you’re not font of pie charts :-). I’ve seen that it’s possible to create one but it’s not respecting the default colors. It’s just display random colors. Is it possible to change this?

    Thanks in advance

    Rispondi ↓

    • Doesn’t color parameter work?

      Rispondi ↓

17. Hello!
    Firstly, your plug-in is amazing, I didn’t think I would find just exactly what I was looking for! You can custom it, with a lot of options and it works great in my website. Only, a little problem I found: for some reason, in my chart, the amounts in thousands don’t appear, it only appears something like 1K 2K, 3K, etc.. I don’t know what to change: I selected convert true, false, quantities with dots, with commas, but I don’t get to show thousands. Nowadays, my numbers use dots and convert is true; with convert in false it understood it was decimals.
    Do you know what is happening?
    Thanks a lot!

    Rispondi ↓

    • Sorry for my tardy reply, I am very busy at work in this period. You can try the enclosed form with:
      yAxis: {
labels: {format:'{value:,.0f}'}
}

      Rispondi ↓

      • Hey, thank you very much! That worked perfectly!
        By the way, why dots don’t appear in thousands? And could I make the yAxis begin always with 0?
        Thanks one more time and no need to hurry! :-)
        (You can delete the message below, I made a mistake about where to answer)

      • yAxis: {
labels: {format:'{value:,.0f}'},
min: 0
}
        Sorry, in this version it is not possible to have dots as thousand separators.

      • Thank you very much! It worked.

18. Hello Antonio,

    your plugin is exactly what I’m looking for! Great work!

    Unfortunately the download link doesn’t work, it says “404 file not found”. Is there another way to get your plugin?

    Thank you very much!
    Anna

    Rispondi ↓

    • Sorry, the plugin has been removed from WordPress plugins directory because Highcharts license (CC) is not compatible with WordPress license (GPL). It is not possible for me to resolve the issue. Anyway if you want to try the last available version it I have updated the download link.

      Rispondi ↓

19. Buongiorno Antonio,

    non so se rispondi ancora a delle domande su questo plugin (nice job btw, thanxx !), but just in case :

    I’m trying to create a column type chart, things going Ok except that I can’t change the xAxis labels colours.

    If I leave the style: { } empty (see below) then the graph draws Ok (but no color of course, well just the default grey), but as soon as I enter color:’red’ or color:’ff0′ inside the brackets, the plot doesn’t show up anymore…
    (btw I get an error msg in the console which points to Table2Chart.js, but on a commented line – makes no sense)

    Here’s the Table2Chart code I have in WP, let me know if you’re still here ^^ and need the table data – grazie tanto ! :)

    [Table2Chart table=”1″ hide=”true” convert=”false” order=”row” title=”Moyennes des Notes – Saison 2017-2018″ titley=”Moyennes” width=”640″ color=”blue”]
    plotOptions: {
    series: {
    dataLabels: {
    enabled: true
    }
    }
    },
    xAxis: {
    labels: {
    style: {
    color: ‘#f00’
    }
    }
    }
    [/Table2Chart]

    Rispondi ↓

    • Strange…
      Try to remove all unnecessary lines:
      xAxis: {
      labels: {
      style: {
      color: ‘#f00’
      }
      }
      }
      then try to use “red” instead of ‘red’.
      Does it change something?

      Rispondi ↓

20. I have tried to enter a new comment, but it never appears here… :(

    So this is another trial, with a dummy email address. (I put a real email address on my 1st msg of course)

    Is this message going to appear in this page…?

    Rispondi ↓

    • Please be patient, you have to give me the time to approve your message (I’m borbarded of spam messages). :)

      Rispondi ↓

21. Oops… mi dispiace, I didn’t know you moderated the messages before they appear here… :/

    Btw as you probably understood, I’m the impatient one who first posted the long msg about xAxis labels colours. :)

    Btw², we’re using WordPress 4.9.7.

    Rispondi ↓

22. Ok thanks for the answer.

    I have tried what you posted (removed the plotOptions block), also with “red” in double-quotes, still does not work.

    I even reduced the xAxis instruction to a single line : (normally this would be a multi-line, indented JSON type code)

    [Table2Chart table=”1″ hide=”true” convert=”false” order=”row” title=”Moyennes des Notes – Saison 2017-2018″ titley=”Moyennes” width=”640″ color=”blue”]
    xAxis: { labels: { style: {color: “red”}}}
    [/Table2Chart]

    but it didn’t help (as expected, but ya never know).

    Hopefully we can get this to work, I would also love to be able to do “boxplot” type graphs if possible via your plugin.

    Rispondi ↓

    • Very strange…
      Read the source code of the page. Which scripts do you have just before the footer? Is there one that points to https://code.highcharts.com/highcharts.js?
      If yes, send me your table code (with dummy data, if necessary) and I take a look.
      Box-plot? Ahah! It’s possible, but complex. :) You’d better to build only the JS(ON) code first, looking for help at stackoverflow. Then put the code in WP editing page, and voilà.

      Rispondi ↓

23. I just typed a complete answer, but when I sent i , it got lost with a weird error mesg ” potential risk bla bla…” :-/
    (oh I understand now, it’s the script thing below, so I just inserted a space after the <)

    So I'll make it short (for a change ^^) :
    yes there is a link to HighCharts in the WP page source text/code :

    and one to Table2Chart.js of course (but installed locally).

    Can I mail you the code with table data to yr email address instead of here ?

    Would be great if I can do boxplots, if not too too complicated…

    Rispondi ↓

    • Well, I have identified the source of the issue: WP automatically translates quotes into smart quotes. To avoid this, follow the indications of https://www.webhostinghero.com/remove-smart-quotes-from-wordpress/, for example. If you are unable, I will embed all the needed work into my plugin source code. Regarding box-plot, now, after having seen your data, I have understood that it would be too complex to do it with my plugin. It would be much easier to make the chart using Excel, really.
      Thank you for your patience and understanding.

      Rispondi ↓

      • Hi Antonio,

        yep, the trick from the web site you mentioned works – thanxx ! (though I don’t quite understand why this texturizer thing doesn’t affect the rest of the code in the article, for instance the at the beginning, not to mention the shortcode which is full of ” ” quotes…

        However I’ll have to ask my writers friends (the ones that write most of the articles on our website) to see if they’d accept such a change (to disable the WP texturizer entirely), my guess is that it will be a resounding “no way !”.

        But I’ve seen that it’s possible to define which tags are or are not texturized, maybe I’ll try to just use single quotes ‘ in the graph code and define them as “not texturizable” (ouch !), those are seldom used in articles (and frankly, the diff b/w texturized ‘ and non-texturized ‘ is ridiculously small anyway).

        As per the boxplot, I have succeeded in creating a graph pretty much as I wanted – but I’ve done it directly with HighCharts not via your plugin and WP, would be a nightmare to make it work so I’ll just post a PNG image of the graph instead of wasting hours trying to generate a boxplot graph “live” in WP.

        It’s a pity though, should be possible to do whatever one wants – but I’ve had so much trouble inserting scripts/pieces of code within a WP article that tbh I’m quite fed up with it. ;)

        So a big THANK YOU for that solution, and for the time you dedicated to my request, really appreciate it !

      • If you don’t want to disable WP texturizer, please do: from the Admin sidebar: Plugin > Editor > Table2Chart > table2chart.js > replace row 53 with the following one:
        if (fobj) oopt=eval(“({“+fobj.innerHTML.replace(“‘”,”‘”).replace(“’”,”‘”)+”})”);
        Done. If it works (I have verified by myself, but let you see) I can re-zip my plugin.

        P.S.: I will check if WP texturizes my comment, too. :) In case, I will email you the line content to copy and paste. I’m pretty sure that Gmail doesn’t texturizes. :)

24. I don’t have Admin rights on our website WP so couldn’t find the edit plugin menu, so I… let’s say found a way to do the edit directly in your JS script, and… SUCCESS once again ! :)

    This is great, will allow me to f*ck around with graphs in WP more than I anticipated.

    I’m a tad surprised that you haven’t had that request long time ago, because this issue with WP must stand in the way of programmers, no…?

    Anyway, grazie mille again for the help – I can see you too have a hard time “disconnecting” even in the evenings – as for me, until I have resolved an issue, I just can’t stop… :))

    Rispondi ↓

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.