Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 72416

Dynamically Add and Remove Datasets from Chart.js

$
0
0

I have been tasked with making a web-based data visualizer kind of like tableau using the asp.net framework. The user can drag and drop blocks which represents tables to a dropzone, which then triggers the javascript function for adding data. This is the code:

function addData(chart, Datalabel, Tabledata, Xlabel, Ylabel, labelsSet) {
        datasintable.push(Tabledata);
        var curColor = randomColor();
        chart.data.labels = labelsSet;
        chart.data.datasets.push({
            label: Datalabel,
            fill: false,
            backgroundColor: curColor,
            borderColor:  curColor,
            data: Tabledata
        });
        chart.options = {
            legend: {
                display:false
            },
            scales: {
                xAxes: [{
                    scaleLabel: {
                        labelString: Xlabel
                    }
                }],
                yAxes: [{
                    scaleLabel: {
                        labelString: Ylabel
                    }
                }]
            }
        }
        chart.update();
    }

This part of the code is working fine, the problem is in removing the data, due to index issues. Right now each draggable component has it's own id which is then read and interpreted as a certain number I determined via an if else. Of course, due to the unpredictable nature of the user interaction the project, this approach does not work because the index pointer needs to be dynamic whereas in my code it is not. Right now the code for removing data is like this:

function hide(chart, index) {
        datasintable.splice(index, 1);
        chart.data.datasets[index].data = 0;
        chart.update();
    }

and the index variable is determined by if else conditions like these:

var data = ev.target.id

 if (data == "pop") {
            popdth = "0";
            addData(lineChart, 'Population', @Html.Raw(Json.Serialize(ViewBag.population)), 'Year', 'Population', @Html.Raw(Json.Serialize(ViewBag.year)));
        }
        else if (data = "dth") {
            popdth = "1";
            addData(lineChart, 'Death Rate', @Html.Raw(Json.Serialize(ViewBag.death)), 'Year', 'Population', @Html.Raw(Json.Serialize(ViewBag.yeardeath)));
        }

('pop' and 'dth' is the id I set for the draggables)

How should I approach this problem so that both adding and removing data to the chart is dynamic?


Viewing all articles
Browse latest Browse all 72416

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>