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
#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