'Inteligenty' dom ze sterownikiem PLC

Language:
Szukanie zaawansowane  

Aktualności:

Powrót do strony głównej: www.edom-plc.pl

Autor Wątek: Wizualizajca w Highcharts  (Przeczytany 9661 razy)

Paweł Piotrowski

  • Newbie
  • *
  • Wiadomości: 23
    • Zobacz profil
Wizualizajca w Highcharts
« dnia: Stycznia 22, 2013, 08:36:25 pm »
Witam

Po wielu próbach udalo się zrobić komunikację z MySql i dane są wysyłane do bazy. Zabrałem się teraz za wykres w oparciu o Highchart.
Udało się to częściowo, a mianowicie zamiast daty/czasu jest pokazywana liczba:
1,358,500M ....1,358,525M  ..itd
oraz skala Y zaczyna się od -2,5...

W ktorym miejscu mogę zmienić rodzaj wykresu i i jego parametry? Czy w GRID.js?

Pozdrawiam

Paweł

Zapisane

admin

  • Administrator
  • Sr. Member
  • *****
  • Wiadomości: 313
    • Zobacz profil
Odp: Wizualizajca w Highcharts
« Odpowiedź #1 dnia: Stycznia 23, 2013, 09:58:57 am »
Witam,

proponuję przejrzeć źródło pliku http://www.edom-plc.pl/wago/temperatury.html i zawarte w nim opcje:

Kod: [Zaznacz]
options = {
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%e of %b',
hour: '%H:%M<br>%d %b'
} 
},
yAxis: [{
title: {
text: null
},
labels: {
align: 'left',
x: 3,
y: 16,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
},
showFirstLabel: false
}, {
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: null
},
labels: {
align: 'right',
x: -3,
y: 16,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
},
showFirstLabel: false
}],

legend: {
align: 'left',
verticalAlign: 'top',
y: 0,
floating: true,
borderWidth: 0
},

tooltip: {
formatter: function() {
                return Highcharts.dateFormat('%a, %d.%b %H:%M', this.x)+'<br><b>'+ this.series.name +' '+ this.y +'°C</b>';
}
},
plotOptions: {
series: {
cursor: 'pointer',
marker: {
enabled: false,
lineWidth: 1
}
}
}
};
Generalnie więc - nie powinno być potrzeby zmieniania czegokolwiek w plikach/bibliotekach a jedynie w pliku html poprzez zdefiniowanie odpowiednich parametrów - w tym wypadku xAxis: {type: 'datetime', dateTimeLabelFormats:..... itd.

Pozdrawiam!
Zapisane

Paweł Piotrowski

  • Newbie
  • *
  • Wiadomości: 23
    • Zobacz profil
Odp: Wizualizajca w Highcharts
« Odpowiedź #2 dnia: Stycznia 23, 2013, 11:55:13 am »
Witam

Dziękuję za informację, będę nad tym pracował.

A czy można zastosować w tym przypadku również Highstock? Daje większe mozliwości.

Pozdrawiam
Zapisane

admin

  • Administrator
  • Sr. Member
  • *****
  • Wiadomości: 313
    • Zobacz profil
Odp: Wizualizajca w Highcharts
« Odpowiedź #3 dnia: Stycznia 23, 2013, 12:01:59 pm »
Cześć,

generalnie można zastosować wszystko.  Trzeba tylko przeanalizować w jakim formacie Highstock chce otrzymywać dane....i czy większe możliwości są naprawde potrzebne ;)

Pozdrawiam,
Zapisane

Paweł Piotrowski

  • Newbie
  • *
  • Wiadomości: 23
    • Zobacz profil
Odp: Wizualizajca w Highcharts
« Odpowiedź #4 dnia: Stycznia 24, 2013, 07:31:16 pm »
Cześć

Czy potrzebne większy mozliwości....trudno powiedzieć...

Na przykład taki wykres:    http://www.highcharts.com/stock/demo/

<!DOCTYPE HTML>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Highstock Example</title>

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
      <script type="text/javascript">
$(function() {

   $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
      // Create the chart
      window.chart = new Highcharts.StockChart({
         chart : {
            renderTo : 'container'
         },
         rangeSelector : {
            selected : 1
         },
         title : {
            text : 'AAPL Stock Price'
         },
         series : [{
            name : 'AAPL',
            data : data,
            tooltip: {
               valueDecimals: 2
            }
         }]
      });
   });
});
      </script>
   </head>
   <body>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="container" style="height: 500px; min-width: 500px"></div>
   </body>
</html>


jest to przykład i dane są zaciągane z zewnątrz. Nie wiem jak mają być przygotowane dane ...

podglądając odnośnik mamy coś takiego (fragment):

?\'(/* AAPL historical OHLC data from the Google Finance API */
[
/* Jan 2006 */
[1138233600000,72.33],
[1138320000000,72.03],
[1138579200000,75.00],
[1138665600000,75.51],
/* Feb 2006 */
[1138752000000,75.42],
[1138838400000,72.10],
[1138924800000,71.85],
[1139184000000,67.30],
[1139270400000,67.60],
[1139356800000,68.81],
[1139443200000,64.95],
[1139529600000,67.31],
[1139788800000,64.71],
[1139875200000,67.64],
[1139961600000,69.22],
[1140048000000,70.57],
[1140134400000,70.29],
[1140480000000,69.08],
[1140566400000,71.32],
[1140652800000,71.75],
[1140739200000,71.46],
[1140998400000,70.99],
[1141084800000,68.49],
/* Mar 2006 */
[1141171200000,69.10],

Czy ktoś ma jakiś pomysl?

Pozdrawiam
Zapisane

Paweł Piotrowski

  • Newbie
  • *
  • Wiadomości: 23
    • Zobacz profil
Odp: Wizualizajca w Highcharts
« Odpowiedź #5 dnia: Stycznia 24, 2013, 09:12:54 pm »
Napisałem skrypcik

<?php

$conn = mysql_connect("x.x.x.x", "user", "password") or die (mysql_error ());
$db = mysql_select_db ("WagoDB") or die (mysql_error ());

$result=mysql_query ("SELECT Timestamp, Energy_1 FROM Data") or die (mysql_error ());

$data = array();
$count = 0;
while ($row=mysql_fetch_array($result))
{

  $newdate = strtotime($row['Timestamp']) * 10000;
  $data[] = array( $newdate, (float)$row['Energy_1']);
  $count++;
}   
echo json_encode($data);

?>


ale jeszcze nie działa prawodłowo...
Zapisane