I am trying to set an option for a specific graph in the decimal form. I went through many questions, but I can't seem to figure out why it isn't working for me.
var temp_chart_options = {
title: 'Temperature',
hAxis: {title: 'Date', titleTextStyle: {color: '#262626'}, format:'decimal' },
vAxis: {minValue: 0, format: 'decimal'},
keepInBounds: true,
};
temp_chart.draw(temp_data, temp_chart_options);
I tried doing format: 'decimal', or format: { pattern: 'decimal' } and even did temp_chart.draw(data, google.charts.Line.convertOptions(temp_chart_options)); and even looked at these questions:
google chart vertical axis and tooltip value formatting
Google Chart Vertical Axis and Tooltip Value Formatting
How to format numbers in Google API Linechart?
But none of them seem to work :(
EDIT
Does anyone know how to change the format of the hover?
The format parameter on your vertical axis needs to specify a proper format pattern. For example, vaxis: {format:'0.00'} will give you a number with two decimal places after it.
Note that Google's documentation is very incomplete about this. They give an example using the presets, and an example of using separators (e.g. '#,###'), but there is no example showing decimal places, nor is there any complete documentation on number format specifiers that I could find. Perhaps it is documented elsewhere, but the page I linked to above ought to at least provide a link to it if so. It does not. I discovered the 0.00 format by experimentation.
As an addition to the accepted answer, I needed to do a currency in GBP with 1000's separators and 2 decimal places.
The given Google 'currency' was unsuitable as it renders the currency symbol in your local currency.
I came up with this:
format: '£#,###.##'
Which could theoretically be used with any currency symbol.
This was the result:
Related
I use Oracle APEX (v22.1) and on a page I created a (line) chart, but I have the following problem for the visualization of the graphic:
On the y-axis it is not possible to show the values in the format 'hh:mi' and I need a help for this.
Details for the axis:
x-axis: A date column represented as a string: to_char(time2, 'YYYY-MM')
y-axis: Two date columns and the average of the difference will be calculated: AVG(time2 - time1); the date time2 is the same as the date in the x-axis.
So I have the following SQL query for the visualization of the series:
SELECT DISTINCT to_char(time2, 'YYYY-MM') AS YEAR_MONTH --x-axis,
AVG(time2 - time1) AS AVERAGE_VALUE --y-axis
FROM users
GROUP BY to_char(time2, 'YYYY-MM')
ORDER BY to_char(time2, 'YYYY-MM')
I have another problem to solve it in another way: I am not familiar with JavaScript, if the solution is only possible in this way. Because I started new with APEX, but I have seen in different tutorials that you can use JS. So, when JS is the only solution, I would be happy to get a short description what I must do on the page.
(I don't know if this point is important for this case: The values time1 and time2 are updated daily.)
On the attributes of the chart I enabled the 'Time Axis Type' under Settings
On the y-axis I change the format to "Time - Short" and I tried with different pattern like ##:## but in this case you see for every value and also on the y-axis the value '01:00' although the line chart was represented in the right way. But when I change the format to Decimal the values are shown correct as the line chart.
I also tried it with the EXTRACT function for the value like 'EXTRACT(HOUR FROM AVG(time2 - time1))|| ':' || EXTRACT(MINUTE FROM AVG(time2 - time1))' but in this case I get an error message
So where is my mistake or is it more difficult to solve this?
ROUND(TRUNC(avg(time2 - time1)/60) + mod(avg(time2 - time1),60)/100, 2) AS Y
will get close to what you want, you can set Y Axis minimum 0 maximum 24
then 12.23 means 12 hour and 23 minutes.
Can anyone help to get the percent symbol[%] in Y axis value.
I have attched png. in that in y axis 0 t0 18 values are there I want to see it as 0% to 18%.
http://i.stack.imgur.com/pF6U0.png
You need to format in two places: the data and the axis. To format the data, use a NumberFormatter:
var formatter = new google.visualization.NumberFormat({pattern: '#%'});
// format column 1 of the DataTable
formatter.format(data, 1);
Format the axis values, via the vAxis.format option:
vAxis: {
format: '#%'
}
No need of the google.visualization line, just the next line is needed:
vAxis: {
format: "#'%'"
}
Explanation:
The difference is the double quotes and simple quote. format property follows ICU pattern (as per GChart specs) that is used for formatting. When the simple quotes are not used, the presence of % multiplies x100 the value per the ICU specs. So by adding the simple quotes, the % is kind of escaped (more info)
I am working with Google Charts. I need to add a '$' before the values on the y-axis as well as the value in the bubbles.
Is there a setting for this?
take care,
lee
UPdate,
Here is the data being used by the charts:
'Month','Semi-Detached in Toronto E04','Semi-Detached in Toronto E08','Condominium Townhouse in Toronto E04','Condominium Townhouse in Toronto E08', ],
['7/2011', 4354000,15305800,6776500,495000],['8/2011', 700000,10514418,7060786,0],['9/2011', 6854800,17805400,12087300,0],['10/2011', 7287400,14248900,16206500,0],['11/2011', 2696245,9733270,12698090,0],['12/2011', 1965800,6054500,8854390,0],['1/2012', 2450968,9012200,5500100,0] ]);
I've tried adding '$' before the values as well as '%24' as suggested before, but both throw syntax errors. And the values cannot be quoted without throwing a Google Charts error '
Data column(s) for axis #0 cannot be of type string×'.
Thanks everyone for your input. I found a question that was 99.9% the same:
How to set tooltips to display percentages to match axis in Google Visualization Line Chart?
Try using %24 which is the urlencoded form for $.
Use:
var formatter = new google.visualization.NumberFormat({prefix: '$'});
Check the example here:
https://developers.google.com/chart/interactive/docs/examples#interaction_example
More details here:
https://developers.google.com/chart/interactive/docs/reference#numberformatter
I made a chart with the y-axis in "timeofday" format. The data has the usual format as an array: [0,0,50,400]. The problem: Google won't recognize the milliseconds in the drawing (but in the tooltips it's shown correctly). So [0,0,50,400] (50.4 seconds) is like [0,0,50,0] (50.0 seconds) on the chart. But I need that kind of resolution. How to solve that?
In chart the options object you could set the vAxis object with the field format and provide a string with the pattern you want to use here's an example:
new google.visualization.BarChart(document.getElementById('visualization'));
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
vAxis: {title: "Year", format: "ss:SS"},
hAxis: {title: "Cups"}}
);
Look at the vAxis object.
For the string format you should look to http://userguide.icu-project.org/formatparse/datetime to build you the pattern you prefer.
The tooltips can be set to display percentages using the following code:
var formatter = new google.visualization.NumberFormat({
fractionDigits: 2,
suffix: '%'
});
formatter.format(data, 1); // Apply formatter to first column.
Is there a way for NumberFormat to multiply each element by 100? Otherwise the tooltip appears as .50%.
I am using vAxis.format = "format:'#%' " which does multiply by 100. So .5 is displayed as 50% on the vertical axis.
According to the documentation(icu-project.org/apiref), this can be overwritten by enclosing the % in single quotes, but this did not work.
The net result is that the tooltips do not match the axis. What is the best way to do this?
I got this working by specifying a formatter exactly as you do:
var chartData = google.visualization.arrayToDataTable(tableData);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 2,
suffix: '%'
});
formatter.format(chartData, 1);
The 1 in the last call means the second column, in which I have float values.
Then I specify a format for the axis in the chart options, escaping the percentage sign as pointed out by documentation and others here:
var chartOptions = {
vAxis: { format: '#\'%\'' }
};
I then draw the chart:
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(chartData, chartOptions);
This renders a left side axis with values like 10%, 20% and so on. And the tooltips looks like the default one but with a percentage like 10.10%, 20.20% and so on.
If you want two fraction digits in the left side axis as well, use this as format in the chart options instead:
vAxis: { format: '#.00\'%\'' }
var formatter = new google.visualization.NumberFormat({
pattern: '#%',
fractionDigits: 2
});
Thanks to http://groups.google.com/group/google-visualization-api/
You must surround the percent (%) symbol itself in single quotes.
The line I used to do this looks like this: options['vAxis'] = {'format': "#,###'%'"};
Combining this with your formatter above, you can make the vertical axis have a percent symbol and also make the tooltip include it too.
Ok... So this is a little late. I admit I didn't need this seven years ago. Nevertheless, this worked for me.
var rows = data.getNumberOfRows();
for (var i = 0; i < rows; i++) {
data.setFormattedValue(i, 4, (data.getFormattedValue(i, 4)*100).toFixed(1) + "%"); //LY
data.setFormattedValue(i, 3, (data.getFormattedValue(i, 3)*100).toFixed(1) + "%"); //TY
}
In my case, I am using four columns, two of which are assigned to the right axis with percentages. I wanted those columns' tooltips to reflect the proper percentage rather than the decimal representation.
Here is a link to the Google docs:
https://developers.google.com/chart/interactive/docs/reference#DataTable_setFormattedValue
I hope this helps some random stranger looking for it. ;)