Project Description
The best implementation out there. Ever wanted to use Googles great visualizations in your asp.net site? Now its really so easy your going to kick yourself for not finding this first. Add the controls to the toolbar and drag and drop the charts or graphs or timelines into your markup. Your 1/2 way done. Next, load them with data using native .NET data tables. All google options are extended in the markup or code behind. So easy a caveman can do it. And now, perform easy Ajax updates of the chart by just specifying the url. All very simple. All with examples.


**Project hosted and Maintained on code.google.com **

DOWNLOAD, EXAMPLES, AND SOURCE FROM THE LINKS BELOW:
(Sorry, not going to maintain this in two locations)

Project Home: http://code.google.com/p/googlevisualizationsdotnet
Examples: http://chartsandgraphs.care4soft.com/

Sample Code:

PieChart Example:
chart_piechart_example.png
<h3>PieChart Example</h3>
<cc1:GVPieChart ID="GVPieChart1" runat="server" Width="600" Height="400" />


System.Data.DataTable dt = new System.Data.DataTable("Work Day");
dt.Columns.Add("Activity");
dt.Columns.Add("Daily Percentage", typeof(int));
dt.Rows.Add(new object[] {"Engineering",5});
dt.Rows.Add(new object[] { "Programming", 3 });
dt.Rows.Add(new object[] { "Sleeping", 1 });
dt.Rows.Add(new object[] { "Lunch", 1 });
dt.Rows.Add(new object[] { "Meetings", 1 });
this.GVPieChart1.ChartData(dt);


TimeLine Example:
chart_timeline_example.png
<h3>Annotated Timeline Example</h3>
<cc1:GVAnnotatedTimeline ID="GVAnnotatedTimeline1" runat="server"  Width="800" Height="400" GVIDisplayAnnotations="True" GviDisplayDateBarSeparator="true" GviAllowRedraw="true"/>


List<GoogleChartsNGraphsControls.TimelineEvent> evts = new List<GoogleChartsNGraphsControls.TimelineEvent>();
evts.Add(new GoogleChartsNGraphsControls.TimelineEvent("Sold Pencils", new DateTime(2008,1,1), 30000));
evts.Add(new GoogleChartsNGraphsControls.TimelineEvent("Sold Pencils", new DateTime(2008, 1, 2), 14045));
evts.Add(new GoogleChartsNGraphsControls.TimelineEvent("Sold Pencils", new DateTime(2008, 1, 3), 55022));
evts.Add(new GoogleChartsNGraphsControls.TimelineEvent("Sold Pencils", new DateTime(2008, 1, 4), 75284));
evts.Add(new GoogleChartsNGraphsControls.TimelineEvent("Sold Pencils", new DateTime(2008, 1, 5), 41476));
evts.Add(new GoogleChartsNGraphsControls.TimelineEvent("Sold Pencils", new DateTime(2008, 1, 6), 33322));

evts.Add(new GoogleChartsNGraphsControls.TimelineEvent("Sold Pens", new DateTime(2008, 1, 1), 40645));
evts.Add(new GoogleChartsNGraphsControls.TimelineEvent("Sold Pens", new DateTime(2008, 1, 2), 20374));
evts.Add(new GoogleChartsNGraphsControls.TimelineEvent("Sold Pens", new DateTime(2008, 1, 3), 50766));
evts.Add(new GoogleChartsNGraphsControls.TimelineEvent("Sold Pens", new DateTime(2008, 1, 4), 14334, "Out of Stock", "Ran out of stock on pens at 4pm"));
evts.Add(new GoogleChartsNGraphsControls.TimelineEvent("Sold Pens", new DateTime(2008, 1, 5), 66467, "Bought Pens", "Bought 200k pens"));
evts.Add(new GoogleChartsNGraphsControls.TimelineEvent("Sold Pens", new DateTime(2008, 1, 6), 39463));

evts.Add(new GoogleChartsNGraphsControls.TimelineEvent("Sold Erasers", new DateTime(2008, 1, 1), 0, "No Erasers", "What was i thinking?"));
evts.Add(new GoogleChartsNGraphsControls.TimelineEvent("Sold Erasers", new DateTime(2008, 1, 2), 1254, "Bought Erasers", "Bought 200k erasers for all the mistakes"));
evts.Add(new GoogleChartsNGraphsControls.TimelineEvent("Sold Erasers", new DateTime(2008, 1, 3), 4596));
evts.Add(new GoogleChartsNGraphsControls.TimelineEvent("Sold Erasers", new DateTime(2008, 1, 4), 14334));
evts.Add(new GoogleChartsNGraphsControls.TimelineEvent("Sold Erasers", new DateTime(2008, 1, 5), 26004));
evts.Add(new GoogleChartsNGraphsControls.TimelineEvent("Sold Erasers", new DateTime(2008, 1, 6), 39001));
this.GVAnnotatedTimeline1.ChartData(evts.ToArray());


Ajax Update Example:

chart_gauge_example.png
<h3>Gauge Example</h3>
<cc1:GVGauge ID="GVGauge1" runat="server"  Width="250" Height="150" QueryString="~\AjaxUpdateHandler.ashx?type=gauge"  GviRedFrom="80" GviRedTo="100" GviYellowFrom="50" GviYellowTo="80"/>
        
<asp:Button ID="ButtonReload" runat="server"  OnClientClick="chart_GVGauge1.reload(); return false;" Text="Ajax Reload" />


Ashx Handler:
public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/html";
            context.Response.AddHeader("Content-Disposition", "inline; filename=Response.json");
            System.Data.DataTable dt = null;
            Random rand = new Random(System.Environment.TickCount);

            switch(context.Request.Params["type"])
            {
                case "column":
                {
                    dt = new System.Data.DataTable("Company Performance");
                    dt.Columns.Add("Year", typeof(string));
                    dt.Columns.Add("Sales", typeof(int));
                    dt.Columns.Add("Expenses", typeof(int));
                    dt.Rows.Add(new object[] { "2004", rand.Next(100, 1000), rand.Next(75,700) });
                    dt.Rows.Add(new object[] { "2005", rand.Next(100, 1000), rand.Next(75, 700) });
                    dt.Rows.Add(new object[] { "2006", rand.Next(100, 1000), rand.Next(75, 700) });
                    dt.Rows.Add(new object[] { "2007", rand.Next(100, 1000), rand.Next(75, 700) });
                    dt.Rows.Add(new object[] { "2008", rand.Next(100, 1000), rand.Next(75, 700) });
                    dt.Rows.Add(new object[] { "2009", rand.Next(100, 1000), rand.Next(75, 700) });
                    dt.Rows.Add(new object[] { "2010", rand.Next(100, 1000), rand.Next(75, 700) });
                    dt.Rows.Add(new object[] { "2011", rand.Next(100, 1000), rand.Next(75, 700) });
                    break;
                }
                default:
                {
                    dt = new System.Data.DataTable("Computer");
                        dt.Columns.AddRange(new System.Data.DataColumn[] {
                        new System.Data.DataColumn("Label",typeof(string)), 
                        new System.Data.DataColumn("Value",typeof(int))
                    });


                    dt.Rows.Add(new object[] { "Memory", rand.Next(0, 100) });
                    dt.Rows.Add(new object[] { "CPU", rand.Next(0, 100) });
                    dt.Rows.Add(new object[] { "Network", rand.Next(0, 100) });
                    break;
                }
        }

            context.Response.Write(new Bortosky.Google.Visualization.GoogleDataTable(dt).GetJson());
        }



Gallery of Other Charts:

chart_area_example.png
chart_column_example.png
chart_heatmap_example.png
chart_map_example.png
chart_motion_example.png
chart_org_example.png
chart_scatter_example.png
chart_spark_example.png

Last edited Feb 29, 2012 at 9:49 PM by Juls, version 13