Click here to Skip to main content
15,867,568 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
ASP.NET
<head  runat="server">

<title></title>>  
 <script type="text/javascript" src="https://www.google.com/jsapi"></script>

    
  
</head>;
<body>
   <form id="form1"  runat="server">
    <div>
    
   

        <asp:Literal ID="lt" runat="server">  
<div id="dashboard_div">
      <!--Divs that will hold each control and chart-->
    <div id="filter_div"></div>
      <div id="chart_div"></div>            

    
    </div>;
     </div>
    </form>
</body>



my C# Code:-

C#
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;
using System.Text;

public partial class dashboard : System.Web.UI.Page
{
    StringBuilder str = new StringBuilder();

    //Get connection string from web.config

    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;

    protected void Page_Load(object sender, EventArgs e)
    {
        if (Page.IsPostBack == false)
        {

            BindChart();

        }


    }
    private DataTable GetData()
    {

        DataTable dt = new DataTable();

        string cmd = "select YEAR,sales from area_chart";

        SqlDataAdapter adp = new SqlDataAdapter(cmd, constr);

        adp.Fill(dt);

        return dt;

    }
    private void BindChart()
    {

        DataTable dt = new DataTable();

        try
        {

            dt = GetData();

            str.Append(@" <script type='text/javascript'>

                         google.load('visualization', '1.0', {'packages':['controls']});



                         google.setOnLoadCallback(drawRegionsMap);

                          function drawRegionsMap() {

                            var data = google.visualization.arrayToDataTable([

                              ['YEAR','sales'],");



            int count = dt.Rows.Count - 1;

            for (int i = 0; i <= count; i++)
            {

                str.Append("['" + dt.Rows[i]["YEAR"].ToString() + "',  " + dt.Rows[i]["sales"].ToString() + "],");

                if (i == count)
                {

                    str.Append("['" + dt.Rows[i]["YEAR"].ToString() + "',  " + dt.Rows[i]["sales"].ToString() + "]]);}");

                }
              

            }
            // Create a dashboard.

            str.Append("var dashboard1 = new google.visualization.Dashboard(document.getElementById('dashboard_div'));");

            // Create a range slider, passing some options

            str.Append("var yearslider = new google.visualization.ControlWrapper({ 'controlType': 'NumberRangeFilter',    'containerId': 'filter_div', 'options': { 'filterColumnLabel': 'YEAR' }});");

            // Create a pie chart, passing some options
            str.Append("var pieChart = new google.visualization.ChartWrapper({'chartType': 'PieChart','containerId': 'chart_div', 'options': { 'width': 300,'height': 300,'pieSliceText': 'value', 'legend': 'right' } });");


            // Establish dependencies, declaring that 'filter' drives 'pieChart',
            // so that the pie chart will only display entries that are let through
            // given the chosen slider range.
            str.Append("dashboard1.bind(yearslider , pieChart);");

            // Draw the dashboard.
            str.Append("dashboard1.draw(data);");



            //str.Append("var options = { title:'year And Expance',hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},};var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));");

            //str.Append("chart.draw(data, options);};");


            str.Append("</script>");

            lt.Text = str.ToString();

        }

        catch
        {

        }

    }

}



when e execute this error coming like this how can i solve
1)Microsoft JScript runtime error: 'google.visualization.Dashboard' is null or not an object
2)Microsoft JScript runtime error: 'google.visualization.ControlWrapper' is null or not an object
3)Microsoft JScript runtime error: 'dashboard1' is null or not an object
how can i sove these errors help me
Posted
Updated 7-Oct-15 1:54am
v4
Comments
I suggest you to directly call this method via ajax call and bind the chart instead of doing it from code and assigning the code to a literal.
Rams@music 6-Oct-15 4:40am    
how to do that?
i dont understand. help me
ZurdoDev 6-Oct-15 10:44am    
Add a .JS file and do it from there. The error says that the javascript that has the visualization is not loaded.
Rams@music 7-Oct-15 0:06am    
where i get .js file for visuvlization.
help me.
Thank you.
ZurdoDev 7-Oct-15 7:05am    
First off, google.visualization.Dashboard is null. You need to debug why. I don't know because you haven't specified which line is causing the error. Just debug the error and you'll see.

1 solution

Hi,

This is a well defined example of Google data visualization,

https://developers.google.com/chart/interactive/docs/gallery/controls?hl=en[^]

Now in your case :

I have fiddled it : https://jsfiddle.net/mghu803f/[^]

Just view it and reply what you want is this it.
 
Share this answer
 
Comments
Rams@music 8-Oct-15 1:01am    
hi thank you. it is working when i give in aspx directly. but trying with c# its getting error.
i want it from back end
Suvabrata Roy 8-Oct-15 1:05am    
Ok, Your code has few problems,

1. First compare your ASPX( HTML ) with mine you will find that
2. var yearslider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'sales' // You put year but if you want to use year here then use Year as second argument
}
});
Rams@music 8-Oct-15 1:21am    
thank you i put sales.
but showing error as same dashboard is null.
iam trying this from backend(C#).
when iam trying with Aspx there is no problem. i got o/p with google code
Suvabrata Roy 8-Oct-15 1:24am    
You did not understand, run your project
Goto > Internet Exp > Right Click> View Source

And Compare your script block with mine
Rams@music 8-Oct-15 1:27am    
this is my source as you said.


<!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><title>

</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>




</head>
<body>
<form name="form1" method="post" action="dashboard.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUIOTEyNDUzNDYPZBYCAgMPZBYCAgEPFgIeBFRleHQF8QcgPHNjcmlwdCB0eXBlPSd0ZXh0L2phdmFzY3JpcHQnPg0KDQogICAgICAgICAgICAgICAgICAgICAgICAgZ29vZ2xlLmxvYWQoJ3Zpc3VhbGl6YXRpb24nLCAnMS4wJywgeydwYWNrYWdlcyc6Wydjb250cm9scyddfSk7DQoNCiAgICAgICAgICAgICAgICAgIA0KDQoNCiAgICAgICAgICAgICAgICAgICAgICAgICBnb29nbGUuc2V0T25Mb2FkQ2FsbGJhY2soZGFzaGJvYXJkZCk7DQoNCiAgICAgICAgICAgICAgICAgICAgICAgICAgZnVuY3Rpb24gZGFzaGJvYXJkZCgpIHsNCg0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIHZhciBkYXRhID0gZ29vZ2xlLnZpc3VhbGl6YXRpb24uYXJyYXlUb0RhdGFUYWJsZShbDQoNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIFsnWUVBUicsJ3NhbGVzJ10sWycyMDEwJywgIDEwMDAwMF0sWycyMDEyJywgIDUwMDAwMF0sWycyMDE0JywgIDUwMDAwMDBdLFsnMjAxNicsICAxNTAwMDBdXSk7fXZhciBkYXNoYm9hcmQgPSBuZXcgZ29vZ2xlLnZpc3VhbGl6YXRpb24uRGFzaGJvYXJkKCBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZGFzaGJvYXJkX2RpdicpKTsgdmFyIGRvbnV0UmFuZ2VTbGlkZXIgPSBuZXcgZ29vZ2xlLnZpc3VhbGl6YXRpb24uQ29udHJvbFdyYXBwZXIoeydjb250cm9sVHlwZSc6ICdOdW1iZXJSYW5nZUZpbHRlcicsICdjb250YWluZXJJZCc6ICdmaWx0ZXJfZGl2Jywnb3B0aW9ucyc6IHsgJ2ZpbHRlckNvbHVtbkxhYmVsJzogJ3NhbGVzJyB9fSk7dmFyIHBpZUNoYXJ0ID0gbmV3IGdvb2dsZS52aXN1YWxpemF0aW9uLkNoYXJ0V3JhcHBlcih7J2NoYXJ0VHlwZSc6ICdQaWVDaGFydCcsJ2NvbnRhaW5lcklkJzogJ2NoYXJ0X2RpdicsJ29wdGlvbnMnOiB7J3dpZHRoJzogMzAwLCAnaGVpZ2h0JzogMzAwLCdwaWVTbGljZVRleHQnOiAndmFsdWUnLCdsZWdlbmQnOiAncmlnaHQnfX0pOyBkYXNoYm9hcmQuYmluZChkb251dFJhbmdlU2xpZGVyLCBwaWVDaGFydCk7ZGFzaGJvYXJkLmRyYXcoZGF0YSk7PC9zY3JpcHQ+ZGR8xnemBsi93hinamaHe0yPCW974Q==" />
</div>

<div>



<script type='text/javascript'>

google.load('visualization', '1.0', {'packages':['controls']});




google.setOnLoadCallback(dashboardd);

function dashboardd() {

var data = google.visualization.arrayToDataTable([

['YEAR','sales'],['2010', 100000],['2012', 500000],['2014', 5000000],['2016', 150000]]);}var dashboard = new google.visualization.Dashboard( document.getElementById('dashboard_div')); var donutRangeSlider = new google.visualization.ControlWrapper({'controlType': 'NumberRangeFilter', 'containerId': 'filter_div','options': { 'filterColumnLabel': 'sales' }});var pieChart = new google.visualization.ChartWrapper({'chartType': 'PieChart','containerId': 'chart_div','options': {'width': 300, 'height': 300,'pieSliceText': 'value','legend': 'right'}}); dashboard.bind(donutRangeSlider, pieChart);dashboard.draw(data);</script>
<div>

<div id="dashboard_div">


<div id="filter_div"></div>
<div id="chart_div"></div>
</div>

</div>
</div>
</form>
</body>
</html>

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

  Print Answers RSS
Top Experts
Last 24hrsThis month


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