Search code examples
javascripthtmllocal-storagepie-chart

How to use localstorage data to make pie charts?


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.


Solution

  • 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:

    1. Retrieve data from your local storage.
    2. And then you have the predefined functions of Google Charts or any other library that you are using.
    3. Pass your data in those functions and render your chart in HTML.