JQplot met eigen values

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Chris Bosmans

chris Bosmans

25/11/2015 23:24:02
Quote Anchor link
ik had zitten surfen en vond een open source script voor grafieken te tonen
http://www.jqplot.com/index.php

nu ik hou mijn meterstanden van water en elektriciteit bij en zou nu graag deze in grafiek op mijn page willen tonen
heb eerst geprobeerd met vaste waarden en inderdaad lukt perfect.
nu wou ik mijn eigen waarden in het jqplot script steken.

dit is static script voor de grafiek
dus op lijn 2 staan de waarden (var line1=[......])
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
<script>
$(document).ready(function(){
  var line1=[['2008-06-30 8:00AM',4], ['2008-7-14 8:00AM',6.5], ['2008-7-28 8:00AM',5.7], ['2008-8-11 8:00AM',9], ['2008-8-25 8:00AM',8.2]];
  var plot2 = $.jqplot('chart2', [line1], {
      title:'Customized Date Axis',
      axes:{
        xaxis:{
          renderer:$.jqplot.DateAxisRenderer,
          tickOptions:{formatString:'%b %#d, %#I %p'},
          min:'June 16, 2008 8:00AM',
          tickInterval:'2 weeks'
        }
      },
      series:[{lineWidth:4, markerOptions:{style:'square'}}]
  });
});
</script>
?>


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
$velden=mysqli_query($link,"SELECT id_elec  FROM elektriek ");
    while($row_veld = mysqli_fetch_array($velden))
    {
    $id_elec[]=$row_veld['id_elec'];    
    }
    
$count=mysqli_num_rows($velden);  //26 rijen
for($i=0;$i<$count;$i++){
$id_elec1 = $id_elec[$i];
$alle_waarden_jaar=mysqli_query($link,"SELECT *,DATE_FORMAT(datum_elec,'%Y-%m-%d %H:%m') as datum  FROM elektriek WHERE id_elec='$id_elec1'");
    while($row_alle_waarden_jaar = mysqli_fetch_array($alle_waarden_jaar))
    {
    $Datum=$row_alle_waarden_jaar['datum'];
    $meterstand=$row_alle_waarden_jaar['meterstand_elec'];
    }
echo  $chart= "['".$Datum."',".$meterstand."], ";
}
?>

hoe krijg ik mijn waarden bewaard in echo $chart in onderstaand script.


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
<script>
$(document).ready(function(){
  var line1=[ ..... $chart......  ];
  var plot2 = $.jqplot('chartdiv', [line1], {
      title:'verloop energie verbruik',
      axes:{
        xaxis:{
          renderer:$.jqplot.DateAxisRenderer,
          tickOptions:{formatString:'%b %#d, %#I %p'},
          min:'January 01, 2015 8:00AM',
          tickInterval:'4 weeks'
        }
      },
      series:[{lineWidth:4, markerOptions:{style:'square'}}]
  });
});
</script>
?>
Gewijzigd op 26/11/2015 00:12:02 door Chris Bosmans
 
PHP hulp

PHP hulp

22/12/2024 11:16:49
 
Peter K

Peter K

26/11/2015 07:37:13
Quote Anchor link
Chris Bosmans op 25/11/2015 23:24:02:
ik had zitten surfen en vond een open source script voor grafieken te tonen


Ik stelde een vraag op het forum welke systemen er waren en hebt toen een keuze gemaakt voor Jqplot.

Overigens moet je je data opbouwen in je WHILE loop.
Hier dus in:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
<?php
while($row_alle_waarden_jaar = mysqli_fetch_array($alle_waarden_jaar))
{
$Datum=$row_alle_waarden_jaar['datum'];
$meterstand=$row_alle_waarden_jaar['meterstand_elec'];
}
?>
Gewijzigd op 26/11/2015 07:37:41 door Peter K
 
Danny von Gaal

Danny von Gaal

26/11/2015 08:58:00
Quote Anchor link
Peter K op 26/11/2015 07:37:13:
Chris Bosmans op 25/11/2015 23:24:02:
ik had zitten surfen en vond een open source script voor grafieken te tonen


Ik stelde een vraag op het forum welke systemen er waren en hebt toen een keuze gemaakt voor Jqplot.


Peter K: ik denk dat je twee mensen door elkaar haalt. ;-)
Ik stelde die vraag maar heb me er nog niet in verdiept.
Gewijzigd op 26/11/2015 08:58:12 door Danny von Gaal
 
Peter K

Peter K

26/11/2015 09:05:34
Quote Anchor link
Danny von Gaal op 26/11/2015 08:58:00:
Peter K op 26/11/2015 07:37:13:
Chris Bosmans op 25/11/2015 23:24:02:
ik had zitten surfen en vond een open source script voor grafieken te tonen


Ik stelde een vraag op het forum welke systemen er waren en hebt toen een keuze gemaakt voor Jqplot.


Peter K: ik denk dat je twee mensen door elkaar haalt. ;-)
Ik stelde die vraag maar heb me er nog niet in verdiept.

Mijn welgemeende excuses lol... Het was nog vroeg he.
Wel enorm toevallig!
Gewijzigd op 26/11/2015 09:05:50 door Peter K
 
Chris Bosmans

chris Bosmans

26/11/2015 19:58:40
Quote Anchor link
bedoel je zoiets dan?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<div id="chartdiv" style="height:400px;width:900px; "></div>

<?php
/**************************************************************************/
// opzoeken nulpunt (1ste meting) die wordt gebruikt voor verschil te maken
/*************************************************************************/
$min_value_sql =mysqli_query($link,"SELECT MIN(meterstand_elec) AS laagste_maand  FROM elektriek ");
 while($min_value_row = mysqli_fetch_array($min_value_sql))
{
$meterstand_min=$min_value_row['laagste_maand'];
}

/**************************************************************************/
// Alle velden selecteren in de tabel
/*************************************************************************/
$alle_waarden_jaar=mysqli_query($link,"SELECT *,DATE_FORMAT(datum_elec,'%Y-%m-%d') as datum  FROM elektriek ");
    while($row_alle_waarden_jaar = mysqli_fetch_array($alle_waarden_jaar))
    {
    $datum=$row_alle_waarden_jaar['datum'];
    $meterstand=$row_alle_waarden_jaar['meterstand_elec']- $meterstand_min;
/**************************************************************************/
// JQ plot script
/*************************************************************************/
?>
<script>
$(document).ready(function(){
   //de echo van mijn while loop
  var line1=[ <?php echo "['".$datum."',".$meterstand."], " ?>];
    var plot2 = $.jqplot('chartdiv', [line1], {
      title:'verloop energie verbruik',
      axes:{
        xaxis:{
          renderer:$.jqplot.DateAxisRenderer,
          tickOptions:{formatString:'%m.%Y '},
          min:'January 01, 2015',
          tickInterval:'31 days'
        }
      },
      series:[{lineWidth:4, markerOptions:{style:'square'}}]
  });
});
</script>
<?php    
} // einde while loop
?>


ik heb de echo in het Jscript geechoed en alles komt er goed uit
maar ik krijg een grafiek te zien maar mijn waarden zitten er niet in.
en de error handling geeft geen fout.
als ik onderstaande de echo in het script vervang door onderstaande values (de echo apart) dan werkt het wel -> static data.


['2015-02-22 20:02',0], ['2015-02-23 18:02',21], ['2015-02-24 19:02',43], ['2015-02-27 18:02',101], ['2015-02-28 13:02',118], ['2015-03-01 11:03',139], ['2015-03-01 19:03',143], ['2015-03-02 21:03',169], ['2015-03-08 15:03',295], ['2015-03-17 08:03',469], ['2015-03-22 19:03',594], ['2015-03-31 08:03',776], ['2015-04-01 08:04',799], ['2015-04-09 08:04',959], ['2015-04-27 08:04',1234], ['2015-05-05 08:05',1363], ['2015-05-18 22:05',1610], ['2015-05-24 22:05',1702], ['2015-05-31 13:05',1804], ['2015-06-17 08:06',2057], ['2015-06-01 20:06',1805], ['2015-06-28 15:06',2259], ['2015-07-05 12:07',2365], ['2015-08-04 08:08',2806], ['2015-09-01 19:09',3265], ['2015-11-25 21:11',4858],
Gewijzigd op 26/11/2015 20:06:35 door chris Bosmans
 
Peter K

Peter K

27/11/2015 08:14:48
Quote Anchor link
Chris,

De WHILE gaat nu om je <script> tags heen. Je zult in de bron ook zien dat je nu voor het aantal rows zoveel keer dat stuk zult zien.

Probeer dit eens:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?php
while($row_alle_waarden_jaar = mysqli_fetch_array($alle_waarden_jaar))
{
    $datum=$row_alle_waarden_jaar['datum'];
    $meterstand=$row_alle_waarden_jaar['meterstand_elec']- $meterstand_min;
    
    $plotwaardes .= "[\"$datum\",$meterstand],";
}
/**************************************************************************/
// JQ plot script
/*************************************************************************/
?>

<script>
    $(document).ready(function(){
        var line1=[ <?php echo $plotwaardes; ?> ];
        var plot2 = $.jqplot('chartdiv', [line1], {
            title:'verloop energie verbruik',
            axes:{
                xaxis:{
                    renderer:$.jqplot.DateAxisRenderer,
                    tickOptions:{formatString:'%m.%Y '},
                    min:'January 01, 2015',
                    tickInterval:'31 days'
                }
            },
            series:[{lineWidth:4, markerOptions:{style:'square'}}]
        });
    });
</script>
 
Chris Bosmans

chris Bosmans

27/11/2015 19:17:10
Quote Anchor link
nee geeft geen enkel beeld

maar snap niet waarop dit wel zou werken want dit geeft dezelfde echo als die van mijn enkele comments eerder.
want hier zit mijn echo ook in de while loop alleen had ik mijn script hier ook in de while gestoken.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<?php
$alle_waarden_jaar=mysqli_query($link,"SELECT *,DATE_FORMAT(datum_elec,'%Y-%m-%d') as datum  FROM elektriek ");
    while($row_alle_waarden_jaar = mysqli_fetch_array($alle_waarden_jaar))
    {
    $datum=$row_alle_waarden_jaar['datum'];
    $meterstand=$row_alle_waarden_jaar['meterstand_elec']- $meterstand_min;

$dataplot=['".$datum."',".$meterstand."],} // einde while loop

/**************************************************************************/
// JQ plot script
/*************************************************************************/
?>
<script>
$(document).ready(function(){
   //de echo van mijn while loop
  var line1=[ <?php echo $dataplot; ?>];
    var plot2 = $.jqplot('chartdiv', [line1], {
      title:'verloop energie verbruik',
      axes:{
        xaxis:{
          renderer:$.jqplot.DateAxisRenderer,
          tickOptions:{formatString:'%m.%Y '},
          min:'January 01, 2015',
          tickInterval:'31 days'
        }
      },
      series:[{lineWidth:4, markerOptions:{style:'square'}}]
  });
});
</script>
<?php    
[/code]



[size=xsmall][i]Toevoeging op 27/11/2015 20:07:14:[/i][/size]

hier laat hij de grafiek zien met mijn laatste waarde?



[size=xsmall][i]Toevoeging op 27/11/2015 20:56:36:[/i][/size]

ok ik weet niet of dit DE oplossing is maar het werkt wel

dus in mijn J script hebt ik waar de values moeten komen de hele sql + while loop gestoken en dat werkt dus....

[code]
$(document).ready(function(){
   //de echo van mijn while loop
  var line1=[ [code]<?php $alle_waarden_jaar=mysqli_query($link,"SELECT *,DATE_FORMAT(datum_elec,'%Y-%m-%d') as datum  FROM elektriek ");
    while($row_alle_waarden_jaar = mysqli_fetch_assoc($alle_waarden_jaar))
    {
    $datum=$row_alle_waarden_jaar['datum'];
    $meterstand=$row_alle_waarden_jaar['meterstand_elec']- $meterstand_min;
 echo   $plotdata= "['".$datum."',".$meterstand."], " ;
}?>];
    var plot2 = $.jqplot('chartdiv', [line1], {
      title:'verloop energie verbruik',
      axes:{
        xaxis:{
          renderer:$.jqplot.DateAxisRenderer,
          tickOptions:{formatString:'%m.%Y '},
          min:'January 01, 2015',
          tickInterval:'31 days'
        }
      },
      series:[{lineWidth:4, markerOptions:{style:'circle'}}]
  });
});
</script>
Gewijzigd op 27/11/2015 20:06:20 door chris Bosmans
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.