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

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

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

MySQLiはPHP5より導入されているデータベース用のドライバです。MySQL 4.1.3以降の新しい機能の利点をまとめています。

PHP

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

Google

Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

3059閲覧

グラフにマウスオーバーすることで文字列を表示したい

sdnco

総合スコア21

mysqli

MySQLiはPHP5より導入されているデータベース用のドライバです。MySQL 4.1.3以降の新しい機能の利点をまとめています。

PHP

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

Google

Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/11/24 04:39

編集2016/11/24 05:39

googlechartでグラフを表示は出来たんですが、表示したグラフにマウスオーバーすることで表示されるTooltipに、Mysqlテーブルにある文字列を表示させたいんですが、その方法が分かりません。
グラフのx軸とy軸の要素をTooltipに表示することは出来たのですが、そこにMysqlテーブル内の文字列を表示するためのTooltipの記述が分かりません。
MysqlのデータをTooltipに持ってくる方法もよく分かりません。

分かる方いましたらどうかご教示くださいm(_ _)m

実際のコードから色々省略はしていますが参考程度に載せておきます。

php

1<?php 2////////////////////////////////////////////////////////////// 3 4 //dbとテーブル作成と値挿入処理 5 $link = new mysqli('localhost', 'user', 'pass', ''); 6 7 if ($mysqli->connect_error){ 8 echo "接続失敗:" . $link->connect_error; 9 exit(); 10 } 11 // データベースtestdbがなければ作成 12 $result = $link->query("CREATE DATABASE IF NOT EXISTS testDB"); 13 14 $result=$link->query("CREATE TABLE IF NOT EXISTS testDB.testTable( 15 cnt int(5) PRIMARY KEY AUTO_INCREMENT, 16 moji nvarchar(32768), 17 time int(10),) 18 "); 19 20 $link = mysqli_connect('localhost', 'user', 'pass', 'testDB'); 21 22 if (!mysqli_set_charset($link, "utf8")) { 23 printf("Error loading character set utf8: %s\n", mysqli_error($link)); 24 exit(); 25 } else { 26 printf("Current character set: %s\n", mysqli_character_set_name($link)); 27 } 28 29for ($i=0; $i < count($no); $i++) { 30 31 $stmt = mysqli_prepare($link, "INSERT INTO testTable VALUES (?, ?, ?)"); 32 mysqli_stmt_bind_param($stmt, 'isi', $cnt_no[$i], $moji_no[$i], $time_no[$i]); 33 34 // プリペアドステートメントを実行します 35 mysqli_stmt_execute($stmt); 36 //printf("%d Row inserted.\n", mysqli_stmt_affected_rows($stmt)); 37 // ステートメントと接続を閉じます 38 mysqli_stmt_close($stmt); 39 } 40 41?> 42 43<!DOCTYPE html> 44<html lang="ja"> 45<head> 46 <meta charset="UTF-8"/> 47 <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css"> 48 <script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script> 49 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 50 51 <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> 52 <link href="http://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" type="text/css"> 53 <link rel="stylesheet" href="css/style.css"> 54 55 <title>test</title> 56 57 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 58 <script type="text/javascript"> 59 60 google.charts.load('current', {'packages':['line']}); 61 google.charts.setOnLoadCallback(drawChart); 62 63 function drawChart() { 64 65 var data = new google.visualization.DataTable( 66 jsonTable 67 , 0.6); 68 data.addColumn('string', '文字列'); 69 data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}}); 70 data.addColumn('number', '時間'); 71 72 var options = { 73 chart: { 74 title: 'graphtest', 75 subtitle: 'sub' 76 }, 77 78 79 tooltip: {isHtml: true} 80 81 82 width: 700, 83 height: 500, 84 legend: {position: 'none'} 85 }; 86 87 var chart = new google.charts.Line(document.getElementById('commentLinechart_material')); 88 89 chart.draw(data, options); 90 } 91 </script> 92</head> 93 94<body style="background-color: #fff"> 95 <div id="commentLinechart_material" align="center"></div> 96 97 <div class="mdl-layout mdl-js-layout"> 98 <main class="mdl-layout__content"> 99 <div class="card-wide mdl-card"> 100 101 <div class="mdl-card__title"> 102 <h2 class="mdl-card__title-text"> 103 </h2> 104 </div> 105 106 <div class="mdl-card__supporting-text"> 107 <div class="mdl-card__supporting-text"> 108 <div> 109?> 110 </div> 111 </div> 112 </div> 113 114 <div class="mdl-card__actions mdl-card--border"> 115 </div> 116 </div> 117 </main> 118 </div> 119</body> 120 121</html>

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

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

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

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

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

kunai

2016/11/24 04:52

何がわからないのかもう少し詳細に教えてください。JavaScriptにPHPのデータを渡す方法がわからない?GoogleGraphのTooltipの記述がわからない?などなど
sdnco

2016/11/24 05:40

ご指摘ありがとうございます。更新しました。
guest

回答2

0

ベストアンサー

ここに書いてあるようにすれば、Tooltipに表示されるものを自由に変更することができると思います。

Tooltips | Charts | Google Developers
https://developers.google.com/chart/interactive/docs/customizing_tooltip_content

後はMySQLから取得したデータをはめ込めば良いでしょう。

投稿2016/11/24 11:25

milktea

総合スコア116

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

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

0

マイエスキューエルのデータを一度取得して、エイジャックスでデータを渡して要素ホバー時に表示すれば良いです。

DBからPHPで引っ張ってきたデータをjQueryで扱う際はエイジャックスを利用するのが開発側の指針ですから。

投稿2016/11/24 15:41

KatsukiSugiura

総合スコア335

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問