Google Charts - Column Chart

55 views
Skip to first unread message

Алина Окользина

unread,
Oct 19, 2022, 9:52:40 AM10/19/22
to Google Visualization API
Hey! Tell me, please, is it possible to make intervals between columns in Google charts? I'm attaching the screenshot and code. (Example in 1 column)

<html>
    <head>
        <title>Create 3D Pie Charts with JavaSript and Google Charts API</title>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
        google.load("visualization", "1", {packages:["corechart"]});
        google.charts.load('current', {
  callback: drawChart,
  packages:['corechart']
});

function drawChart() {
 
var data = google.visualization.arrayToDataTable([
          ['Probality', 'Sum'],
          ['0  .........  0.1',  22],
          ['0.2 ',  24],
          ['0.3 ',  33],
          ['0.4 ',  19],
          [4,  17],
          [5,  22],
          [6,  17],
          [7,  16],
          [8,  11],
          [9,  358]
     
  ]);


  var numberPattern = '##,##,##0';

  var formatNumber = new google.visualization.NumberFormat({
    pattern: numberPattern
  });
  formatNumber.format(data, 1);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: 'stringify',
    sourceColumn: 1,
    type: 'string',
    role: 'annotation'
  }]);

  var options = {

    annotations: {
      alwaysOutside: true
    },
    colors: ['#00BCD4'],
    height: 550,
    bar: {groupWidth: '98%'},
    vAxis: { gridlines: { count: 4 }

}
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
  chart.draw(view, options);
}
        </script>
    </head>
    <body>
        <div id="chart"></div>
    </body>
</html>

2022-10-19_16-50-52.png
Reply all
Reply to author
Forward
0 new messages