highchart in bootstrap

Door chris Bosmans op 05-11-2016 22:44 gewijzigd op 06-11-2016 16:34

2.068 views

ik probeer een chart in mijn bootstrap design te steken

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.



        <!-- 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>

- SanThe -

05-11-2016 22:59

Je mist een quote op regel 4.

chris Bosmans

06-11-2016 16:41 gewijzigd op 06-11-2016 16:42

ok gezien merci

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


<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>
$(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

Marthijn Buijs

06-11-2016 17:06

Zie regel 85, volgens mij mag je helemaal niet met een komma eindigen vóór de "]" die op regel 87 staat.

chris Bosmans

06-11-2016 17:13 gewijzigd op 06-11-2016 17:31

ok maar waarom zou dit zelfde dan wel werken op een andere pagina? (niet bootstrap gewijs)

[size=xsmall]Toevoeging op 06/11/2016 17:30:13:[/size]

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


<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>

Reageren

Inloggen om te reageren