How to add vertical line to column type chart

Question

How to add vertical line to column type chart

Navigation

#1 by (3 votes)

1

I'm using the Google Chart Chart column chart.

I would like to insert a vertical line in a given position dynamically.

I have an array that indicates value = > amount. In a fictitious example, it would look something like (5 (note) => 500 (number of people who hit 5)).

Ex:

$arr = array('<=4' => 500, 5 => 500, 6 => 300);

There is a variable x, which will be given a value from 0 to 10, which must be represented in the graph through the vertical line already mentioned, indicating the position among the others.

In the image example, I used $x = 9 and I placed it in their respective position.

Then, finally, the doubts remain:

How to insert the vertical bar?

How do you make it position proportional to the X axis?

Expectedresult:

JS+HTML

    google.charts.load("current", {packages: ['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ["Element", "Density", {role: 'annotation'}],
            ["<=4", 672, "672"],
            ["5", 648, "648"],
            ["6", 709, "709"],
            ["7", 569, "569"],
            ["8", 459, "459"],
            ["9", 223, "223"],
            ["10", 17, "17"],
        ]);

        var view = new google.visualization.DataView(data);

        var options = {
            title: "Descrição",
            width: 1159,
            height: 400,
            bar: {groupWidth: "95%"},
            legend: {position: "none"},
        };
        var chart = new google.visualization.ColumnChart(document.getElementById("grafico"));
        chart.draw(view, options);
    }

<div id="grafico" style="width: 900px; height: 300px;"></div>

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

php google-charts

asked by anonymous 01.03.2017 / 16:00

1 answer

Q: choose two select and display result How to convert the date difference from seconds to hours / days?

score 3 · Answer 1

Add columns to your graph with annotation and just set the text for the line.

See the example below:

google.charts.load("current", {
  packages: ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'x');
  data.addColumn({
    type: 'string',
    role: 'annotation'
  });
  data.addColumn('number', 'Gatos');
  data.addRow(["A", null, 1]);
  data.addRow(["E", null, 7]);
  data.addRow(["F", null, 7]);
  data.addRow(["G", 'Texto Aqui', 1]);
  data.addRow(["H", null, 4]);


  var view = new google.visualization.DataView(data);

  var chart = new google.visualization.ColumnChart(document.getElementById("grafico"));
  chart.draw(view, {
    curveType: 'function',
    width: 500,
    height: 400,
    vAxis: {
      maxValue: 10
    },
    annotations: {
      style: 'line'
    }
  });
}

<div id="grafico" style="width: 900px; height: 300px;"></div>

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

Ifyou'dlikealargerexample,youcanview this fiddle