Click here to Skip to main content
15,867,308 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)



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