Apologies for any language errors.
I am looking to develop a web application where users can fill out a form and submit it to the server. The server will then respond with the requested data in JSON format. Using this data, I want to create a diagram and a legend using Dojo. The generated graph and legend should resemble this image:
1 Question: How can I display custom text in the legend instead of numbers (47, 14, 11, etc.) based on the JSON object?
2 Question: I am currently using the Claro theme in Dojo which has only 5 colors that repeat. How can I assign unique colors to each sector of a circle in the chart?
3 Question: When a new query is made by the user, I need to clear the old chart and legend and display the new ones. While this works for the chart, the legend remains hidden and does not update. What could be causing this issue?
The client-side code appears as follows:
<script>
require(["dojo/dom",
"dojo/on",
"dojo/request",
"dojo/dom-form",
"statsDiagramme/kreisDiagramm",
"statsDiagramme/stabDiagramm",
"dojo/json",
"dojox/json/query",
"dijit/Dialog",
"dijit/form/Button",
"dojo/domReady!"],
function(dom, on, request, domForm, kreisdiagramm, stabdiagramm, json){
var form = dom.byId('sqlOptForm');
on(form, "submit", function(evt){
evt.stopPropagation();
evt.preventDefault();
request.post("ServletStatsSQLOPT", {
data: domForm.toObject("sqlOptForm"),
handleAs: "json"
}).then(function(response){
var error = dojox.json.query("fehlermeldung", response);
if(error === ""){
dojo.html._emptyNode("statsKreisDiagramm");
dojo.html._emptyNode("statsStabDiagramm");
dojo.html._emptyNode("legende");
stabdiagramm.setStabDiagramm(response);
kreisdiagramm.setKreisDiagramm(response);
dom.byId("statsKreisDiagramm").style.visibility = 'visible';
dom.byId("statsStabDiagramm").style.visibility = 'hidden';
dom.byId("statsMenuButton").style.visibility = 'visible';
dom.byId("legende").style.visibility = 'visible';
}
else {
// ERROR
}
}, function(error) {
// ERROR
});
});
}
);
</script>
The chart creation script is defined as:
define([
"dojox/charting/Chart",
"dojox/charting/themes/Claro",
"dojox/charting/plot2d/Pie",
"dojox/charting/action2d/Tooltip",
"dojox/charting/action2d/MoveSlice",
"dojox/charting/widget/Legend",
"dojox/charting/plot2d/Markers",
"dojox/charting/widget/Legend",
"dojox/charting/axis2d/Default",
"dojo/domReady!"
],
function(Chart, theme, PiePlot, Tooltip, MoveSlice, Legend){
return{
setKreisDiagramm: function(response) {
var data = new Array(response.summeArray.length);
// response => JSON object
for(var i=0; i < response.summeArray.length; i++) {
data[i] = { x: 1, y: response.summeArray[i].summe };
}
var pieChart = new Chart("statsKreisDiagramm");
pieChart.setTheme(theme);
pieChart.addPlot("default", {
type: PiePlot,
radius: 180,
fontColor: "black",
labelOffset: 30,
markers: true
});
pieChart.addSeries("Summary", data);
var tooltip = new Tooltip(pieChart, "default");
var moveSliceAction = new MoveSlice(pieChart,"default");
pieChart.render();
var chartLegend = new Legend({ chart: pieChart, horizontal: false }, "legende");
}
};
}
);
Any assistance would be greatly appreciated. Thank you!