[英]how to display database data using javascript
<script type="text/javascript"> var data = { labels: ['January', 'February', 'March', 'April'], datasets: [ { fillColor: "rgba(220,220,220,0.2)", strokeColor: "rgba(220,220,220,1)", pointColor: "rgba(220,220,220,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(220,220,220,1)", data: [30, 50, 75, 59] }, ] }; var context = document.querySelector('#graph').getContext('2d'); new Chart(context).Line(data); </script>
<canvas id="graph" width="400" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
public function tracker() { $statistics = DiraStatistics::all(); return view('AltHr.Chatbot.tracker', compact('statistics')); }
Hi guys so im new to javascript i would like to know how can i view the data replacing "labels(jan,feb,march)" and "data(30,50,75)".大家好,我是 javascript 新手,我想知道如何查看替换“标签(一月、二月、三月)”和“数据(30,50,75)”的数据。
im doing this in laravel but so in my controller ive called the database values as:我在 laravel 中这样做,但在我的控制器中我将数据库值称为:
i need the labels from column : date_access and data from column : question_asked我需要列中的标签:date_access 和列中的数据:question_asked
I would appreciate your help thanks我会很感激你的帮助谢谢
2 | 2 | 2017-09-26 |
2017-09-26 | 5
5
.. ..
Using the fetch api your code can look something like this:使用fetch api,您的代码可能如下所示:
fetch("someurl")//assuming get request, you need post then you need to pass a config object
.then(response => response.json())
.then(
json => ({
labels: json.months,//this depends on your json data
datasets: [
{
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: json.data//this depends on your json data
}
]
})
)
.then(
data => {
var context = document.querySelector('#graph').getContext('2d');
new Chart(context).Line(data);
}
)
If you want to support older browsers you need a polyfill如果你想支持旧浏览器,你需要一个polyfill
Examples of fetch api can be found here .可以在此处找到 fetch api 的示例。
Your data can come from laravel restfull resource controllers你的数据可以来自laravel restfull 资源控制器
Can you Try this one buddy.你能试试这个哥们吗?
Controller控制器
public function tracker()
{
$statistics = DiraStatistics::all();
labels = [];
data =[];
foreach ($statistics as $key => $statistic) {
labels= $statistic->date_access;
data = $statistic->question_asked;
}
return view('AltHr.Chatbot.tracker', compact('labels','data'));
}
js in blade. js 在刀片中。
<script type="text/javascript">
var data = {
labels: ['{{ $labels[0] }}', '{{ $labels[1] }}', '{{ $labels[2] }}', '{{ $labels[3] }}'],
datasets: [
{
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: ['{{ $data[0] }}', '{{ $data[0] }}', '{{ $data[0] }}', '{{ $data[0] }}']
},
]
};
var context = document.querySelector('#graph').getContext('2d');
new Chart(context).Line(data);
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.