質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

1回答

2340閲覧

googlechartで折れ線グラフを書くには

nasamay

総合スコア8

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2015/11/23 17:58

###前提・実現したいこと
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>
</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>
<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);
} }); return false;

});
</script>

</body> </html> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/i18n/jquery-ui-i18n.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script type="text/javascript"> $('#send').click( function(){ $.ajax({ type: 'post', url: db.php, dataType: 'html', async: false, data: { "DateSt":document.myTime.dateSt.value,//開始日 "DateEd":document.myTime.dateEd.value//終了日 }, success: function(data){ var dt = data.split("-"); $(".return_sprict").html(dt[0]); $(".return_div").html(dt[1]); }, error: function(XMLHttpRequest, textStatus, errorThrown){ alert('Error : ' + errorThrown); $("#XMLHttpRequest").html("XMLHttpRequest : " + XMLHttpRequest.status); $("#textStatus").html("textStatus : " + textStatus);

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

こちらの回答 にある通り、HTMLにスクリプトを突っ込んだだけでは実行されないようです。
実行させるには、スクリプトを突っ込んだ後にHTMLがパースされるような方法でスクリプトを突っ込むか、こちら のように eval を使って明示的に実行させるしか方法が無いように思います。

投稿2015/11/24 00:24

pi-chan

総合スコア5936

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問