Google图表未显示

Question

Please can some identify why are these charts not showing. This code was working with another project. I used the same code in a new project i have only added the master page however now the charts are not showing.

I can only see a blank background.

HTML

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
         google.load("visualization", "1", { packages: ["corechart"] });
         google.load('visualization', '1', {packages: ['table']});
         google.load('visualization', '1.0', {'packages':['controls']});
         google.setOnLoadCallback(drawChart);
         function drawChart() {

            var dataValues = JSON.parse(document.getElementById("ChartData").value);
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Locality');
            data.addColumn('number', 'Frequency');

            for (var i = 0; i < dataValues.length; i++) {
                data.addRow([dataValues[i].location,dataValues[i].frequency]);
            }

             // Create a dashboard.
            var dashboard = new google.visualization.Dashboard(
            document.getElementById('dashboard_div'));

            // Create a range slider, passing some options
            var donutRangeSlider = new google.visualization.ControlWrapper({
            'controlType': 'NumberRangeFilter',
            'containerId': 'filter_div',
            'options': {
            'filterColumnLabel': 'Frequency'
            }
            });

            var pieoptions = { 'title': 'Pie Chart Test',
            'width': 900,
            'height': 500,
            backgroundColor: 'transparent',
            is3D: true
            };

            var columnoptions = {
            title: 'Column Chart Test',
            hAxis: {title: 'Locality', titleTextStyle: {color: 'black'}} 
             };

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

            var chart =  new google.visualization.PieChart(document.getElementById('piechart'));
            chart.draw(data, pieoptions);

            var chart =  new google.visualization.ColumnChart(document.getElementById('columnchart'));
            chart.draw(data, columnoptions);

            var table = new google.visualization.Table(document.getElementById('table_div'));
            table.draw(data, {showRowNumber: true});

            dashboard.bind(donutRangeSlider, pieChart);

            // Draw the dashboard.
            dashboard.draw(data);
        }
    </script> 
 </asp:Content>

  <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

        <asp:Button id="b1" Text="Draw Charts" onclick="Button1_Click" runat="server" />
        <asp:HiddenField runat="server" ID="ChartData" />
        <div id="piechart" style="width: 900px; height: 500px;"></div>
        <div id="columnchart" style="width: 900px; height: 500px;"></div>
        <div id="table_div" style="width: 400px; height: 400px"></div>
        <!--Div that will hold the dashboard-->
        <div id="dashboard_div">
        <!--Divs that will hold each control and chart-->
        <div id="filter_div"></div>
        <div id="chart_div"></div>
        </div>
    </asp:Content>


<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">

</asp:Content> 

Code Behind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Script.Serialization;

public partial class _Default : System.Web.UI.Page
{

    protected void Page_Load(object sender, EventArgs e)
    {

    }

    //This is a method for testing, it is called from the button and then calls a method from the Utility class.
    public List<Items> getChartData()
    {
        List<Items> dataList = new List<Items>();
        dataList.Add(new Items("A", 110));
        dataList.Add(new Items("B", 120));
        dataList.Add(new Items("C", 30));
        dataList.Add(new Items("D", 150));
        dataList.Add(new Items("E", 210));
        dataList.Add(new Items("F", 310));
        JavaScriptSerializer jss = new JavaScriptSerializer();

        this.ChartData.Value = jss.Serialize(dataList);

        return dataList;
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        getChartData();
    }
}

public class Items
{
    public string location = "";
    public int frequency = 0;

    public Items(string location, int frequency)
    {
        this.location = location;
        this.frequency = frequency;
    }
}

Help with examples is really appreciated.

Answer 1

Try to view source on the client-side. Asp.net prepends ids with the names of their Asp.net container, so when you run on client side, you JSON.Parse (and possible other fields) don't necessarily have the id you think they do.

Check out this blog post for a detailed description. You probably need to change something like this:

<asp:HiddenField runat="server" ID="ChartData" ClientIDMode="Predictable" />

I don't know for sure if this is you issue, but doing a simple "View Source" in your web browser and checking the ID's of the html elements should tell you if this is the problem.

Answer 2

My previous answer was my first instinct based on past trouble with ASP.Net. Upon looking further into your code, I think you may be misusing the dashboard.

• Make sure any charts that are not bound to a control are outside of the dashboard's div, but that the divs for the chart control and chart are inside it.
• If you have a chart bound to a control using the dashboard, you should not be calling chart.draw() for that chart. The dashboard will handle drawing of that chart for you.
• You may need to declare your dashboard-bound chart as a google.visualization.ChartWrapper instead of a google.visualization.PieChart , but I'm not certain of this one.

I would recommend scrapping the dashboard for the moment, and testing the whole thing without it. Dashboards a little more complicated than your regular charts.

Also, as a side note, you can load all your google libraries with one call by adding the additional packages to the same request.

See https://developers.google.com/chart/interactive/docs/gallery/controls#using_controls_and_dashboards for more information on how to setup a chart and control with a dashboard.