How to format vAxis in google charts that would display vertical scale with points instead of commas.
Example(now): 100,000
Example(then): 100.000
I know that the trick is with 'format' function, but I can't get it to work like i want.
I am trying to format it like with this:
vAxis: {minValue:0, format:'##.##'}
if the format option does not meet your needs,
you can use the ticks option to provide custom labels
using object notation, you can provide both the...
v: - value for the axis
f: - formatted value for the label
{v: 100000, f: '100.000'}
see following working snippet
the NumberFormat class is used, in an attempt to create the format
(not sure exactly what is needed)
data table method getColumnRange is used to find the range of the y-axis
a loop builds each tick for the axis labels...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'y0');
data.addRows([
[0, 500000],
[1, 500000],
[2, 200000],
[3, 700000],
[4, 400000]
]);
var formatNumber = new google.visualization.NumberFormat({
groupingSymbol: '.',
fractionDigits: 0
});
var ticksY = [];
var yRange = data.getColumnRange(1);
for (var i = 0; i <= yRange.max; i=i+100000) {
ticksY.push({
v: i,
f: formatNumber.formatValue(i)
});
}
var options = {
vAxis: {
ticks: ticksY
}
};
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>
Try this :
vAxis.format:{format:'##.##'}
Related
How can I make a chart change with new data? I get data back from an API call to my server, which I can see in the console. How do I update the chart with it?
map.on('singleclick', function(evt) {
var coordinate = evt.coordinate;
var hdms = ol.proj.transform(
coordinate, 'EPSG:3857', 'EPSG:4326');
$.get("http://127.0.0.1:5000/stats?lat="+hdms[1]+"&lon="+hdms[0],
function(data) {
console.log( data );
});
);
}
1) load google first
google.charts.load can replace --> $(document).ready (or similar)
2) create chart
3) get data
something like...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
// save reference to chart here
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
map.on('singleclick', function(evt) {
var coordinate = evt.coordinate;
var hdms = ol.proj.transform(
coordinate, 'EPSG:3857', 'EPSG:4326');
$.get("http://127.0.0.1:5000/stats?lat="+hdms[1]+"&lon="+hdms[0],
function(data) {
console.log( data );
// draw chart here
chart.draw(data);
});
);
};
});
UPDATE
you must create a DataTable to draw the chart
there are a few ways to create the data table
1) you can use JSON, but it must be in the following format, as found here
var jsonData = {
cols: [
{label: 'x', type: 'number'},
{label: 'y', type: 'number'}
],
rows: [
{c:[{v: 0}, {v: 0}]},
{c:[{v: 1}, {v: 1}]}
]
}
var dataTable = new google.visualization.DataTable(jsonData);
2) you can use simple array data, and static method arrayToDataTable
var arrayData = [
['x', 'y'],
[0, 0],
[1, 1]
];
var dataTable = google.visualization.arrayToDataTable(arrayData);
3) or manually add columns and rows
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number', 'x');
dataTable.addColumn('number', 'y');
dataTable.addRow([0, 0]);
// -- or addRows --
dataTable.addRows([
[0, 0],
[1, 1]
]);
Is there a JS Charting lib that supports multiple curces, having unequal steps?
Consider data like that:
Curve 1 (x/y pairs) RED in Sample:
[1, 10] [10, 20] [20,20]
Curve 2 Green in Sample:
[1, 2] [5, 6] [10,10] [11,12] [15,15] [20,20]
This should result in 2 Curves with x RANGE from 1..20. The first only has 3 data points that should be connected by a line. The second has 6 Points in the same x value range.
Which JS Charting library can handle that?
most likely, any chart lib can handle,
just need to load the data in the format the chart accepts
here, google charts is used to draw the chart
google charts has a method to join tables
so, just create two data tables, one for each x range
the resulting joined table will fill in the missing values with null
as such, need option for interpolateNulls so there are no breaks in the lines
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var x0 = [
[1, 10], [10, 20], [20,20]
];
var x1 = [
[1, 2], [5, 6], [10,10], [11,12], [15,15], [20,20]
];
var data0 = google.visualization.arrayToDataTable(x0, true);
var data1 = google.visualization.arrayToDataTable(x1, true);
var joinData = google.visualization.data.join(
data0, data1, 'full', [[0, 0]], [1], [1]
);
var options = {
height: 400,
interpolateNulls: true,
legend: {
position: 'none'
},
vAxis: {
viewWindow: {
max: 30
}
},
hAxis: {
viewWindow: {
max: 30
}
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.LineChart(container);
chart.draw(joinData, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I want to add percentage marks to number labels and found a option for it.
{hAxis: {format: 'percent'}}
But it also multiple the number by 100.
For instance, {hAxis: { format:'#,###%'} } displays the values "1,000%", "750%", and "50%" for values 10, 7.5, and 0.5.
https://developers.google.com/chart/interactive/docs/customizing_axes#number-formats
How can I just add % to the labels?
you could try adding custom axis labels, or ticks...
using object notation, you can provide both a...
value (v:) and a formatted value (f:)
then using google's NumberFormat class, build each tick manually...
var formatPercent = new google.visualization.NumberFormat({
suffix: '%'
});
...
ticks.push({
v: data.getValue(i, 0),
f: formatPercent.formatValue(data.getValue(i, 0))
});
...
hAxis: {
ticks: ticks
}
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['X', 'Y'],
[1, 1],
[10, 2],
[20, 3],
[30, 4]
]);
var formatPercent = new google.visualization.NumberFormat({
pattern: '#,##0',
suffix: '%'
});
var ticks = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
ticks.push({
v: data.getValue(i, 0),
f: formatPercent.formatValue(data.getValue(i, 0))
});
}
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {
hAxis: {
ticks: ticks
}
});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
When I try to create a column chart using the Google charts visualization javascript API the bar ends up a lot fatter than I expected.
Here's a comparison of two charts that demonstrates the problem. First, a chart with two data points where the resulting bars look normal, then a chart with a single data point where the resulting bar looks weird.
The only difference between the two snippets is:
// two bars
data.addRows([
[1, 1],
[2, 1],
]);
vs.
// one bar
data.addRows([
[1, 1]
]);
Two bars (looks normal)
google.charts.load('current', {
packages: ['corechart', 'bar']
});
google.charts.setOnLoadCallback(drawAxisTickColors);
function drawAxisTickColors() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'y');
// two bars
data.addRows([
[1, 1],
[2, 1],
]);
var options = {
title: 'Tidy lil bars',
hAxis: {
minValue: 0,
maxValue: 4
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Single bar (looks weird)
google.charts.load('current', {
packages: ['corechart', 'bar']
});
google.charts.setOnLoadCallback(drawAxisTickColors);
function drawAxisTickColors() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'y');
// one bar
data.addRows([
[1, 1],
]);
var options = {
title: 'Big ol bar',
hAxis: {
minValue: 0,
maxValue: 4
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
You can use bar.groupWidth to control the width of the columns
from the configuration options...
The width of a group of bars, specified in either of these formats:
Pixels (e.g. 50).
Percentage of the available width for each group (e.g. '20%'), where '100%' means that groups have no space between them.
Type: number or string
Default: The golden ratio, approximately '61.8%'.
i.e. --> bar: { groupWidth: 100 }, //100px
google.charts.load('current', {
callback: drawAxisTickColors,
packages: ['corechart', 'bar']
});
function drawAxisTickColors() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'y');
data.addRows([
[1, 1],
//[2, 1],
]);
var options = {
bar: { groupWidth: 100 }, //100px
title: 'Tidy lil bars',
hAxis: {
minValue: 0,
maxValue: 4
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
When trying to plot a Line Chart using the Google Charts code I get this error
Error: Type mismatch. Value 0.8 does not match type number in column index 0
The '0.8' is referring to the value p1 in the code.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('number', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
[p1,1.89],
[ch_period[17],5],
[3,2],
[5,2],
[5,2],
[6,7]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
I've made a jsfiddle with your code that works: http://jsfiddle.net/kychan/Dfx4V/1/
var p1 = parseInt('4'),
ch_period = {'17':4};
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('number', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
[p1, 1.89],
[ch_period[17], 5],
[3, 2],
[5, 2],
[5, 2],
[6, 7]
]);
// Set chart options
var options = {
'title': 'How Much Pizza I Ate Last Night',
'width': 400,
'height': 300
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
drawChart();
The problem was that p1 (and maybe ch_period) isn't the type number. Thus you must make it a number using parseInt(p1) / parseInt(ch_period) or manually assign it to a number.