<canvas id="chart" style="width:100%;"></canvas>
	

const loadImage = src =>
	new Promise((resolve, reject) => {
		const img = new Image();
		img.onload = () => resolve(img);
		img.onerror = reject;
		img.src = src;
	});

const imageUrls = [
	"./assets/images/p1.png",
	"./assets/images/p2.png",
	"./assets/images/p3.png",
];

// Wait for pattern images to load then draw the chart
Promise.all(imageUrls.map(loadImage)).then(images => {
	let ctx = document.getElementById('chart').getContext("2d");
	let patterns = [];
	images.forEach((image, i) =>
		patterns[i] = ctx.createPattern(image, 'repeat')
	);
	// Create time series
	let ts1 = new TimeSeries(1, {labelText: "Test 1"});
	let ts2 = new TimeSeries(2, {labelText: "Test 2"});
	let ts3 = new TimeSeries(3, {labelText: "Test 3"});
	
	// Add data to time series
	ts1.data = [
	new DataSample({color:patterns[0], value: 70, desc:"Test 1"}),
	];
	ts2.data = [
	new DataSample({color:patterns[1], value: 80, desc:"Test 2"}),
	];
	ts3.data = [
	new DataSample({color:patterns[2], value: 95, desc:"Test 3"}),
	];
	
	// Find the canvas
	let canvas = document.getElementById('chart');
	
	// Create the chart
	let options = {xAxis: {xLabel:"Success rate"}};
	let chart = new HorizontalChart(options);
	chart.addTimeSeries(ts1, ts2, ts3);
	chart.streamTo(canvas);
});