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)
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.
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:
Hi,
Is there any way to limit the Y-axis character in google visulaization combo graph to given limit and then ...
By Default it is doing when more then 22 character. But I want to reduce it to given character.
Attached is the screen shot
I assume you meant X-axis, not Y-axis, given your screen shot. There is a quick-and-dirty approach that truncates the displayed strings to 22 characters, but this will affect the tooltips as well as the axis labels:
for (var i = 0; i < data.getNumberOfRows(); i++) {
// assumes column 0 is your labels
var label = data.getValue(i, 0);
label = label.substring(0, 22);
data.setFormattedValue(i, 0, label);
}
If you just want to affect the axis labels, there are different approaches you can take, and which one you take depends on what you want to achieve by truncating the labels. What is it that you want to achieve?
I have a cell that has Latitude and Longitude coordinates in three different forms. Content within the cells looks like this:
35°21′N 81°47′W / 35.35°N 81.79°W / 35.35; -81.79 (Ellenboro (Jan. 11, EF2))
38°46′N 85°28′W / 38.76°N 85.46°W / 38.76; -85.46 (Madison (Jan. 17, EF0))
etc.
I want to extract only the last set of numbers (35.35; -81.79) and put each one in a different row, one for latitude and one for longitude.
How would I go about doing this?
If you're happy just with using formulas - here's my solution (assuming original strings are placed in column A starting A2):
B2 (Latitude): =TRIM(MID($A2,SEARCH("#",SUBSTITUTE($A2,"/","#",2))+1,SEARCH("#",SUBSTITUTE($A2,";","#"))-SEARCH("#",SUBSTITUTE($A2,"/","#",2))-1)).
C2 (Longitude): =TRIM(MID($A2,SEARCH("#",SUBSTITUTE($A2,";","#"))+1,SEARCH("#",SUBSTITUTE($A2,"(","#"))-SEARCH("#",SUBSTITUTE($A2,";","#"))-1)).
Autofill down both formulas as you need.
This will return results as strings. If you want them as numbers - just add =VALUE(...) wrapper to each formula. However, my local setting use comma as decimal separator, so I must add one more SUBSTITUTE for handling this.
For your convenience sample file is shared: https://www.dropbox.com/s/twkcln8lozdgga9/CoordsSplit.xlsx
Start by replacing:
\s+\(.*
by the empty string. Then replace:
^.*/\s+
by the empty string. You will then only be left with the last set of numbers, splitting them is then easy (with \s*;\s*).
Demo in perl:
$ perl -ne 's,\s+\(.*,,; s,^.*/\s+,,; my #coords = (split(/\s*;\s*/)); print "Latitude: $coords[0]; longitude: $coords[1]"' <<EOF
> 35°21′N 81°47′W / 35.35°N 81.79°W / 35.35; -81.79 (Ellenboro (Jan. 11, EF2))
> 38°46′N 85°28′W / 38.76°N 85.46°W / 38.76; -85.46 (Madison (Jan. 17, EF0))
> EOF
Latitude: 35.35; longitude: -81.79
Latitude: 38.76; longitude: -85.46
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. ;)