highchart in bootstrap
ik heb al een high chart in een "gewone" (niet bootstrap) site.
en die werkt.
nu dacht ik, ik kopie paste dit in de bootstrap en klaar is kees.
nu heb ik op de site van high chart gekeken en de "first chart" tut gevolgd en zelfs die werkt ook niet in
het bootstrap design.
wel op mijn andere design
zijn er dingen die ik over het hoofd zien.
Code (php)
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
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
<!-- Meterstanden -->
<section id="meterstanden" class="meterstanden">
<div id="container" style="width:100%; "></div>
<script>
$(function () {
var myChart = Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
</script>
</section>
<section id="meterstanden" class="meterstanden">
<div id="container" style="width:100%; "></div>
<script>
$(function () {
var myChart = Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
</script>
</section>
Gewijzigd op 06/11/2016 16:34:38 door Chris Bosmans
ik heb nu de standard chart aan het praten gekregen maar zie nog steeds geen verschil tussen mijn standard pagina en met de kopie past in bootstrap
hierbij de code van mijn standard pagina
in de head sectie
Code (php)
1
2
3
4
5
2
3
4
5
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="dist/jquery.jqplot.js"></script>
<script type="text/javascript" src="dist/plugins/jqplot.dateAxisRenderer.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="dist/jquery.jqplot.js"></script>
<script type="text/javascript" src="dist/plugins/jqplot.dateAxisRenderer.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
Code (php)
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'spline'
},
title: {
text: 'Electriciteit'
},
subtitle: {
text: 'Verbruik op jaarbasis'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%b'
},
title: {
text: 'Maand'
}
},
yAxis: {
title: {
text: 'Verbruik (kWh)'
},
//min: 0
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e. %b}: {point.y:f} kWh'
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
name: '2015',
// Define the data points. All series have a dummy year
// of 1970/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February etc.
data: [
<?php
include 'meterstand/meterstand.inc.php';
$jaar15=(date('Y')-1);
$min_value_sql =mysqli_query($linkmeterstand,"SELECT MIN(meterstand_elec) AS laagste_maand15 FROM elektriek WHERE DATE_FORMAT(datum_elec,'%Y')='$jaar15'");
while($min_value_row15 = mysqli_fetch_array($min_value_sql))
{
$meterstand_min15=$min_value_row15['laagste_maand15'];
}
$alle_waarden_jaar15=mysqli_query($linkmeterstand,"SELECT *,DATE_FORMAT(datum_elec,'%c') as datumm15,DATE_FORMAT(datum_elec,'%d') as datumd15 FROM elektriek WHERE DATE_FORMAT(datum_elec,'%Y')='$jaar15'");
while($row_alle_waarden_jaar15 = mysqli_fetch_assoc($alle_waarden_jaar15))
{
$meterstand15=$row_alle_waarden_jaar15['meterstand_elec']- $meterstand_min15;
$maandnr=$row_alle_waarden_jaar15["datumm15"]-1;
$dagnr=$row_alle_waarden_jaar15["datumd15"];
echo "[Date.UTC(2000, ".$maandnr.", ".$dagnr."),".$meterstand15."], " ;
}?>
]
}, {
name: '2016',
data: [
<?php
include 'meterstand/meterstand.inc.php';
$jaar16=(date('Y'));
$min_value_sql16 =mysqli_query($linkmeterstand,"SELECT MIN(meterstand_elec) AS laagste_maand16 FROM elektriek WHERE DATE_FORMAT(datum_elec,'%Y')='$jaar16'");
while($min_value_row16 = mysqli_fetch_array($min_value_sql16))
{
$meterstand_min16=$min_value_row16['laagste_maand16'];
}
$alle_waarden_jaar16=mysqli_query($linkmeterstand,"SELECT *,DATE_FORMAT(datum_elec,'%c') as datumm16,DATE_FORMAT(datum_elec,'%d') as datumd16 FROM elektriek WHERE DATE_FORMAT(datum_elec,'%Y')='$jaar16'");
while($row_alle_waarden_jaar16 = mysqli_fetch_assoc($alle_waarden_jaar16))
{
$meterstand16=$row_alle_waarden_jaar16['meterstand_elec']- $meterstand_min16;
$maandnr=$row_alle_waarden_jaar16["datumm16"]-1;
$dagnr=$row_alle_waarden_jaar16["datumd16"];
echo "[Date.UTC(2000, ".$maandnr.", ".$dagnr."),".$meterstand16."], " ;
}?>
]
}]
});
});
</script>
$(function () {
$('#container').highcharts({
chart: {
type: 'spline'
},
title: {
text: 'Electriciteit'
},
subtitle: {
text: 'Verbruik op jaarbasis'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%b'
},
title: {
text: 'Maand'
}
},
yAxis: {
title: {
text: 'Verbruik (kWh)'
},
//min: 0
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e. %b}: {point.y:f} kWh'
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
name: '2015',
// Define the data points. All series have a dummy year
// of 1970/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February etc.
data: [
<?php
include 'meterstand/meterstand.inc.php';
$jaar15=(date('Y')-1);
$min_value_sql =mysqli_query($linkmeterstand,"SELECT MIN(meterstand_elec) AS laagste_maand15 FROM elektriek WHERE DATE_FORMAT(datum_elec,'%Y')='$jaar15'");
while($min_value_row15 = mysqli_fetch_array($min_value_sql))
{
$meterstand_min15=$min_value_row15['laagste_maand15'];
}
$alle_waarden_jaar15=mysqli_query($linkmeterstand,"SELECT *,DATE_FORMAT(datum_elec,'%c') as datumm15,DATE_FORMAT(datum_elec,'%d') as datumd15 FROM elektriek WHERE DATE_FORMAT(datum_elec,'%Y')='$jaar15'");
while($row_alle_waarden_jaar15 = mysqli_fetch_assoc($alle_waarden_jaar15))
{
$meterstand15=$row_alle_waarden_jaar15['meterstand_elec']- $meterstand_min15;
$maandnr=$row_alle_waarden_jaar15["datumm15"]-1;
$dagnr=$row_alle_waarden_jaar15["datumd15"];
echo "[Date.UTC(2000, ".$maandnr.", ".$dagnr."),".$meterstand15."], " ;
}?>
]
}, {
name: '2016',
data: [
<?php
include 'meterstand/meterstand.inc.php';
$jaar16=(date('Y'));
$min_value_sql16 =mysqli_query($linkmeterstand,"SELECT MIN(meterstand_elec) AS laagste_maand16 FROM elektriek WHERE DATE_FORMAT(datum_elec,'%Y')='$jaar16'");
while($min_value_row16 = mysqli_fetch_array($min_value_sql16))
{
$meterstand_min16=$min_value_row16['laagste_maand16'];
}
$alle_waarden_jaar16=mysqli_query($linkmeterstand,"SELECT *,DATE_FORMAT(datum_elec,'%c') as datumm16,DATE_FORMAT(datum_elec,'%d') as datumd16 FROM elektriek WHERE DATE_FORMAT(datum_elec,'%Y')='$jaar16'");
while($row_alle_waarden_jaar16 = mysqli_fetch_assoc($alle_waarden_jaar16))
{
$meterstand16=$row_alle_waarden_jaar16['meterstand_elec']- $meterstand_min16;
$maandnr=$row_alle_waarden_jaar16["datumm16"]-1;
$dagnr=$row_alle_waarden_jaar16["datumd16"];
echo "[Date.UTC(2000, ".$maandnr.", ".$dagnr."),".$meterstand16."], " ;
}?>
]
}]
});
});
</script>
heb wat zitten testen en de php scripts werken (want als ik deze gewoon laat lopen buiten de script krijg ik de waarden... in hetbootstrap design
Gewijzigd op 06/11/2016 16:42:55 door chris Bosmans
Toevoeging op 06/11/2016 17:30:13:
laat even mijn data buiten beschouwing, ik plak een voorbeeld van high charts in mijn sectie
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/spline-irregular-time/
ik krijg met dit voorbeeld ook niets visueels te zien
Code (php)
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto "></div>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'spline'
},
title: {
text: 'Snow depth at Vikjafjellet, Norway'
},
subtitle: {
text: 'Irregular time data in Highcharts JS'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Snow depth (m)'
},
min: 0
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
name: 'Winter 2012-2013',
// Define the data points. All series have a dummy year
// of 1970/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February etc.
data: [
[Date.UTC(1970, 9, 21), 0],
[Date.UTC(1970, 10, 4), 0.28],
[Date.UTC(1970, 10, 9), 0.25],
[Date.UTC(1970, 10, 27), 0.2],
[Date.UTC(1970, 11, 2), 0.28],
[Date.UTC(1970, 11, 26), 0.28],
[Date.UTC(1970, 11, 29), 0.47],
[Date.UTC(1971, 0, 11), 0.79],
[Date.UTC(1971, 0, 26), 0.72],
[Date.UTC(1971, 1, 3), 1.02],
[Date.UTC(1971, 1, 11), 1.12],
[Date.UTC(1971, 1, 25), 1.2],
[Date.UTC(1971, 2, 11), 1.18],
[Date.UTC(1971, 3, 11), 1.19],
[Date.UTC(1971, 4, 1), 1.85],
[Date.UTC(1971, 4, 5), 2.22],
[Date.UTC(1971, 4, 19), 1.15],
[Date.UTC(1971, 5, 3), 0]
]
}, {
name: 'Winter 2013-2014',
data: [
[Date.UTC(1970, 9, 29), 0],
[Date.UTC(1970, 10, 9), 0.4],
[Date.UTC(1970, 11, 1), 0.25],
[Date.UTC(1971, 0, 1), 1.66],
[Date.UTC(1971, 0, 10), 1.8],
[Date.UTC(1971, 1, 19), 1.76],
[Date.UTC(1971, 2, 25), 2.62],
[Date.UTC(1971, 3, 19), 2.41],
[Date.UTC(1971, 3, 30), 2.05],
[Date.UTC(1971, 4, 14), 1.7],
[Date.UTC(1971, 4, 24), 1.1],
[Date.UTC(1971, 5, 10), 0]
]
}, {
name: 'Winter 2014-2015',
data: [
[Date.UTC(1970, 10, 25), 0],
[Date.UTC(1970, 11, 6), 0.25],
[Date.UTC(1970, 11, 20), 1.41],
[Date.UTC(1970, 11, 25), 1.64],
[Date.UTC(1971, 0, 4), 1.6],
[Date.UTC(1971, 0, 17), 2.55],
[Date.UTC(1971, 0, 24), 2.62],
[Date.UTC(1971, 1, 4), 2.5],
[Date.UTC(1971, 1, 14), 2.42],
[Date.UTC(1971, 2, 6), 2.74],
[Date.UTC(1971, 2, 14), 2.62],
[Date.UTC(1971, 2, 24), 2.6],
[Date.UTC(1971, 3, 2), 2.81],
[Date.UTC(1971, 3, 12), 2.63],
[Date.UTC(1971, 3, 28), 2.77],
[Date.UTC(1971, 4, 5), 2.68],
[Date.UTC(1971, 4, 10), 2.56],
[Date.UTC(1971, 4, 15), 2.39],
[Date.UTC(1971, 4, 20), 2.3],
[Date.UTC(1971, 5, 5), 2],
[Date.UTC(1971, 5, 10), 1.85],
[Date.UTC(1971, 5, 15), 1.49],
[Date.UTC(1971, 5, 23), 1.08]
]
}]
});
});
</script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto "></div>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'spline'
},
title: {
text: 'Snow depth at Vikjafjellet, Norway'
},
subtitle: {
text: 'Irregular time data in Highcharts JS'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Snow depth (m)'
},
min: 0
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
name: 'Winter 2012-2013',
// Define the data points. All series have a dummy year
// of 1970/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February etc.
data: [
[Date.UTC(1970, 9, 21), 0],
[Date.UTC(1970, 10, 4), 0.28],
[Date.UTC(1970, 10, 9), 0.25],
[Date.UTC(1970, 10, 27), 0.2],
[Date.UTC(1970, 11, 2), 0.28],
[Date.UTC(1970, 11, 26), 0.28],
[Date.UTC(1970, 11, 29), 0.47],
[Date.UTC(1971, 0, 11), 0.79],
[Date.UTC(1971, 0, 26), 0.72],
[Date.UTC(1971, 1, 3), 1.02],
[Date.UTC(1971, 1, 11), 1.12],
[Date.UTC(1971, 1, 25), 1.2],
[Date.UTC(1971, 2, 11), 1.18],
[Date.UTC(1971, 3, 11), 1.19],
[Date.UTC(1971, 4, 1), 1.85],
[Date.UTC(1971, 4, 5), 2.22],
[Date.UTC(1971, 4, 19), 1.15],
[Date.UTC(1971, 5, 3), 0]
]
}, {
name: 'Winter 2013-2014',
data: [
[Date.UTC(1970, 9, 29), 0],
[Date.UTC(1970, 10, 9), 0.4],
[Date.UTC(1970, 11, 1), 0.25],
[Date.UTC(1971, 0, 1), 1.66],
[Date.UTC(1971, 0, 10), 1.8],
[Date.UTC(1971, 1, 19), 1.76],
[Date.UTC(1971, 2, 25), 2.62],
[Date.UTC(1971, 3, 19), 2.41],
[Date.UTC(1971, 3, 30), 2.05],
[Date.UTC(1971, 4, 14), 1.7],
[Date.UTC(1971, 4, 24), 1.1],
[Date.UTC(1971, 5, 10), 0]
]
}, {
name: 'Winter 2014-2015',
data: [
[Date.UTC(1970, 10, 25), 0],
[Date.UTC(1970, 11, 6), 0.25],
[Date.UTC(1970, 11, 20), 1.41],
[Date.UTC(1970, 11, 25), 1.64],
[Date.UTC(1971, 0, 4), 1.6],
[Date.UTC(1971, 0, 17), 2.55],
[Date.UTC(1971, 0, 24), 2.62],
[Date.UTC(1971, 1, 4), 2.5],
[Date.UTC(1971, 1, 14), 2.42],
[Date.UTC(1971, 2, 6), 2.74],
[Date.UTC(1971, 2, 14), 2.62],
[Date.UTC(1971, 2, 24), 2.6],
[Date.UTC(1971, 3, 2), 2.81],
[Date.UTC(1971, 3, 12), 2.63],
[Date.UTC(1971, 3, 28), 2.77],
[Date.UTC(1971, 4, 5), 2.68],
[Date.UTC(1971, 4, 10), 2.56],
[Date.UTC(1971, 4, 15), 2.39],
[Date.UTC(1971, 4, 20), 2.3],
[Date.UTC(1971, 5, 5), 2],
[Date.UTC(1971, 5, 10), 1.85],
[Date.UTC(1971, 5, 15), 1.49],
[Date.UTC(1971, 5, 23), 1.08]
]
}]
});
});
</script>
Gewijzigd op 06/11/2016 17:31:52 door chris Bosmans