所以这是我第一次使用bootstrap尝试使用" chart_filled_blue"在bootstrap但我有问题,包括我的PHP结果在jquery内的bootstrap我会感谢你的任何帮助或建议。
我的基本pdo选择抓取视图/日期
$sth = $db->prepare("SELECT date, views FROM views_by_date");
$sth->execute();
$result = $sth->fetchAll();
print_r($result);
我将限制选择,因此它只会抓取最后6行或7行
所以现在我的chart_filled_blue.js就是这个
"use strict";
$(document).ready(function(){
// Sample Data
var d1 = [[1262304000000, 0], [1264982400000, 500], [1267401600000, 700], [1270080000000, 1300], [1272672000000, 2600], [1275350400000, 1300], [1277942400000, 1700], [1280620800000, 1300], [1283299200000, 1500], [1285891200000, 2000], [1288569600000, 1500], [1291161600000, 1200]];
var data1 = [
{ label: "Total clicks", data: d1, color: App.getLayoutColorCode('blue') }
];
$.plot("#chart_filled_blue", data1, $.extend(true, {}, Plugins.getFlotDefaults(), {
xaxis: {
min: (new Date(2009, 12, 1)).getTime(),
max: (new Date(2010, 11, 2)).getTime(),
mode: "time",
tickSize: [1, "month"],
monthNames: ["Jan", "FebBBBB", "Mar", "Apr", "May", "June", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
tickLength: 0
},
series: {
lines: {
fill: true,
lineWidth: 1.5
},
points: {
show: true,
radius: 2.5,
lineWidth: 1.1
},
grow: { active: true, growings:[ { stepMode: "maximum" } ] }
},
grid: {
hoverable: true,
clickable: true
},
tooltip: true,
tooltipOpts: {
content: '%s: %y'
}
}));
});
我想将所有var d1替换为db中的视图,然后将monthNames替换为db中的日期
这样做最好的方法是什么?
答案 0 :(得分:2)
您可以将{1}替换为<?php echo $result['view'];?>
答案 1 :(得分:1)
您可以在构建时插入变量,例如您将JS脚本转换为.php文件并具有:
...
var d1 = <?php echo json_encode($results_from_db); ?>;
...
或者您使用AJAX调用从服务器获取结果。
var d1;
$.get('fetchdata.php", {}, function(data) { d1 = data; });
如果您提取的d1
数据在页面生命周期内永远不会更改,请在页面构建时插入。它可以节省您必须将另一个http请求发送回服务器以获取数据。
如果数据确实定期更改,那么您可以组合这些方法。使用仅限PHP的方法插入&#34;初稿&#34;的数据,然后使用ajax获取更新。
答案 2 :(得分:1)
在php页面的开头填充数据库结果
$sth = $db->prepare("SELECT date, views FROM views_by_date");
$sth->execute();
$result = $sth->fetchAll();
$result = json_encode($result);
在javascript中
var d1 = JSON.parse(<?php echo $result; ?>);