psddude supports this item


This author's response time can be up to 1 business day.

40 comments found.

When going from horizontal to vertical in the bar charts, the grid is partially covered so that you cannot see all the grid value (It is partially covered by the bar). This only seems to be true on vertical bar charts. Any work around?

You can try to modify the “grid-scale” and/or the “padding” attributes. “grid-scale” determines the interval at which the grid lines are placed and “padding” determines the space around the graph. Hope it helps. If you have a live example please share so I can tell you exactly what to change.

Thanks, “padding” did the trick. I didn’t realize that was an option for bar charts.

now that you mention it I think I forgot to put it in the docs, glad to hear it worked :-)

Trying to get this to work after an jQuery Ajax load. The graphs do display upong initial load, not after an Ajax update of that same code.

Any clue how to fix this?


this is not in the documentation, but you can call the following function to redraw a graph:


where “id” is the ID of the infographic HTML element. All infographic elements get an auto-generated ID, or you can set one yourself. Hope this does what you want

Thanks! This works, however, once the graph is redrawn it doesn’t hide the “infographic-data” element. I’ve created a custom function, which does that now, but it might help you for your next update.

function infoGraphicRedrawCustom(element) {
            $("#"element" infographic-data").hide();        

thanks! glad to hear it works fine for you

Can new files be uploaded to previous version or does the latest version require a new install?

To install new version simply copy the new infographic.min.js file over the old one.

Hi, im interested on buying ur product, but first can i use data from mysql for the graph? :)


this is a client side library, so in order to link it to data from mysql or any other database you have to use a server-side technology like PHP, .NET, Java, etc.

I’ve created a small tutorial on how to use the infographic library with PHP and MySQL: hope this helps

hope you decide to buy it ;-)

i bought it last week :) thanks

thank you for the purchase. let me know if you need any supoort for the library

how do i include the legend?. i have connected to mysql database and it is working well. but no legend. i used your demo (below)

your demo shows a legend but it is not showing.?


it’s enough to include the following HTML

<infographic-legend for=”visits” display=”inline” ></infographic-legend>

you have to replace the value of the “for” attribute with the id of your graphic.


Are you available for hire? Have some graphs I need made from an PSD

Hi, are you able to create some charts for me from a PSD? I am willing to pay for your time.


I am sorry but as much as I want to, I don’t have enough time to take any more work for the moment. If you want, you can try the infographic library yourself, as it is very simple to use, and I will offer you guidance if you need to customize it.

You can send me the psd so I can take a look and tell you if the library supports that kind of customization out of the box.

Hi, my client want a chart from this excell file: normally he wanted highcharts - is your plugin doing the same thing as highcharts as you see the chart is simple, but i really don’t know how to do it, i’m bad with this type of things (excel, number, charts)...and don’t like it, which not helps! i’ve tried in highcharts with the models, it seems easy, but don’t work with numbers so if you can give me a guidance to do it: date as X , trafic as Y and annotations can be a secondary Y for ex It would be really great!


i’m good with html and css, so no problem with that


the link doesn’t seem to work so it’s a bit difficult to figure out what you need. Have you looked at the preview for the library? It’s not displaying all you can do with the library but it has basic examples with all supported charts:

Also check the full documentation of the library here:

I believe it contains everything you might want from a chart library together with very flexible customization options and even CSV data loading. I’m always glad to offer support for users of this libray.

hope you decide to buy :-) John


I got a problem with your library: I installed it using the wordpress plugin you are offering. Unfortunately, it always shows my graph at the upper left side of the page.

I already tried to change like every parameter. Any idea what I could do? :o


Hi,Ii wrote you an email!

did you get my reply on mail? The problem is that the theme you use has the following CSS styles in style.css line 734:

canvas{ position:absolute; left:0; top:0; }

Position absolute makes the canvas of the infographic to display in the left right corner. One solution would be to remove the bolded line from your style.css. You can do that by going in the WP administration > Appearance > Editor > style.css

Hey, many thanks for the fast help! Works fine now :)


Is it possible to export the generated graphs automatically to a folder in a server to use them later in a PDF document?

Thnx in advance. Javier


the library uses HTML5 canvas which can be easily transformed into images. There is no automated mechanism in the library itself, but with only a few lines of JavaScript and a simple server component it can be done and I can help you with it.

Thnx psddude.

Does it works ok in IE8?

Would it be possible to have a test?

Hi Javier,

though IE8 does not support canvas, but there is a work around which involves a googlecode project named exporercanvas which would also work for the infographic library

Hi there,

I just bought this library and attempted to use it for Wordpress with the ‘Infographic Shortcodes’ plugin, but with no luck.

I have followed your steps from uploading to my wp-includes folder and adding the code to the header.php file. I’ve even tried using both shortcodes and HTML tags.

Please see the page in question here:

(It just says ‘Data 1 Data 2 Data 3’ as per your code in previous comments, and below I tried it again with shortcodes for the variables ‘Women’ and ‘Men’)

Your help is much appreciated :)

Thank you!

Hi psddude,

I have configured the plugin to point to the file – see screenshot here:

The short code is still not working for me. Again, see the site here using the infographic shortcode:

Thanks again, Meghan

Hi Meghan,

in the link that you have sent me the page tries to load the library from and it cannot find it. Can you send me a direct message and we can continue to talk via email?

thanks, John

Hi psddude,

Ah – since you said that, I’ve put the file in the main folder on, and it seems to be working now!

Thanks for your patience. I’ll let you know if I come across anymore problems!


It seems that tinyMCE 4 fails initialization when aslo loading infographic.

Hi, can you be a little more specific regarding the problem? Do you mean WordPress’s tinyMCE or … Send me a direct message with the link maybe I can help you to fix this.


first, nice work, i like it. My question… is there a possibility to have more informations in the legend (<infographic-legend>) of an Pie Chart. I like to display all the Informations i have in the mouse-over frame. Label, Percent, Value and i would like to turn of the mouse-over frame.

Is there any workaround for this?

Thanks a lot Marc

Hi Marc,

thanks, I am glad you like it. I’m not really sure as to what you are trying to achieve. The <infographic-legend> has an attribute “show-values” which you can set to “yes” and the legend should display the values. For which type of graphic do you want to turn off the mouse-over frame? The quickest way for ex for piechart is to add a CSS rule #pieChartTooltip{display:none;}

hope this helps, John

Hey John,

thanks! This was what i am looking for.

you are welcome!


I have a site that has a constant flow of data. I need the charts to be able to reload using ajax or some other method. What is the best way to go about doing this? I saw some similar questions but they gave no real insight as to how they fixed it. Also what do you mean when you say piechart element id? Is that something like the following below?

<infographic-piechart id=’piechart88’

Thanks, George

Hi George,

each chart/graph has an id. You can either set the id yourself otherwise one will be autogenerated.

Whenever you change something in the dataset of a chart/graph you need to call the “infographicRedradraw(chartId)” function. You can call this function on the ajax’s response after you make the data changes in the DOM.

If you can’t get it to work send me a message with the link to your site and I will tell you exactly what and where to add it.

hope this helps, John

Thanks John I figured it out. I had to make the ajax call, then immediately after redraw the chart and then hide the infographic-data like the guy above wrote.

Glad it worked!

Is the line graph responsive?

Yes, all graphs are responsive

I want to show charts in WP with 1) posts/ categories based on number of posts 2) tags 3) comparison of categories 4). authors 5) date 6) status updates 7) other meta

I want to embed the charts with a page or show it at the admin end when a user logs and who has the user permissions to view this on wpmu

I could not see anyway of importing the data in your demo sir

The Infographic Library is a client side library, so you will have to handle the server side part. I have successfully created infographics linked to databases and to wordpress data. There is also a WordPress plugin that allows you to easily add infographics to pages/posts: And here’s a PHP + infographic chart example:

Can i get a backend login to test how to use the wp meta fields etc. to show the charts… just need to test it, will buy 3 licenses if it works out

I don’t have a wp backend for demo. What do you mean by wp meta fields? Send me a direct message and we can discuss what you need over email

Hi there, nice work with this. I have backend mysql tables storing my data, front end I am coding with php to display complex queries into tables. Would this fit in seamlessly, ie could I simply add my queries to your library to produce bar charts…

Some queries are simply, count of orders, sum of amounts etc but on others I display cross tab style tables where names are on left, months on top and amounts left to right accordingly..

Thanks and again lovely work

Thanks! Using the infographic library only needs you to include a JS file and then you can add the charts in your pages as HTML tags. You can write the dynamic data with PHP and it will work seamlessly.

Don’t know exactly what you need for cross tab, but you can check out the the documentation to see what you can do with each chart:

Hi again, thanks for that. Have you any samples how it works with mysql please, on the documentation it shows only hard coded data wrapped by the infographic code

<infographic-pieslice value="20">Data 1</infographic-pieslice> 
<infographic-pieslice value="80">Data 2</infographic-pieslice>
<infographic-pieslice value="40">Data 3</infographic-pieslice>
I am using jqgrid so my output is simply
<div style="margin:10px">
    <?php echo $out_grid ?>




this is a simple example for a dynamic infographic. I am working on an article on how to produce dynamic graphs out of WordPress data.


I just purchased this library and it’s great, however it seems that when I load <script src=”/js/infographic.min.js” type=”text/javascript”></script> it somehow conflicts with a drop down menu script I already had in place and the menu no longer works. The menu is made in such a way that it converts to a mobile menu if the sceen size shrinks. I can give you access if needed so you can check it out. Any help or suggestions would be super appreciated.

Also I noticed that it also conflicts with the Google Captcha code.

Can you please write me a private message with the link to your website?


mbjarts Purchased

Hello, I have 2 questions:

1. shapebargraph always shows 10 images? Is there a way 1 can set the number of images? like 4 of 5, or 1 of 2, etc..

2. Are there any examples of using .csv? Can I use 1 csv for multiple charts?

thanks for such a great script… -Michael

Hi Michael,

thank you for using my library

1. the shapebargraph is meant to show percentage data (0-100%) therefore I chose to display that in a scale of 10 image. So, it’s not possible to display a specific number of images

2. The csv data source only works for line graph. Here’s an example

If you have a particular thing that you want to achieve, please send me a message and I will try to help you make it.

hope this helps, John


Your script looks awesome. Is it possible to use this to pull in an RSS< XML, or JSON file and generate a graph dynamically?


Thanks! the library has support for pulling CSV data. See here an example (look for CSV)

I does not support other formats, but you can relatively easy hook up data from any source either via JavaScript or server side code. I can help you with that depending on what it is that you want exactly

kindest regards, John