Google Charts - Column Chart

167 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>

Reply all

Reply to author

Forward

0 new messages