<!DOCTYPE html>
<html>
<head>
<!-- loading local stylesheet .css file -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- <canvas> element is used to draw graphics on a web page. -->
<canvas id="myChart"></canvas>
<br>
<p class="center"><button id="showYear" class="hide">Toggle to Year</button></p>
<!-- (best practice to load all the script files at the bottom) -->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- loading a javascript library for data visualization Charts.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<!-- local javascript file -->
<script src="script.js"></script>
</body>
</html>
// Code goes here
var $element = document.getElementById("myChart"),
$btn = document.getElementById("showYear");
//create a drawing context on the canvas
var ctx = $element.getContext("2d");
//declare variables
var myChart;
var data = {},
processedData = {},
orderClosingByMonth = {};
var labels = [];
//using jQuery ajax method get data from the external file. ( while using react you will do it differently)
var jsonData = $.ajax({
url: 'data.json',
dataType: 'json',
}).done(function(results) {
//get values that only needed
processedData = processData(results);
data = {
labels: processedData.labels,
datasets: [{
label: "MSFT Stock - 2018",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: processedData.data
}]
};
myChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
"scales": {
"yAxes": [{
"ticks": {
"beginAtZero": true
}
}]
}
}
});
});
var processData = function(jsonData) {
var jsonVal = jsonData["Time Series (Daily)"]
var dataSet = [];
var date;
var locale = "en-us";
var months = Object.keys(jsonVal).map(function(item) {
date = new Date(item);
return date.toLocaleDateString(locale, {
month: "long"
});
}).filter(function(elem, index, self) {
return index == self.indexOf(elem);
});
function sortByMonth(arr) {
var exactMonths = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
arr.sort(function(a, b) {
return exactMonths.indexOf(a) - exactMonths.indexOf(b);
});
return arr;
};
labels = sortByMonth(months);
for (var i = 0, total = labels.length; i < total; i++) {
orderClosingByMonth[labels[i]] = {
close: 0,
allValue: [],
allKey: []
}
}
var thisMonth;
Object.keys(jsonVal).filter(function(item) {
date = new Date(item + " 00:00:00");
thisMonth = date.toLocaleDateString(locale, {
month: "long"
});
if (orderClosingByMonth[thisMonth]["close"] < jsonVal[item]["4. close"]) {
orderClosingByMonth[thisMonth]["close"] = jsonVal[item]["4. close"];
}
orderClosingByMonth[thisMonth]["allKey"].push(item);
orderClosingByMonth[thisMonth]["allValue"].push(parseFloat(jsonVal[item]["4. close"]));
return 0;
});
for (var i in orderClosingByMonth) {
dataSet.push(orderClosingByMonth[i].close);
}
///debugger;
return {
labels: labels,
data: dataSet
}
};
$element.onclick = function(event) {
var activePoints = myChart.getElementsAtEvent(event);
if (activePoints.length > 0) {
//get the internal index of slice on the chart
var clickedElementindex = activePoints[0]["_index"];
//get specific label by index
var label = myChart.data.labels[clickedElementindex];
//get value by index
var value = myChart.data.datasets[0].data[clickedElementindex];
/* update chart data */
if(labels.indexOf(label) != -1) {
myChart.data.labels = orderClosingByMonth[label].allKey.reverse();
myChart.data.datasets[0].data = orderClosingByMonth[label].allValue.reverse();
myChart.update();
$btn.classList.remove("hide");
}
}
};
$btn.onclick = function(event) {
myChart.data.labels = processedData.labels;
myChart.data.datasets[0].data = processedData.data;
myChart.update();
$btn.classList.add("hide");
}
/* Styles go here */
.hide{
display:none;
}
.center {
text-align:center;
}
{
"Meta Data": {
"1. Information": "Daily Prices (open, high, low, close) and Volumes",
"2. Symbol": "MSFT",
"3. Last Refreshed": "2018-06-19 12:48:55",
"4. Output Size": "Compact",
"5. Time Zone": "US/Eastern"
},
"Time Series (Daily)": {
"2018-06-19": {
"1. open": "99.6500",
"2. high": "100.5860",
"3. low": "99.5000",
"4. close": "100.3600",
"5. volume": "13439267"
},
"2018-06-18": {
"1. open": "100.0100",
"2. high": "101.1100",
"3. low": "99.4200",
"4. close": "100.8600",
"5. volume": "22760044"
},
"2018-06-15": {
"1. open": "101.5100",
"2. high": "101.5300",
"3. low": "100.0700",
"4. close": "100.1300",
"5. volume": "65738585"
},
"2018-06-14": {
"1. open": "101.6500",
"2. high": "102.0300",
"3. low": "101.0000",
"4. close": "101.4200",
"5. volume": "25691811"
},
"2018-06-13": {
"1. open": "101.7200",
"2. high": "102.0100",
"3. low": "100.5600",
"4. close": "100.8500",
"5. volume": "29492875"
},
"2018-06-12": {
"1. open": "101.1000",
"2. high": "101.4493",
"3. low": "100.7500",
"4. close": "101.3100",
"5. volume": "18325228"
},
"2018-06-11": {
"1. open": "101.3700",
"2. high": "101.5900",
"3. low": "100.6700",
"4. close": "101.0500",
"5. volume": "23490894"
},
"2018-06-08": {
"1. open": "101.0924",
"2. high": "101.9500",
"3. low": "100.5400",
"4. close": "101.6300",
"5. volume": "22165128"
},
"2018-06-07": {
"1. open": "102.6500",
"2. high": "102.6900",
"3. low": "100.3800",
"4. close": "100.8800",
"5. volume": "28232197"
},
"2018-06-06": {
"1. open": "102.4800",
"2. high": "102.6000",
"3. low": "101.9000",
"4. close": "102.4900",
"5. volume": "21122917"
},
"2018-06-05": {
"1. open": "102.0000",
"2. high": "102.3300",
"3. low": "101.5300",
"4. close": "102.1900",
"5. volume": "23514402"
},
"2018-06-04": {
"1. open": "101.2600",
"2. high": "101.8600",
"3. low": "100.8510",
"4. close": "101.6700",
"5. volume": "27281623"
},
"2018-06-01": {
"1. open": "99.2798",
"2. high": "100.8600",
"3. low": "99.1700",
"4. close": "100.7900",
"5. volume": "28655624"
},
"2018-05-31": {
"1. open": "99.2900",
"2. high": "99.9900",
"3. low": "98.6100",
"4. close": "98.8400",
"5. volume": "34140891"
},
"2018-05-30": {
"1. open": "98.3100",
"2. high": "99.2500",
"3. low": "97.9100",
"4. close": "98.9500",
"5. volume": "22158528"
},
"2018-05-29": {
"1. open": "97.8400",
"2. high": "98.8800",
"3. low": "97.2300",
"4. close": "98.0100",
"5. volume": "28670981"
},
"2018-05-25": {
"1. open": "98.3000",
"2. high": "98.9800",
"3. low": "97.8600",
"4. close": "98.3600",
"5. volume": "18363918"
},
"2018-05-24": {
"1. open": "98.7250",
"2. high": "98.9400",
"3. low": "96.8100",
"4. close": "98.3100",
"5. volume": "26649287"
},
"2018-05-23": {
"1. open": "96.7100",
"2. high": "98.7300",
"3. low": "96.3200",
"4. close": "98.6600",
"5. volume": "21251222"
},
"2018-05-22": {
"1. open": "97.6800",
"2. high": "98.1700",
"3. low": "97.2000",
"4. close": "97.5000",
"5. volume": "15441189"
},
"2018-05-21": {
"1. open": "97.0000",
"2. high": "98.0100",
"3. low": "96.8000",
"4. close": "97.6000",
"5. volume": "19422467"
},
"2018-05-18": {
"1. open": "96.0100",
"2. high": "96.9300",
"3. low": "96.0100",
"4. close": "96.3600",
"5. volume": "17865840"
},
"2018-05-17": {
"1. open": "96.7600",
"2. high": "97.5401",
"3. low": "95.8300",
"4. close": "96.1800",
"5. volume": "17246716"
},
"2018-05-16": {
"1. open": "97.3600",
"2. high": "97.4000",
"3. low": "96.6150",
"4. close": "97.1500",
"5. volume": "17384742"
},
"2018-05-15": {
"1. open": "97.2400",
"2. high": "97.8500",
"3. low": "96.3400",
"4. close": "97.3200",
"5. volume": "24594010"
},
"2018-05-14": {
"1. open": "97.9200",
"2. high": "98.6900",
"3. low": "97.3100",
"4. close": "98.0300",
"5. volume": "19454124"
},
"2018-05-11": {
"1. open": "97.8000",
"2. high": "97.8700",
"3. low": "97.0400",
"4. close": "97.7000",
"5. volume": "16778316"
},
"2018-05-10": {
"1. open": "97.4600",
"2. high": "97.9500",
"3. low": "97.0500",
"4. close": "97.9100",
"5. volume": "22388119"
},
"2018-05-09": {
"1. open": "96.0100",
"2. high": "96.9700",
"3. low": "95.0500",
"4. close": "96.9400",
"5. volume": "27327410"
},
"2018-05-08": {
"1. open": "95.8456",
"2. high": "96.1600",
"3. low": "95.0631",
"4. close": "95.8100",
"5. volume": "23484589"
},
"2018-05-07": {
"1. open": "95.1700",
"2. high": "96.7100",
"3. low": "95.1000",
"4. close": "96.2200",
"5. volume": "24242019"
},
"2018-05-04": {
"1. open": "93.3200",
"2. high": "95.3700",
"3. low": "92.9200",
"4. close": "95.1600",
"5. volume": "22531325"
},
"2018-05-03": {
"1. open": "92.9600",
"2. high": "94.9250",
"3. low": "92.4500",
"4. close": "94.0700",
"5. volume": "31142497"
},
"2018-05-02": {
"1. open": "94.9900",
"2. high": "95.1700",
"3. low": "93.1900",
"4. close": "93.5100",
"5. volume": "27471002"
},
"2018-05-01": {
"1. open": "93.2100",
"2. high": "95.2900",
"3. low": "92.7900",
"4. close": "95.0000",
"5. volume": "31408927"
},
"2018-04-30": {
"1. open": "96.3300",
"2. high": "96.3964",
"3. low": "93.1500",
"4. close": "93.5200",
"5. volume": "41523605"
},
"2018-04-27": {
"1. open": "97.6000",
"2. high": "97.9000",
"3. low": "93.9100",
"4. close": "95.8200",
"5. volume": "48272780"
},
"2018-04-26": {
"1. open": "93.5500",
"2. high": "95.1500",
"3. low": "93.1000",
"4. close": "94.2600",
"5. volume": "42529043"
},
"2018-04-25": {
"1. open": "93.3000",
"2. high": "93.3000",
"3. low": "90.2800",
"4. close": "92.3100",
"5. volume": "33729257"
},
"2018-04-24": {
"1. open": "96.2420",
"2. high": "96.4700",
"3. low": "92.4100",
"4. close": "93.1200",
"5. volume": "34524799"
},
"2018-04-23": {
"1. open": "95.7436",
"2. high": "96.2900",
"3. low": "94.6300",
"4. close": "95.3500",
"5. volume": "22331829"
},
"2018-04-20": {
"1. open": "95.9100",
"2. high": "96.1100",
"3. low": "94.0500",
"4. close": "95.0000",
"5. volume": "31154377"
},
"2018-04-19": {
"1. open": "96.4400",
"2. high": "97.0700",
"3. low": "95.3400",
"4. close": "96.1100",
"5. volume": "23552541"
},
"2018-04-18": {
"1. open": "96.2200",
"2. high": "96.7200",
"3. low": "95.5200",
"4. close": "96.4400",
"5. volume": "21043287"
},
"2018-04-17": {
"1. open": "95.0000",
"2. high": "96.5400",
"3. low": "94.8800",
"4. close": "96.0700",
"5. volume": "26771000"
},
"2018-04-16": {
"1. open": "94.0700",
"2. high": "94.6600",
"3. low": "93.4200",
"4. close": "94.1700",
"5. volume": "20288083"
},
"2018-04-13": {
"1. open": "94.0500",
"2. high": "94.1800",
"3. low": "92.4400",
"4. close": "93.0800",
"5. volume": "23346063"
},
"2018-04-12": {
"1. open": "92.4300",
"2. high": "94.1600",
"3. low": "92.4300",
"4. close": "93.5800",
"5. volume": "26758879"
},
"2018-04-11": {
"1. open": "92.0100",
"2. high": "93.2900",
"3. low": "91.4800",
"4. close": "91.8600",
"5. volume": "24872110"
},
"2018-04-10": {
"1. open": "92.3900",
"2. high": "93.2800",
"3. low": "91.6400",
"4. close": "92.8800",
"5. volume": "26939883"
},
"2018-04-09": {
"1. open": "91.0400",
"2. high": "93.1700",
"3. low": "90.6200",
"4. close": "90.7700",
"5. volume": "31533943"
},
"2018-04-06": {
"1. open": "91.4900",
"2. high": "92.4600",
"3. low": "89.4800",
"4. close": "90.2300",
"5. volume": "38026000"
},
"2018-04-05": {
"1. open": "92.4350",
"2. high": "93.0650",
"3. low": "91.4000",
"4. close": "92.3800",
"5. volume": "29771881"
},
"2018-04-04": {
"1. open": "87.8500",
"2. high": "92.7600",
"3. low": "87.7300",
"4. close": "92.3300",
"5. volume": "35559956"
},
"2018-04-03": {
"1. open": "89.5750",
"2. high": "90.0500",
"3. low": "87.8900",
"4. close": "89.7100",
"5. volume": "37213837"
},
"2018-04-02": {
"1. open": "90.4700",
"2. high": "90.8800",
"3. low": "87.5100",
"4. close": "88.5200",
"5. volume": "48515417"
},
"2018-03-29": {
"1. open": "90.1800",
"2. high": "92.2900",
"3. low": "88.4000",
"4. close": "91.2700",
"5. volume": "45867548"
},
"2018-03-28": {
"1. open": "89.8200",
"2. high": "91.2300",
"3. low": "88.8730",
"4. close": "89.3900",
"5. volume": "52501146"
},
"2018-03-27": {
"1. open": "94.9400",
"2. high": "95.1390",
"3. low": "88.5100",
"4. close": "89.4700",
"5. volume": "53704562"
},
"2018-03-26": {
"1. open": "90.6100",
"2. high": "94.0000",
"3. low": "90.4000",
"4. close": "93.7800",
"5. volume": "55031149"
},
"2018-03-23": {
"1. open": "89.5000",
"2. high": "90.4600",
"3. low": "87.0800",
"4. close": "87.1800",
"5. volume": "42159397"
},
"2018-03-22": {
"1. open": "91.2650",
"2. high": "91.7500",
"3. low": "89.6600",
"4. close": "89.7900",
"5. volume": "37578166"
},
"2018-03-21": {
"1. open": "92.9300",
"2. high": "94.0500",
"3. low": "92.2100",
"4. close": "92.4800",
"5. volume": "23753263"
},
"2018-03-20": {
"1. open": "93.0500",
"2. high": "93.7700",
"3. low": "93.0000",
"4. close": "93.1300",
"5. volume": "21787780"
},
"2018-03-19": {
"1. open": "93.7400",
"2. high": "93.9000",
"3. low": "92.1100",
"4. close": "92.8900",
"5. volume": "31752589"
},
"2018-03-16": {
"1. open": "94.6800",
"2. high": "95.3800",
"3. low": "93.9200",
"4. close": "94.6000",
"5. volume": "47329521"
},
"2018-03-15": {
"1. open": "93.5300",
"2. high": "94.5800",
"3. low": "92.8300",
"4. close": "94.1800",
"5. volume": "26279014"
},
"2018-03-14": {
"1. open": "95.1200",
"2. high": "95.4100",
"3. low": "93.5000",
"4. close": "93.8500",
"5. volume": "31576898"
},
"2018-03-13": {
"1. open": "97.0000",
"2. high": "97.2400",
"3. low": "93.9700",
"4. close": "94.4100",
"5. volume": "34445391"
},
"2018-03-12": {
"1. open": "96.5000",
"2. high": "97.2100",
"3. low": "96.0400",
"4. close": "96.7700",
"5. volume": "25333720"
},
"2018-03-09": {
"1. open": "95.2900",
"2. high": "96.5400",
"3. low": "95.0000",
"4. close": "96.5400",
"5. volume": "36145524"
},
"2018-03-08": {
"1. open": "94.2700",
"2. high": "95.1000",
"3. low": "93.7650",
"4. close": "94.4300",
"5. volume": "24861307"
},
"2018-03-07": {
"1. open": "93.1600",
"2. high": "93.9406",
"3. low": "92.4300",
"4. close": "93.8600",
"5. volume": "26716127"
},
"2018-03-06": {
"1. open": "94.3400",
"2. high": "94.4900",
"3. low": "92.9410",
"4. close": "93.3200",
"5. volume": "22175776"
},
"2018-03-05": {
"1. open": "92.3400",
"2. high": "94.2700",
"3. low": "92.2600",
"4. close": "93.6400",
"5. volume": "23901578"
},
"2018-03-02": {
"1. open": "91.5800",
"2. high": "93.1500",
"3. low": "90.8600",
"4. close": "93.0500",
"5. volume": "32830389"
},
"2018-03-01": {
"1. open": "93.9900",
"2. high": "94.5700",
"3. low": "91.8400",
"4. close": "92.8500",
"5. volume": "37135561"
},
"2018-02-28": {
"1. open": "94.8400",
"2. high": "95.7050",
"3. low": "93.6300",
"4. close": "93.7700",
"5. volume": "29314525"
},
"2018-02-27": {
"1. open": "95.7400",
"2. high": "95.8400",
"3. low": "94.2000",
"4. close": "94.2000",
"5. volume": "25540755"
},
"2018-02-26": {
"1. open": "94.4000",
"2. high": "95.4500",
"3. low": "94.2500",
"4. close": "95.4200",
"5. volume": "29760276"
},
"2018-02-23": {
"1. open": "92.7500",
"2. high": "94.0700",
"3. low": "92.3600",
"4. close": "94.0600",
"5. volume": "25779955"
},
"2018-02-22": {
"1. open": "92.0500",
"2. high": "92.7300",
"3. low": "91.3600",
"4. close": "91.7300",
"5. volume": "22723756"
},
"2018-02-21": {
"1. open": "92.9800",
"2. high": "93.3595",
"3. low": "91.4900",
"4. close": "91.4900",
"5. volume": "26081953"
},
"2018-02-20": {
"1. open": "91.4750",
"2. high": "93.0600",
"3. low": "91.0100",
"4. close": "92.7200",
"5. volume": "30107057"
},
"2018-02-16": {
"1. open": "92.4500",
"2. high": "93.5000",
"3. low": "91.8000",
"4. close": "92.0000",
"5. volume": "30188535"
},
"2018-02-15": {
"1. open": "91.2100",
"2. high": "92.7200",
"3. low": "90.6200",
"4. close": "92.6600",
"5. volume": "27407914"
},
"2018-02-14": {
"1. open": "88.5100",
"2. high": "90.9900",
"3. low": "88.4100",
"4. close": "90.8100",
"5. volume": "34314101"
},
"2018-02-13": {
"1. open": "88.9300",
"2. high": "90.0000",
"3. low": "87.8000",
"4. close": "89.8300",
"5. volume": "26200053"
},
"2018-02-12": {
"1. open": "88.7350",
"2. high": "89.7800",
"3. low": "87.9295",
"4. close": "89.1300",
"5. volume": "35501368"
},
"2018-02-09": {
"1. open": "86.3000",
"2. high": "88.9300",
"3. low": "83.8300",
"4. close": "88.1800",
"5. volume": "57408480"
},
"2018-02-08": {
"1. open": "89.7100",
"2. high": "89.8750",
"3. low": "84.7600",
"4. close": "85.0100",
"5. volume": "47485202"
},
"2018-02-07": {
"1. open": "90.4900",
"2. high": "91.7700",
"3. low": "89.2000",
"4. close": "89.6100",
"5. volume": "40340551"
},
"2018-02-06": {
"1. open": "86.8900",
"2. high": "91.4750",
"3. low": "85.2500",
"4. close": "91.3300",
"5. volume": "66157030"
},
"2018-02-05": {
"1. open": "90.5600",
"2. high": "93.2400",
"3. low": "88.0000",
"4. close": "88.0000",
"5. volume": "42253469"
},
"2018-02-02": {
"1. open": "93.6400",
"2. high": "93.9700",
"3. low": "91.5000",
"4. close": "91.7800",
"5. volume": "47076959"
},
"2018-02-01": {
"1. open": "94.7900",
"2. high": "96.0700",
"3. low": "93.5813",
"4. close": "94.2600",
"5. volume": "46645657"
},
"2018-01-31": {
"1. open": "93.7500",
"2. high": "95.4000",
"3. low": "93.5100",
"4. close": "95.0100",
"5. volume": "44284284"
},
"2018-01-30": {
"1. open": "93.3000",
"2. high": "93.6600",
"3. low": "92.1000",
"4. close": "92.7400",
"5. volume": "34153798"
},
"2018-01-29": {
"1. open": "95.1400",
"2. high": "95.4500",
"3. low": "93.7200",
"4. close": "93.9200",
"5. volume": "30409620"
},
"2018-01-26": {
"1. open": "93.1200",
"2. high": "94.0600",
"3. low": "92.5800",
"4. close": "94.0600",
"5. volume": "26348999"
}
}
}