This example demonstrates how to use the HTML component to embed a chart on a page. This is just one of the many things you can embed in your site using the HTML component. Example Code Home year = ; flights = { : [ , , , , , ], : [ , , , , , ], : [ , , , , , ], : [ , , , , , ]
};

$w.onReady( {
	$w( ).postMessage(flights[year]);
	$w( ).onMessage( { (event.data.type === ){
			$w( ).postMessage(flights[year]);
		} (event.data.type === ){
			$w( ).text = ;
			$w( ).show();
		}
	});	
}); {
	year = $w( ).value;
	$w( ).postMessage(flights[year]);
} let 2017 let 2014 6.3 2.4 7.6 5.4 9.9 7.8 2015 6.7 2.2 11.2 5.5 10.1 7.9 2016 7.2 3.1 8.2 5.6 9.2 10.2 2017 7.4 3.9 8.8 6.1 8.7 9.8 => () "#html1" "#html1" ( )=> event if 'ready' "#html1" if 'click' "#clickedMessage" `The number of flights to in is million.` ${event.data.label} ${year} ${event.data.value} "#clickedMessage" export ( ) function year_onChange event '#year' "#html1" Site Code $w.onReady( { }); ( ) function // write your page related code here... TODO: How We Built It Here we embed a Chart.js chart. The HTML code for the chart is entered into the HTML Component using its Edit Code button. The page and the HTML component communicate with each other using the postMessage and onMessage functions. When the page loads and each time a year is selected using the dropdown element, the page sends a message to the HTML component using the postMessage function. The message contains the values to display in the chart. The HTML component receives the message using its onMessage function and updates the chart accordingly. When a user clicks a bar on the chart, the HTML component sends a message to the page using its postMessage function. The message contains data about the item that was clicked. The page receives the message using the onMessage function and displays its contents to users using the text element below the chart. The chart is based on chartjs.org. You can find their repository and license on GitHub. Next Steps Open this example in the Editor to work with the template. Publish the site. Learn how to . work with examples in Velo APIs We Used $w.Text API $w HtmlComponent API Previously published at https://www.wix.com/velo/example/create-a-custom-chart

Must-Have Velo Glossary for Coders: 60+ Essential Terms Precisely Explained

Step-by-Step Guide on How to Work with the Velo Code Panel

Develop Smarter, Deliver Faster

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

A Custom Chart by Using the HTML Component Plainly Explained

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

5 Hot Velo Practices to Test and Debug Your Website Code

48 Stories To Learn About Coding With Velo

5 Hot Velo Practices to Test and Debug Your Website Code

73 Stories To Learn About Velo

Building A Flutter Native App with Wix Velo for Local Covid Hospital and Oxygen Tracking

5 Hot Velo Practices to Test and Debug Your Website Code

48 Stories To Learn About Coding With Velo

5 Hot Velo Practices to Test and Debug Your Website Code

73 Stories To Learn About Velo

Building A Flutter Native App with Wix Velo for Local Covid Hospital and Oxygen Tracking

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps