Is it possible to assign various values and labels to different elements in graphael?

When working with a line chart in graphael, I encountered an issue where the datapoints were dates that were not recognizable by graphael. As a workaround, I represented each date as 1, 2, 3, and so on.

However, my requirement is to display actual dates on the x-axis labels of the chart. I attempted to use the label property for this purpose, but it did not work as expected.

Below is the code snippet I used:

var lines = r.linechart(30, 30, 600, 440, [[1, 2, 3, 4, 5]], [[100, 150, 130, 85, 100]], { axisxstep: 20, nostroke: false, axis: "0 0 1 1", symbol: "circle", smooth: true }).hoverColumn(function () {
    this.tags = r.set();

    for (var i = 0, ii = this.y.length; i < ii; i++) {
        this.tags.push(r.tag(this.x, this.y[i], this.values[i], 160, 10).insertBefore(this).attr([{ fill: "#fff" }, { fill: this.symbols[i].attr("fill") }]));
    }
}, function () {
    this.tags && this.tags.remove();
});

Answer №1

Check out this code snippet. Your task is to modify the attribute of each label (representing dates) within the chartobject:

var lineChart = r.linechart(0, 0, 200, 250, xValues, yValues1, {
    smooth: true,
    colors: ['#F00', '#0F0', '#FF0'],
    symbol: 'circle',
    axis: '0 0 1 1'
});

for (var i = 0; i < lineChart.axis[0].text.items.length; i++) {
    var label = lineChart.axis[0].text.items[i];
    var originalDate = new Date(parseInt(label.attr('text'), 10));
    var newText = originalDate.getDate() + "/" + (originalDate.getMonth() + 1) + "/" + (originalDate.getFullYear());

    label.rotate(60);
    label.attr({
        'text': newText
    });
}

Furthermore, in order for graphael to plot the graph, the data must be numerical. Therefore, we need to create a Date object for each label on the x-axis like so:

var xValues = [
    new Date("01/05/2014"),
    new Date("01/06/2014"),
    new Date("01/07/2014"),
    new Date("01/08/2014"),
    new Date("01/09/2014"),
    new Date("01/10/2014"),
    new Date("01/11/2014"),
    new Date("01/12/2014"),
    new Date("01/13/2014")
];

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Importing an array of Vue components to be exported and utilized in the app.js file

I'm currently working on a Laravel 8 project with vue.js v2.6 and I want to clean up my app.js file by moving all of my Vue.component() declarations to a separate file. To achieve this, I created js/vueComponents.js where I placed all the vue componen ...

Test your word skills with the Jumbled Words Game. Receive an alert when

After reviewing the code for a jumble word game, I noticed that it checks each alphabet individually and locks it if correct. However, I would like to modify it so that the entire word is only locked if all the letters are correct. Any suggestions on how t ...

After the rendering process, the React Component member goes back to a state of

One issue I encountered is related to a component that utilizes a separate client for making HTTP requests. Specifically, when trying to use the client within a click event handler, the call to this.client.getChannel() fails due to this.client being undefi ...

What is the best way to update information in the `App` component using Vue?

Within Vue, I have an App component that utilizes the <router-view> to extend the functionality of a Login component. My goal is to update specific data within the App component when a button is clicked in the Login component. Is this type of inter ...

Implementing sliders for interactive functionality with an HTML table

I need to implement sorting and sliding features on an HTML table using jQuery. Sorting has already been achieved by utilizing the DataTable.js jQuery library. The challenge now is to incorporate a slider into the table, with all subject columns being scro ...

Issue with displaying bound value in AngularJS textbox

Hello! I am currently working on an AngularJS application and have encountered a puzzling issue. I am attempting to bind a value to a textbox using the following code: <ul> <li ng-repeat="screen in screenMap"> <input type="text" ...

What causes the issue of the 'MERGE' statement in Node.js resulting in the creation of duplicate nodes in Neo4j?

Currently tackling a Node.js project involving the creation of nodes in Neo4j using the 'MERGE' statement. Despite employing 'MERGE' to prevent duplicate nodes, duplicates are still being generated at times. Extensive searches through ...

Using JQuery to Retrieve JSON Data from an HTTPS Endpoint

I am attempting to retrieve a JSON file from an https secured website without using server-side languages. The client specifically requested that the process be entirely implemented in JavaScript. After some research, I discovered that I need to utilize J ...

Sorting the output with gulp and main-bower-files (gulp-order is not functioning)

Hello, I'm a Java engineer diving into the world of Javascript for the first time. Apologies in advance if my information is lacking or incorrect! I am currently working on a gulp build script and utilizing bower to manage dependencies for my JS fron ...

Error: Value of incoming scope in Angular Directive is not defined

When working in html, I passed an object into a directive like this: <lcd-code ldcCode="{{ detail.program.ldcCode }}"></lcd-code> The value of detail.program.ldcCode is "PSIH"... However, in the Directive, it is showing up as undefined: var ...

Creating an Array module in Node JS

Adding a prototype to the Array class can be done in native javascript with the following code: var myArray = Array; myArray.prototype.myMethod = function(){} var testArray = new myArray(); testArray.contains(); Now I need to achieve this using a nod ...

Switching code from using .hover() to using .click() while still maintaining the functionality of both.orChanging code to switch

How can I change this script to trigger on click and also maintain the hover functionality: $x = jQuery.noConflict(); $x(document).ready(function () { $x(".swatch-anchor").on('click hover', function () { var newTitle = $x(this).attr( ...

Issue occurs when a circle element is not following a div element on mouse

Currently, I have implemented some jQuery code that instructs a div named small-circle to track my cursor movement. I discovered how to accomplish this by referencing a thread on stack overflow. I made slight modifications to the script to suit my specifi ...

What is the best way to remove empty elements from an Array?

Having an issue with my API post request. If no values are entered in the pricing form fields, I want to send an empty array. I attempted to use the filter method to achieve this but it still sends an array with an empty object (i.e. [{}]) when making the ...

Having trouble configuring AJAX and PHP to work together

Here's the situation I'm dealing with: I have HTML, JS, and PHP files. In the PHP file, there is an associative array containing default values to populate form elements in the HTML file. I'm trying to use AJAX to retrieve data from the PHP ...

Is the issue of res.locals not being properly propagated to all requests in Express middleware persisting?

Currently, I am building a web app using express, node, and handlebars with passport as the authentication library. In an attempt to customize the navigation bar based on the user's state, I am trying to set a variable in res.locals. However, I am enc ...

Include the aria-labelledby attribute in the jQuery Datatable Pagination

Check out the HTML output created by the Jquery Datatable plug-in for pagination(https://datatables.net/plug-ins/pagination/full_numbers_no_ellipses): <div class="dataTables_paginate paging_full_numbers" id="my-table_paginate" aria-l ...

My Angular directive appears to be missing from the page

Using Electron and AngularJS to implement basic functionality. Currently adding a header and footer that will be displayed on every page. Here is the structure in app.js: 'use strict'; let app = angular.module('marks', ['ngRoute ...

Dependencies in AngularJS factories

I'm currently using AngularJS to extract data from mongodb. I have been attempting to utilize a factory to retrieve this information through the $http method. Despite researching and trying numerous approaches, none seem to work for me. In addition t ...

Leverage JavaScript to display images based on the class of the element

I am looking to display specific logos based on a user's search for a product within a certain category. Initially, the logo image element is hidden (display none) and will be assigned a class corresponding to the category ID. The category ID will det ...