showing the figure on two decimal places in google chart

[khamosh]

hello every body 

I have a ComboChart with ControlWrapper, I want in my chart only I see the the figure on two decimal places, so I use formatter, this my code 

 view: {

           columns: [

                     {

                //transform the numbers into strings, so the steppedArea series will work

              type: "string",

              calc: function (dt, row) {

                  var date = dt.getValue(row, 2);

                  var formatter = new google.visualization.DateFormat({pattern:"dd/MM/yyyy HH:mm"});

                  return formatter.formatValue(date);

                  console.log(calc, typeof (calc));

              }

           },

           {

           type:"string",

    calc: function (dt, row) {

          var number = dt.getValue(row, 2);

          var number = dt.getValue(row, 3);

          var number = dt.getValue(row, 4);

           var formatter = new google.visualization.NumberFormat({fractionDigits:2});

          console.log(calc);

           return formatter.formatValue(number);

             }

           },   

           6,7]

       }

but I have this error :

One or more participants failed to draw()×

  All series on a given axis must be of the same data type×

[Sergey Grabkovsky]

Here the chart is complaining because you're trying to chart a string-type series on the same chart as a number-type series. This is not allowed. It looks like you simply want to format the values, but not actually change the values themselves. For this, you can return an object with 'v', and 'f' properties from your calc function, where the 'v' property will contain the actual value, and the 'f' property will contain a string-formatted version of that value. Borrowing some code from your example, it might look like this:

calc: function (dt, row) {
  var number = dt.getValue(row, 2);

  var formatter = new google.visualization.NumberFormat({fractionDigits:2});

  return {v: number, f: formatter.formatValue(number)};
}

- Sergey

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.

[asgallant]

You are returning a string value when you should be returning a number value.  If you want to format the data, you can return it as an object with "v" (value) and "f" (formatted value) properties:

calc: function (dt, row) {
    var number = dt.getValue(row, 2);

    var formatter = new google.visualization.NumberFormat({fractionDigits:2});

    return {
        v: number,
        f: formatter.formatValue(number)
    };
}

[asgallant]

Also, you need to change the "type" of the series to "number":

{
    type: 'number',

    calc: function (dt, row) {
        var number = dt.getValue(row, 2);

[khamosh]

thanks alot for your answer,

that's right,

but now my problem is this: 

view: {

           columns: [

                     {

              type: "string",  

              calc: function (dt, row) {

                  var date = dt.getValue(row, 2);

                  var formatter = new google.visualization.DateFormat({pattern:"dd/MM/yyyy HH:mm"});

              }

           },

           

            {

           type:"number",

    calc: function (dt, row) {

          var number0 = dt.getValue(row, 3);

          var number1 = dt.getValue(row, 4);

          var number3 = dt.getValue(row, 5);

          var formatter = new google.visualization.NumberFormat({fractionDigits:2});

          console.log(formatter.formatValue(number0), typeof (formatter.formatValue(number0)));

          console.log(formatter.formatValue(number1), typeof (formatter.formatValue(number1)));

          console.log(formatter.formatValue(number3), typeof (formatter.formatValue(number3)));

          return {

                v: number0,

                f: formatter.formatValue(number0)

               }

           return {

                v: number1,

                f: formatter.formatValue(number1)

               }

           return {

                v: number3,

                f: formatter.formatValue(number3)

               };

             }

           }, 

           6,7]

       }

az you see i must to change the "type" of the 3 Column ??? 

[asgallant]

What are you trying to do with this?

calc: function (dt, row) {
    var number0 = dt.getValue(row, 3);
    var number1 = dt.getValue(row, 4);
    var number3 = dt.getValue(row, 5);

    var formatter = new google.visualization.NumberFormat({fractionDigits:2});

    console.log(formatter.formatValue(number0), typeof (formatter.formatValue(number0)));
    console.log(formatter.formatValue(number1), typeof (formatter.formatValue(number1)));
    console.log(formatter.formatValue(number3), typeof (formatter.formatValue(number3)));
    return {
        v: number0,
        f: formatter.formatValue(number0)
    }
    return {
        v: number1,
        f: formatter.formatValue(number1)
    }
    return {
        v: number3,
        f: formatter.formatValue(number3)
    };
}

The 2nd and 3rd "return" statements will never be reached (and even if you could return multiple values, in one function, the API doesn't know what to do with them).

[khamosh]

Hello asgallant , I find it. I use this function :

view: {

           columns: [

                     {

                //transform the numbers into strings, so the steppedArea series will work

              type: "string",

              calc: function (dt, row) {

                  var date = dt.getValue(row, 2);

                  var formatter = new google.visualization.DateFormat({pattern:"dd/MM/yyyy HH:mm"});

                  return formatter.formatValue(date);

              }

           },

           {

             type:"number",

      calc: function (dt, row) {

            var number0 = dt.getValue(row, 3);

            var formatter = new google.visualization.NumberFormat({fractionDigits:2});

            console.log(formatter.formatValue(number0), typeof (formatter.formatValue(number0)));

            //return formatter.formatValue(number);

            return {

                  v: number0,

                  f: formatter.formatValue(number0)

                 };

               }

             },

             {

               type:"number",

        calc: function (dt, row) {         

              var number1 = dt.getValue(row, 4);

              var formatter = new google.visualization.NumberFormat({fractionDigits:2});

              console.log(formatter.formatValue(number1), typeof (formatter.formatValue(number1)));

              //return formatter.formatValue(number);         

               return {

                    v: number1,

                    f: formatter.formatValue(number1)

                   };             

                 }

               },

               

               {

                 type:"number",

          calc: function (dt, row) {

                var number3 = dt.getValue(row, 5);

                var formatter = new google.visualization.NumberFormat({fractionDigits:2});

                console.log(formatter.formatValue(number3), typeof (formatter.formatValue(number3)));

                //return formatter.formatValue(number);

                 return {

                      v: number3,

                      f: formatter.formatValue(number3)

                     };

                   }

                 },

                 

           6,7]

       }

it works very well but when we use this we have another problem, if you look at the picture that I attach it you will see for the label I can see the text like befor .how I can do it????

[asgallant]

Do you want to add labels for those legend entries, or do you want to remove those from the legend?

If you want to add labels, you need to set the "label" parameter in the calculated columns:

{

    type: 'number',

    label: 'column label',

    calc: function (dt, row) {...}

}

If you want to remove them from the legend, you need to set the series.<series index>.visibleInLegend option to false:

series: {

    0: {

         // remove the first series from the legend

         visibleInLegend: false

    }

    1: {

         // remove the second series from the legend

         visibleInLegend: false

    },

    2: {

         // remove the third series from the legend

         visibleInLegend: false

[khamosh]

thanks a lot, that's right. but I found it is not dynamic????
can we do it in the dynamic way??????

[asgallant]

What do you mean by "it is not dynamic"?