i want to connect Google chart tosql server database connection . please help me out.

diptiman sharma

unread,

May 1, 2014, 7:38:23 AM5/1/14

to google-visua...@googlegroups.com

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">

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>

<div>

</div>

</form>

</body>

</html>

Andrew Gallant

unread,

May 1, 2014, 11:18:08 AM5/1/14

to google-visua...@googlegroups.com

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.

diptiman sharma

unread,

May 2, 2014, 1:04:57 AM5/2/14

to google-visua...@googlegroups.com

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.

--
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 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/d/optout.

Andrew Gallant

unread,

May 2, 2014, 8:38:49 AM5/2/14

to google-visua...@googlegroups.com

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 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 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});

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

Reply all

Reply to author

Forward