jqplot上有多行,带有动态数据分配

时间:2014-01-01 16:20:54

标签: javascript arrays jqplot

我正在尝试使用jqplot在图表上显示多个系列(行)。我正在调用java servlet并以String格式获取数据。稍后在javascript中,我将具有split函数的String分配给数组并将该值传递给jqplot,datarenderer。如果我在JS中分配静态值,它可以工作,但是当我分配从Servelt收到的值时,它没有显示。所以似乎不知何故,我在做数组的同时做错了。以下是代码 - 它只显示一行,并且根据data []数组有数据。它忽略了data2数组的值。 谁能请帮忙。感谢。

<script type="text/javascript">
$(document).ready(function() {
var sineRenderer = function() { 
var list = "'2013-7-21',9740000:'2013-7-30',107640000:'2013-12-30',117640000:'2013-11-30',98940000"; 
//this String will be return result from Ajax call. I have hardcoded it to test
var datatemp = list.split(":");

var data2 = [[]];
data2[0].push([datatemp[0]]);
data2[0].push([datatemp[1]]);
data2[0].push([datatemp[2]]);
data2[0].push([datatemp[3]]);

var data = [[]]; 
data[0].push(['2012-7-21',9740000]);    
data[0].push(['2012-8-24',9940000]);
data[0].push(['2012-10-26',10040000]);
data[0].push(['2012-12-29',20000000]);

var array1=data.concat(data2);

return array1;  };

  $.jqplot('chartdiv',  
  [],
{ dataRenderer: sineRenderer,
title:'Exponential Line',
  axes:{
  yaxis:{tickOptions: {
    formatter: function(format, value){
        return MillisecondsToDuration(value);
    }
},label:'Cosine',          
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,          
labelOptions: {            
fontFamily: 'Georgia, Serif',            
fontSize: '12pt'          
}}, 
  xaxis:{          
  renderer:$.jqplot.DateAxisRenderer,           
  tickOptions:{formatString:'%b %#d, %y'},          
  label:'Angle (radians)',          
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,          
labelOptions: {            
fontFamily: 'Georgia, Serif',            
fontSize: '12pt'          
}  
  }},
  series:[{show: true, label: 'Level 1', color:'#5FAB78'},{show: true, label: 'Level 2'}],
  legend: {
        show: true,
        placement: 'outside',
        location: 'ne',     // compass direction, nw, n, ne, e, se, s, sw, w.
        xoffset: 12,        // pixel offset of the legend box from the x (or x2) axis.
        yoffset: 12, 
       // pixel offset of the legend box from the y (or y2) axis.
    },
  highlighter: {        
  show: true,        
  sizeAdjust: 7.5      
  },      
  cursor: {        
  show: false      
  }
})
});

function MillisecondsToDuration(n) {
    var dtm = new Date();
    dtm.setTime(n);
    var hours = Math.floor(n / 3600000);
    var minutes = dtm.getMinutes();
    var seconds = dtm.getSeconds();
    return $.jqplot.sprintf('%02d:%02d:%02d', hours, minutes, seconds);        
}
</script>

0 个答案:

没有答案