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 there's a problem in my code. I'm using Google visualization and Javascript to do this ev

Solution 1:

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 >