Last point not displaying in Rickshaw Graph

Question

My data are like as in below image :

The Rickshaw graph is perfect for this data because the date and time interval between all dates are long. I have set "price" column as Y-Axis data and "date" column as X-Axis data. But when i add new entry like as below image then new point not showing for this new entry because the time interval is 1 minute.

See the entry of id 26 and 27, the time interval is 1 min and 2 second. So graph don't show this new point. And also i want to set the date as values of X-Axis data with each and every points.

After the entry of 27, my graph didn't show the point of 300. My graph shows the 26th entry with 65 price. See on below image.

May be it will hide because of interval. And if i increase the interval, then it'll display fine.

Answer 1

Both questions you had is regarding the Axis X of the graph. From the screenshot that you posted I assume that the X axis is taking integer values (23, 24, 25 etc. is around the peak of your graph).

In order to plot your last point into the graph you only have insert one more element into the array and render the graph. Below there is an example of a dataset [12x2].

var data = [{ x: 1, y: 92228531 }, 
        { x: 2, y: 106021568 }, 
        { x: 3, y: 123202660 }, 
        { x: 4, y: 132165129 }, 
        { x: 5, y: 151325798 }, 
        { x: 6, y: 179323175 }, 
        { x: 7, y: 203211926 }, 
        { x: 8, y: 226545805 }, 
        { x: 9, y: 248709873 }, 
        { x: 10, y: 281421906 }, 
        { x: 11, y: 308745538 },
        { x: 12, y: 329538099 } ];

var graph = new Rickshaw.Graph( {
    element: document.querySelector("#chart"),
    width: 540,
    height: 240,
    series: [ {
            data: data, 
            color: 'steelblue'
    } ]
} );

var x_axis = new Rickshaw.Graph.Axis.X( { graph: graph } );
var y_axis = new Rickshaw.Graph.Axis.Y( {
    graph: graph,
    orientation: 'left',
    tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
    element: document.getElementById('axis0'),
} );

graph.render();

Regarding your last question, if you want to render the time in the X Axis you need to use Rickshaw.Graph.Axis.Time

For example:

var x_axis = new Rickshaw.Graph.Axis.Time( { graph: graph } );

For Axis.Time you need to make sure that your data (in your case the data from column 'date') are in a proper format.

Try to use .toUTCString() you can find an example here.