Embarking on a new journey here, this week's focus is on delving into Chartjs for canvas and brushing up on JSON usage. The task at hand includes employing an Ajax HTTP GET request to fetch the json file. However, I am currently stumped on how to trigger the function that populates the data and renders the pie and bar charts. Assistance from anyone in the know would be greatly appreciated.
HTML Code
<canvas id="pieChart" width="400" height="400"></canvas>
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/Chart.js"></script>
<script src="js/js.js"></script>
JS
$(function () {
getPieChartData();
});
function getPieChartData() {
$.get(
'http://localhost:8888/r_tomino_assignment6/data/piechart-data.json',
function (data) {
displayPieChart(data)
},
'json'
);
}
var context = document.getElementById("pieChart").getContext("2d");
var myPieChart = new Chart(context).Pie(data);
JSON Data
[
{
"color": "#F7464A",
"highlight": "#FF5A5E",
"label": "Red",
"value": 300
},
{
"color": "#46BFBD",
"highlight": "#5AD3D1",
"label": "Green",
"value": 50
},
{
"color": "#FDB45C",
"highlight": "#FFC870",
"label": "Yellow",
"value": 100
}
];