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.
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.
  • Facebook Social Icon
© CorvidCodeBank