The distance between x-axis point is inconsistent

Share RGraph:   Share or Like RGraph on Facebook!

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Dave on 30th July 2014
I currently have a page that plots a dynamic line chart which will plot a data every second.
Initially, this chart will plot a "history data" which contains the previous 20 seconds of data (20 points) which will be enough to cover the entire chart (d1.length = 20) Then, I want to plot a next set of data which will be a data of current time. I got the basic implementation done, but I realized that the difference of the distance between the x-axis is different from first set of (history) data to second set of data (upcoming data)

Is there any possibilities of why this is happening? this is my basic source code: (I use jquery.ajax to call data).


  function drawGraph ()
     {
         // "cache" this in a local variable
         var _RG = RGraph;

        
         RGraph.clear(document.getElementById("cvs"));
        
         var graph = getGraph('cvs', d1);
         graph.draw();

         // Add some data to the data arrays
         var d = new Date();
         var timestampver = createDate(d);


         var apiurl = //api url
         $.ajax({
             url: apiurl,
             dataType: 'json',
             type: "GET",

             headers:{
                 "Authorization": //basic auth
             },
             success: function(data)
             {
                 // plotting the data implementation
               
                 d1.push(data.unitPeriodUsage);
             }
         });
        
         if (d1.length > 20) {
             d1 = _RG.array_shift(d1);
         }

         if (RGraph.ISIE8) {
             alert('[MSIE] Sorry, Internet Explorer 8 is not fast enough to support animated charts');
         } else {
             obj.original_data[0] = d1;
             setTimeout(drawGraph, 2000);
         }
     }
     drawGraph();



this is within the loading function which also contains getgraph

and this is at the outside of loading function

function printPast(dates, cnt)
{
     if(cnt == 1)
     {
         return false;
     }
     else
     {
         var pastd = createDate(dates);

         var timepast = pastd-cnt*1000*2;

         var pasturl = //url
         $.ajax({
             url:pasturl,
             dataType:'json',
             type:"GET",
             headers:
             {
                 "Authorization": //basic auth
             },

             success: function(data)
             {
        
                 //splashing to the screen implementation
                 d1.push(data.unitPeriodUsage);
             }
         })

         if (d1.length > 20) {
             d1 = _RG.array_shift(d1);
         }
    
         setTimeout(function(){}, 2000);
         printPast(dates,cnt-1);
     }
}
 

I am not entirely sure why it is doing that. Any solution? if more info is required i will provide it in comment section as it is needed
Posted by Richard on 30th July 2014
Sounds like you want an XY chart - which is catered for by the Scatter chart where you can give the X/Y coords and then enable a connecting line. Eg:

www.rgraph.net/demos/scatter-multiple-datasets.html


Richard
Posted by Dave on 31st July 2014
How will this help?

I want to plot the history data and concatenate the new data into history chart.

Maybe my explanation was a bit vague.

I have 2 sets of data that will be plotted in 1 line chart (history data, line data).

1)History data will be plotted before plotting line data current data.
2)Right after it, current data (which dynamically calls for more data in external source) will continue plotting the line chart.


I just wanted to do this because I realized that the graph resets when I reload and I wanted to make the graph to show previous values in chart.
Posted by Richard on 31st July 2014
It sounded like you wanted an XY chart. If not you could have your data initially contain 40 values, your 20 initial values and 20 null values - similar to this:

[1,5,3,6,3,4,8,5,4,8,6,4,3,2,1,5,8,4,8,7,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null]

and as you get new data you can replace the data by your new values. For a line chart the data is held in:

obj.original_data[0]

So as you get new values via AJAX just update that variable and redraw the chart:

obj.original_data[0][20] = 5;
RGraph.redraw();

Then when it gets full up you can use .push() to add a new value and.shift() to get rid of a value off the front.

If you reload the page then those arrays will be reset to their initial values - so if you want the data to persist across a page refresh you'll have to implement something server side - or perhaps use window.localStorage (which is effectively a storage area for the page).

A similar concept is used here on this demo page:

www.rgraph.net/demos/line-dynamic-updates.html






Richard

Add a reply




« Back to message list