###前提・実現したいこと
datepickerで指定した期間のデータをDBから抽出してgooglechartで折れ線グラフを書きたいです。またdatepickerで指定する期間は頻繁に変更する可能性があるので、画面遷移はさせたくありません。
###発生している問題・エラーメッセージ
指定した期間のデータ抽出~googlechartのscript生成まではできました。
ajaxの戻り値(chartのscriptとdivタグ)をHTMLに埋め込みましたが、画面は真っ白になりグラフが表示されません。
ajaxの戻り値は”-”でsplitし、dt[0]dt[1]には以下の内容となっており、HTMLにべた書きするとグラフは表示されるので、生成したgoglechartのscriptは間違っていないとおもいます。この方法(ソース)でグラフを表示させることはできるのでしょうか。それとも違う方法がいいのでしょうか。
dt[0]
<script src="https://www.google.com/jsapi"></script><script> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart1); function drawChart1() { var data = [["","\u5e73\u5747\u6c17\u6e29","\u5e73\u5747\u6e7f\u5ea6"],["2015\/10\/01",4.5,64],["2015\/10\/02",5.2,61],["2015\/10\/03",8.7,59],["2015\/10\/04",14.4,60],["2015\/10\/05",18.9,65],["2015\/10\/06",22.7,71],["2015\/10\/7",26.4,74],["2015\/10\/08",null,70],["2015\/10\/09",24.1,71],["2015\/10\/10",18.1,68],["2015\/10\/11",12.2,66],["2015\/10\/12",7,65]]; var chartData = new google.visualization.arrayToDataTable(data); var options = {"title":"\u540d\u53e4\u5c4b\u5e02\u306e\u5e73\u5747\u6c17\u6e29\u3068\u5e73\u5747\u6e7f\u5ea6\uff081981\uff5e2010\u5e74\uff09","titleTextStyle":{"fontSize":16},"series":{"1":{"targetAxisIndex":1}},"vAxes":[{"title":"\u5e73\u5747\u6c17\u6e29\uff08\u2103\uff09","minValue":40},{"title":"\u5e73\u5747\u6e7f\u5ea6\uff08\uff05\uff09","minValue":40,"maxValue":80}],"width":550,"height":340,"chartArea":{"width":460,"height":240},"legend":{"position":"in","alignment":"start"}}; var chartDiv = document.getElementById('chart1'); var chart = new google.visualization.LineChart(chartDiv); chart.draw(chartData, options); } </script>dt[1]
<div id="chart1"></div>###ソースコード
<?php **省略** ?> <html> <head> <title>グラフ出力</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta content="text/html; charset=utf-8" http-equiv=Content-Type> </head> <body onLoad="dateSetting()"> <div class="container"> <form class="form-inline" action="" method="post" name="myTime" > <div id=ReportHeader> <h1>グラフ出力</h1> </div> <br> <div class="form-group"> <div class="input-group"> <input type="text" id="begin" name="dateSt" class="form-control datepicker" data-end="#end" size="12"> <span class="input-group-btn"> <button class="btn btn-default" type="button" data-toggle="datepicker" data-target="#begin"> <span class="glyphicon glyphicon-calendar"></span></button> </span> </div><script src="https://www.google.com/jsapi"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> $("#errorThrown").html("errorThrown : " + errorThrown);</div> ~ <div class="form-group"> <div class="input-group"> <input type="text" id="end" name="dateEd" class="form-control datepicker" data-begin="#begin" size="12"> <span class="input-group-btn"> <button class="btn btn-default" type="button" data-toggle="datepicker" data-target="#end"> <span class="glyphicon glyphicon-calendar"></span></button> </span> </div> </div> <div class="form-group"> <div class="input-group"> <input id="send" type="button" value="データ選択"> </div> </div> <br> <div class="return_sprict"> <!--ここにajaxの戻り値d[0]が入る--> </div> <div class="return_div"> <!--ここにajaxの戻り値d[1]が入る--> </div> </form> </div>
} }); return false;
});
</script>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。