Search code examples
javascriptchartsgoogle-visualization

Vertical line annotation in horizontal bar using Google Chart

Just want to ask if it's possible to add multiple line annotation per bar based on date? Then if I hover the line, it should display the date.

If it's not possible is there any way to do this?

enter image description here

Here's my sample code: http://jsfiddle.net/q0ftngve/

google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);

function drawChart() {
            var data = new google.visualization.DataTable();
             data.addColumn('string', 'Display Order');
            data.addColumn('date', 'Dummy');
            data.addColumn('date', 'Introduction');
            data.addColumn('date', 'Presentation');
            data.addColumn('date', 'Demonstration');
            data.addColumn('date', 'Evaluation');
            data.addColumn('date', 'Negotiation');
            data.addColumn('date', 'Approval');
            data.addColumn('date', 'Purchase');

            data.addRows([
               [
                   'P0003-0000001',
                   new Date('2020-04-02'),
                   new Date('1970-01-14'),
                   new Date('1970-01-16'),
                   new Date('1970-01-23'),
                   new Date('1970-01-22'),
                   new Date('1970-02-03'),
                   new Date('1970-01-17'),
                   new Date('1970-02-01')
                ]
            ]);

            var dateMin = new Date('2020-4-1');

            new google.visualization.BarChart(document.getElementById('progress_chart')).
                draw(data,
                    {
                        width: "100%",
                        bar: {groupWidth: "90%"},
                        backgroundColor: "whitesmoke",
                        legend: { position: "none" },
                        isStacked: true,
                        hAxis: {
                            viewWindow: {
                                // max: new Date(2020,5,1),
                                min: dateMin,
                            },
                            // format: 'M/d/yy',
                            // baseline: dateToday,
                            // baselineColor: 'red',
                        },
                        bar: { groupWidth: 20 }
                    });
}
Solution

  • using an annotation, with --> style: 'line'
    would actually produce a horizontal line,
    and would display text on the bar.
    to get something to display on hover, you would also need to use annotationText

    instead, it may easier to use a different series type...

    see following working snippet,
    a line series is used to display the lines on the bars... 

    google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Display Order');
  data.addColumn('date', 'Dummy');
  data.addColumn('date', 'Date');
  data.addColumn('date', 'Date');
  data.addColumn('date', 'Date');
  data.addColumn('date', 'Date');
  data.addColumn('date', 'Introduction');
  data.addColumn('date', 'Presentation');
  data.addColumn('date', 'Demonstration');
  data.addColumn('date', 'Evaluation');
  data.addColumn('date', 'Negotiation');
  data.addColumn('date', 'Approval');
  data.addColumn('date', 'Purchase');

  data.addRow([
    'P0003-0000001',
    new Date('2020-04-02'),
    new Date('2020-04-03'),
    new Date('2020-04-04'),
    new Date('2020-04-05'),
    new Date('2020-04-06'),
    new Date('1970-01-14'),
    new Date('1970-01-16'),
    new Date('1970-01-23'),
    new Date('1970-01-22'),
    new Date('1970-02-03'),
    new Date('1970-01-17'),
    new Date('1970-02-01')
  ]);

  var dateMin = new Date('2020-4-1');

  new google.visualization.BarChart(document.getElementById('progress_chart')).
  draw(data, {
    width: '100%',
    bar: {
      groupWidth: '90%'
    },
    backgroundColor: 'whitesmoke',
    legend: {
      position: 'none'
    },
    isStacked: true,
    hAxis: {
      viewWindow: {
        // max: new Date(2020,5,1),
        min: dateMin,
      },
      // format: 'M/d/yy',
      // baseline: dateToday,
      // baselineColor: 'red',
    },
    bar: {
      groupWidth: 20
    },
    annotations: {
      boxStyle: {
        stroke: '#fff',
        strokeWidth: 1
      }
    },
    series: {
      1: {
        color: '#fff',
        pointShape: {
          type: 'star', sides: 2, dent: 0.05
        },
        pointSize: 24,
        type: 'line'
      },
      2: {
        color: '#fff',
        pointShape: {
          type: 'star', sides: 2, dent: 0.05
        },
        pointSize: 24,
        type: 'line'
      },
      3: {
        color: '#fff',
        pointShape: {
          type: 'star', sides: 2, dent: 0.05
        },
        pointSize: 24,
        type: 'line'
      },
      4: {
        color: '#fff',
        pointShape: {
          type: 'star', sides: 2, dent: 0.05
        },
        pointSize: 24,
        type: 'line'
      },
    }
  });
});
    <script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="progress_chart"></div>

    NOTE: recommend using loader.js, rather than jsapi to load google charts...

    according to the release notes...

    The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on.

    the newer library can be found here...

    <script src="https://www.gstatic.com/charts/loader.js"></script>

    this will only change the load statement, see above snippet...