Click here to Skip to main content
14,829,981 members
Please Sign up or sign in to vote.
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
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

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

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




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900