Dynamically changing Label in Line chart
I am getting the following JSON object from a webserver in response object:
(JSON Array :[{"JUL":"5"},{"AUG":"7"},{"SEP":"9"},{"OCT":"11"},{"NOV":"13"}, {"DEC":"15"},{"JAN":"17"},{"FEB":"19"},{"MAR":"21"},{"APR":"23"},{"MAY":"25"},{"JUN":"27"}])
I am taking keys of the JSON object in an array
var al_key = [];
//For loop for x axis dispaly.
alert("al_key.length --------->"+al_key.length);
var jsonObj = []; //declare array
for (var i = 0; i < al_key.length; i++) {
jsonObj.push({value: i, text: al_key[i].value});
}
// Add axes
chart.addAxis("x", {min:1, max: 12 ,labels: jsonObj , fixLower: "major", microTicks: true, majorTickStep: 1});
chart.addAxis("y", { min: 0, max: 50, vertical: true, fixLower: "major", fixUpper: "major", includeZero: true });
However, it's not working the way I expect it to. Any suggestions as to where I am getting this wrong? Or alternative ways to display months on the x-axis dynamically? Thanks in advance for any help.
Pasted response as a question edit:
Actually i am getting JSONArray Object which contain single JSONObject which contains values like
//Server side coding..
JSONObject object=new JSONObject();
object.put("JAN":"17");
object.put("FEB":"19");
object.put("MAR":"21");
object.put("APR":"23");
object.put("MAY":"24");
object.put("JUN":"27");
JSONArray arrayObj=new JSONArray();
arrayObj.add(object);
On System.out.println(arrayObj); // our json appears like {"JAN":"17"},{"FEB":"19"},{"MAR":"21"},{"APR":"23"}, //{"MAY":"24"},{"JUN":"27"}];
On jsp:
//Call to the database to fetch the desired value
dojo.xhrGet( { url : "/POC/Action.do",
handleAs : "json",
sync: true,
load : function(response, ioArgs) {
alert("retrived response ------"+response);
for(var i in response)
for(var x in response[i])
output.push(response[i][x]);
alert("Get value to draw line chart---------------------->"+output);
},
error: function(response, ioArgs){
dojo.byId("grid").innerHTML = "An error occurred, with response: " + response;
return response;
},
handleAs: "json" });
the response object contain the return value (JSONArray object);
now this key is need to be displayed in the x axis of the chart. Do i need to again get the key and prepare the json object which is formed in t开发者_开发技巧he form said above by you..
In reply to your updated information:
Change the way you send the JSON (based on the limited info available,I am assuming is a Java servlet using the org.jon
package)
JSONArray array = new JSONArray();
arrayObj.put (new JSONObject("{'month':'JAN', 'value':'17'}");
// and repeat for the rest of the data
You can use it then in your dojo chart as I wrote below (jsonObj3).
Original comment.
Check at the examples here, specially the part:
labels: [{value: 0, text: "zero"},
{value: 2, text: "two"},
{value: 4, text: "four"}
and add the two series
addSeries("Series A", [1, 2, 3, 4, 5], {stroke: {color: "red"}, fill: "lightpink"}).
addSeries("Series B", [5, 4, 3, 2, 1], {stroke: {color: "blue"}, fill: "lightblue"}).
For the series, the JSON might be
var months = ["JUL","AUG","SEP","OCT","NOV","DEC","JAN","FEB","MAR","APR","MAY","JUN"];
var jsonObj2 = [];
for (var i = 0; i < months.length ; i++) {
jsonObj2.push({value: i, text: months[i]});
}
If you want one single JSON object, try arranging it like this:
var data = [{month: "JUL", value:"5"},
{month: "AUG", value:"7"},
{month: "SEP", value:"9"},
{month: "OCT", value:"11"},
{month: "NOV", value:"13"},
{month: "DEC", value:"15"},
{month: "JAN", value:"17"},
{month: "FEB", value:"19"},
{month: "MAR", value:"21"},
{month: "APR", value:"23"},
{month: "MAY", value:"25"},
{month: "JUN", value:"27"}];
var jsonObj3 = [];
for (var i = 0; i < data.length ; i++) {
jsonObj3.push({value: i, text: data[i].month});
}
精彩评论