I have some numeric data (e.g. "1, 2, 3, 4, 5..") based on which I want to build a chart. However, instead of raw numbers, I want to show other text as axis values.
For example, instead of number "1" I want to display "one"
Is that possible to do with Google Charts?
using object notation, you can provide the value (v:) and the formatted value (f:) for each tick
{v: 1, f: 'one'}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
[1, 1],
[2, 2],
[3, 3],
[4, 4],
[5, 5]
], true);
var options = {
hAxis: {
ticks: [
{v: 1, f: 'one'},
{v: 2, f: 'two'},
{v: 3, f: 'three'},
{v: 4, f: 'four'},
{v: 5, f: 'five'}
]
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Related
I would like to make the lines of the linechart to start from the left-bottom part of the graph and then go up to the first item (right), instead of just starting from the first item (left).
I tried adding a [null, 0, 0], but that just creates a new column, which adds some space between the beginning of the HAxis and the beginning of the lines.
Demo
in order for the line to begin at zero, at point must exist at 0, 0
but I think you will have better luck using an x-axis that is continuous (numeric) vs. discrete (string)
we can use object notation to provide a numeric value while still displaying a string
where v is the value and f is the formatted value
{v: 1, f: 'Value 1'}
we can use this in both the data table values, as well as the axis ticks.
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Values', 'Line 1', 'Line 2'],
[{v: 0, f: ''}, 0, 0],
[{v: 1, f: 'Value 1'}, 20, 10],
[{v: 2, f: 'Value 2'}, 40, 50],
[{v: 3, f: 'Value 3'}, 50, null]
]);
var options = {
hAxis: {
ticks: [ // ticks to display on the x-axis
{v: 0, f: ''},
{v: 1, f: 'Value 1'},
{v: 2, f: 'Value 2'},
{v: 3, f: 'Value 3'},
{v: 4, f: ''}
],
title: 'HAxis'
},
vAxis: {
title: 'VAxis'
},
curveType: 'function'
};
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
(obviously, the above snippet is not angular, but works the same...)
I have a bar chart that compares a budget with the money spent, for diferent categories.
The problem is, budget and progress can be zero, so the groups are hard to figure out, as can be seen in this JSFiddle.
It would be great to have a gridline that separates the groups, more obviously than with just empty space.
I can do it vertically, but it doesn't work horizontally.
hAxis: {
title: '$',
minValue: 0,
gridlines: {color: 'cyan'}
},
vAxis: {
title: 'Food',
gridlines: {color: 'red'}
}
Can anyone help?
gridlines are only supported by a continuous axis (number, date, etc.)
they will not appear for a discrete axis (string)
in the data table, you can use object notation in order to use a continuous axis,
but still display a string value. ({v: 4, f: 'Pizza'})
['Food', 'Budgeted', 'Spent'],
[{v: 4, f: 'Pizza'}, 8175000, 7854695],
[{v: 3, f: 'Hamburger'}, 0, 2792000],
[{v: 2, f: 'Milkshake'}, 2695000, 0],
[{v: 1, f: 'Paella'}, 0, 0]
where v: is the value, and f: is the formatted value.
the value is used to control the order,
the formatted value will be displayed in the tooltip.
then, in order to display the labels on the axis,
we must use object notation in the ticks option.
ticks: [
{v: 0.5, f: ''},
{v: 1, f: 'Paella'},
{v: 1.5, f: ''},
{v: 2, f: 'Milkshake'},
{v: 2.5, f: ''},
{v: 3, f: 'Hamburger'},
{v: 3.5, f: ''},
{v: 4, f: 'Pizza'},
{v: 4.5, f: ''}
],
the ticks with the half value will add a line between.
but you won't be able to add grid lines only between.
because we must add a tick for the label itself.
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Food', 'Budgeted', 'Spent'],
[{v: 4, f: 'Pizza'}, 8175000, 7854695],
[{v: 3, f: 'Hamburger'}, 0, 2792000],
[{v: 2, f: 'Milkshake'}, 2695000, 0],
[{v: 1, f: 'Paella'}, 0, 0]
]);
var options = {
title: 'Food budgeted vs food spent',
bar: {
groupWidth: '75%',
},
chartArea: {width: '50%'},
hAxis: {
title: '$',
minValue: 0,
gridlines: {color: 'red'}
},
vAxis: {
title: 'Food',
ticks: [
{v: 0.5, f: ''},
{v: 1, f: 'Paella'},
{v: 1.5, f: ''},
{v: 2, f: 'Milkshake'},
{v: 2.5, f: ''},
{v: 3, f: 'Hamburger'},
{v: 3.5, f: ''},
{v: 4, f: 'Pizza'},
{v: 4.5, f: ''}
],
gridlines: {color: 'red'}
}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Iam using Google Chart in Angular 6
I am using
pieSliceText: 'value'
But I need to display both label and value on the pie slice,
I tried using
pieSliceText: 'label-and-value'
similar to
pieSliceText: 'value-and-percentage'
But this doesnt work for me
a couple options...
1) use the following option to label the slices...
legend: {
position: 'labeled'
}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
height: 400,
is3D: true,
legend: {
position: 'labeled'
},
pieSliceText: 'value'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart_3d"></div>
2) use the following option to display the value of the slice...
pieSliceText: 'value'
with the above option, the slice will display the formatted value by default.
using object notation, we can provide both the value v: and formatted value f: in the data table.
{v: 11, f: 'Work: 11'}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', {v: 11, f: 'Work: 11'}],
['Eat', {v: 11, f: 'Eat: 2'}],
['Commute', {v: 11, f: 'Commute: 2'}],
['Watch TV', {v: 11, f: 'Watch TV: 2'}],
['Sleep', {v: 11, f: 'Sleep: 7'}]
]);
var options = {
chartArea: {
height: '100%',
width: '100%',
top: 12,
left: 12,
right: 12,
bottom: 12
},
height: 400,
is3D: true,
legend: {
position: 'none'
},
pieSliceText: 'value'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart_3d"></div>
I'm using google charts and I have an issue with formatting of the hAxis.
It looks like this when there are only 4 values on it:
I want to remove those decimal numbers between the real values. I don't want it to show 0.5,1.5,2.5,3.5
How can it be done?
there are a few options that could be used, if you were using a classic chart
but those are not supported using material charts
you can use option hAxis.format to change the number format,
but this will only remove the decimal and cause the numbers to repeat
the only method i've found when using a matieral chart,
is to use string values for the x-axis...
['Lesson', 'Average', 'Average best'],
['1', 10, 10],
['2', 10, 10],
['3', 10, 10],
['4', 7, 7.5]
or you can use a DataView to convert the numbers to strings...
var data = google.visualization.arrayToDataTable([
['Lesson', 'Average', 'Average best'],
[1, 10, 10],
[2, 10, 10],
[3, 10, 10],
[4, 7, 7.5]
]);
var view = new google.visualization.DataView(data);
view.setColumns([{
calc: function (dt, row) {
return dt.getValue(row, 0).toFixed(0);
},
label: data.getColumnLabel(0),
type: 'string'
}, 1, 2]);
see following working snippet...
google.charts.load('current', {
packages: ['bar']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Lesson', 'Average', 'Average best'],
[1, 10, 10],
[2, 10, 10],
[3, 10, 10],
[4, 7, 7.5]
]);
var view = new google.visualization.DataView(data);
view.setColumns([{
calc: function (dt, row) {
return dt.getValue(row, 0).toFixed(0);
},
label: data.getColumnLabel(0),
type: 'string'
}, 1, 2]);
var options = {
chart: {
title: 'Results distribution by lesson',
},
height: 280
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(view, google.charts.Bar.convertOptions(options));
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I use Google Chart as DataTable.
I try to make hAxis like as date format:
hAxis: {
title: '',
format: 'date',
viewWindow: {
min: [7, 30, 0],
max: [17, 30, 0]
}
}
And add rows as:
data.addRows([
[{v: [8, 0, 0], f: '03/02/13'}, 1],
[{v: [9, 0, 0], f: '04/02/13'}, 2],
[{v: [10, 0, 0], f:'05/02/13'}, 3],
[{v: [11, 0, 0], f: '06/02/13'}, 4],
[{v: [12, 0, 0], f: '07/02/13'}, 5]
]);
I need to get in horizontal line(hAxis) titles in date format: dd/mm/yy
hAxis.format expects a pattern, or pattern name
so it would be something like...
hAxis: {
format: 'short'
// or
format: 'dd/MM/yy'
}
however, as pointed out in the comments, the column type appears to be timeofday
to avoid changing the column type, you can provide your own custom hAxis.ticks,
using the data provided to the chart
see following, working snippet. uses rawData to populate chart data and ticks...
google.charts.load('current', {
callback: function () {
var rawData = [
[{v: [8, 0, 0], f: '03/02/13'}, 1],
[{v: [9, 0, 0], f: '04/02/13'}, 2],
[{v: [10, 0, 0], f:'05/02/13'}, 3],
[{v: [11, 0, 0], f: '06/02/13'}, 4],
[{v: [12, 0, 0], f: '07/02/13'}, 5]
];
var data = new google.visualization.DataTable();
data.addColumn({label: 'Date', type: 'timeofday'});
data.addColumn({label: 'Count', type: 'number'});
data.addRows(rawData);
var hTicks = [];
for (var i = 0; i < rawData.length; i++) {
hTicks.push(rawData[i][0]);
}
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {
hAxis: {
ticks: hTicks,
title: '',
viewWindow: {
min: [7, 30, 0],
max: [17, 30, 0]
}
}
});
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>