Création de graphe

Version imprimable

17/09/2011, 15h50
Logarithmix

Création de graphe

Bonjour,

je vais devoir développer une application web de benchmarking et je recherche donc une librairie ou autre afin de pouvoir générer des graph (camemberts, bâtons...) à partir d'une base de données mySQL.
Je ne veux pas de solution en Flash.

Merci d'avance,

Logarithmix
17/09/2011, 16h48
okoweb

Tellement de solutions existent pour ton besoin. Google est ton ami, exemple comme mot clés "graph javascript". Tu tomberas par exemples sur cet excellent article Useful JavaScript Solutions for Charts and Graphs.

En outre ce que je souhaite vous mettre en tete, la plupart des ces librairies exploitent des données aux formats Json et XML. Donc comme tu pars de MySQL, tu dois savoir générer du Json ou xml en fonction de ton langage serveur à partir d'un résultat de requete sql.

Meilleures salutations.
17/09/2011, 16h54
Logarithmix

Merci de ta réponse.
Je pars sur http://highcharts.com/ qui me parait complet et graphiquement joli.
Pour la génération de xml et json, je vais devoir m'y plonger car je ne connais pas trop.
Après je vais partir sur le principe que l'utilisateur applique des filtres de recherches (par exemple une période, un numéro quelconque, etc..), donc peut être que je pourrais utiliser le PHP avec des simples GET afin de mettre en forme les données recueillies au bon format pour highcarts.
17/09/2011, 17h11
okoweb

Citation:

Envoyé par Logarithmix

Après je vais partir sur le principe que l'utilisateur applique des filtres de recherches (par exemple une période, un numéro quelconque, etc..), donc peut être que je pourrais utiliser le PHP avec des simples GET afin de mettre en forme les données recueillies au bon format pour highcarts.

Dans cas regarde du coté d'Ajax. Tu envoies une requete au serveur sans toute fois recharger la page, interroger mysql, construire ton json ou xml, reception de ces données coté client de manière asynchrone et génération du graphe en fonction de ces données retournées.

Rebonjour,

Je me vois confronté à mon premier problème avec Highcharts.

J'aimerais que l'utilisateur puisse sélectionner le type de graphique lui-même.
J'ai crée une liste ainsi qu'une fonction onchange qui est ciblée sur ma liste via son id. J'ai testé avec un "alert", la fonction marche bien en soi.
Seulement, lors de la modification de la variable "type" de mon graph, rien ne se passe.
Je pense qu'une fois le graph construit, il n'est pas modifiable. Il faudrait que la construction du graph se relance entièrement je pense, mais je ne sais pas comment m'y prendre...^^"
Bref, voilà mon code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 ................ <script type="text/javascript"> var chart; var type; $(document).ready(function() { document.getElementById("ChoixGraph").onchange=function(){ type=this.value; //alert(type); } chart = new Highcharts.Chart({ chart: { renderTo: 'container', defaultSeriesType: type }, ...........
Sachant que defaultSeriesType est la variable de définition du style de graph

Et ma liste :
Code:

1 2 3 4 5 6 7 <form> <select id="ChoixGraph" name="TypeChoix" > <option>line</option> <option selected="selected">column</option> <option>bar</option> </select> </form>

19/09/2011, 10h37
Logarithmix

Bon en fait il fallait juste que mon document.getElementById("ChoixGraph").onchange=function(){} englobe mon instanciation de graph.

Merci quand même. ^^
19/09/2011, 12h48
okoweb

Si c'est ok, il faut mettre le topic en résolu.
19/09/2011, 12h51
RomainVALERI

Citation:

Envoyé par okoweb

Tellement de solutions existent pour ton besoin. Google est ton ami, exemple comme mot clés "graph javascript". Tu tomberas par exemples sur cet excellent article Useful JavaScript Solutions for Charts and Graphs.

Google est peut-être ton ami, mais l'article n'est pas l'ami de Google :mouarf: car ils n'ont pas mentionné la très pratique API Google Chart :)

Bref, ce n'est probablement plus d'actualité puisque tu as démarré sur autre chose, mais ça me faisait mal ^^
____________________________________________

La preuve en image :

http://chart.apis.google.com/chart?c...=70645A,5AC9E9

:mrgreen:
19/09/2011, 13h07
vermine

Tu as truqué ton générateur de sondage ? 8O
19/09/2011, 14h25
RomainVALERI

Citation:

Envoyé par vermine

Tu as truqué ton générateur de sondage ? 8O

http://chart.apis.google.com/chart?c...=70645A,5AC9E9
(ce n'est pas méchant à manipuler, quand on connait la syntaxe on peut en écrire from scratch dans la barre d'adresses ^^)

(ci-dessus : http://chart.apis.google.com/chart?chs=670x200&chd=t:99,1&chtt=Avez-vous%20truque%20le%20generateur%20de%20sondages%20?&chl=mais%20carrement|pas%20du%20tout&cht=p&chco=70645A,5AC9E9)
19/09/2011, 14h57
Logarithmix

Merci de vos réponses.
Cependant au lieu de créer de multiples topics, je préfère centraliser mes questions sur celui-ci.
Et je suis déjà confronté à un nouveau problème (2h que je galère dessus. '-__-)
En partant de vos conseils avisés (:mrgreen:) j'ai importé les données de ma BDD sous forme de Json.

Voilà le Json :

Code:

[{"DelaiMoyenTEC":"08:50:36","DelaiMoyenBIO":"01:37:15","DelaiMoyenPVT":"00:00:00"}]

Rien de bien méchant. Trois valeurs que j'aimerais confronter via Highcharts (3 colonnes quoi).
Malheureusement, je ne trouve pas comment passer du Json à l’instanciation de mon objet graph...