How to add vertical line in column type chart

Asked

Viewed 1,815 times

1

I am using the column chart of the Google Chart API.

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

I have an array that indicates value => quantity. In a fictional example, it would be something like (5 (note) => 500 (number of people who got it right 5)).

Ex.:

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

There is a variable x, which will receive a value from 0 to 10, and 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 allocated in their respective position.

Then, at last, doubts remain:

How to insert the vertical bar?

How to make it position according to the X axis proportional?

Gráfico de colunas - google chart

Expected result:

histograma

JS + HTML code

    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

  • What would be the reason to create this vertical line? Wouldn’t disturb the graph view?

  • The line would serve to indicate, in parallel with the graph, the position of the person in a range of 0 to 10.

1 answer

3

Add columns to your chart with the scroll Annotation and with that just set the text to 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>

If you want a larger example, you can see this fiddle

Browser other questions tagged php google-charts

You are not signed in. Login or sign up in order to post.