Re: Display Formatted Value along X and Y Axis of Chart

[asgallant]

The y-axis is easy, just set the vAxis.format option to '# Pounds'.  Getting the x-axis formatted correctly depends on how your data is structured.  If you need a continuous axis, then you will have to put your data in a Date object.  If you can get by with a discrete axis, then you can put the data in string format.  Either way, you will need to use a DataView with a calculated column for the date.  To get the data in Date object form, use this:

var view = new google.visualization.DataView(data);

var baseDate = /*date to start from, in ms from the Unix Epoch (Jan 1, 1970 00:00:00:000 GMT)*/;
view.setColumns([{
    type: 'date',
    label: 'Date',
    calc: function (dt, row) {
        // get ms from minutes
        var ms = dt.getValue(row, 0) * 60000;
        return new Date(baseDate + ms);
    }
}, 1]);

to get it in string format use this:

var view = new google.visualization.DataView(data);
    
// assumes the DataTable contains the formatted date value
view.setColumns([{
    type: 'string',
    label: 'Date',
    calc: function (dt, row) {
        return dt.getFormattedValue(row, 0);
    }
}, 1]); 

Then you draw the chart using the view instead of the dataTable:

chart.draw(view, {/*options*/}); 

On Tuesday, July 24, 2012 2:53:35 AM UTC-4, Seddi1 wrote:

I need to display the formatted value along the X and Y axis of the chart. The trick is I need to use the value (not the formatted one) for all calculation purposes of the chart, but I don't want to display this value along X and Y axis, instead I want display the formatted value along X and Y axis. Right now the formatted value is displayed on mouse over the chart, and I also want this formatted value to be displayed along X and Y axis.

For example:

Date - (X Axis)

   Jan 1 2000 (Formated Value),  2,220,0000 (Value in minutes corresponding to this date which should be used for graph calculation but not display)

   Jan 1 2005 (Formatted Value), 2,720,0000 (Value in minutes corresponding to this date which should be used for graph calculation but not display)

   Jan 1 2010 (Formatted Value), 3,120,0000 (Value in minutes corresponding to this date which should be used for graph calculation but not display)

  

Weight (Y Axis)

    100 Pounds (Formatted Value), 100 (Value which should be used for graph calculation but not display)

    140 Pounds (Formatted Value), 140 (Value which should be used for graph calculation but not display)

    160 Pounds (Formatted Value), 160 (Value which should be used for graph calculation but not display)

Current/default behavior that I am seeing when the chart is drawn:

160   |

140   |

100   |

        ----------------------------------------------------------------

         2,220,0000   2,720,0000   3,120,0000

Behavior that I am looking to achieve

160 Pounds  |

140 Pounds  |

100 Pounds  |

                   ----------------------------------------------------------------

                  Jan 1 2000   Jan 1 2005   Jan 1 2010

I highly appreciate your help here.

Thanks

Nvas

[Seddi1]

Thank you so much for posting a possible solution with all the details.
 
But I am looking for a different and simple solution where I do not want to convert data with in Google charts. I have all the data (for chart drawing, display) out there which I need to pass in to the Google charts. I need to pass in two values, one value for chart drawing and the second correspoding text for displaying it along X or Y axis. I thought this is very basic feature will should have been there in Google charts. I do not want to convert/format data with in Google charts as that is my core business logic which I want to keep it separately. I if I can do that, that will save my day.
 
Best Regards
Nvas

[asgallant]

So, you have already formatted the data on your own; you just want to enter data points for display?  In that case, you can put the data in your DataTable like this:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Weight');
data.addRows([
    ['Jan 1, 2000', {v: 100, f: '100 Pounds'}],
    ['Jan 1, 2005', {v: 140, f: '140 Pounds'}],
    ['Jan 1, 2010', {v: 160, f: '160 Pounds'}]
]);

or this:

var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Weight');
data.addRows([
    // javascript dates use a zero-based index for months, so January is 0 not 1

    // date format is "new Date(year, month, day [, hour [, minute [, second [, microsecond]]]])" (hours, minutes, seconds, microseconds optional)

    // so 1:15:35 PM Jan 1, 2000 is: new Date(2000, 0, 1, 13, 15, 35)

    [new Date(2000, 0, 1), {v: 100, f: '100 pounds'}],
    [new Date(2005, 0, 1), {v: 140, f: '140 pounds'}],
    [new Date(2010, 0, 1), {v: 160, f: '160 pounds'}]
]); 

depending on whether you need a discrete (first option) or continuous (second option) x-axis.  You will still have to set vAxis.format = "# Pounds" to make the y-axis formatted properly.

[Seddi1]

From your example JSON code, what I am really looking for is, the formatted value that is passed under f: should be displayed along the Y (or X) axis. That way I have all the flexibility in the world to display what ever I want along the axis. On the X axis, I can pass Date object under v: and then I can pass formatted text as I want it under f:  This gives the most flexibility and user friendliness as I can  display most user friendly text along X or Y axis. The data that I have mentioned here is only for simple example purpose and I have much more complex situations/charts to handle.

[asgallant]

When using a discrete axis, you can pass whatever displayed value you want; this would be just as valid as above:

data.addRows([
    ['970,045,231.75', {v: 100, f: '100 Pounds'}],
    ['Frank', {v: 140, f: '140 Pounds'}],
    ['"Life, The Universe, and Everything" - Douglas Adams', {v: 160, f: '160 Pounds'}]
]); 

Continuous axes don't have that flexibility.  You can use the {v: value, f: 'formatted value'} format for the axis values, but the formatted value will only appear in the tooltips.  The axis labels have to be something the API can format by itself, as they don't necessarily correspond to any actual data points.  As an example, a line chart with these data points:

data.addRows([

    [0, {v: 100, f: '100 pounds'}],
    [7, {v: 140, f: '140 pounds'}],

    [20, {v: 160, f: '160 pounds'}]

]); 

would show tick marks at 0, 5, 10, 15, and 20.  If you want those axis labels to be formatted with units, then they have to be something the API can calculate (namely, the format must fall within the ICU decimal or date pattern sets).  The same goes for the y-axis labels, as the y-axis is always a continuous axis (with the noted exception of BarCharts, which flip the x- and y-axis roles).

Since I didn't really explain the difference between discrete and continuous axes, it might help to see them: http://jsfiddle.net/asgallant/Xfx3h/

So, basically, you can sort-of get what you want with discrete axes, but not with continuous; for those, you have to use the hAxis/vAxis.format option.

[Seddi1]

Thanks you for explaining this to me so patiantly. The more I think about it and the complexity of the charts, I am kind of seeing how this is working and why the flexibility that I was expecting originally may not be feasible.

Thanks again.

[Seddi1]

Most likely here is my one last question on this topic. I am good with the x-asix as that is going to be mostly dates for me. But on y-axis I need to handle the following among many other

Height measured in Foot and Inches (Example 6' 2")

Time duration (Not time of the day, but time taken to  do some thing) Examples: 1. Hours and Minutes (Example: 31:10)   2. Minutes and Seconds (Example: 14:20)

Ideally on the y-axis, I need to display data labels that are close to how people read it in general. For example in case of height, I need to display height in foot and inches (like 6' 2" or at least 6 2). In case of time duration I want to display both hours and minutes (or minutes and seconds). I can see that the decimal values (Example for height: 6' 2" = 6.18) can be used here, but that is not ideal solution as it is hard to read height that way.

I don't see any ValueType enum in the Java API to handle these cases. Can you point me to some sample code and/or throw some tips to handle this kind of data.

Thanks a lot for your help.

[asgallant]

Unfortunately, you can't format the axis values like that; vAxis.format accepts decimal ICU pattern set values only.  It allows you to add a prefix, suffix, exponent, significant digits, padding characters, separators, and create different patterns for positive and negative values.  Unfortunately, there is no way to take a value like 74 and convert it into 6' 2".  The same applies for durations.  You can set the axis to use inches or feet, minutes or seconds, but not combinations of the two.

[Виталий Мищенко]

How google can draw like that?

http://img39.imageshack.us/img39/8631/jm1.png

As I understand from server they have a number value, and on Y axis they draw string value...

I cannot understand, how they do it?

chart.<span style="color:

...

[Daniel LaLiberte]

Hi Виталий,

On Tue, Jul 30, 2013 at 7:57 AM, Виталий Мищенко <m...@kologlobal.com> wrote:

How google can draw like that?

http://img39.imageshack.us/img39/8631/jm1.png

As I understand from server they have a number value, and on Y axis they draw string value...

I cannot understand, how they do it?

There is an option for formatting the axis such that the labels are 'inside'.  

The labels in your image appear to be formatted from timeofday types of values, and the default format will generate labels that look like that.  

Here is an example of both of these.

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['date', 'time'],
    ['July 16', [0, 2, 30]],
    ['July 17', [0, 5, 0]],
    ['July 18', [0, 5, 0]]
  ]);

  // Create and draw the visualization.
  new google.visualization.LineChart(document.getElementById('visualization')).
      draw(data, {width: 500, height: 400,
                  vAxis: {
                    textPosition: 'in'
                  }}
          );
}

--

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   562D 5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA