Ребят, перечитал всю тему, общего решения я так понял нет, каждый сам под себя переделывает...
В PHP и MySQL пока "плаваю", может кто разъяснит что куда качать, устанавливать?
У меня есть объект ArduinoSensors класса WeaterStation со свойствами датчиков - температуры, влажность, давление и пр.
Данные пишутся в базу. Я так понял, можно создать домашнюю старницу типа "Климат" - HTML code и там что то шаманить?
Прошу помочь, может кто разъяснит что куда? Не пожалеет на чайников время))
"Живые" графики нужна помощь.
Модератор: immortal
-
PAV
- Сообщения: 950
- Зарегистрирован: Пт дек 06, 2013 11:30 am
- Откуда: Москва
- Благодарил (а): 68 раз
- Поблагодарили: 94 раза
Re: "Живые" графики нужна помощь.
Библиотеку изучили? http://smartliving.ru/Main/Library
Все равно, пока не разберетесь с принципом работы МЖД (объекты, свойства, методы) будет нереально программировать систему.
Все равно, пока не разберетесь с принципом работы МЖД (объекты, свойства, методы) будет нереально программировать систему.
-
PAV
- Сообщения: 950
- Зарегистрирован: Пт дек 06, 2013 11:30 am
- Откуда: Москва
- Благодарил (а): 68 раз
- Поблагодарили: 94 раза
Re: "Живые" графики нужна помощь.
Други, помогите. Вот такой код на домашней странице в HTML боксе. При этом показывает последнюю температура 10 июня, а движения 6 июня. Сегодня 20. Что не так???? Ткните носом.
Код: Выделить всё
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highstock Example</title>
<script type="text/javascript" src="/highcharts/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="javascript">
var chart_preiod=15; //days
var chart_interval=1200; //seconds (interval);
var dateNow = new Date();
var startDate = new Date(dateNow.getTime() - chart_preiod*24*60*60*1000);
startDate.setHours(0,0,0,0);
$(function() {
url = '/pChart/?p=Moscow.Temp&op=values&start='+startDate.getFullYear()+'/'+(startDate.getMonth()+1)+'/'+(startDate.getDate())+'&interval='+chart_interval;
$.getJSON(url, function(data) {
//alert(data);
// Create a timer
var start = + new Date();
var old_data=data;
for(var i=0;i<old_data.length;i++) {
data[i]=parseFloat(old_data[i]);
}
// Create the chart
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'Outside',
events: {
load: function(chart) {
this.setTitle(null, {
text: 'Built chart at '+ (new Date() - start) +'ms'
});
}
},
zoomType: 'x'
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'week',
count: 1,
text: '1w'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
selected: 3
},
yAxis: {
title: {
text: 'Температура (°C)'
}
},
title: {
text: 'Температура на улице'
},
subtitle: {
text: 'Built chart at...' // dummy text to reserve space for dynamic subtitle
},
series: [{
name: 'Temperature',
data: data,
pointStart: (startDate.getTime()- startDate.getTimezoneOffset() * 60*1000),
pointInterval: chart_interval * 1000,
tooltip: {
valueDecimals: 1,
valueSuffix: '°C'
}
}]
});
});
});
$(function() {
url = '/pChart/?p=USD.data&op=values&start='+startDate.getFullYear()+'/'+(startDate.getMonth()+1)+'/'+(startDate.getDate())+'&interval='+chart_interval;
$.getJSON(url, function(data) {
//alert(data);
// Create a timer
var start = + new Date();
var old_data=data;
for(var i=0;i<old_data.length;i++) {
data[i]=parseFloat(old_data[i]);
}
// Create the chart
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'Inside',
events: {
load: function(chart) {
this.setTitle(null, {
text: 'Built chart at '+ (new Date() - start) +'ms'
});
}
},
zoomType: 'x'
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'week',
count: 1,
text: '1w'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
selected: 3
},
yAxis: {
title: {
text: 'M'
}
},
title: {
text: 'Движения'
},
subtitle: {
text: 'Built chart at...' // dummy text to reserve space for dynamic subtitle
},
series: [{
name: 'Temperature',
data: data,
pointStart: (startDate.getTime()- startDate.getTimezoneOffset() * 60*1000),
pointInterval: chart_interval * 1000,
tooltip: {
valueDecimals: 1,
valueSuffix: '°C'
}
}]
});
});
});
</script>
</head>
<body>
<script src="/highcharts/js/highstock.js"></script>
<script src="/highcharts/js/modules/exporting.js"></script>
<div id="Outside" style="height: 280px; min-width: 550px"></div>
<div id="Inside" style="height: 280px; min-width: 550px"></div>
</body>
</html>
-
denis
- Сообщения: 284
- Зарегистрирован: Сб ноя 24, 2012 11:47 am
- Благодарил (а): 29 раз
- Поблагодарили: 28 раз
Re: "Живые" графики нужна помощь.
Я могу только одно сказать: пока я не сделал построение графика по двум значениям (дата, величина) ничего нормального не получалось. Зато теперь никакого гемора, даже если есть "провалы" в данных или менялась частота считывания величин. Код где-то здесь в ветке выкладывал. Все эти "var chart_preiod=15; //days var chart_interval=1200; //seconds (interval); " обычно не совпадают с частотой следования данных в MySQL отсюда и проблемы. Строй по двум точкам.
-
PAV
- Сообщения: 950
- Зарегистрирован: Пт дек 06, 2013 11:30 am
- Откуда: Москва
- Благодарил (а): 68 раз
- Поблагодарили: 94 раза
Re: "Живые" графики нужна помощь.
КАК? Еще раз выложите, пожалуйста, а то вы на предыдущей странице примерно такой же вопрос спрашивали, там замена индекса помогла. У меня не помогает.
Точнее объясните, как пользоваться? Куда подставлять объект.свойство?
Точнее объясните, как пользоваться? Куда подставлять объект.свойство?
-
denis
- Сообщения: 284
- Зарегистрирован: Сб ноя 24, 2012 11:47 am
- Благодарил (а): 29 раз
- Поблагодарили: 28 раз
Re: "Живые" графики нужна помощь.
объект.свойство просто подставлять не получится, надо еще из базы вытащить время записи свойства в базу. см. здесь
http://smartliving.ru/forum/viewtopic.p ... t=90#p5642
у людей все получилось.
http://smartliving.ru/forum/viewtopic.p ... t=90#p5642
у людей все получилось.
-
PAV
- Сообщения: 950
- Зарегистрирован: Пт дек 06, 2013 11:30 am
- Откуда: Москва
- Благодарил (а): 68 раз
- Поблагодарили: 94 раза
Re: "Живые" графики нужна помощь.
Так вот я и спрашиваю, что в том коде менять, чтобы данные мои брались? Я вот так с наскоку не вижу.
-
denis
- Сообщения: 284
- Зарегистрирован: Сб ноя 24, 2012 11:47 am
- Благодарил (а): 29 раз
- Поблагодарили: 28 раз
Re: "Живые" графики нужна помощь.
так в этих кодах разные подходы к получению данных, я даже уже и не помню как работает пример Сергея. И с наскоку ничего не получится, мне пару недель понадобилось прежде чем нормально заработало.
-
PAV
- Сообщения: 950
- Зарегистрирован: Пт дек 06, 2013 11:30 am
- Откуда: Москва
- Благодарил (а): 68 раз
- Поблагодарили: 94 раза
Re: "Живые" графики нужна помощь.
Ничего не поменялось? Все так же сложно?
Хоть графика датчика движения и температуры сделать.
Хоть графика датчика движения и температуры сделать.
-
denis
- Сообщения: 284
- Зарегистрирован: Сб ноя 24, 2012 11:47 am
- Благодарил (а): 29 раз
- Поблагодарили: 28 раз
Re: "Живые" графики нужна помощь.
предлагаю начать с простого:
1. заполнить на php массив значений [дата, значение] - достаточно 3-х точек.
2. вывести его на экран.
3. понять, что все получилось.
4. почитать здесь http://api.highcharts.com/highstock#series.data и понять, что надо "передавать" массив данных с x и у.
5. скачать пример и сделать свои 3-и точки на нем http://jsfiddle.net/gh/get/jquery/1.9.1 ... asic-line/
1. заполнить на php массив значений [дата, значение] - достаточно 3-х точек.
2. вывести его на экран.
3. понять, что все получилось.
4. почитать здесь http://api.highcharts.com/highstock#series.data и понять, что надо "передавать" массив данных с x и у.
5. скачать пример и сделать свои 3-и точки на нем http://jsfiddle.net/gh/get/jquery/1.9.1 ... asic-line/