#php #mysql #ajax #highcharts
#javascript #jquery #ajax #json #диаграммы
Вопрос:
Я пытаюсь понять, возможно ли сделать так, чтобы данные json динамически извлекались из базы данных с помощью php и mysql и могли быть построены с помощью диаграмм, которые слишком динамично обновляются автоматически? Любая помощь будет оценена.
следуя коду, который я пробовал, и который не работает должным образом, и хочу внедрить на веб-сайт на 10 строк.
<HTML>
<HEAD>
<TITLE>highchart example</TITLE>
<script type="text/javascript"src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
var chart;
function requestData() {
$.ajax({
url: 'live-server-data.php',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 20; // shift if the series is
// longer than 2
// add the point
chart.series[0].addPoint(point, true, shift);
// call it again after one second
setTimeout(requestData1, 1000);
},
cache: false,
});
}
function requestData1() {
$.ajax({
url: 'live-server-data.php',
success: function(point) {
var series2 = chart.series[1],
shift = series2.data.length > 20; // shift if the series is
// longer than 20
// add the point
chart.series[1].addPoint(point, true, shift);
// call it again after one second
setTimeout(requestData, 1000);
},
cache: false,
});
}
$(function () {
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
events: {
load: requestData
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis:
{
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: '',
margin: 80
}
},
series: [
{
name: 'Random data',
data: []
},
{
name: ' hahaha',
data: []
}
],
});
});
});
</script>
</HEAD>
<BODY>
<div id="container"
style="min-width: 728px; height: 400px; margin: 0 auto"></div>
</BODY>
</HTML>
*** the live-server-data.php is as followed:
<?php
// Set the JSON header
header("Content-type: text/json");
// The x value is the current JavaScript time, which is the Unix time multiplied
// by 1000.
$x = time() * 1000;
// The y value is a random number
$y = rand(48,52);
// Create a PHP array and echo it as JSON
$ret = array($x, $y);
echo json_encode($ret);
?>
Комментарии:
1. В начале я советую вам ознакомиться с highcharts.com/docs/working-with-data/preprocessing
2. я знаю об этом, я прочитал эту статью. я стажируюсь в ИИТ, Бомбей, Индия, студент, изучающий электротехнику. я в принципе не эксперт в кодировании на javascript ajax и все такое. я пытаюсь реализовать диаграммы на сайте www.ee.iitb.ac.in /~анил/ в качестве моего проекта стажировки. так что, пожалуйста, помогите мне с моим запросом выше. я попробовал несколько вещей, и я обновляю свой главный вопрос новым кодом, не могли бы вы, пожалуйста, подсказать мне, как воспроизвести базовую схему веб-сайта. даже приблизительная идея была бы очень полезной. Спасибо, сэр
3. Но мы не знаем, как выглядят ваши данные. Не могли бы вы вставить это?
4. 404 в этой ссылке на предварительную обработку документов highcharts. Возможно, вы имеете в виду эту статью: highcharts.com/docs/working-with-data/custom-preprocessing
Ответ №1:
Вы можете попробовать с
var options = {
chart: {
renderTo: 'chart',
},
credits: {
enabled: false
},
title: {
text: 'Impression/Click Overview',
x: -20
},
xAxis: {
categories: [{}]
},
tooltip: {
formatter: function() {
var s = '<b>' this.x '</b>';
$.each(this.points, function(i, point) {
s = '<br/>' point.series.name ': ' point.y;
});
return s;
},
shared: true
},
series: [{},{}]
};
$.ajax({
url: "json.php",
data: 'show=impression',
type:'post',
dataType: "json",
success: function(data){
options.xAxis.categories = data.categories;
options.series[0].name = 'Impression';
options.series[0].data = data.impression;
options.series[1].name = 'Click';
options.series[1].data = data.clicks;
var chart = new Highcharts.Chart(options);
}
});
Ответ №2:
На веб-сайте highcharts есть несколько полезных статей о работе с динамическими данными. Это, вероятно, лучшее место для начала.
http://www.highcharts.com/docs/working-with-data/preprocessing-live-data
http://www.highcharts.com/docs/working-with-data/preprocessing-data-from-a-database
Попробуйте что-нибудь, и если у вас возникнут проблемы, вернитесь сюда с более конкретным вопросом, показывающим, что вы пробовали. В нынешнем виде ваш вопрос слишком широк и, вероятно, будет закрыт.
Запрос ajax для обновления данных выглядит примерно так:
function requestData() {
$.ajax({
url: 'live-server-data.php',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 20; // shift if the series is // longer than 20
// add the point
chart.series[0].addPoint(point, true, shift);
// call it again after one second
setTimeout(requestData, 1000);
},
cache: false
});
}
Комментарии:
1. Спасибо, Стив. теперь я могу отображать статические данные, используя данные json, но теперь я не могу сделать их динамическими с помощью json, можете ли вы помочь мне, как использовать json для построения динамической диаграммы.
2. динамическое автоматическое обновление диаграммы с использованием json
3. Вам действительно нужно попробовать что-то из этих статей и вернуться с более конкретным вопросом. Я добавил некоторый код из статей в свой пост для справки.
4. я уже использовал этот метод вызова ajax раньше .
5. можете ли вы помочь мне, как получить 2 динамические линейные диаграммы, используя метод ajax, который вы опубликовали выше.