开发者

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});
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜