jqplot dateaxisrendered correct usage
I had posted a similar problem a few weeks back but did not get any answer hence I have simplified it now and also have a jsfiddle demo for it.
Basically i am trying to use jqplot with dateaxis and also trying to replot the chart by changing the input data.
Here is the jsfddle link
http://jsfiddle.net/shyampurk/JNTsv/2/
Here is my javascript
$.jqplot.config.enablePlugins = true;
var Graph;
var GraphUpdate;
var GraphData = [];
var interval = 3000;
var npoints = 25;
var maxIterations = 200;
var niters = 0;
function BuildDataArray() {
GraphData = [];
;
GraphData = [[["2013-07-17 21:11:20",2],["2013-07-17 21:12:20",5],["2013-07-17 21:14:20",7]]];
Graph = $.jqplot('livechart', GraphData, {
stackseries : true,
seriesDefaults: {
showMarker: false,
fill: true,
fillAndStroke: true
},
axes: {
xaxis: {
//numberTicks:2,
//renderer:$.jqplot.DateAxisRenderer,
//pad:0,
renderer:$.jqplot.DateAxisRenderer,
tickOptions: {
angle: -30
}
},
yaxis: {
label: 'Call Count',
//min:0,
//max:30,
tickInterval:2,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
}
},
cursor:{
zoom:true,
looseZoom: true
}
});
}
function UpdateDataArray() {
var newData = new Array();
newData = GraphData;
newData[0].shift();
Graph.series[0].data = newData[0];
//Graph.data[0] = [["2013-07-17 21:12:20",5],["2013-07-17 21:14:20",7]] ;
Graph.replot({resetAxes:true});
}
function StartGraphLoop() {
BuildDataArray();
GraphUpdate = setInterval(UpdateGraph, interval);
}
function UpdateGraph() {
UpdateDataArray();
}
function StopGraphLoop() {
clearInterval(GraphUpdate);
}
StartGraphLoop();
I have a StartGraphLoop( ) function which builds a initial series data array and plots the graph. It also activates a setInterval which updates the series data and replots the graph later.
In my case the replot is not working and the jqplot goes blank after the call to first replot. In the jsfiddle example both the initial plot and replot is not working however the axis gets updated.
I would really appreciate if someone can guide me with the correct usage of jqplot with dateaxisrendered with replot
Thanks
Its not getting updated because you are trying to give the updated values to the graph with date/time value inside it. it doesn't understand those values because the graph knows each tick on x-axis by a number. like first tick is always 1 then 2 and so on.
Try using chrome debugging tool to observer whats going on inside the code and how the graph interprets the data given to it.
try this: Jsfiddle link
$.jqplot.config.enablePlugins = true;
var Graph;
var GraphUpdate;
var GraphData = [];
var interval = 3000;
var npoints = 25;
var maxIterations = 200;
var niters = 0;
function BuildDataArray() {
GraphData = []; ;
GraphData = [[["2013-07-17 21:11:20", 2], ["2013-07-17 21:12:20", 5], ["2013-07-17 21:14:20", 7]]];
Graph = $.jqplot('livechart', GraphData, {
stackseries : true,
seriesDefaults : {
showMarker : false,
fill : true,
fillAndStroke : true
},
axes : {
xaxis : {
renderer : $.jqplot.CategoryAxisRenderer,
tickOptions : {
angle : -30
}
},
yaxis : {
label : 'Call Count',
//min:0,
//max:30,
tickInterval : 2,
labelRenderer : $.jqplot.CanvasAxisLabelRenderer
}
},
cursor : {
zoom : true,
looseZoom : true
}
});
}
function UpdateDataArray() {
var newData = new Array();
newData = Graph.series[0].data;
newData.shift();
newData.push( [1,Math.floor((Math.random()*10)+1)]);
Graph.series[0].data = newData;
Graph.replot({
resetAxes : true
});
}
function StartGraphLoop() {
BuildDataArray();
GraphUpdate = setInterval(UpdateGraph, interval);
}
function UpdateGraph() {
UpdateDataArray();
}
function StopGraphLoop() {
clearInterval(GraphUpdate);
}
StartGraphLoop();
上一篇: 扩展现有的jQuery函数