<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script type="module" src="script.js"></script>
<script src="https://cdn.anychart.com/js/8.0.1/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/js/8.0.1/anychart-pie.min.js"></script>
</head>
<body>
<div class="heading">
<h1 align = "center">Greener Electricity</h1>
<div class="profile">
<a href = "profile.html"><img src="whatever image they want" class = "profilePic" height="50" width="50"></a>
</div>
</div>
<div class="Stats">
<div class = "data">
<h1><strong>$ of money used</strong></h1>
<h2>insert number</h2>
<h1><strong>Average $ spent monthly in *insert neighborhood name here*</strong></h1>
<h2>insert number</h2>
<h1><strong>Goal for Next Month</strong></h1>
<h2>insert number</h2>
<h1><strong>KWHs used</strong></h1>
<h2>insert number</h2>
<h1><strong>Average KWH usage in *insert neighborhood name here*</strong></h1>
<h2>insert number</h2>
<h1><strong>Goal for Next Month</strong></h1>
<h2>insert number</h2>
<h1><strong>Breakup of Electricity Usage</strong></h1>
</div>
<div id="container" style="width: 100%; height: 100%"></div>
<script>
anychart.onDocumentReady(function () {
// set the data
var data = [
{ x: "Solar", value: 100},
{ x: "Fossil fuel", value: 310},
{ x: "Oil", value: 290},
{ x: "Other", value: 142 },
];
// create the chart
var chart = anychart.pie();
// set the chart title
chart.title("Breakup of electricity usage");
// add the data
chart.data(data);
// display the chart in the container
chart.container('container');
chart.draw();
});
</script>
<!-- Insert if else statement comparing the values of the target and the expected and return either "What can I do better" or "Great!" -->
<h1 class = "breakdown"> This month's breakdown: OK</h1>
<br>
<br>
<br>
<div class = "improvement">
<a href = "improvements.html">How can I do Better?</a>
</div>
</div>
</body>
</html>