Home:ALL Converter>Highcharts legend data interactivity issues

Highcharts legend data interactivity issues

Ask Time:2021-09-22T05:39:18         Author:Karen Wu

Json Formatter

On the graph under "Portfolio Energy Performance" in the following webpage, https://betterbuildingssolutioncenter.energy.gov/energy-data/District%20of%20Columbia , the "Private" legend icon dot turns blue when I click on it. How can I keep it light blue after clicking on it? Also, how do I fade the legend icon when I click on the other data category? For example, to fade the "Public" legend icon when I click on the "Private" legend icon.

// color declarations
var colorGreen = '#0b6a39',
  colorBlue = '#0c4489',
  colorBlueLight = '#558ed5',
  colorGray = '#595959',
  font = 'avenir';

// graph data variables
// Portfolio Energy Performance
var /* title */ energyPerformanceTitle = 'Average Annual % Improvement by Reporting Period',
  /* columns */
  energyPerformanceCategories = ['2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019'],
  /* Y max */
  energyPerformanceYMax = 9,
  /* X title */
  energyPerformanceXaxis = [''],
  /* Y title */
  energyPerformanceYaxis = ['Average Annual % Improvement'],
  /* column colors */
  energyPerformanceColumns = [colorBlue, colorBlue, colorBlue, colorBlue, colorBlue, colorBlue, colorBlue, colorBlue],
  /* column data */
  energyPerformanceData = [8.53, 3.31, 2.37, 2.91, 2.86, 2.63, 2.4, 0.34],
  /* goal data */
  energyPerformanceGoalData = 2;

// Energy Performance by Facility
var /* title */ energyFacilityTitle = 'Number of Properties by Cumulative % Improvement',
  /* columns */
  energyFacilityCategories = ['<=0%', '0-2%', '2-6%', '6-10%', '10-15%', '>15%'],
  /* X title */
  energyFacilityXaxis = ['Cumulative % Improvement Category'],
  /* Y title */
  energyFacilityYaxis = ['Number of Properties'],
  /* Y interval */
  energyFacilityYinterval = 10,
  /* column colors */
  energyFacilityColumns = [colorBlue, colorGreen, colorGreen, colorGreen, colorGreen, colorGreen, colorGreen],
  /* column data */
  energyFacilityData = [82, 14, 28, 16, 35, 101];

// Identifying Opportunities for Improvement
var /* title */ improvementOpportunityTitle = '% Improvement vs. Baseline EUI',
  /* columns */
  improvementOpportunityCategories = ['0', '200', '400', '600', '800'],
  /* X min */
  improvementOpportunityXMin = 0,
  /* X max */
  improvementOpportunityXMax = 800,
  /* Y min */
  improvementOpportunityYMin = -60,
  /* Y max */
  improvementOpportunityYMax = 100,
  /* Y interval */
  improvementOpportunityYinterval = 20,
  /* X interval */
  improvementOpportunityXinterval = 200,
  /* X title */
  improvementOpportunityXaxis = ['Baseline Source EUI (kBtu/sq.ft.)'],
  /* Y title */
  improvementOpportunityYaxis = ['% Improvement'],
  /* scatter data */
  improvementOpportunityData = [
    [704, 76],
    [55, -273],
    [216, 10],
    [205, 6],
    [505, 12],
    [167, 4],
    [147, -7],
    [254, -14],
    [307, 19],
    [275, 36],
    [179, -4],
    [146, -16],
    [324, 17],
    [225, 19],
    [146, 5],
    [199, 18],
    [162, 4],
    [183, 26],
    [208, 20],
    [187, -13],
    [187, 19],
    [145, 49],
    [172, 24],
    [206, 25],
    [208, -35],
    [222, 16],
    [221, 19],
    [145, 18],
    [151, 10],
    [159, -13],
    [221, 20],
    [150, 26],
    [215, 38],
    [152, 11],
    [158, -17],
    [174, 9],
    [249, 28],
    [166, 12],
    [231, 3],
    [165, 15],
    [132, 16],
    [217, 3],
    [163, 1],
    [225, 3],
    [151, 20],
    [149, -9],
    [164, 5],
    [149, -3],
    [193, 30],
    [177, 10],
    [246, -20],
    [155, 4],
    [184, 17],
    [200, 7],
    [132, 10],
    [162, 12],
    [149, 19],
    [252, 23],
    [142, -16],
    [165, 10],
    [230, -2],
    [180, 16],
    [193, 29],
    [185, 5],
    [61, 49],
    [226, 66],
    [128, 46],
    [141, 76],
    [190, 2],
    [194, 24],
    [217, 10],
    [127, 3],
    [216, 15],
    [89, -23],
    [137, -9],
    [162, 33],
    [171, 7],
    [136, 19],
    [190, -6],
    [155, 18],
    [93, -35],
    [147, -20],
    [199, 7],
    [141, 14],
    [177, 7],
    [276, -16],
    [103, -2],
    [172, 20],
    [90, -24],
    [153, 17],
    [184, 10],
    [149, 34],
    [240, -5],
    [163, -15],
    [122, -10],
    [160, -22],
    [236, 16],
    [139, 5],
    [183, 22],
    [165, 12],
    [141, 22],
    [114, -39],
    [175, 16],
    [164, 26],
    [141, 16],
    [186, 28],
    [160, -14],
    [148, 14],
    [231, 15],
    [204, -9],
    [170, 6],
    [112, -4],
    [170, 27],
    [191, 17],
    [216, -1],
    [215, 12],
    [166, 19],
    [131, -13],
    [109, 15],
    [181, 4],
    [300, 28],
    [210, 13],
    [236, 15],
    [183, 19],
    [144, 14],
    [198, 3],
    [219, -14],
    [291, 12],
    [169, 19],
    [194, -8],
    [208, -16],
    [304, 3],
    [208, 0],
    [195, -5],
    [175, 17],
    [143, -1],
    [161, 15],
    [194, -10],
    [121, -3],
    [117, 21],
    [189, 0],
    [136, 10],
    [189, -7],
    [150, -32],
    [308, -1],
    [136, -1],
    [253, -2],
    [121, 25],
    [427, 2],
    [222, 20],
    [150, -2],
    [254, 33],
    [284, 38],
    [307, 3],
    [249, 26],
    [178, 6],
    [134, -22],
    [282, -4],
    [151, -10],
    [143, -3],
    [116, -6],
    [158, 7],
    [161, 16],
    [260, 55],
    [131, 15],
    [246, 3],
    [113, -3],
    [209, 22],
    [322, 21],
    [245, 39],
    [197, 14],
    [142, 5],
    [253, 23],
    [197, -9],
    [184, 15],
    [169, 12],
    [187, 12],
    [132, -21],
    [195, 16],
    [143, 6],
    [145, -10],
    [200, 35],
    [142, 5],
    [178, 28],
    [271, 21],
    [140, -29],
    [125, 6],
    [148, -15],
    [185, 18],
    [163, 36],
    [173, 13],
    [117, -2],
    [291, 23],
    [168, -8],
    [196, 26],
    [202, 13],
    [169, 22],
    [142, -37],
    [142, -32],
    [211, 22],
    [165, 5],
    [181, 30],
    [140, 0],
    [126, -15],
    [410, 14],
    [167, -17],
    [205, 13],
    [171, -6],
    [197, 24],
    [167, 15],
    [115, 0],
    [160, 31],
    [164, 13],
    [176, 11],
    [169, 23],
    [153, 25],
    [542, 16],
    [138, -12],
    [143, -25],
    [228, -1],
    [95, 10],
    [147, -14],
    [200, 8],
    [195, 1],
    [178, 12],
    [192, 20],
    [152, 11],
    [224, 1],
    [150, -2],
    [247, 12],
    [208, 36],
    [134, -18],
    [231, -4],
    [248, -1],
    [217, -2],
    [164, 22],
    [288, 0],
    [201, 15],
    [149, 26],
    [206, 33],
    [179, 23],
    [151, 22],
    [168, 14],
    [165, 5],
    [176, 12],
    [145, -15],
    [103, -40],
    [163, 5],
    [141, -9],
    [128, 9],
    [177, 30],
    [238, 17],
    [182, 10],
    [198, 23],
    [147, -8],
    [205, 29],
    [528, -8],
    [205, 16],
    [164, 15],
    [163, 39],
    [193, 1],
    [173, -1],
    [168, 30],
    [233, 6],
    [117, 2],
    [205, 13],
    [110, 7],
    [161, 15],
    [159, 4],
    [197, 2],
    [131, 0],
    [231, -37],
    [248, 0],
    [140, 0],
    [155, -9],
    [153, -2],
  ],
  /* trendline data */
  improvementOpportunityTrendLine = [
    [55, -5],
    [704, 54]
  ];

// On document ready, call visualize on the datatable.
jQuery(document).ready(function() {
  Highcharts.visualize = function(table, options) {
    // the categories
    options.xAxis.categories = energyPerformanceCategories;
    options.colors = energyPerformanceColumns,
      options.series = [{
        type: 'column',
        name: ['Public'],
        data: energyPerformanceData,
        color: colorBlue,
        colorByPoint: false,
        dataLabels: {
          enabled: false
        }
      }, {
        type: 'column',
        name: ['Private'],
        data: [3.3, 4.95, 3.68, 3.31, 2.76, 2.99, 2.3, 1.71],
        color: colorBlueLight,
        colorByPoint: false,
        dataLabels: {
          enabled: false
        },

      }];
    var chart = new Highcharts.Chart(options);
  }

  var table = document.getElementById('datatable'),
    options = {
      chart: {
        renderTo: 'energy-performance',
        type: 'column'
      },
      title: {
        text: energyPerformanceTitle,
        style: {
          color: colorGray,
          fontFamily: font
        }
      },
      subtitle: {},
      plotOptions: {
        series: {
          shadow: false
        },
        column: {
          borderWidth: 0
        }
      },
      xAxis: {
        title: {
          text: energyPerformanceXaxis,
          style: {
            color: colorGray,
            fontFamily: font
          }
        },
        tickLength: 0,
        lineColor: colorGray,
        lineWidth: 1
      },
      yAxis: {
        title: {
          text: 'Average Annual % Improvement',
          style: {
            color: colorGray,
            fontFamily: font
          }
        },
        tickInterval: 1,
        tickLength: 5,
        tickWidth: 1,
        tickColor: colorGray,
        max: energyPerformanceYMax,
        lineColor: colorGray,
        lineWidth: 1,
        gridLineWidth: 0,
        plotLines: [{
          color: colorGray,
          width: 2,
          value: energyPerformanceGoalData,
          zIndex: 5,
          label: {
            text: 'GOAL',
            align: 'right',
            x: 11,
            y: -5,
            style: {
              color: colorGray,
              fontFamily: font,
              fontWeight: 'bold'
            }
          }
        }],
        labels: {
          style: {
            color: colorGray,
            fontFamily: font
          }
        }
      },
      legend: {
        enabled: true
      },
      legend: {
        itemHiddenStyle: {
          color: colorBlue,
          colorByPoint: false
        }
      },
      credits: {
        enabled: false
      },
      tooltip: {
        formatter: function() {
          var raw = ((this.y / energyPerformanceData[0])) * 100,
            percentage = Math.round(100 - (raw * 100) / 100);
          if (this.y === energyPerformanceData[0] && this.key === '2012') {
            return '<strong>' + this.series.name + '</strong><br/>' + '<strong>' + this.x + '</strong>: ' + Highcharts.numberFormat(this.y, 1) + '%';
          } else {
            return '<strong>' + this.series.name + '</strong><br/>' + '<strong>' + this.x + '</strong>: ' + Highcharts.numberFormat(this.y, 1) + '%';
          }
        },
      }
    };
  Highcharts.visualize(table, options);
});

// On document ready, call visualize on the datatable.
jQuery(document).ready(function() {
  Highcharts.visualize = function(table, options) {
    // the categories
    options.xAxis.categories = energyFacilityCategories;
    options.colors = energyFacilityColumns,
      options.series = [{
        type: 'column',
        name: energyFacilityYaxis,
        data: energyFacilityData,
        color: colorGreen,
        colorByPoint: true,
        dataLabels: {
          enabled: false
        }
      }];
    var chart = new Highcharts.Chart(options);
  }

  var table = document.getElementById('datatable'),
    options = {
      chart: {
        renderTo: 'facility-performance',
        type: 'column'
      },
      title: {
        text: energyFacilityTitle,
        style: {
          color: colorGray,
          fontFamily: font
        }
      },
      subtitle: {},
      plotOptions: {
        series: {
          shadow: false
        },
        column: {
          borderWidth: 0
        }
      },
      xAxis: {
        title: {
          text: energyFacilityXaxis,
          style: {
            color: colorGray,
            fontFamily: font
          }
        },
        tickLength: 0,
        lineColor: colorGray,
        lineWidth: 1,
        labels: {
          rotation: -45,
          y: 30,
          style: {
            color: colorGray,
            fontFamily: font
          }
        }
      },
      yAxis: {
        title: {
          text: energyFacilityYaxis,
          style: {
            color: colorGray,
            fontFamily: font
          }
        },
        tickInterval: energyFacilityYinterval,
        tickLength: 5,
        tickWidth: 1,
        tickColor: colorGray,
        lineColor: colorGray,
        lineWidth: 1,
        gridLineWidth: 0,
        minorTickColor: colorGray,
        labels: {
          style: {
            color: colorGray,
            fontFamily: font
          }
        }
      },
      legend: {
        enabled: false
      },
      credits: {
        enabled: false
      },
      tooltip: {
        formatter: function() {
          return '<strong>' + this.series.name + '</strong><br/>' + '<strong>' + this.x + '</strong>: ' + this.y;
        }
      }
    };
  Highcharts.visualize(table, options);
});

// On document ready, call visualize on the datatable.
jQuery(document).ready(function() {
  Highcharts.visualize = function(table, options) {
    // the categories
    options.xAxis.categories = improvementOpportunityCategories;
    options.series = [{
      name: improvementOpportunityYaxis,
      data: improvementOpportunityData,
      color: colorBlue
    }, {
      type: 'line',
      name: 'Trendline',
      data: improvementOpportunityTrendLine,
      color: colorGray,
      width: 1,
      marker: {
        enabled: false
      }
    }];
    var chart = new Highcharts.Chart(options);
  }

  var table = document.getElementById('datatable'),
    options = {
      chart: {
        renderTo: 'improvement-opportunities',
        type: 'scatter',
        zoomType: 'xy'
      },
      title: {
        text: improvementOpportunityTitle,
        style: {
          color: colorGray,
          fontFamily: font
        }
      },
      subtitle: {},
      plotOptions: {
        series: {
          shadow: false
        },
        scatter: {
          marker: {
            radius: 3,
            symbol: 'diamond',
            states: {
              hover: {
                enabled: true
              }
            }
          },
          states: {
            hover: {
              marker: {
                enabled: false
              }
            }
          }
        }
      },
      xAxis: {
        title: {
          text: improvementOpportunityXaxis,
          style: {
            color: colorGray,
            fontFamily: font
          }
        },
        lineWidth: 0,
        min: improvementOpportunityXMin,
        max: improvementOpportunityXMax,
        tickInterval: improvementOpportunityXinterval,
        minTickInterval: 25,
        tickLength: 0
      },
      yAxis: {
        title: {
          text: improvementOpportunityYaxis,
          style: {
            color: colorGray,
            fontFamily: font
          }
        },
        min: improvementOpportunityYMin,
        max: improvementOpportunityYMax,
        tickInterval: improvementOpportunityYinterval,
        tickLength: 5,
        tickWidth: 1,
        tickColor: colorGray,
        lineColor: colorGray,
        lineWidth: 1,
        gridLineWidth: 0,
        plotLines: [{
          color: colorGray,
          width: 1,
          value: 0
        }, {
          color: colorGray,
          width: 1,
          value: 0,
          zIndex: 5
        }]
      },
      legend: {
        enabled: false
      },
      credits: {
        enabled: false
      },
      tooltip: {
        formatter: function() {
          return '<strong>' + this.series.name + ':</strong> ' + this.y;
        }
      }
    };
  Highcharts.visualize(table, options);
});

Author:Karen Wu,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/69275841/highcharts-legend-data-interactivity-issues
yy