Drawing a chart after a click of a button in google visualizaton

I’m trying to figure out on how to draw the chart after a button is clicked. It seems like theres a problem in my code. Im using google visualization and javascript to do this event. Can someone take a look at it?

CODE:

  • Google Charts - Avoid showing negative values in yAxis
  • Google Charts API - Dashboard: Hide rows in table
  • Google Charts, Setting gridlines count of barchart
  • google visualization geomap
  • How can I know if Google Visualization is loaded
  • programmatically get the color of a series from a Google Chart
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
    
      <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
      <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript"
      src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart','table','piechart','linechart','controls','charteditor']}]}">
    </script>
    
    <script type="text/javascript">
    
    
    google.setOnLoadCallback(pieChart);
    
    
    function pieChart() {
    
    
           var pieJsonData = $.ajax({
               url: "overall_ban_pos_pie_date.php?startdate=2012-01-01&enddate=2012-01-06",
               dataType:"json",
               async: false
               }).responseText;
    
    
           var pieData = new google.visualization.DataTable(pieJsonData);    
    
           var options = {chartArea:{left:10,top:40,height:200,width:360},
        width:300, 
        height:260,
        title: "Positive Contacts Percentage", 
        titleTextStyle:{fontSize:12},
        tooltip:{showColorCode:true},
        legend:{textStyle:{fontSize: 10},position:'left'},
        pieSliceTextStyle:{fontSize: 10}}
    
        var pieChartWrapper = new google.visualization.ChartWrapper({
              'chartType': 'PieChart',
              'containerId': 'pie_div',
          'dataTable':pieData,
              'options': options
            });
    
    
    }
    
    
    google.visualization.events.addListener(pieChartWrapper, 'ready', selectHandler);
    function selectHandler(e) {
    
    pieChartWrapper.draw();
    
    }
    
    </script>
    
    </head>
    <body style="font-size:62.5%;">
      <form>
    
    Start Date: <input type="text" name="startdate" id="datepicker"/>
    End Date: <input type="text" name="enddate" id="datepicker2"/>
    
    <input type="button" value="click me!" onclick="pieChart();"/>
    
    
    </form>
    
     <div id="pie_div"></div>
    
    </body>
    </html>
    

    Something’s gone wrong on this code. Thanks for your help in advance.

  • How do I capture the color value of a Google Charts pie charts slice?
  • Google Chart individual bar colours
  • Google Chart is not displaying
  • Error showing GSheet range using Google Visualization API in Google Apps Script Web App
  • Passing an array to Google Charts API via AJAX
  • Hiding the legend in Google Chart
  • One Solution collect form web for “Drawing a chart after a click of a button in google visualizaton”

    i think there was some copy & paste issues – following code should work (i put some test data that you can ignore)

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < html xmlns = "http://www.w3.org/1999/xhtml" > < head >
    
    < link href = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
    rel = "stylesheet"
    type = "text/css" / > < script type = "text/javascript"
    src = "http://code.jquery.com/jquery-1.6.2.min.js" > < /script>
      <script src="http:/ / ajax.googleapis.com / ajax / libs / jqueryui / 1.8 / jquery - ui.min.js "></script>
      <meta http-equiv="
    content - type " content="
    text / html;
    charset = utf - 8 "/>
        <script type="
    text / javascript " src="
    https: //www.google.com/jsapi"></script>
    < script type = "text/javascript"
    src = "https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart','table','piechart','linechart','controls','charteditor']}]}" > < /script>
    
    <script type="text/javascript">
    
    var pieChartWrapper = null;
    
    function pieChart() {
    
           var pieJsonData = $.ajax({
               url: "
    http: //localhost:3000/test123",
    dataType: "json",
    async: false
    }).responseText;
    
    var pieData = new google.visualization.DataTable(pieJsonData);
    
    var pieData = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['Work', 11],
        ['Eat', 2],
        ['Commute', 2],
        ['Watch TV', 2],
        ['Sleep', 7]
    ]);
    
    var options = {
        chartArea: {
            left: 10,
            top: 40,
            height: 200,
            width: 360
        },
        width: 300,
        height: 260,
        title: "Positive Contacts Percentage",
        titleTextStyle: {
            fontSize: 12
        },
        tooltip: {
            showColorCode: true
        },
        legend: {
            textStyle: {
                fontSize: 10
            },
            position: 'left'
        },
        pieSliceTextStyle: {
            fontSize: 10
        }
    }
    
    var pieChartWrapper = new google.visualization.ChartWrapper({
        chartType: 'PieChart',
        containerId: 'pie_div',
        dataTable: pieData,
        options: options
    });
    
    google.visualization.events.addListener(pieChartWrapper, 'ready', selectHandler);
    pieChartWrapper.draw();
    
    }
    
    function selectHandler(e) {
    
    }
    
    < /script>
    
    </head > < body style = "font-size:62.5%;" > < form >
    
    Start Date: < input type = "text"
    name = "startdate"
    id = "datepicker" / > End Date: < input type = "text"
    name = "enddate"
    id = "datepicker2" / >
    
    < input type = "button"
    value = "click me!"
    onclick = "pieChart();" / >
    
    
    < /form>
    
     <div id="pie_div"></div >
    
    < /body>
    </html >