0

I want to populate data into pie chart. I am passing my data using ArrayList. For every record i am giving hardcoded value. If i am using foreach loop then only one data is iterating for another it won't work. How to do this?

Here is my Controller method

@RequestMapping("/pie")
public String pieChart(Model model)
{
    Map<Integer, Integer> map = getAgeKeyValue();
    Set<Map.Entry<Integer, Integer>> hmap = map.entrySet();
    ArrayList<Integer> key = new ArrayList<>();
    ArrayList<Integer> value = new ArrayList<>();
    for (Map.Entry<Integer, Integer> data : hmap)
    {
        key.add(data.getKey());
        value.add(data.getValue());
    }
    model.addAttribute("key", key);
    model.addAttribute("value", value);
    return "pieChart";
}

Here is my pieChart.jsp

<script>
$(function()
{ 
    var pieChart = new CanvasJS.Chart("pieChartContainer", 
    {
        animationEnabled: true,
        theme: "light2",
        title:
        {
            text: "Age wise total number of Employees",
            fontSize: 20,
            fontFamily: "Trebuchet MS",
            fontWeight: "bold",
            margin: 10
        },
        data: 
        [{        
            type: "pie",
            dataPoints: 
            [   
                { y: ${value[0]},  label: "${key[0]}" },                 
                { y: ${value[1]},  label: "${key[1]}" },                        
                { y: ${value[2]},  label: "${key[2]}" },
                { y: ${value[3]},  label: "${key[3]}" },
                { y: ${value[4]},  label: "${key[4]}" },
                { y: ${value[5]},  label: "${key[5]}" },
                { y: ${value[6]},  label: "${key[6]}" },
                { y: ${value[7]},  label: "${key[7]}" }

            ]
        }]
    });
    pieChart.render();
});
</script>
<div class="card shadow p-3 bg-white rounded">
    <div class="card-body">
        <div id="pieChartContainer" style="height: 240px; width: 100%;"></div>
    </div>
</div>

From another jsp i am calling pieChart.jsp using ajax

Here it is

<div class="col-md-6 p-1">
    <div id="pieGraph"></div>
</div>

$.ajax
({
    url: "pie", 
    async: false, 
    success: function(data) 
    { 
        console.log(data); 
        $("#pieGraph").append(data);
    }
});
Mahadev Bhairava
  • 89
  • 6
  • Take a look at it - https://stackoverflow.com/questions/6748781/loop-through-a-hashmap-in-javascript. Look at the comment from - Raynos. It will give you an idea where to start with. – Ajay Kumar Sep 25 '19 at 15:30
  • Thanks @AjayKumar. But where to put for loop , inside datapoints like this :- `dataPoints: [ for (var i = 0, keys = Object.keys(${hmap}), ii = keys.length; i < ii; i++) { console.log('key : ' + keys[i] + ' val : ' + hmap[keys[i]]); } ]` If i put like this it is giving Uncaught SyntaxError: Unexpected token 'for' – Mahadev Bhairava Sep 26 '19 at 04:40
  • Try this - https://stackoverflow.com/questions/30990834/loop-in-order-to-generate-data-points-in-javascript. Though its not per you exact requirement but you will figure it out. – Ajay Kumar Sep 26 '19 at 12:10

0 Answers0