猿问

PHP MySQL谷歌图表JSON - 完整示例

PHP MySQL谷歌图表JSON - 完整示例

我已经搜索了很多,以找到一个使用MySQL表数据作为数据源生成Google Chart的好例子。我搜索了几天,并意识到使用PHP和MySQL的组合生成Google Chart(饼图,条形图,列,表)的示例很少。我终于设法让一个例子起作用了。


我之前收到过StackOverflow的很多帮助,所以这次我会回复一些。


我有两个例子; 一个使用Ajax而另一个不使用。今天,我只展示非Ajax示例。


用法:


    要求:PHP,Apache和MySQL


    安装:


      ---使用phpMyAdmin创建数据库并将其命名为“chart”

      ---使用phpMyAdmin创建一个表,并将其命名为“googlechart”并制作 

          确保表只有两列,因为我使用了两列。然而,

          如果你愿意,你可以使用超过2列,但你必须改变 

          为此编写一点代码

      ---指定列名如下:“weekly_task”和“percentage”

      ---将一些数据插入表中

      ---对于百分比列,只使用一个数字


          ---------------------------------

          示例数据:表(googlechart)

          ---------------------------------


          weekly_task百分比

          ----------- ----------

          睡30

          看电影10

          工作40

          练习20    

PHP-MySQL-JSON-Google图表示例:

    <?php
$con=mysql_connect("localhost","Username","Password") or die("Failed to connect with database!!!!");mysql_select_db("Database Name", $con); // The Chart table contains two fields: weekly_task and percentage// This example will display a pie chart. If you need other charts such as a Bar chart, you will need to modify the code a little to make it work with bar chart and other charts$sth = mysql_query("SELECT * FROM chart");/*
---------------------------
example data: Table (Chart)
--------------------------
weekly_task     percentage
Sleep           30
Watching Movie  40
work            44
*///flag is not needed$flag = true;$table = array();$table['cols'] = array(

    // Labels for your chart, these represent the column titles
    // Note that one column is in "string" format and another one is in "number" format as pie chart only required "numbers" for calculating percentage and string will be used for column title
    array('label' => 'Weekly Task', 'type' => 'string'),
    array('label' => 'Percentage', 'type' => 'number'));$rows = array();while($r = mysql_fetch_assoc($sth)) {
    $temp = array();
    // the following line will be used to slice the Pie chart
    $temp[] = array('v' => (string) $r['Weekly_task']);


猛跑小猪
浏览 472回答 3
3回答

慕娘9325324

有些人可能在本地或服务器上遇到此错误:syntax&nbsp;error&nbsp;var&nbsp;data&nbsp;=&nbsp;new&nbsp;google.visualization.DataTable(<?=$jsonTable?>);这意味着他们的环境不支持短标签解决方案是使用它:<?php&nbsp;echo&nbsp;$jsonTable;&nbsp;?>一切都应该工作正常!

临摹微笑

你可以更轻松地做到这一点。100%的工作你想要的<?php &nbsp;&nbsp;&nbsp;&nbsp;$servername&nbsp;=&nbsp;"localhost"; &nbsp;&nbsp;&nbsp;&nbsp;$username&nbsp;=&nbsp;"root"; &nbsp;&nbsp;&nbsp;&nbsp;$password&nbsp;=&nbsp;"";&nbsp;&nbsp;//your&nbsp;database&nbsp;password &nbsp;&nbsp;&nbsp;&nbsp;$dbname&nbsp;=&nbsp;"demo";&nbsp;&nbsp;//your&nbsp;database&nbsp;name &nbsp;&nbsp;&nbsp;&nbsp;$con&nbsp;=&nbsp;new&nbsp;mysqli($servername,&nbsp;$username,&nbsp;$password,&nbsp;$dbname); &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;($con->connect_error)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;die("Connection&nbsp;failed:&nbsp;"&nbsp;.&nbsp;$con->connect_error); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;else &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//echo&nbsp;("Connect&nbsp;Successfully"); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;$query&nbsp;=&nbsp;"SELECT&nbsp;Date_time,&nbsp;Tempout&nbsp;FROM&nbsp;alarm_value";&nbsp;//&nbsp;select&nbsp;column &nbsp;&nbsp;&nbsp;&nbsp;$aresult&nbsp;=&nbsp;$con->query($query);?><!DOCTYPE&nbsp;html><html><head> &nbsp;&nbsp;&nbsp;&nbsp;<title>Massive&nbsp;Electronics</title> &nbsp;&nbsp;&nbsp;&nbsp;<script&nbsp;type="text/javascript"&nbsp;src="loder.js"></script> &nbsp;&nbsp;&nbsp;&nbsp;<script&nbsp;type="text/javascript"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;google.charts.load('current',&nbsp;{'packages':['corechart']}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;google.charts.setOnLoadCallback(drawChart); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;drawChart(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;data&nbsp;=&nbsp;new&nbsp;google.visualization.DataTable(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;data&nbsp;=&nbsp;google.visualization.arrayToDataTable([ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;['Date_time','Tempout'], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<?php&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;while($row&nbsp;=&nbsp;mysqli_fetch_assoc($aresult)){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;"['".$row["Date_time"]."',&nbsp;".$row["Tempout"]."],"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;?> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;options&nbsp;=&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title:&nbsp;'Date_time&nbsp;Vs&nbsp;Room&nbsp;Out&nbsp;Temp', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;curveType:&nbsp;'function', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;legend:&nbsp;{&nbsp;position:&nbsp;'bottom'&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;chart&nbsp;=&nbsp;new&nbsp;google.visualization.AreaChart(document.getElementById('areachart')); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;chart.draw(data,&nbsp;options); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;</script></head><body> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id="areachart"&nbsp;style="width:&nbsp;900px;&nbsp;height:&nbsp;400px"></div></body></html>loder.js链接到这里loder.js
随时随地看视频慕课网APP
我要回答