Discussion on Infographic Charts and Graphics HTML Tags Library

Discussion on Infographic Charts and Graphics HTML Tags Library

Cart 266 sales

psddude supports this item


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

57 comments found.

For the bargraph is there a way to make the labels either permanent at the top or bottom instead of being a mouseover (Or display in the bar itself). Also, I really need to have more than one data point displaying. EG. Currently my label says ;7 Day’ and under it it says ‘Average Price and then the price, 325.44. What I would like are 2 more rows saying ‘ROI 20%’ and ‘Profit $22’.

hi, I’ll try to help. Do you have this posted online somewhere I can take a look? You can go to my profile page and share he link there.

In the mean time I will try and come up with a solution for your requests and get back to you

for the first request you can make the barchart with one infographic-bar per infographic-bargroup and put the value in the name of the bargroup. Something like this:

<infographic-bargraph > <infographic-data> <infographic-bargroup name=”330”> <infographic-bar value=”330”>Data 1</infographic-bar> </infographic-bargroup> <infographic-bargroup name=”730”> <infographic-bar value=”730”>Data 1</infographic-bar> </infographic-bargroup> <infographic-bargroup name=”130”> <infographic-bar value=”130”>Data 1</infographic-bar> </infographic-bargroup> </infographic-data> </infographic-bargraph>

and for your second request, you can use simple HTML elements next to the chart with whatever text you need. But, maybe I didn’t understand correctly what you wanted

Yes, I tried that solution but the problem is when you use different labels it breaks. “Data1” needs to be able to be “Data1”, “Data2”, etc.

I solved my requirement by using the HTML and CSS examples you posted in another thread.

I sent you the link to the page in your profile.

Many thanks for getting back to me so quickly and for providing some very useful code.

Hello, one more thing.

Is there a way I can make the chart so it does not add more than one date below the chart for the same day if I have more than one record for one day?

Example: Today is 04/10/2022, and I receive in my database 20 records. Currently, your chart is going to display 20 times the same date. Is there a way I can make it so it displays only ones?

Thank you for your time.

hi, I will try to help you. Can you give me a few more details? What kind of chart do you want to create? for example you can use the line chart x-axis-label parameter to indicate that you don’t display the x labels

Check out the docs here:

If you tell me exactly what you want or if you can share a link I will try to help you with that. For sending links try sending a message via my profile page

Hello, I wrote to you via the message box in your profile. Please respond to me when you can. Thanks.

Hello, I have bought your chart libraries. I want to ask you if there is anyway already integrated into the library with the help of which I can extract data only for a certain period of time, let’s say 10 days. I already read the documentation but was not able to find anything.

Also, I am trying to make it more beautiful with CSS, but the dates below the infographic line do not have any HTML type, do you know a way I can style those, so they can look more pretty?

you can actually hide the labels generated by the library and add your own HTML around the chart just like a regular HTML element

Hello, before purchasing I would like to ask you, is there anyway we can use it by importing dynamic data from MySQL in the “value” property of the library?

Why have been not update this since 2018?

there was no need to update. Do you need help with this library?

Good morning, my name is Carlos.

I recently purchased your product: “Infographic Charts and Tables HTML Tag Library”. My purchase number is “084517d3-5afc-49b0-8921-67aad1e1cd59 – Sep 25, 2020”.

Please I would like to know if you have documentation for the use of the “infographic-legend” tag. I need it to be displayed in a box, next to the graph.

On the other hand, do you have an example of how to load data from SQL Server or another database engine? Thank you very much for your time.

Best Regards

Carlos Franco

Hi Carlos, thank you for your purchase!

Please see the documentation here:

As for loading data from a database please see this article for creating a piechart from MySQL data:

Hello, I have few questions. 1. Can I load not only from web URL but also local image? If can, how? Because I load from “file:///C:\User\Desktop\xxx.png” get “Not allow load local file” 2. Only type of PNG can be load? Because I turn JPG into PNG can’t be load. please help, thanks. BR Derek

Hi Derek, this is a web library, it cannot load local images, it needs to run inside a webserver.

If you absolutely must load a “local” image, there are workarounds like using image dataURL

That means embedding the image in the source of the page, but it can be cumbersome if you want to use large images.

let me know if you need help with setting that up

Thanks for your help, I have another question “Only type of PNG can be load? Because I turn JPG into PNG can’t be load”

Thanks for your help. BR, Derek

I don’t know exactly what you are trying to do, so please send me a message via my profile so we can talk on email

Trying to create dynamic charts using Javascript. I get raw data instead of charts. Below is my code, and below that, the output. What am I doing wrong?


My code:
<!DOCTYPE html>

                <script src="/JavaScript/infographic.min.js"></script>
                        function(e) {

                function drawChart() {
                        var Location = [
                                ['Crackers', 20],
                                ['Chips', 10],
                                ['Candy', 12],
                                ['Cake', 3]
                        var OutString = "<infographic-piechart width=300 height=300 type=piechart><infographic-data>";
                        for (var i = 0; i < Location.length; i++) {
                                OutString += "<infographic-pieslice value=" + Location[i][1] + ">" + Location[i][0] + "</infographic-pieslice>";
                        OutString += "</infographic-data></infographic-piechart>";
                        document.getElementById("PieChart").innerHTML = OutString;


                <div align="center" id="PieChart">

Output: CrackersChipsCandyCake

can you please send me a message via my profile? I will try to help you.

basically this is a HTML tag library and the rendering of the charts is triggered by the onload event on the window

try calling documentLoad() after document.getElementById(“PieChart”).innerHTML = OutString;

That worked. Thanks.


I have a couple of questions please.

- can I insert space between individual bars within bar groups as opposed to just between groups themselves?

- can I display the number value of each bar without needing to hover over it?

- I am also struggling to make the legend appear – nothing is showing.

Please see the code that I’m currently using below (with tokens for the bar values).

Many thanks for your help.

<infographic-bargraph style=”width:100%” width=”100%” height=”300” type=”vertical” font-size=”14px” font-color=”#000000” font-family=”BrandonText-Regular” colors=”#ccc,#34d9c3” padding=”25” max-value=”25” grid-font-size=”14px” grid-color=”#515151” id=”tenancyCreated”>


<infographic-bargroup name=”Number of tenancies”> <infographic-bar value=”{{ contact.tenancy_created_company }}”>Your agency</infographic-bar> <infographic-bar value=”{{ contact.tenancy_created_gl }}”>GL average</infographic-bar> </infographic-bargroup>


</infographic-bargraph> <infographic-legend for=”tenancyCreated” display=”inline”> </infographic-legend>

I’ve sent you a response via email

Hi author, - I use PieChart, so I can not display legend like : Color : value. Can you help me ?

I’ve sent you the response via email, hope it helps

Hi Author, My Issue solved. Tks so much :)

Super! Let me know if I can help you with anything else and don’t forget to rate!

Hello I don’t have any reply for my problem


Issue solved


I have a problem with legends.

My code : $query = “SELECT ID_TACHES, TEMPS_EFFECTUER FROM BDD_EFFECTUER group by ID_TACHES”; $result = mysqli_query($db,$query);

// Performing SQL query

// Printing results inside an HTML infographic tag echo ”<infographic-piechart width=’500’ height=’500’ id=’graph1’>\n”; echo ”<infographic-data>\n”; while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) { $task=$row[‘ID_TACHES’]; $lestaches=mysqli_query($db,”SELECT NOM_TACHES FROM BDD_TACHES WHERE ID_TACHES=’”.$task.”’”)>fetch_object()>NOM_TACHES; //echo $lestaches; echo ”<infographic-pieslice value=’” . $row[‘TEMPS_EFFECTUER’] . ”’>” . $lestaches . ”</infographic-pieslice>\n”; } echo ”<infographic-data>\n”; echo ”</infographic-piechart>\n”; echo ”<infographic-legend for=’graph1’></infographic-legend>\n”; ?>

Can you help me?

Thanks for all


sure I will help you. Please send me a message via my profile page and I will contact you via email. Please send me the page where you test this and a description of what the problem is

hi, i need decimals on the line graph is this possible? ok, my mistake, all fine :o)

how do i display the values on the line graph..possible without having to mouse-over for tooltips?

hi, please send me a private message on my profile page and I will try to help you via email

I just downloaded the product, but the infographic.min.js file does not come in the zip please help thank

Hi, I will check and give you a response today.

I just downloaded the product, but the infographic.min.js file does not come in the zip, please thank

I’m not sure I understand, would you send me a private message so that we can continue this on email? thanks

i send you an email.

sent you the info on email, hope you managed to get the result you were looking for

Hello Im looking for information on using the infograph chart in PHP to connect to MSSQL not MYSQL. Do you have any info on that or where I can find it?


The library runs client side, so on the server you can use anything you like. The difference between using MySQL and MSSQL is just in the way you connect to the database.

You can read the documentation about connecting to MSSQL from PHP

Bar graph is not displaying. I’m using PHP+SQL to generate data for graph display. The HTML generated looks correct, but instead of displaying the bar graph it simply displays the bar values as text on the screen ? ...

Hi, there’s a number of reasons for which you would get that result. Are you sure you’ve correctly included the JS files in the document? Please send me a private message with the link where you included the script and I will try to help you


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

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


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?


Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey