Chart Serie(s) off by default

Questions
1

Hello,

Would there be a way to turn off 1 or more series by default from a chart without clicking?

Example I have Serie 1, Serie 2 and Serie 3.

And I want the Serie 1 to be 'Off by default" while displaying Serie 2 and 3

And when the need arise, I could click on Serie 1 manually to add it to chart


Thank you,

2

Actually encountered an issue like this in the past but I think my work around may be primitive in regards to what you’re trying to achieve.

I create a dummy model for most pages so that I can render visualizations & things in/out of view. For instance, clicking the button “Display By Owner” updates a field in dummy model to 1, and the chart that has the series by owner is set to render when that field in dummy model is 1. And the “Display by Rep” basically does the inverse action (while replacing the other chart). 

So what if you created two charts, one with series 1-2 and the other series 1-3. By default display the series 1-2. Add a button above chart that updates ______ field in your dummy model, which then triggers conditional rendering of series 1-2 out and conditionally renders series 1-3 in. 

3

Erik’s answer is interesting.  But you can also do this with just one chart. 

Each Series can be a separate model.
Set each model to not load data on page load.
On your page - Add a button for each model that has the “query model” action. 
Add a second button for each model that has the “remove all rows” action. 

Conditionally render these buttons so only one shows (based on the presense or absense of model data)

So then…

On page load your chart will be blank. 
When you click the “add series 1” button it will appear in the chart.  (same for series 2 and 3 and 4…)
When you click the “remove series 1” button it will disappear from the chart. 

There you go. 

4

I think there must be a better solution to this. You can click on a series in the chart and it disables. I’ve seen High Charts implementations elsewhere where a series is disabled by default. There’s a way to code for that, and it would be great if Skuid implemented that into the visualization component so you could declaratively decide whether to show it or not. 

5

I was playing around with Jack’s suggesting, and I did find two things you can do:

  1. you can target the element that has the series name under the chart, and execute a click event on it, utilizing the existing functionality to show or hide the series. I was able to add a class to my series via the split template and then target that class to execute the click event.

  2. You can call the Highcharts api. The code Highcharts.charts[0].series[2].setVisible(false) set my 3rd series (zero indexed) to be turned off and refreshed the chart. If I had multiple charts on the page, I am not sure how to know which one is which, I haven’t figured out how to go from the element to the highchart, or how to relatively reference the series, but hopefully this helps!

6

Taking slight inspiration from nkovash’s answer, the following is do-able in v1 and v2:

On advanced tab, add a ‘Before-render snippet’ that look similar to bellow:

var graphObj = arguments[0],
    $ = skuid.$;

for(let idx = 0; idx < graphObj.series.length; idx++){
    if(graphObj.series[idx].name === 'Your Series Name'){
         graphObj.series[idx].visible = false
    }
}

Best,
Lukas

1 Like
7

That’s awesome @lukaspovilonis!

I didn’t realize we would have the chart object as an argument! How does that work?

Originally, I was running my script after page load, developing it through the console, so the visible = false wouldn’t re-render for me the same way setVisible(false) would, but maybe because your solution is hitting it before render, it is working! I did have to use a similar looping through the series either way because I found some of my models would sometimes come up with no rows which would re-index the series.

Your answer actually solves another problem I created for myself of finding my chart on a page of a lot of charts. Since I was running the code after page load, I had to find the right chart to update, and stackoverflow kept recommending a jquery plugin for highcharts that I did not have access to. I couldn’t ever figure out how to get into the highcharts api from any DOM elements, but I was able to use the same looping strategy through the Highcharts.chart array to find the chart with the matching title. However, the solution you provided bypasses the need to find the chart and applies it directly. I will put the code below though, in case anyone needs to find their chart for modification after page load.

var charts = Highcharts.charts;
var chartIndex = -1;

for (var i = 0; i < charts.length; i++)
{
    if (charts[i] !== undefined && charts[i].title.textStr == 'Your Chart Name') {
        chartIndex = i;
    }
}
8

First of all, glad I could help.

Skuid passes an object to snippet, you can explore available information by either adding console.log('beforeRenderSnippet: ', {graphObj }) to code I mentioned above. This will print the object into the console.

Or, you can explore it during run time via the browser console, as bellow:

skuid.runtime.getPage(<pageName>).$C(<componentId>).getHCConfig();

As you will observe, the object you receive in the snippet is a subset of information that is available to you if use your method @nkovash . Another approach to your solution would be to get the information directly from the component as bellow: 
skuid.runtime.getPage(<pageName>).$C(<componentId>).getHighchartsObject()

Note, if you want to use it in JS snippet (instead of console), just replace skuid.runtime.getPage(<pageName>) with skuid


If you're using chart set with multiple charts, the following can also can be useful for other problems: 
skuid.runtime.getPage('Overview').$C('OverviewHighchartsChart1').chartSet

Best,
Lukas