How to create a graph?

Ask the community
,
1

Hello I like to create a line graph connected to database like this:
can anybody tell me how?

1 Like
2

Hi Siddharth,

You can use the Chart Example to get a chart. You’ll have to change the code in the HtmlComponent to choose the type of chart line . It’s that easy.

Have fun,

Yisrael

3

Thanks I will do it later.

4

Thanks for your response, Yisrael. I noticed that the data were hard-coded. Could you please provide a sample code to extract the data from the database?

5

@sorunkerm try this https://www.vorbly.com/Vorbly-Code/WIX-IFRAME-GRAPHS-%26-CHARTS-WITH-FILTERS

6

Thanks for the information. It was useful for me too

7

Mr. Yisrael
In fact we need a lot of examples about graphic (chart)
How to connect the graphic to the database and get the sum or count of the elements
Like I have 10 items (Products )and look for total orders for these items
The above examples do not have a real connection with the database

8

@alkanani98 There are plenty of database examples . Once you learn how to use the database, you can use the filter or search results to send to the chart.

9

@yisrael-wix There is only one example but it contains data manually

Find a way to connect the graph to the database so that it reads the data directly from the database with an equation to get the sum

10

@alkanani98
The problem is that wix/corvid does not provide an api yet to directly connect a collection to a graph. You have to code your own “connection.”
To do that, you should read up on arrays and objects .
You will also need to learn how to loop through data.

You can run a query inside a loop and write your collection data into an array.
With that array you can easily do calculations.
Corvid Tutorial: Calculating and Displaying Collection Data
Once you have all the data you want to display in the chart, you send the array (or you can generate an object) to the iframe for display in a graph.

11

It’s recommended to switch to the newest version of Chart.js (The version source in this example contains some bugs that were fixed in newer versions).

12

Where is the newest version of Chart.js?