Highcharts pour joomla
Résolu
sevmelanie
Messages postés
14
Date d'inscription
Statut
Membre
Dernière intervention
-
sevmelanie Messages postés 14 Date d'inscription Statut Membre Dernière intervention -
sevmelanie Messages postés 14 Date d'inscription Statut Membre Dernière intervention -
A voir également:
- Highcharts pour joomla
- Hébergement joomla ovh - Forum Hébergement
- Héberger joomla ovh - Forum Hébergement
- Joomla hosting ovh ✓ - Forum Webmastering
- Joomla administration ✓ - Forum Webmastering
- Joomla avec ovh - Forum Programmation
3 réponses
Après quelque recherche supplémentaire, j'ai tout parametrer dans mon index php, j ai bien suivi les étapes comme indiqué http://www.highcharts.com/docs/getti...d/installation mais pas de lien qui se créer entre mon questionnaire et les graphes je met ma page index.php mais attention je l'ai fait hier soir alors je dois certainement remettre des chose au propre et j'ai certainement du oublier des choses ou quelque chose est au mauvais endroit, je suis ouverte à toutes nouvelles piste !!!!!
EDIT : Merci de bien vouloir utiliser la coloration syntaxique (les balises de code) lorsque tu postes du code sur le forum.
Explications disponibles ici :
https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-codex
<script>
$(function () {
Highcharts.theme = {
colors: ["#00d4aa", "#d42a00", "#55BF3B", "#DF5353", "#aaeeee", "#ff0066", "#eeaaee",
"#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.0f} %</b><br/>'
}
};
// Apply the theme
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
$('#container').highcharts({
chart: {
type: 'column'
},exporting: {
enabled: false
},
title: {
text: ' '
},
xAxis: {
categories: ['Visualisation']
},
credits: {
enabled: false
},
series: [{
name: 'Forces Motrices',
data: [0]
}, {
name: 'Axes Ã* renforcer',
data: [-49.43]
}]
});
});
jquery(function () {
$('#container2').highcharts({
chart: {
type: 'column'
},exporting: {
enabled: false
},
title: {
text: ' '
},
xAxis: {
categories: ['Les Hommes','Niveau de performances','Equilibres Financiers','Business Développement','Avantages Concurrentiels']
},
credits: {
enabled: false
},
series: [{
name: 'Forces',
data: [0,0,0,0,0]
}, {
name: 'Faiblesses',
data: [-50,-45.45,-71.43,-36.84,-50]
}]
});
});
$(function () {
Highcharts.theme = {
colors: ["#00d4aa", "#333333", "#55BF3B", "#DF5353", "#aaeeee", "#ff0066", "#eeaaee",
"#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
title: {
style: {
color: '#000',
font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
}
},exporting: {
enabled: false
},
subtitle: {
style: {
color: '#666666',
font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
}
},
yAxis: {
minorTickInterval: 'auto',
lineColor: '#000',
lineWidth: 1,
tickWidth: 1,
tickColor: '#000',
labels: {
style: {
color: '#000',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
},
title: {
style: {
color: '#333',
fontWeight: 'bold',
fontSize: '12px',
fontFamily: 'Trebuchet MS, Verdana, sans-serif'
}
}
},
labels: {
style: {
color: '#99b'
}
},
navigation: {
buttonOptions: {
theme: {
stroke: '#CCCCCC'
}
}
}
};
// Apply the theme
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
jquery('#container3').highcharts({
chart: {
polar: true,
type: 'line'
},
title: {
text: ' ',
x: -80
},exporting: {
enabled: false
},
pane: {
size: '80%'
},
xAxis: {
categories: ['Les Hommes', 'Niveau de Performances', 'Equilibres Financiers', 'Business Développement',
'Avantages Concurrentiels'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
tickmarkPlacement: 'on',
lineWidth: 0,
min: -5,
max: 5
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y}</b><br/>',
valueDecimals: 2
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 100,
layout: 'vertical'
},
series: [{
name: 'Votre cartographie',
data: [-2.5,-2.27,-3.57,-1.84,-2.5],
pointPlacement: 'on'
}, {
name: ' ',
data: [0, 0, 0, 0, 0],
pointPlacement: 'null',
showInLegend: false,
allowPointSelect: false,
enableMouseTracking: false,
marker: {
enabled: false
}
}]
});
});
</script>
</div>
<div>
<p>
</p>
<h1 align="center;" style="color:#00561B; float:both; text-align:center">"L'EVALUATION est anonyme et sans engagement"</h1>
<p>
</p>
</div>
<div class="column" id="content" style="height:1160px;width:1200px">
<div class="container inner ui-sortable">
<!-- Start Content -->
<form id="qr" action="/index.php/test/etape-3" method="post">
<div id="questionnaire">
<h2>Etape 2 sur 4</h2>
<p>
</p>
<table width="100%" align="left" cellspacing="30" cellpadding="10" valign="top"><tbody><tr height="55"><td valign="top" align="left" class="question" width="500">Estimez-vous que le temps consacré à* la formation est suffisant ?</td><td valign="top" align="right" with="550"><div class="radio-group" style="align:right;"><input type="radio" id="reponse11-0" name="reponse11" value="0">
<label color="0" for="reponse11-0">0</label><input type="radio" id="reponse11-1" name="reponse11" value="1">
<label color="1" for="reponse11-1">1</label><input type="radio" id="reponse11-2" name="reponse11" value="2">
<label color="2" for="reponse11-2">2</label><input type="radio" id="reponse11-3" name="reponse11" value="3">
<label color="3" for="reponse11-3">3</label><input type="radio" id="reponse11-4" name="reponse11" value="4">
<label color="4" for="reponse11-4">4</label><input type="radio" id="reponse11-5" name="reponse11" value="5" checked="">
<label color="5" for="reponse11-5">5</label><input type="radio" id="reponse11-6" name="reponse11" value="6">
<label color="6" for="reponse11-6">6</label><input type="radio" id="reponse11-7" name="reponse11" value="7">
<label color="7" for="reponse11-7">7</label><input type="radio" id="reponse11-8" name="reponse11" value="8">
<label color="8" for="reponse11-8">8</label><input type="radio" id="reponse11-9" name="reponse11" value="9">
<label color="9" for="reponse11-9">9</label><input type="radio" id="reponse11-10" name="reponse11" value="10">
<label color="10" for="reponse11-10">10</label></div> </td></tr><tr><td colspan="2"><hr></td></tr><tr height="55"><td valign="top" align="left" class="question" width="500">Evaluez le niveau d'adéquation de votre système d'informations aux besoins de l'entreprise ?</td><td valign="top" align="right" with="550"><div class="radio-group" style="align:right;"><input type="radio" id="reponse21-0" name="reponse21" value="0">
<label color="0" for="reponse21-0">0</label><input type="radio" id="reponse21-1" name="reponse21" value="1">
<label color="1" for="reponse21-1">1</label><input type="radio" id="reponse21-2" name="reponse21" value="2">
<label color="2" for="reponse21-2">2</label><input type="radio" id="reponse21-3" name="reponse21" value="3">
<label color="3" for="reponse21-3">3</label><input type="radio" id="reponse21-4" name="reponse21" value="4">
<label color="4" for="reponse21-4">4</label><input type="radio" id="reponse21-5" name="reponse21" value="5" checked="">
<label color="5" for="reponse21-5">5</label><input type="radio" id="reponse21-6" name="reponse21" value="6">
<label color="6" for="reponse21-6">6</label><input type="radio" id="reponse21-7" name="reponse21" value="7">
<label color="7" for="reponse21-7">7</label><input type="radio" id="reponse21-8" name="reponse21" value="8">
<label color="8" for="reponse21-8">8</label><input type="radio" id="reponse21-9" name="reponse21" value="9">
<label color="9" for="reponse21-9">9</label><input type="radio" id="reponse21-10" name="reponse21" value="10">
<label color="10" for="reponse21-10">10</label></div> </td></tr><tr><td colspan="2"><hr></td></tr><tr height="55"><td valign="top" align="left" class="question" width="500">Comment évaluez-vous le niveau d'adéquation de votre stock aux besoins ?</td><td valign="top" align="right" with="550"><div class="radio-group" style="align:right;"><input type="radio" id="reponse28-0" name="reponse28" value="0">
<label color="0" for="reponse28-0">0</label><input type="radio" id="reponse28-1" name="reponse28" value="1">
<label color="1" for="reponse28-1">1</label><input type="radio" id="reponse28-2" name="reponse28" value="2">
<label color="2" for="reponse28-2">2</label><input type="radio" id="reponse28-3" name="reponse28" value="3">
<label color="3" for="reponse28-3">3</label><input type="radio" id="reponse28-4" name="reponse28" value="4">
<label color="4" for="reponse28-4">4</label><input type="radio" id="reponse28-5" name="reponse28" value="5" checked="">
<label color="5" for="reponse28-5">5</label><input type="radio" id="reponse28-6" name="reponse28" value="6">
<label color="6" for="reponse28-6">6</label><input type="radio" id="reponse28-7" name="reponse28" value="7">
<label color="7" for="reponse28-7">7</label><input type="radio" id="reponse28-8" name="reponse28" value="8">
<label color="8" for="reponse28-8">8</label><input type="radio" id="reponse28-9" name="reponse28" value="9">
<label color="9" for="reponse28-9">9</label><input type="radio" id="reponse28-10" name="reponse28" value="10">
<label color="10" for="reponse28-10">10</label></div> </td></tr><tr><td colspan="2"><hr></td></tr><tr height="55"><td valign="top" align="left" class="question" width="500">Niveau d'adéquation du carnet de commande avec les objectifs de l'entreprise</td><td valign="top" align="right" with="550"><div class="radio-group" style="align:right;"><input type="radio" id="reponse36-0" name="reponse36" value="0">
<label color="0" for="reponse36-0">0</label><input type="radio" id="reponse36-1" name="reponse36" value="1">
<label color="1" for="reponse36-1">1</label><input type="radio" id="reponse36-2" name="reponse36" value="2">
<label color="2" for="reponse36-2">2</label><input type="radio" id="reponse36-3" name="reponse36" value="3">
<label color="3" for="reponse36-3">3</label><input type="radio" id="reponse36-4" name="reponse36" value="4">
<label color="4" for="reponse36-4">4</label><input type="radio" id="reponse36-5" name="reponse36" value="5" checked="">
<label color="5" for="reponse36-5">5</label><input type="radio" id="reponse36-6" name="reponse36" value="6">
<label color="6" for="reponse36-6">6</label><input type="radio" id="reponse36-7" name="reponse36" value="7">
<label color="7" for="reponse36-7">7</label><input type="radio" id="reponse36-8" name="reponse36" value="8">
<label color="8" for="reponse36-8">8</label><input type="radio" id="reponse36-9" name="reponse36" value="9">
<label color="9" for="reponse36-9">9</label><input type="radio" id="reponse36-10" name="reponse36" value="10">
<label color="10" for="reponse36-10">10</label></div> </td></tr><tr><td colspan="2"><hr></td></tr><tr height="55"><td valign="top" align="left" class="question" width="500">Niveau d'alimentation du portefeuille commercial par la propection</td><td valign="top" align="right" with="550"><div class="radio-group" style="align:right;"><input type="radio" id="reponse37-0" name="reponse37" value="0">
<label color="0" for="reponse37-0">0</label><input type="radio" id="reponse37-1" name="reponse37" value="1">
<label color="1" for="reponse37-1">1</label><input type="radio" id="reponse37-2" name="reponse37" value="2">
<label color="2" for="reponse37-2">2</label><input type="radio" id="reponse37-3" name="reponse37" value="3">
<label color="3" for="reponse37-3">3</label><input type="radio" id="reponse37-4" name="reponse37" value="4">
<label color="4" for="reponse37-4">4</label><input type="radio" id="reponse37-5" name="reponse37" value="5" checked="">
<label color="5" for="reponse37-5">5</label><input type="radio" id="reponse37-6" name="reponse37" value="6">
<label color="6" for="reponse37-6">6</label><input type="radio" id="reponse37-7" name="reponse37" value="7">
<label color="7" for="reponse37-7">7</label><input type="radio" id="reponse37-8" name="reponse37" value="8">
<label color="8" for="reponse37-8">8</label><input type="radio" id="reponse37-9" name="reponse37" value="9">
<label color="9" for="reponse37-9">9</label><input type="radio" id="reponse37-10" name="reponse37" value="10">
<label color="10" for="reponse37-10">10</label></div> </td></tr><tr><td colspan="2"><hr></td></tr><tr height="55"><td valign="top" align="left" class="question" width="500">Comment qualifier les barrières Ã* l'entrée sur votre marché ?</td><td valign="top" align="right" with="550"><div class="radio-group" style="align:right;"><input type="radio" id="reponse44-0" name="reponse44" value="0">
<label color="0" for="reponse44-0">0</label><input type="radio" id="reponse44-1" name="reponse44" value="1">
<label color="1" for="reponse44-1">1</label><input type="radio" id="reponse44-2" name="reponse44" value="2">
<label color="2" for="reponse44-2">2</label><input type="radio" id="reponse44-3" name="reponse44" value="3">
<label color="3" for="reponse44-3">3</label><input type="radio" id="reponse44-4" name="reponse44" value="4">
<label color="4" for="reponse44-4">4</label><input type="radio" id="reponse44-5" name="reponse44" value="5" checked="">
<label color="5" for="reponse44-5">5</label><input type="radio" id="reponse44-6" name="reponse44" value="6">
<label color="6" for="reponse44-6">6</label><input type="radio" id="reponse44-7" name="reponse44" value="7">
<label color="7" for="reponse44-7">7</label><input type="radio" id="reponse44-8" name="reponse44" value="8">
<label color="8" for="reponse44-8">8</label><input type="radio" id="reponse44-9" name="reponse44" value="9">
<label color="9" for="reponse44-9">9</label><input type="radio" id="reponse44-10" name="reponse44" value="10">
<label color="10" for="reponse44-10">10</label></div> </td></tr><tr><td colspan="2"><hr></td></tr><tr height="55"><td valign="top" align="left" class="question" width="500">Evaluez le degrès d'innovation au sein de votre entreprise</td><td valign="top" align="right" with="550"><div class="radio-group" style="align:right;"><input type="radio" id="reponse46-0" name="reponse46" value="0">
<label color="0" for="reponse46-0">0</label><input type="radio" id="reponse46-1" name="reponse46" value="1">
<label color="1" for="reponse46-1">1</label><input type="radio" id="reponse46-2" name="reponse46" value="2">
<label color="2" for="reponse46-2">2</label><input type="radio" id="reponse46-3" name="reponse46" value="3">
<label color="3" for="reponse46-3">3</label><input type="radio" id="reponse46-4" name="reponse46" value="4">
<label color="4" for="reponse46-4">4</label><input type="radio" id="reponse46-5" name="reponse46" value="5" checked="">
<label color="5" for="reponse46-5">5</label><input type="radio" id="reponse46-6" name="reponse46" value="6">
<label color="6" for="reponse46-6">6</label><input type="radio" id="reponse46-7" name="reponse46" value="7">
<label color="7" for="reponse46-7">7</label><input type="radio" id="reponse46-8" name="reponse46" value="8">
<label color="8" for="reponse46-8">8</label><input type="radio" id="reponse46-9" name="reponse46" value="9">
<label color="9" for="reponse46-9">9</label><input type="radio" id="reponse46-10" name="reponse46" value="10">
<label color="10" for="reponse46-10">10</label></div> </td></tr><tr><td colspan="2"><hr></td></tr><tr height="55"><td valign="top" align="left" class="question" width="500">Comment appréciez-vous le niveau de turn-over dans votre entreprise, par rapport à* votre profession</td><td valign="top" align="right"><select style="margin: 0 0 15px 15px;" name="reponse3"><option value="286"> très supérieur </option><option value="287"> supérieur </option><option value="288"> dans la moyenne</option><option value="289"> inférieur</option><option value="290"> très inférieur</option></select></td></tr><tr><td colspan="2"><hr></td></tr><tr height="55"><td valign="top" align="left" class="question" width="500">Comment appréciez-vous le niveau d'absenteisme dans votre entreprise par rapport à votre profession</td><td valign="top" align="right"><select style="margin: 0 0 15px 15px;" name="reponse4"><option value="291"> très supérieur </option><option value="292"> supérieur </option><option value="293"> dans la moyenne</option><option value="294"> inférieur</option><option value="295"> très inférieur</option></select></td></tr><tr><td colspan="2"><hr></td></tr><tr height="55"><td valign="top" align="left" class="question" width="500">Qui est intéressé aux résultats de l'entreprise ? (quelle qu'en soit la forme)</td><td valign="top" align="right"><select style="margin: 0 0 15px 15px;" name="reponse6"><option value="296"> pas de politique d'intéressement</option><option value="297"> les managers proches</option><option value="298"> les managers</option><option value="299"> les managers + une partie du personnel</option><option value="300"> tout le personnel</option></select></td></tr><tr><td colspan="2"><hr></td></tr><tr height="55"><td valign="top" align="left" class="question" width="500">Comment estimez-vous la facilité que vous avez à financer vos projets ?</td><td valign="top" align="right"><select style="margin: 0 0 15px 15px;" name="reponse31"><option value="346"> impossible</option><option value="347"> très difficile</option><option value="348"> possible sous certaines conditions</option><option value="349"> peu de difficulté</option><option value="350"> aucune difficulté</option></select></td></tr><tr><td colspan="2"><hr></td></tr><tr height="55"><td valign="top" align="left" class="question" width="500">Quel est le taux d'endettement de l'entreprise sur fonds propres ?</td><td valign="top" align="right"><select style="margin: 0 0 15px 15px;" name="reponse30"><option value="381"> 0%</option><option value="382"> 10%</option><option value="383"> 20%</option><option value="384"> 30%</option><option value="385"> 40%</option><option value="386"> 50%</option><option value="387"> 60%</option><option value="388"> 70%</option><option value="389"> 80%</option><option value="390"> 90%</option><option value="391"> 100%</option></select></td></tr><tr><td colspan="2"><hr></td></tr><tr><td align="center" colspan="2"></td></tr></tbody></table>
<input type="hidden" name="reponse5" value="5"><input type="hidden" name="reponse25" value="5"><input type="hidden" name="reponse41" value="5"><input type="hidden" name="reponse2" value="281"><input type="hidden" name="reponse17" value="306"><input type="hidden" name="reponse18" value="311"><input type="hidden" name="reponse19"
value="316"><input type="hidden" name="reponse23" value="326"><input type="hidden" name="reponse32" value="351"><input type="hidden" name="reponse34" value="356"><input type="hidden" name="reponse35" value="361"><input type="hidden" name="reponse48" value="376"> </div>
EDIT : Merci de bien vouloir utiliser la coloration syntaxique (les balises de code) lorsque tu postes du code sur le forum.
Explications disponibles ici :
https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-codex
Bonjour
je n'ai pas regardé ton code en détail mais pour faire le lien entre ton questionaire et le graph il faut:
- enregistrer ton questionaire en bdd
- utiliser ajax pour générer les données du graphique.
je n'ai pas regardé ton code en détail mais pour faire le lien entre ton questionaire et le graph il faut:
- enregistrer ton questionaire en bdd
- utiliser ajax pour générer les données du graphique.
Merci Jordane pour ta réponse !!!!
désolée de demander ça mais je peux faire comment pour enregistrer mon questionnaire dans ma base ?
Et pour ajax, j'ai installer en haut de ma page index
encore merci de m'avoir répondu
désolée de demander ça mais je peux faire comment pour enregistrer mon questionnaire dans ma base ?
Et pour ajax, j'ai installer en haut de ma page index
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src = "http://code.highcharts.com/adapters/standalone-framework.js"> </script>
encore merci de m'avoir répondu
désolée de demander ça mais je peux faire comment pour enregistrer mon questionnaire dans ma base ?
Y'a pas de mal à poser la question.
Bon déjà, avant de voir ce point et de savoir si ça sera réellement nécéssaire :
A quoi te sert ce questionnaire ?
Que représentera ton graphique ?
-> Si tu dois afficher des données issues des réponses à ton questionnaire par rapport à plusieurs personnes...là... la sauvegarde en BDD sera obligatoire.
-> Si tu veux juste afficher un graphique Uniquement en fonction des réponses d' UNE seule personne (celle qui complète ton qcm)... un traitement en Javascript devrait suffire.
Au cas où tu devrais passer par une BDD
Il te faudra coder en PHP l'enregistrement en base des réponses de ton questionnaire.
Tu devras donc utiliser (par exemple) des FORM pour récupérer en POST les données lors du SUBMIT.
Pour ça je t'invite à lire :
https://www.commentcamarche.net/contents/493-formulaires-html-cours-et-exemples
et
https://www.commentcamarche.net/contents/793-php-recuperation-de-donnees
Une fois tes données en BDD ... tu devras donc utiliser de l' AJAX (mélange de javascript + Php) pour aller récupérer les données dedans ... et les passer à ton HightChart.
Voici un petit tuto
https://openclassrooms.com/fr/courses/1567926-un-site-web-dynamique-avec-jquery/1569531-ajax-les-requetes-http-par-lobjet-xmlhttprequest
Et pour l'utilisation d'Hightcharts en Ajax:
https://undisconnected.com/comment-charger-des-donnees-via-ajax-avec-highcharts/
et
https://www.highcharts.com/demo/line-ajax
le site que je dois faire permet aux Pme de faire une analyse en repondant aux questions dont les résultats sont présenter sous forme de graphes donc je pense
que c'est ça " Si tu veux juste afficher un graphique Uniquement en fonction des réponses d' UNE seule personne (celle qui complète ton qcm)... un traitement en Javascript devrait suffire. "
que c'est ça " Si tu veux juste afficher un graphique Uniquement en fonction des réponses d' UNE seule personne (celle qui complète ton qcm)... un traitement en Javascript devrait suffire. "
Il ne sera donc visible QUE par la personne qui complète le questionnaire et uniquement le temps qu'il gardera cette page affichée (et sans aucune comparaison avec ces collègues..) ???
Je n'en comprend pas vraiment l'intérêt.... .. l'utilité pour la PME est de pouvoir avoir une représentation graphique de l'ensemble de leurs salariés... et pour le salarié de pouvoir éventuellement comparer ces réponses avec la moyenne calculée des autres salariées....et pour cela... il faut stocker les réponses en BDD.....
Je n'en comprend pas vraiment l'intérêt.... .. l'utilité pour la PME est de pouvoir avoir une représentation graphique de l'ensemble de leurs salariés... et pour le salarié de pouvoir éventuellement comparer ces réponses avec la moyenne calculée des autres salariées....et pour cela... il faut stocker les réponses en BDD.....
