HELP - Interval Charts

11 views
Skip to first unread message

Doug

unread,
Sep 1, 2021, 9:18:36 AMSep 1
to Google Visualization API
Is there a way to fix labels on the intervals and edit what is shown in the hover state?

I created an interval chart to show an average with a high and a low represented by a box interval.  I want to always show the high and low numbers and on hover, only show the average.  Please help.

Current code is below:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Period');
        data.addColumn('number', 'Average Return (%)');
        data.addColumn({id:'i0', type:'number', label: 'Lowest Return (%)', role:'interval'});
        data.addColumn({id:'i1', type:'number', label: 'Highest Return (%)', role:'interval'});
  
        data.addRows([
            ['1-Yr', 6.58, -10.42, 27.03],
            ['5-Yr', 6.12, 0.62, 17.30],
            ['10-Yr', 6.26, 2.84, 13.86],
            ['20-Yr', 6.46, 3.24, 11.35]
]);
  
        // The intervals data as boxes
        var options = {
            curveType: 'function',
            series: [{'color': '#3a6aa5'}],
            intervals: { 'lineWidth': 0, 'boxWidth': 1, 'color': '#3a6aa5', style: 'boxes' },
            chartArea: {left: 30, top: 20},
            legend: 'none',
            vAxis: {minValue: -45,
                  ticks: [-45, -25, -5, 15, 35, 55]},
           };
  
        var chart_lines = new google.visualization.LineChart(document.getElementById('chart_lines'));
        chart_lines.draw(data, options);
      }
    </script>
Reply all
Reply to author
Forward
0 new messages