Basic Charts and Graphs

Learn how to dynamically plot, chart and graph data arrays and label arrays using Corvid (a.k.a. Wix Code) and an API call to Chart.js.

This example creates a flights object containing four arrays, one for each year from 2014 to 2017 with the number of flights to a particular country in millions. It also creates a countries object containing four arrays, one for each year from 2014 to 2017 with the names of each country corresponding to the value arrays within the flights object. The arrays within the flights object populate the values of the chart, while the arrays in the countries object populate the labels in the chart. Two different charts are plotted in this example with the above data and labels. A dropdown #iptYear allows users to choose which year to plot on both the #htmlBarChart and #htmlDoughnutChart. The text field below each chart provides additional information when the user clicks on a segment of each respective chart. Try the example below.

Try it!
#iptYear
arrow&v
#htmlBarChart
#txtBarChart
Click bar chart for text display.
#txtDoughnutChart
#htmlDoughnutChart
Click doughnut chart for text display.

HTML iFrame elements are used to house the chart. Add an HTML iFrame element to your page in the position of where you want your chart to be, by clicking Add > More > HTML iFrame. We have added two HTML iFrames to demonstrate two different graphs. Give your HTML iFrame an alias such as #htmlBarChart or #htmlDoughnutChart. The following code is added to your HTML iFrame by clicking it and selecting Edit Code. The code added to the HTML iFrame makes a call to Chart.js with the relevant data and labels. Chart.js is a free charting service for creating various types of charts. You can start your chart off with a default data array, or leave it blank until a data array is passed to it via page code. Various graphical parameters can be dynamically altered using postMessage from the page code.

HTML iFrame Code for #HTMLBarChart

HTML iFrame Code for #HTMLDoughnutChart

Add the following to your page code. A year variable is defined with a starting value of 2017. A flights object is created with a data array for each year from 2014 to 2017 containing the number of flights in millions. Similarly a countries object is created with country label arrays for each of the same years.

The iptYear_change function is used to pass the selected data and label arrays to each respective chart based on the year selected - don't forget to add the onChange event listener to the dropdown element! The barChart and doughnutChart functions receive a message back from each chart if a segment of the chart is clicked, and then populates a text element below the chart called #txtBarChart and #txtDoughnutChart

Page Code

Please wait ...
Disclaimer: To the best of our knowledge, this code works for its stipulated purpose. If you find an error in our code, or know of a better way to achieve the same result - please contact us! All our code snippets come with full support to help you implement them on your own website - simply contact us for help.