CODEWITHSUNDEEP
javascriptwordpresschart.js
jackennils
jackennils

Reputation: 303

hide dataset by default using Chart.js and a custom script

I'm using wpDataTables plugin on my WordPress website to draw some tables and charts. The charts are rendered using Chart.js. The developers of the plugin created a custom script to control some more aspects of Chart.js than the plugin can handle out of the box.

That's the script:

<script type="text/javascript">
jQuery(window).load(function(){
    if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
    wpDataChartsCallbacks[39] = function(obj){
        obj.options.options.scales.yAxes[0].display = false;
        obj.options.options.scales.xAxes[0].display = false;
    }
});
</script>

In this example it hides the axes of the chart with the ID 39. I need to change the above script to hide a specific dataset (line in the chart) by default. My chart ID is 2 and I want to hide the dataset labelled "SPM".

You can take a look at the table and chart how it currently looks like here (it's a weapon overview of a game, so please do not wonder): https://mydivision.net/the-division-waffen/

The first chart has all datasets visible by default: enter image description here I want it to look like this by default ("SPM" line hidden): enter image description here

Can anyone please assist how to do that?

Upvotes: 6

Views: 10220

Answers (3)

Hamidreza
Hamidreza

Reputation: 756

you just need to add hidden:true to your datasets

{
  label: "something",
  backgroundColor: 'green',
  data: data,
  hidden: true
}

Upvotes: 3

jackennils
jackennils

Reputation: 303

The solution is:

<script type="text/javascript">
jQuery(window).load(function(){
    if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
    wpDataChartsCallbacks[2] = function(obj){
        obj.options.data.datasets[5].hidden = true;
    }
});
</script>

Upvotes: 0

Kyon147
Kyon147

Reputation: 798

This is taken from the ChartJS GitHub.

You set the new value and then use the ChartJS API to update the chart to hide the ones you have toggled off. If you wanted to toggle them again you just do the reverse.

//Hide
chart.getDatasetMeta(1).hidden=true;
chart.update();

//Show
chart.getDatasetMeta(1).hidden=false;
chart.update();

Here's an example in JSFiddle.

Upvotes: 7

Related Questions