Graphique à barres empilées - Affichage - JS/HTML

Graphique à barres empilées externe

Sujet résolu

22 juillet 2016 à 17:17:37

Bonjour,

Je vous expose mon probleme, je travaille sur un projet dont l'objectif final est d'afficher les donnees d'une bdd via graphique a barres empilees sur une page html.

J'ai trouve un "style" de graphique tres interressant sur un site, voici le lien : http://www.highcharts.com/demo/bar-stacked/sand-signika

Je souhaite donc dans un premier temps, tout simplement, copier le code js de ce site pour l'afficher sur ma page, sans changement de donnee.

Mais je n'y arrive pas, rien ne s'affiche.

Voici mon code :

<!DOCTYPE html>

<html>

  <head>
	
	<script src="https://code.highcharts.com/highcharts.js"></script>
	<script src="https://code.highcharts.com/modules/exporting.js"></script>
	
  </head>
  
  <body>
	<h1>Voici les resultats graphiques :</h1>
	<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto">
	
	<script type="text/javascript"> 
	
	$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Stacked bar chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
            }
        },
        legend: {
            reversed: true
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        series: [{
            name: 'John',
            data: [5, 3, 4, 7, 2]
        }, {
            name: 'Jane',
            data: [2, 2, 3, 2, 1]
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5]
        }]
    });
});

	</script>
	</div>

    <!-- C'est ici que vous mettrez votre contenu  -->
  </body>

</html>

Merci pour votre aide.

Antoine

-
Edité par antoinecapy 22 juillet 2016 à 17:25:42

MarlburroW

24 juillet 2016 à 5:35:29

Moi je dirais que tu as juste oublié d'inclure jQuery...

J'ai fait moi même le test et ça fonctionne pas trop mal (avec jQuery) : https://jsfiddle.net/qgshdxq9/

antoinecapy

25 juillet 2016 à 10:44:42

Effectivement, j'ai ajoute :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

au debut de ma balise <head> et ca fonctionne parfaitement.

Merci.

Antoine