<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/pixicharts.min.css">
<script src="js/pixicharts.min.js"></script>
<style>
#chart { width: 620px; height: 300px; padding: 10px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37); }
</style>
<script>
window.addEventListener('load', () => {
'use strict';
// Fill the array of data:
const data = [102.96,102.96,102.96,103.22,101.81,101.56,101.56,101.56,101.31,102.24,100.87,99.1,98.7,98.7,98.7,98.7,100.71,100.59,100.39,98.46,98.46,98.46,99.58,98.95,99.4,99.7,99.56,99.56,99.56,98.78,98.48,97.61,96.36,97.84,97.84,97.84,96.91,98.41,98.71,99.84,98.67,98.67,98.67,100.91,100.74,101.8,102.31,103.24,103.24,103.24,103.24,105.84,106.28,107.83,109.77,109.77,109.77,108.56,106.55,107.07,108.84,106.7,106.7,106.7,106.72,104.7,106.16,106.58,107.4,107.4,107.4,106.34,106.71,105.43,105.11,107.06,107.06,107.06,108.09,105.61,107.27,105.35,106.87,106.87,106.87,107.03,107.33,105.41,102.78,103.02,103.02,103.02,105.23,104.01,101.47,103.31,103.31,103.31,103.31,102.46,101.02,102.7,103.64,102.83,102.83,102.83,102.93,104.2,102.67,102.27,103.05,103.05,103.05,103.11,103.55,104.12,104.55,104.93,104.93,104.93,104.87,106.16,105.22,102.54,98.49,98.49,98.49,97.94,97.01,96.81,97.08,96.13,96.13,96.13,94.78,93.98,92.81,92.56,91.48,91.48,91.48,92.57,91.66,89.9,90.66,90.86,90.86,90.86,90.86,90.76,87.82,86.53,83.23,83.23,83.23,83.98,84.29,85.02,84.82,84.1,84.1,84.1,82.7,83.32,82.62,83.91,84.03,84.03,84.03,83.27,84.03,81.8,78.2,79.76,79.76,79.76,79.21,79.36,80.21,77.69,84.96,84.96,84.96,83.75,87.66,87.66,87.22,84.45,84.45,84.45,85.99,83.91,85.81,86.08,87.1,87.1,87.1,88.43,89.22,89.87,92.66,91.44,91.44,91.44,88.14,88.5,88.97,89.39,90.13,90.13,90.13,89.78,88.06,88.91,87.13,91.4,91.4,91.4,92.2,93.67,93.35,93.36,92.87,92.87,92.87,92.73,93.43,94.33,95.6,96.01,96.01,96.01,95.97,96.68,97.26,96.27,96.15,96.15,96.15,95.47,96.33,95.49,94.62,96.47,96.47,96.47,96.47,95.3,95.36,95.53,96.42,96.42,96.42,96.54,97.17,97.01,98.31,99,99,99,96.62,95.29,91.98,91.87,92.89,92.89,92.89,91.93,91.37,89.98,91.85,92.19,92.19,92.19,92.48,91.89,88.14,91.71,89.88,89.88,89.88,89.33,92.39,91.25,92.07,91.86,91.86,91.86,91.85,92.09,92.12,92.1,90.05,90.05,90.05,88.73,86.67,85.73,86.05,86.28,86.28,86.28,85.54,85.68,86.24,87.09,84.86,84.86,84.86,85.65,88.71,84.44,85.09,86.07,86.07,86.07,85.57,85.38,86.32,85.45,86.67,86.67,86.67,89.28,86.75,87.38,87.38,88.28,88.28,88.28,87.74,87.18,86.49,88.07,88.91,88.91,88.91,89.09,88.5,87.88,86.26,85.93,85.93,85.93,85.56,85.79,86.77,85.89,86.73,86.73,86.73,87.2,87.93,89.51,90.13,88.66,88.66,88.66,88.61,88.61,90.98,90.87,90.8,90.8,90.8,91.82,91.82,93.12,92.92,93.09,93.09,93.09,93.19,93.15,93.1,93.82,93.56,93.56,93.56,94.14,93.28,94.24,95.49,95.56,95.56,95.56,95.56,96.24,95.23,95.95,95.88,95.88,95.88,96.44,97.57,97.94,97.49,97.77,97.77,97.77,96.17,96.64,96.62,95.83,95.72,95.72,95.72,97.03,97.51,97.01,97.31,95.86,95.86,95.86,95.86,96.66,94.46,92.84,93.13,93.13,93.13,93.11,92.63,92.76,92.05,90.68,90.68,90.68,90.12,90.82,90.43,91.56,91.95,91.95,91.95,92.06,92.54,92.52,93.03,93.45,93.45,93.45,93.74,92.16,92.96,92.45,93.71,93.71,93.71,94.81,96.34,96.58,97.23,97.23,97.23,97.23,97.07,97.19,94.45,93.26,92.7,92.7,92.7,93.36,94.2,94.64,93.51,91.29,91.29,91.29,88.71,88.72,86.68,87.73,88.01,88.01,88.01,88.76,89.18,91.43,93.64,93,93,93,94.5,93.46,91.03,93.99,95.61,95.61,95.61,96.16,95.62,96.62,96.39,96.04,96.04,96.04,95.17,94.21,94.3,95.16,96.02,96.02,96.02,96.71,96.16,94.28,94.25,94.15,94.15,94.15,94.15,95.01,93.13,93.61,91.97,91.97,91.97,93.45,93.31,93.74,94.76,96.03,96.03,96.03,95.77,95.38,95.88,96.69,97.85,97.85,97.85,97.77,98.44,98.24,95.4,93.69,93.69,93.69,95.18,95.32,95.5,97.05,96.56,96.56,96.56,97.99,99.6,101.24,101.24,103.22,103.22,103.22,103.14,103.53,106.52,104.91,105.95,105.95,105.95,106.32,106,106.48,108.04,108.05,108.05,108.05,106.91,107.23,105.39,105.49,104.7,104.7,104.7,104.55,103.08,105.03,107.89,106.94,106.94,106.94,106.56,105.3,104.37,103.4,105.97,105.97,105.97,106.11,106.83,106.85,107.33,107.46,107.46,107.46,107.1,104.96,103.85,105.03,106.42,106.42,106.42,105.92,109.01,110.1,108.8,107.65,107.65,107.65,107.65,108.54,107.23,108.37,110.53,110.53,110.53,109.52,107.39,107.56,108.6,108.21,108.21,108.21,106.59,105.42,108.07,106.39,104.67,104.67,104.67,103.59,103.13,102.66,103.03,102.87,102.87,102.87,102.33,102.04,104.1,103.31,103.84,103.84,103.84,103.03,103.49,101.61,103.01,102.02,102.02,102.02,102.41,101.21,102.29,100.67,100.81,100.81,100.81,99.22,97.8,96.86,97.11,97.85,97.85,97.85,98.68,98.2,96.77,96.38,94.61,94.61,94.61,94.62,93.37,94.8,94.2,94.6,94.6,94.6,95.14,93.04,93.88,93.76,93.84,93.84,93.84,93.03,93.34,93.33,95.44,94.84,94.84,94.84,94.09,93.68,92.3,92.3,92.72,92.72,92.72,93.82,96.04,97.2,97.38,97.65,97.65,97.65,97.34,98.51,97.44,97.5,96.6,96.6,96.6,97.48,97.22,97.8,98.77,99.32,99.32,99.32,98.91,99.22,99.22,99.55,100.32,100.32,100.32,99.29,98.42,98.42,95.44,93.96,93.96,93.96,93.43,93.67,92.33,91.66,92.72,92.72,92.72,91.8,92.59,94.17,93.96,94.37,94.37,94.37,94.37,94.99,96.73,97.32,96.64,96.64,96.64,95.72,97.41,97.36,98.23,97.49,97.49,97.49,96.43,97.19,97.38,97.84,99.88,99.88,99.88,100.06,99.94,100.37,100.35,100.3,100.3,100.3,100.3,102.43,103.31,102.92,102.2,102.2,102.2,102.82,101.83,102.59,102.4,102.59,102.59,102.59,104.92,103.33,101.45,101.56,102.58,102.58,102.58,101.12,100.03,97.99,98.2,98.89,98.89,98.89,98.08,99.7,100.37,99.43,99.46,99.46,99.46,99.6,99.19,100.26,101.28,101.67,101.67,101.67,101.58,99.74,99.62,100.29,101.14,101.14,101.14,100.44,102.56,103.6,103.4,103.74,103.74,103.74,104.05,103.75,103.76,104.3,104.3,104.3,104.3,104.37,102.13,101.44,101.94,100.6,100.6,100.6,100.84,101.28,99.74,99.42,99.76,99.76,99.76,99.48,99.5,100.77,100.26,99.99,99.99,99.99,100.59,101.7,102.37,101.5,102.02,102.02,102.02,102.61,102.44,104.07,103.74,104.35,104.35,104.35,104.35,104.11,102.72,103.58,102.71,102.71,102.71,102.47,102.66,102.64,102.48,102.66,102.66,102.66,104.41,104.35,104.4,106.53,106.91,106.91,106.91,106.9,106.36,105.97,106.43,107.26,107.26,107.26,106.17,106.03,106.5,105.84,105.74,105.74,105.74,105.37,105.34,104.48,104.06,104.06,104.06,104.06,103.53,103.4,102.29,102.93,100.83,100.83,100.83,100.91,99.96,101.2,103.19,103.13,103.13,103.13,104.59,104.42,103.12,102.07,102.09,102.09,102.09,101.67,100.97,100.27,98.17,97.88,97.88,97.88,98.29,97.38,96.92,97.34,97.65,97.65,97.65,98.08,97.37,97.59,95.58,97.35,97.35,97.35,96.41,94.48,96.07,93.96,93.65,93.65,93.65,93.35,93.86,93.88,94.55,95.96,95.96,95.96,95.96,92.88,95.54,94.45,93.29,93.29,93.29,92.66,92.75,91.67,92.83,92.27,92.27,92.27,92.92,94.88,94.42,93.07,92.41,92.41,92.41,91.52,91.56,92.8,92.53,93.54,93.54,93.54,94.57,91.16,90.73,91.01,89.74,89.74,89.74,90.34,88.85,87.31,85.77,85.82,85.82,85.82,85.74,81.84,81.78,82.7,82.75,82.75,82.75,82.71,82.81,80.52,82.09,81.01,81.01,81.01,81,81.42,82.2,81.12,80.54,80.54,80.54,78.78,77.19,78.68,77.91,78.65,78.65,78.65,77.4,77.94,77.18,74.21,75.82,75.82,75.82,75.64,74.61,74.58,75.58,76.51,76.51,76.51,75.78,74.09,73.69,73.69,66.15,66.15,66.15,69,66.88,67.38,66.81,65.84,65.84,65.84,63.05,63.82,60.94,59.95,57.81,57.81,57.81,55.91,55.93,56.47,54.11,56.52,56.52,56.52,55.26,57.12,55.84,55.84,54.73,54.73,54.73,53.61,54.12,54.12];
// Define the series options:
const series = [{ label: 'Dollars per Barrel', type: '', data: data, style: { stroke: 'dodgerblue' } }];
// Define the chart options:
const opts = {
title: { label: 'Crude Oil Price History' },
subtitle: { label: 'Source: U.S. Energy Information Administration (EIA)' },
legend: { enabled: false },
xAxis: { plot: { type: 'datetime', start: Date.UTC(2012, 0, 1), increment: 24 * 3600 * 1000 }},
yAxis: { title: { label: 'Dollars per Barrel' }},
};
// Draw the chart:
const line = Pixi.Chart('#chart', 'line', series, opts);
});
</script>
</head>
<body>
<div id="chart" class="pixi"></div>
</body>
</html>