Author Topic: HighCharts - lose the plot gracefully  (Read 197 times)

0 Members and 1 Guest are viewing this topic.

Offline the beteljuice

  • the beteljuice
  • Senior Contributor
  • ****
  • Posts: 183
    • test site
HighCharts - lose the plot gracefully
« on: November 25, 2019, 04:21:19 PM »
Following quite a few people wanting to modify the highcharts as provided (cumuluscharts.js), the beteljuice has created a 'plug-in' for the HTML page that holds them.

... So .. No modifications to the distribution file.

Typically this is a 'security' issue where people do not want their historic indoor data displayed.

Wherever your holding page is generated is where you need to edit.

It will NOT remove graphs (edit your buttons for that).
You cannot remove the 'first' plot in any graph (the beteljuice seriously can't be bothered to write code for that !)

The example below removes "Apparent", and "Indoor" plots from the "Temperature" graph,
and "Indoor Humidity" from the "Relative Humidity" graph.

First of all paste this before your closing </body> tag:
Code: [Select]
<script>
// beteljuice plot remover
// format: ['graph name', 'plot to lose 1', 'plot to lose 2'], NB: NO comma after last entry !
lose_plot = [
/* example
["What", "something else"],
*/
["Temperature", "Inside", "Apparent"],
["Relative Humidity", "Indoor Humidity"]

];


// only used for initial graph load
let observer = new MutationObserver(mutationRecords => {
if(chart){
observer.disconnect();
rollout();
}
});
observer.observe(chartcontainer, {
  childList: true, // observe direct children
  subtree: true, // and lower descendants too
  characterDataOldValue: false
});

function rollout() {
graphs = lose_plot.length;
for(graph_type = 0; graph_type < graphs; graph_type++) {
if(lose_plot[graph_type][0] === chart.options.title.text) {
delaware = lose_plot[graph_type].length;
var seriesLength = chart.series.length;
for(var i = seriesLength - 1; i > -1; i--) {
for(agentj = 1; agentj < delaware; agentj++) {
if(chart.series[i].name == lose_plot[graph_type][agentj]) {
chart.series[i].remove();
break;
}
}
}
}
}
} // end function rollout()
// END beteljuice plot remover
</script>

Then for each of your graph select buttons:
Code: [Select]
<input name="btnTemp" class="button" style=tabindex="1" type="button" value="Temperature" onclick="changeGraph(&quot;temp&quot;); rollout();">

<!--
 rollout();
 must be added to the end
 -->
Actually you only need to modify the button code for any graph(s) you are changing, but it won't hurt anything to do them all.

That's it ....

If you've already modified the distribution copy of the cumuluscharts.js ... you're on your own  :roll:
Imagine what you will KNOW tomorrow !

 

anything