cmonitor icon indicating copy to clipboard operation
cmonitor copied to clipboard

cmonitor_chart should make it possible to show/hide a specific measurement

Open f18m opened this issue 4 years ago • 0 comments

It should be possible inside each google chart, e.g. AreaCharts, created by cmonitor_chart to show/hide a specific measurment, possibly by simply clicking on the legend entry. E.g. to add this feature on graph#5, cmonitor_chart should append as code:

   // ...
   // existing code
  g_chart = new google.visualization.AreaChart(document.getElementById("chart_master_div"));
  g_chart.draw(data_graph5, options_graph5);
  g_current_data = data_graph5;
  g_current_options = options_graph5;
  reset_combo_boxes("");
  
   // new javascript code
    var columns = [];
    var series = {};
    for (var i = 0; i < data_graph5.getNumberOfColumns(); i++) {
        columns.push(i);
        if (i > 0) {
            series[i - 1] = {};
        }
    }
    
    google.visualization.events.addListener(g_chart, 'select', function () {
        var sel = g_chart.getSelection();
        // if selection length is 0, we deselected an element
        if (sel.length > 0) {
            // if row is undefined, we clicked on the legend
            if (sel[0].row === null) {
                var col = sel[0].column;
                if (columns[col] == col) {
                    // hide the data series
                    columns[col] = {
                        label: data_graph5.getColumnLabel(col),
                        type: data_graph5.getColumnType(col),
                        calc: function () {
                            return null;
                        }
                    };
                    
                    // grey out the legend entry
                    series[col - 1].color = '#CCCCCC';
                }
                else {
                    // show the data series
                    columns[col] = col;
                    series[col - 1].color = null;
                }
                var view = new google.visualization.DataView(data_graph5);
                view.setColumns(columns);
                g_chart.draw(view, options_graph5);
            }
        }
    });

Taken from:

  • http://jsfiddle.net/xDUPF/53/
  • https://stackoverflow.com/questions/17444586/show-hide-lines-data-in-google-chart

f18m avatar Jun 23 '21 23:06 f18m