Chart Program

Store the following values in a JSON array in JavaScript.

Apple: 20

Orange: 10

Banana: 15

Kiwi:5

Blueberry: 5

Grapes:10

JSON in JavaScript example is best. Here it is partially, to help start you off.

var fruit = [
	{name:"Apple", quantity:20, color:"red"},
	{name:"Orange", quantity:10, color:"orange"}
];

Using Javascript/Canvas, draw out a bar chart showing the quantity in sales for the fruit. Each bar must be in a color that matches the fruit, please choose a unique color for each fruit. You should write the code using HTML5 drawing commands. Later on in the semester we will use a charting library.  

Write the name of the fruit, followed by a horizontal bar chart.  

Refer to the following examples for help:

https://www.w3schools.com/js/js_json_arrays.asp

http://www.sci.brooklyn.cuny.edu/~goetz/cisc3610/html5/canvas-text-advanced.html

https://www.w3schools.com/tags/canvas_fillstyle.asp

Place it on your portfolio in a section called Labs.

Partial Sample output: