Chargement de plusieurs graphiques à secteurs Flot à partir d’un fichier js externe selon les besoins

Utilisation de Flot pour créer tout un ensemble de camemberts sur un site.

Je constate que si un graphique est défini, mais que sur une page donnée, le div auquel il est assigné n’a pas ou n’a pas la hauteur / largeur définie, ce graphique et tous ceux définis par la suite ne s’affichent pas.

Le problème est que certains graphiques sont nécessaires dans certaines pages et pas dans d’autres. Je voudrais définir les graphiques en un seul endroit et les placer dans leurs vues appropriées selon les besoins, mais avec Flot Pie, il semble que dès que le script arrive sans endroit pour mettre un graphique donné, le script par la suite ne fait que souffler et aucun graphique n’est chargé après ce point. Cela se produit même si les graphiques suivants se trouvent sur une autre page / vue.

Voici un violon illustrant le problème . Si vous supprimez la div commentée dans le code HTML, le rest des graphiques sera chargé lors de son exécution. Mais commentez n’importe lequel de ces divs, la console lâchera l’erreur:

• Insertion d’étiquettes dans des tranches de graphique à secteurs (Highchart)
• camembert jQuery avec des parties de tarte détaillées / cliquables
• Graphique à secteurs facile: Le pourcentage de bogue n’est pas centré?
• Raphael JS Pie: Ajouter un identifiant aux tranches de chemin
• Les graphiques à secteurs de Jquery Flot indiquent la valeur des données au lieu du pourcentage

Uncaught Error: Invalid dimensions for plot, width = null, height = null

… et les graphiques ne pourront plus être chargés. Puisqu’il n’y a nulle part où mettre le tableau, je comprends l’erreur. Mais ne devrait-il pas simplement être ignoré et le rest du script exécuté?

Cette question a déjà été posée à propos de SO , mais elle n’a suscité que des commentaires jusqu’à ce que je revienne sur la même question. Je conviens avec Richard que cela semble être un problème commun si cela est inhérent à la mise en œuvre. N’y a-t-il pas moyen de contourner cela?

HTML:

 
Performance
 
 
 
 <!--
Creative Thinking
 
 
 
 Commenting this out blows up the script thereafter --> 
Critical Thinking
 
 
 
 
Affective Domain
 
 
 
 
Attitudes
 
 
  

JQuery:

 $(document).ready(function () { var dataSetDissortingctLMCore = [ {label: "95% - 100%", data: 56, color: "#006837" }, { label: "80% - 94%", data: 10, color: "#18859d" }, { label: "70% - 79%", data: 9, color: "#ef9521" }, { label: "Below 70%", data: 25, color: "#c62037" } ]; var dataSetCreative = [ {label: "Mastered", data: 26, color: "#007700" }, { label: "Not Mastered", data: 14, color: "#cc0000" }, { label: "Not Attempted", data: 60, color: "#ACAAA5" } ]; var dataSetCritical = [ {label: "Mastered", data: 24, color: "#007700" }, { label: "Not Mastered", data: 49, color: "#cc0000" }, { label: "Not Attempted", data: 27, color: "#ACAAA5" } ]; var dataSetAffective = [ {label: "Best Answer", data: 33.3, color: "#007700" }, { label: "Other Answer", data: 33.3, color: "#cc0000" }, { label: "No Answer", data: 33.3, color: "#ACAAA5" } ]; var dataSetAttitudes = [ {label: "Best Answer", data: 43.3, color: "#007700" }, { label: "Other Answer", data: 13.3, color: "#cc0000" }, { label: "No Answer", data: 43.3, color: "#ACAAA5" } ]; var options2 = { series: { pie: { show: true, innerRadius: 0.5, label: { show: true }, offset: { left: 0, top: -24 } } } }; $(window).load(function () { $.plot($("#flot-placeholder-DissortingctLMCore"), dataSetDissortingctLMCore, options2); $("#flot-placeholder-DissortingctLMCore").showMemo(); $.plot($("#flot-placeholder-creative"), dataSetCreative, options2); $("#flot-placeholder-creative").showMemo(); $.plot($("#flot-placeholder-critical"), dataSetCritical, options2); $("#flot-placeholder-critical").showMemo(); $.plot($("#flot-placeholder-affective"), dataSetAffective, options2); $("#flot-placeholder-affective").showMemo(); $.plot($("#flot-placeholder-attitudes"), dataSetAttitudes, options2); $("#flot-placeholder-affective").showMemo();/**/ }); $.fn.showMemo = function () { $(this).bind("plothover", function (event, pos, item) { if (!item) { return; } console.log(item.series.data) var html = []; var percent = parseFloat(item.series.percent).toFixed(2); html.push("
", "", item.series.label, " : ", $.formatNumber(item.series.data[0][1], { format: "#,###", locale: "us" }), " (", percent, "%)", "", "
"); $("#flot-memo").html(html.join('')); }); }; }); 

EDIT: Je devrais mentionner que le problème persiste même si je devais essayer de charger différents graphiques à partir d’un fichier docready ou même d’un fichier js différent.

• Données de tarte HighchartsÉtiquettes à l’intérieur et à l’extérieur
• Le graphique en secteurs Flot indique une erreur dans firebug: «exception non capturée: dimensions non valides pour le tracé, width = null, height = null»
• Graphique à secteurs HighCharts – Ajoutez du texte à l’intérieur de chaque tranche

 function drawChart(container, data) { try { $.plot($("#" + container), data, options2); $("#" + container).showMemo(); } catch (ex) { console.log(ex); } } $(window).load(function () { drawChart("flot-placeholder-DissortingctLMCore", dataSetDissortingctLMCore); drawChart("flot-placeholder-creative", dataSetCreative); drawChart("flot-placeholder-critical", dataSetCritical); drawChart("flot-placeholder-affective", dataSetAffective); drawChart("flot-placeholder-attitudes", dataSetAttitudes); });