I have a webapp for project management which is using localstorage for storing array of objects. And Now on the dashboard , I want to show a google pie chart.
An object in the localstorage looks like this.
assignedTo: "Laxman"
closingdate: "2019-06-15"
description: "Some what desc"
id: 1560281058591
name: "Project1"
postdate: "2019-06-11"
status: "Open"
Now I want to make a pie chart showing project.assignedTo and number of projects assigned to that employee.
Now I want know is hoe to function to set the variable getPro to map project.assignedTo and number of projects assigned to that. Here's the code for google pie.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var getPro = JSON.parse(localStorage.projects).map(
project =>
['Employee', 'Number Of Project'],
[$(project.assignedTo), <HERE I AM GETTING STUCK>]
);
var data = google.visualization.arrayToDataTable(getPro);
var options = {
title: 'Number of Projects Assigned',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
</script>
Please help me out in it.
For this you need any javascript library to create a chart, there are many options available. Let's, for example, you selected Google Charts.
Steps: