Google Chart vertical lines

Question

Google Chart vertical lines

Navigation

#1 by (3 votes)

3

I would like to add vertical lines in this chart. But I can not. I would like each group to draw a vertical line, as in this image.

Mycurrentcode:

google.charts.load('current',{'packages':['corechart']});google.charts.setOnLoadCallback(drawChart);functiondrawChart(){vardata=google.visualization.arrayToDataTable([['Pergunta','Valor1','Valor2'],['Pergunta1',2,3],['Pergunta2',4,1],['Pergunta3',1,1]]);varoptions={title:'2016',subtitle:'Resultados',legend:'none',height:600,pointSize:3,vAxis:{title:"Status", ticks: [{v: 1, f: "Ótimo"}, {v: 2, f: "Bom"}, {v: 3, f: "Regular"}, {v: 4, f: "Ruim"}]

        }
    };

    var chart = new google.visualization.LineChart(document.getElementById('grafico'));

    chart.draw(data, options);
}

Rendering:

Iwouldlikeittolooklikethis:

Noticetheverticallinesineach"X-Axis Question".

javascript google-charts

asked by anonymous 08.11.2016 / 12:39

1 answer

Using For in Python How to run Procedures with Dapper

score 3 · Accepted Answer

You can reproduce this effect using "annotation" :

Add another column with role "annotation" . {type: 'string', role: 'annotation'}

In your options add the annotations: { style: 'line' } option.

In your data add an empty value to the annotation column. Note: It can not be null , if none has value it does not display the line.

Example

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

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Pergunta', {type: 'string', role: 'annotation'}, 'Valor 1', 'Valor 2'],
        ['Pergunta 1', '', 2, 3],
        ['Pergunta 2', '', 4, 1],
        ['Pergunta 3', '', 1, 1]
    ]);

    var options = {
        title: '2016',
        subtitle: 'Resultados',
        legend: 'none',
        height: 600,
        pointSize: 3,
        vAxis: {
          title: "Status", 
          ticks: [
            {v: 1, f: "Ótimo"}, 
            {v: 2, f: "Bom"}, 
            {v: 3, f: "Regular"}, 
            {v: 4, f: "Ruim"}
          ]
        },
        annotations: {
            style: 'line'
        }
    };

    var chart = new google.visualization.LineChart(document.getElementById('grafico'));

    chart.draw(data, options);
}

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

Source

link