Formatting data

May 18, 2012 at 2:24 PM

Do you know any way to format data in columns? (date, currency, etc)

Coordinator
May 18, 2012 at 6:50 PM

hi, there are a few different ways to apply formats.  I have wrapped some common formats in the API but you can also create custom formatters and plug them into the markup.  First, is a common currency format applied.  Last, is a custom formatter.  Last, is a simple animation.  You can see all this on http://code.google.com/p/googlevisualizationsdotnet/wiki

 

// common currency format

 System.Data.DataTable barchart = new System.Data.DataTable("Company Performance");
            barchart.Columns.Add("Year", typeof(string));
            barchart.Columns.Add("Sales", typeof(int));
            barchart.Columns.Add("Expenses", typeof(int));
            barchart.Rows.Add(new object[] { "2004", 1000, 400 });
            barchart.Rows.Add(new object[] { "2005", 1170, 460 });
            barchart.Rows.Add(new object[] { "2006", 660, 1120 });
            barchart.Rows.Add(new object[] { "2007", 1030, 540 });
            //this.GVBarChart1.GviVAxis = "{title: 'Year', titleTextStyle: {color: 'red'} }";

            hx = new GoogleChartsNGraphsControls.hAxis();
            hx.Title = "In Thousands";
            hx.Formatted = GoogleChartsNGraphsControls.AxisFormat.Currency;
            hx.SlantedText = true;
            this.GVBarChart1.GVIHAxisClass = hx;

            this.GVBarChart1.GviColors = new System.Drawing.Color?[] { Color.MediumAquamarine, Color.LightCyan };
            this.GVBarChart1.DataSource = barchart;

// custom callback formatter
//Mark up
<h3>ColumnChart Example with AJAX and Animation</h3>
        <cc1:GVColumnChart ID="GVColumnChart1" runat="server" Width="600" Height="400" GviAnimation_Duration="1000" GviAnimation_Easing="Out"
        QueryString="~/AjaxUpdateHandler.ashx?type=column" GviFormatterHook="MyColumnChartDataFormatter" />
// format function in javascript ... will be run before chart renders, hook takes two params, chart + data
/*
    Apply the formatter to the chart data or anything else, its my hook into GoogleVisualizations
      data.setCell(4, 0, 'Mike');
      data.setCell(4, 1, 12000);
      data.setCell(4, 2, false);

              var formatter = new google.visualization.NumberFormat({prefix: '$'});
              formatter.format(data, 1); // Apply formatter to second column

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1]);

*/
function MyColumnChartDataFormatter(chart,data)
{
    var formatter = new google.visualization.NumberFormat({prefix: '$'});
     formatter.format(data, 2); // Apply formatter to second column
     formatter.format(data, 1); // Apply formatter to second column
}




// simple animation applied
this.GVAreaChart2.DataSource = dt2;
            

            GoogleChartsNGraphsControls.Animation an = new GoogleChartsNGraphsControls.Animation();
            an.Easing = GoogleChartsNGraphsControls.AnimationEasing.Out;
            an.Duration = 1000;
            this.GVAreaChart2.GviAnimationOptions = an;

May 21, 2012 at 1:43 PM

Perfect. But I also need format in the GVTable control. Can you help me?

Coordinator
May 22, 2012 at 9:44 PM

Look at the GviFormatterHook.  You get to write a javascript plugin, you will get params chart, and data passed into your function.

 

<h3>ColumnChart Example with AJAX and Animation</h3>
        <cc1:GVColumnChart ID="GVColumnChart1" runat="server" Width="600" Height="400" GviAnimation_Duration="1000" GviAnimation_Easing="Out"
        QueryString="~/AjaxUpdateHandler.ashx?type=column" GviFormatterHook="MyColumnChartDataFormatter" />
// format function in javascript ... will be run before chart renders, hook takes two params, chart + data
/*
    Apply the formatter to the chart data or anything else, its my hook into GoogleVisualizations
      data.setCell(4, 0, 'Mike');
      data.setCell(4, 1, 12000);
      data.setCell(4, 2, false);

              var formatter = new google.visualization.NumberFormat({prefix: '$'});
              formatter.format(data, 1); // Apply formatter to second column

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1]);

*/
function MyColumnChartDataFormatter(chart,data)
{
    var formatter = new google.visualization.NumberFormat({prefix: '$'});
     formatter.format(data, 2); // Apply formatter to second column
     formatter.format(data, 1); // Apply formatter to second column
}

 

Coordinator
May 22, 2012 at 9:45 PM
I replied on the forum. If you need more just tell me specifically what format you are trying to do.

On Mon, May 21, 2012 at 5:43 AM, chimenes <notifications@codeplex.com> wrote:

From: chimenes

Perfect. But I also need format in the GVTable control. Can you help me?

Read the full discussion online.

To add a post to this discussion, reply to this email (googlevisnet@discussions.codeplex.com)

To start a new discussion for this project, email googlevisnet@discussions.codeplex.com

You are receiving this email because you subscribed to this discussion on CodePlex. You can unsubscribe or change your settings on codePlex.com.

Please note: Images and attachments will be removed from emails. Any posts to this discussion will also be available online at codeplex.com




--
Best Regards,

Julian King
(206) 697-4663
hoolmank@gmail.com