• logo categorie
    RESOLU

    Tutoriel : Intégrer un outil de graphiques sur mon sites


    Bonjour à tous!

    Je me suis posé la question suivante il y à peu : quel outil intégrer à mon site pour avoir des joulis graphiques qui claquent en HTML5!
    Après avoir essayé chart.js qui ne correspondait pas à mes attentes (trop rigide), je me suis rabattu sur highchart.js. Celui ci est parfait. De base assez joli, totalement adaptable, et simple d'utilisation.

    Donc voilà, pourquoi ne pas faire un tutoriel qui s'appellerait... Hum... Intégrer HighChart.js sur votre site internet! :)

    La suite dans ma réponse...
    Webmasters - Développement web
    CSS
    HTML / DHTML / XHTML
    JavaScript
    graphiques HTML5
    utilisateur
    Dr. Dino
    Posté le : 27 Août à 17:27
    31 221 vues

  • 42
    Dr. Dino
    Posté le : 27 Août à 17:36
    Eh bien, comme je vous l'ai dit plus haut, rien de plus simple!

    Pour le démontrer nous allons afficher un graphique en camembert qui affiche le nombre de votes liés à votre compte Oyant.

    Tout d'abord téléchargez HighChart sur le site officiel http://www.highcharts.com/download, une fois cela fait, décompressez le fichier dans le même dossier que votre index.html.

    index.html
    <div id="container" style="width: 500px; height: 500px;"></div>
    <script type="text/javascript" src="highcharts/js/highcharts.js"></script>
    <script type="text/javascript" src="mychart.js"></script>


    On inclue bien sûr le fichier js de highchart et notre fichier mychart.js décrit ci-dessous.

    mychart.js
    $(function () { 
    	$(function () {
            $('#container').highcharts({
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: 'Votes totalisés sur mes réponses',
    	           	style: {
    					color: '#86C440',
    					fontSize: '16px'
    				}
                },
                tooltip: {
            	    pointFormat: '{series.name}: {point.y}',
                	percentageDecimals: 1
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            formatter: function() {
                                return ''+ this.point.name +': '+ Math.round(this.percentage) +'%';
                            }
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Votes',
                    data: [
                        ['Pas de votes',   data.none],
                        {
                            name: 'Votes positifs',
                            y: data.positifs,
                            sliced: true,
                            selected: true
                        },
                        ['Votes négatifs',    data.negatifs]
                    ]
                }],
                credits: {
                    enabled: false
                },
                colors: [
    	        	'#666666',
    			   	'#86C440',
    			   	'#ca0000'
    			]
            });
    	});
    });
    


    Un petit bout d'explication : var data contient les données à intégrer au graphique, je ne peux que vous conseiller de la récupérer via un $.post(..., "json") de JQuery.

    Et c'est tout! la magie opère!
    Merci Dr. Dino!
  • ⇒ Si vous êtes ici c'est que le sujet vous intéresse ^^
    Inscrivez-vous sur Oyant, apportez votre contribution sur ce sujet et gagnez de l'argent :

    Inscription
    Répondre
  • logo categorie
    RESOLU

    Pourquoi les Anglais roulent-ils à gauche ?

    Bonsoir!

    Pouvez-vous m'expliquer pourquoi les anglais roulent à gauche s'il vous plaît ?!
    Merci!
    Culture
    Culture générale
    Histoire
    anglais
    volant à gauche
  • logo categorie
    RESOLU

    "ABS" et "ESP"

    Salut
    J'ai besoin d'une définition des termes ABS et ESP?
    Vie pratique
    ABS
    ESP
  • logo categorie
    RESOLU

    "Pouvoir" et "influence"

    Bonjour
    Le pouvoir et l’influence sont-ils des éléments qui ont des points communs?
    Langues
    Pouvoir
    Influence
  • logo categorie
    RESOLU

    La différence entre policier et gendarme

    Salut
    Quelle est la différence entre policier et gendarme?
    Métiers
    Armée
    Policier
    Gendarme
  • logo categorie
    RESOLU

    Tutoriel : Sécuriser mes variables $_GET et $_POST

    Quelles vérifications dois-je faire lors de la réception des mes variables $_GET et $_POST d'un point de vue de la sécurité de mon site web et de mon serveur?
    Tout le monde s'est déjà posé la question et je vais y répondre dans ce tutoriel.

    La suite dans ma réponse!
    Webmasters - Développement web
    Langages serveur
    $_GET
    $_POST
    sécurité
    vérifications
    post
  • logo categorie
    RESOLU

    La différence entre dur et solide

    Bonjour
    La différence entre dur et solide?
    Vie pratique
    Dur
    Solide
  • logo categorie
    RESOLU

    Comment supprimer des balises HTML dans une chaîne de caractères ?

    Bonjour,

    J'aimerais supprimer des HTML sur une string, que dois-je utiliser ?

    Merci!
    PHP
    PHP
    HTML
  • logo categorie
    RESOLU

    "Tarif" et "montant"

    Bonjour
    Pensez vous que tarif et montant ont le même sens?
    Entreprise
    Tarif
    Montant
  • logo categorie
    RESOLU

    "Tutelle" et "curatelle"

    Salut
    Savez vous la différence entre tutelle et curatelle?
    Langues
    Tutelle
    Curatelle
  • logo categorie
    RESOLU

    La différence entre juridique et judiciaire

    Salut
    Avez vous une idée sur la différence entre juridique et judiciaire?
    Vie pratique
    Juridique
    Judiciaire
  • logo categorie
    RESOLU

    Tutoriel : Comment créer un modal en HTML

    Bonjour à tous!

    Me revoici pour mon troisième tutoriel, toujours sur le thème des trucs et astuces plus ou moins utiles à un développeur de site web!!
    Et aujourd'hui : Comment créer un modal en HTML pour votre site!!?
    Mais si, un modal!... Cette petite fenêtre en javascript qui s'ouvre pour vous avertir d'un événement d'une importance capitale sans pour autant quitter votre page en cours.

    La suite dans ma réponse, comme d'habitude!
    Webmasters - Développement web
    CSS
    HTML / DHTML / XHTML
    JavaScript
    Modal
    HTML5
    CSS3
  • logo categorie
    RESOLU

    "Ostéopathe" et "physiothérapeute"

    Salut
    Est ce que ostéopathe et physiothérapeute est la même chose?
    Vie pratique
    Ostéopathe
    Physiothérapeute
  • logo categorie
    RESOLU

    à partir de quel âge peut-on castrer un chat ?

    Bonjour,
    J'ai un chaton de 5 mois, j'aimerais savoir à partir de quel âge je peux le faire castrer ?
    Merci d'avance!
    Animaux
    Chats
    chats
    castrer
    chaton
    castration
  • logo categorie
    RESOLU

    La différence entre astéroïde et comète

    Salut
    J'ai besoin de savoir la différence entre astéroïde et comète?
    Vie pratique
    Astéroïde
    Comète
  • logo categorie
    RESOLU

    "Décoction" et "infusion"

    Salut
    La différence entre décoction et infusion?
    Merci d'avance.
    Langues
    Décoction
    Infusion
  • logo categorie
    RESOLU

    Pourquoi mon chat bouge-t-il les pattes avant lorsqu'il est détendu ?

    Hello!

    Je ne sais pas si ma question est claire, mais mon chat fait des mouvements plus ou moins étranges avec ses pattes avant lorsque je le caresse par exemple.
    Pouvez-vous m'expliquer ce que ça signifie ?!

    Merci
    Chats
    chat
  • logo categorie
    RESOLU

    "Processus" et "procédure"

    Salut
    Comment je peux distinguer entre processus et procédure?
    Vie pratique
    Processus
    Procédure
  • logo categorie
    RESOLU

    Pourquoi mon chat me mord-il ?!

    Coucou!

    Lorsque mon chat est allongé et que je le caresse il semble apprécié cela.
    Mais, au bout de quelques instants il me mord.
    Est-ce normal ?!

    Merci d'avance
    Animaux
    Chats
    chats
    morsure
    animaux
  • logo categorie
    RESOLU

    Tutoriel : Faire une liste déroulante (<select>) avec des icônes différentes sur chaque entrées (<option>)

    Hello tout le monde!!

    Me revoilà pour mon deuxième tutoriel!!
    Avec comme question, comment faire une jolie liste déroulante en HTML/CSS/JS avec des icônes différentes sur chaque entrées.
    Eh NON, ça n'est pas possible en HTML, et c'est bien dommage!!
    Et OUI, ça peut être utile pour... Imaginons... Une liste de pays avec leurs drapeaux pour le choix des langues sur votre site web.

    La suite dans ma réponse!
    Webmasters - Développement web
    Général Conception Web
    HTML / DHTML / XHTML
    JavaScript
    HTML
    liste non ordonées
    liste à puces
    liste déroulante
    liste des langues
  • logo categorie
    RESOLU

    Kiosque et stand

    Bonjour
    Kiosque et stand sont la même chose?
    Vie pratique
    Kiosque
    Stand
  • Veuillez vous connecter pour profiter pleinement de toutes les fonctionnalités de Oyant.
    Connexion
    Inscription

    Poster une question

    AnimauxApplicationsArnaquesAutres langagesBases de donnéesBeauté et ModeC et C++Cartes de voeux, lettres, poèmes et discoursCMS (Système de gestion de contenu)CollectionCuisineCultureDémarches administrativesDivertissementDotnetDroitEmploiEmploi et études en informatiqueEnseignementEntrepriseEnvironnementEvénementsFinanceGénéral développementImmobilier, logement et urbanisme    JavaLanguesLogicielsMétiersNouvelles technologiesPHPPrestations socialesRéservé aux adultesSantéSportSystèmesTransportsVie pratiqueWebmasters - Développement web 3.058 Utlisateurs parcourent Oyant en ce moment