The way to handle this is to create a page/service/controller (depending on
your site architecture) that serves up a JSON string representation of a
DataTable object that contains the data from your SQL query. You can then
query this service from javascript with AJAX.
The structure of the JSON string is and object with two properties: "cols"
and "rows".
The "cols" property is an array of column objects. Each column object has
"type" (mandatory), "label", "id", "p", and "role" (all optional)
properties. "type" is a string that describes the data type of the column
("string", "number", "date", "datetime", "timeofday", and "boolean" are the
valid types). "label" is the label of the column, which is used for table
headers and data series labels. "id" is an id to reference the column by,
but has practically no use. "p" is an object containing key/value pairs
for additional column properties; which properties are valid depends on the
type(s) of visualizations drawn. "role" is used to specify a column
role<https://developers.google.com/chart/interactive/docs/roles>for the column
and may be left out if the default column role ("domain" or
"data") is appropriate.
The "rows" property is an array of row objects. Each row object contains
"c" (mandatory) and "p" (optional) properties. "c" is an array of cell
objects. "p" is an object containing key/value pairs for row properties;
which properties are valid depends on the type(s) of visualizations drawn
(currently, there are no first-party visualizations that use row
properties, so you will probably not need to use this). A cell object
contains "v" (mandatory), "f", and "p" (all optional) properties. "v" is
the value of the cell; this must be the same data type as the column the
cell is in. "f" is the formatted value of the cell, which is the string
that gets displayed wherever the value is shown; if left out, the default
formatting is used, or a
formatter<https://developers.google.com/chart/interactive/docs/reference#formatters>can
be applied to the column to format the data. "p" is an object
containing key/value pairs for cell properties; which properties are valid
depends on the type(s) of visualizations drawn (as I recall, the only
first-party visualization that uses cell properties is the Table).
Here's an example JSON string:
"{"cols":[{"label":"Name","type":"string"},{"label":"Value","type":"number"}],"rows":[{"c":[{"v":"foo"},{"v":10}]},{"c":[{"v":"bar"},{"v":10}]},{"c":[{"v":"cad"},{"v":10}]},{"c":[{"v":"qud"},{"v":10}]}]}"
broken down to make it more readable:
{
"cols":[
{"label":"Name","type":"string"},
{"label":"Value","type":"number"}
],
"rows":[
{"c":[{"v":"foo"},{"v":10}]},
{"c":[{"v":"bar"},{"v":10}]},
{"c":[{"v":"cad"},{"v":10}]},
{"c":[{"v":"qud"},{"v":10}]}
]
}
I expect that C# has a method for turning maps, arrays, and objects into
JSON without you having to do it manually.
Once you have a service that provides the data in the correct format, you
can use an AJAX query to fetch the data dynamically. Here's an example
that uses jQuery's AJAX function (though this can be written in other
frameworks or even plain javascript):
function drawChart () {
$.ajax({
url: '/path/to/data/service/',
type: 'GET', // or 'POST'
data: {
// map of key/value pairs to pass to the server, eg:
foo: 'bar',
cad: 10,
qud: false,
fiz: [1, 2, 3],
buz: {
piz: 7.89
}
},
dataType: 'json',
success: function (json) {
var data = new google.visualization.DataTable(json);
var chart = new
google.visualization.LineChart(document.querySelector('#chart_div'));
chart.draw(data, {
heigh: 400,
width: 600
});
},
error: function (response) {
// handle errors
}
});
}
google.load('visualization', '1', {packages: ['corechart'], callback:
drawChart});
On Friday, May 2, 2014 1:04:57 AM UTC-4, diptiman sharma wrote:
>
> I am very appreciated that you reply back .
> By the way i am using ASP .net with C# code, which is connected to the sql
> sever data base .
> i need to fetch the data dynamically after page load . please help me out
> to build this.
>
>
>
>
> On Thu, May 1, 2014 at 8:48 PM, Andrew Gallant
> <[email protected]<javascript:>
> > wrote:
>
>> How you connect your database depends on a bunch of different things.
>> What language are you working with on your server (ASP.net [VB or C#?],
>> Java, PHP. Python, Node.js, something else)? Do you need to be able to
>> fetch data dynamically after page load or is a static data set (per page
>> load) sufficient?
>>
>> If you are working with PHP, there are a large number of examples in this
>> forum that show how to connect to a MySQL database (search for "MySQL
>> PDO"), which can be easily modified to work with SQL Server.
>>
>>
>> On Thursday, May 1, 2014 7:38:23 AM UTC-4, diptiman sharma wrote:
>>>
>>> here is code given bellow , but i would like to know that how to connect
>>> with sql server database to get Huge data in the Google chart ...
>>>
>>>
>>>
>>>
>>>
>>> <%@ Page Language="C#" AutoEventWireup="true"
>>> CodeFile="Default2.aspx.cs" Inherits="Default2" %>
>>>
>>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
>>> http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
>>>
>>> <html xmlns="http://www.w3.org/1999/xhtml";>
>>> <head runat="server">
>>> <title></title>
>>>
>>> <script type="text/javascript" src="https://www.google.com/jsapi
>>> "></script>
>>> <script type="text/javascript">
>>> google.load("visualization", "1", {packages:["corechart"]});
>>> google.setOnLoadCallback(drawChart);
>>> function drawChart() {
>>> var data = google.visualization.arrayToDataTable([
>>> ['Year', 'Sales', 'Expenses'],
>>> ['2004', 1000, 400],
>>> ['2005', 1170, 460],
>>> ['2006', 660, 1120],
>>> ['2007', 1030, 540]
>>> ])
>>>
>>> var options = {
>>> title: 'Company Performance',
>>> vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
>>> };
>>>
>>> var chart = new google.visualization.BarChart(
>>> document.getElementById('chart_div'));
>>> chart.draw(data, options);
>>> }
>>> </script>
>>>
>>> </head>
>>> <body>
>>> <form id="form1" runat="server">
>>> <div>
>>>
>>> <div id="chart_div" style="width: 900px; height: 500px;"></div>
>>>
>>> </div>
>>> </form>
>>> </body>
>>> </html>
>>>
>> --
>> You received this message because you are subscribed to a topic in the
>> Google Groups "Google Visualization API" group.
>> To unsubscribe from this topic, visit
>> https://groups.google.com/d/topic/google-visualization-api/2LNtd5Fe8L8/unsubscribe
>> .
>> To unsubscribe from this group and all its topics, send an email to
>> [email protected] <javascript:>.
>> To post to this group, send email to
>> [email protected]<javascript:>
>> .
>> Visit this group at
>> http://groups.google.com/group/google-visualization-api.
>> For more options, visit https://groups.google.com/d/optout.
>>
>
>
--
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 [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
