Chartjs-Chart.js not showing data when pass dynamic labels

by

2👍

✅

Passing just array to the labels instead of converting array to the comma split strings solved the problem.

0👍

‘<%-JSON.stringify(vCenterSpace)%>’ is coming from node.js controller, I also spent time in figuring this out.. working code sample for reference

                               <script>
                                   
                                    var vCenterSpaceData = ('<%-JSON.stringify(vCenterSpace)%>')
                                    var vCenterSpaceParsedData = JSON.parse(vCenterSpaceData)
                                    
                                    const formChartData = []
                                    const formChartLabels = []
    
                                    for(key in vCenterSpaceParsedData)
                                    {
                                        formChartData.push(vCenterSpaceParsedData[key]["Percentage"])
                                        formChartLabels.push(vCenterSpaceParsedData[key]["Date"])
                                    }
                                    //alert(formChartLabels)
                                    
                                    const zschart = new Chart(document.getElementById("chartjs-0"), {
                                        "type": "line",
                                        "data": {
                                            "labels": formChartLabels,
                                            "datasets": [{
                                                "label": "Usage in %",
                                                "data": formChartData,
                                                "fill": false,
                                                "borderColor": "rgb(75, 192, 192)",
                                                "lineTension": 0.1
                                            }]
                                        },
                                        "options": {}
                                    });
                                </script>

Leave a comment