What is the method for incorporating dates as values and on the X axis within RGraph?

Question

What is the method for incorporating dates as values and on the X axis within RGraph?

I have been experimenting with the horizontal bar RGraph demo using this code and have found it to be very successful:

let newData = [1, 40, 30];
let hBarChart = new RGraph.HBar('myCanvas', newData);
hBarChart.Set('chart.labels', ['Richard', 'Alex', 'Nick']);
hBarChart.Set('chart.background.barcolor1', 'white');
hBarChart.Set('chart.background.barcolor2', 'white');
hBarChart.Set('chart.background.grid', true);
hBarChart.Set('chart.colors', ['red']);
hBarChart.Draw();

I am wondering if there is a way to incorporate Date objects instead of numbers. I attempted to use something like this but was unsuccessful:

let newData = [new Date(1000), new Date(2000), new Date(3000)];

javascript graph date rgraph

Answer 1

Answer №1

If that's the situation, you could consider implementing something along these lines:

let data, dates = [new Date("11/16/2011"), new Date("11/17/2011"), new Date("11/18/2011")], labels = [];
// Extracting date information from the date objects
for(let i = 0, len = dates.length; i < len; i++) {
    // Data to be displayed on the graph
    data[i] = dates[i].getDate();

    // Labels for each data entry
    labels[i] = dates[i].getDate() + "/" + dates[i].getMonth() + "/" + dates[i].getYear();  
}
let hbar = new RGraph.HBar('myCanvas', data);
hbar.Set('chart.labels', labels);

/// remainder of the code

More information about Date object can be found on MDN: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date

Answer 2

If that's the situation, you could consider implementing something along these lines:

let data, dates = [new Date("11/16/2011"), new Date("11/17/2011"), new Date("11/18/2011")], labels = [];
// Extracting date information from the date objects
for(let i = 0, len = dates.length; i < len; i++) {
    // Data to be displayed on the graph
    data[i] = dates[i].getDate();

    // Labels for each data entry
    labels[i] = dates[i].getDate() + "/" + dates[i].getMonth() + "/" + dates[i].getYear();  
}
let hbar = new RGraph.HBar('myCanvas', data);
hbar.Set('chart.labels', labels);

/// remainder of the code

More information about Date object can be found on MDN: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date

What is the method for incorporating dates as values and on the X axis within RGraph?

Answer №1

Similar questions

Morris.js tutorial: Enhancing bar charts with data labels

Transforming a 3D coordinate into a 2D screen coordinate [r69!]

Changing the color of an Angular <div> element with scripting

Binding Events to Elements within an AngularJS-powered User Interface using a LoopIterator

Utilize Materialize css with Aurelia for dynamic styling

Sorting and Deduplicating MongoDB Data with Reduce

Excessive task executions by Node schedule

Displaying results from looping through multiple JSON arrays

Error encountered while running a mounted hook in Vue.js that was not properly handled

Is there a way to retrieve both the name of the players and the information within the players' profiles?

Using AngularJs to implement a $watch feature that enables two-way binding

Leveraging server-sent events (SSE) for real-time updates on a web client using JavaScript

The issue of the marker vanishing upon refreshing the page on AngularJS

Tips for creating a scrollable x-axis in d3js

Executing a Java function when a user clicks a button using

The functionality of the jQuery .click method appears to be malfunctioning within the Bootstrap

Issues with grunt - Alert: Task "ngAnnotate:dist" has encountered an error. Proceed using --force option

What is the best way to set up v-models for complex arrays or nested objects?

Numbering the items in ng-repeat directive

Create a search feature based on names utilizing Node Express in conjunction with SQL database