Google Chart Datatable Bind with data from code behind

Question

0.00/5 (No votes)

See more:

Hello there...
I have created a class as follows

SQL

public class DataBAL
{
    public DataBAL()
    {
        //
        // TODO: Add constructor logic here
        //
    }

    public string Date { get; set; }
    public decimal DataValue { get; set; }

    public List<DataBAL> GetData()
    {
        DataDAL ObjDAL = new DataDAL();
        return ObjDAL.GetData();
    }
}

then on page load

XML

using System.Web.Script.Serialization;

public partial class _Default : System.Web.UI.Page
{
    public List<DataBAL> ObjList;
    public System.Web.Script.Serialization.JavaScriptSerializer jSerializer=new JavaScriptSerializer ();
    protected void Page_Load(object sender, EventArgs e)
    {
        ObjList = new List<DataBAL>();
        DataBAL ObjDataBAL = new DataBAL();
        ObjList = ObjDataBAL.GetData();
    }
}

after that on .aspx page

XML

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        #divchart {
            background-image: url(Image/a.png);
            height: 600px;
            width: 600px;
        }
    </style>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="Script/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        var data = '<%=jSerializer.Serialize(ObjList)%>';
        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);

        function drawChart() {
            var tabledata = new google.visualization.DataTable();
            tabledata.addRows(data.length);
            tabledata.addColumn('datetime', 'Time tamp');
            tabledata.addColumn('number', 'Data Value');

            $.each(data, function (i, v) {
                tabledata.setValue(i, 0, v.Date);
                tabledata.setValue(i, 1, v.DataValue);
            });

            var options = {
                title: 'Chemtrol DG Performance',
                vAxis: { title: 'Year', titleTextStyle: { color: 'red' } }
            };

            var chart = new google.visualization.BarChart(document.getElementById('divchart'));
            chart.draw(tabledata, options);

        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="divchart">
        </div>
    </form>
</body>
</html>

Javascript data variable show proper data. but when i try to bind it with datatable variable, it throws an error

invalid 'in' operand e

please help me out.

Posted 14-Mar-14 1:11am

TAUSEEF KALDANE

Add a Solution

Comments

Torakami 5-May-15 2:30am

i found u accidently here , i am too working on google chart .. u know me very well .. It me nilesh from absolute .And i think its very late to reply here now

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Torakami · Answer 1 · 2015-05-04T20:29:00

instead of serializing list item , create one web method and send a ajax call through your script function

XML

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="DashboardObjectiveChart.ascx.cs" Inherits="ActusAppraisalSystem.User.DashboardControls.DashboardObjectiveChart" %>

<style type="text/css">
    body {
        font-family: Arial;
        font-size: 10pt;
    }

    #legend {
        float: right;
        margin-top: 100px;
        margin-right: 50px;
    }
</style>


<script type="text/javascript">

    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var options = {
            pieHole: 0.5,
            colors: ['#F3660E', '#14C902', '#AF7BCD'],
            legend: 'none'
        };

        $.ajax({
            type: "POST",
            url: "Home.aspx/GetChartData",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                var data = google.visualization.arrayToDataTable(r.d);
                var chart = new google.visualization.PieChart($("#chart")[0]);
                chart.draw(data, options);

                //this is for custom legend elements
                var total = 0;
                for (var i = 0; i < data.getNumberOfRows() ; i++) {
                    total += data.getValue(i, 1);
                }

                var legend = document.getElementById("legend");
                var legItem = [];
                var colors = ['#F3660E', '#14C902', '#AF7BCD'];
                for (var i = 0; i < data.getNumberOfRows() ; i++) {
                    var label = data.getValue(i, 0);
                    var value = data.getValue(i, 1);
                    var percent = Number(100 * value / total).toFixed(1);

                    // This will create legend list for the display
                    legItem[i] = document.createElement('li');
                    legItem[i].id = 'legend_' + data.getValue(i, 0);
                    legItem[i].innerHTML = '<div class="legendMarker"> <span class="legendClass" id="' + label + '" style="color:' + colors[i] + ';">' + label + ': ' + '(' + value + ')</span></div>';

                    legend.appendChild(legItem[i]);
                }

            },
            failure: function (r) {
                alert(r.d);
            },
            error: function (r) {
                alert(r.d);
            }
        });


    }
</script>

<script type="text/javascript">
    $(document).ready(function () {
        $('.legendClass').live('click', function () {
            //Here this refers to span, element which invoked the event
            alert("I am " + this.id + " Here");
        });
    });
</script>

<div class="Dashboard_FrameWrapper" style="height: 500px; overflow: auto;">
    <div class="Dashboard_BlockWrapper_FrameHeader">
        <div class="dashboard_grid_Header">
            Employee Objectives
        </div>
    </div>

    <div class="dashboard_grid">
        <div id="chart" style="height: 500px; float: left">
        </div>
        <div id="legend" style="float: right"></div>
    </div>


</div>

public static List<object> GetChartData()
{
string query = "usp_GetObjectivesDetailsForGoogleChart";
string constr = ApConfig.ConString;
List<object> chartData = new List<object>();
chartData.Add(new object[]
{
"Objective_Status", "Percentage"
});
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand(query))
{
cmd.CommandType = CommandType.StoredProcedure;
cmd.Connection = con;
con.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
chartData.Add(new object[]
{
sdr["Objective_Status"].ToString(), sdr["Percentage"]
});
}
}
con.Close();
return chartData;
}
}
}