Databases
StackOverflow2013
Postsdbo
POHow can I retrieve current X-value in gRaphael linechart hoverColumn function?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I retrieve current X-value in gRaphael linechart hoverColumn function?
    primarykey
    data
    text
    <p>Below I've posted some code and comments for making a simple gRaphael linechart with tag hovereffects (the included script files can be found at <a href="http://raphaeljs.com" rel="nofollow">http://raphaeljs.com</a> and <a href="http://g.raphaeljs.com" rel="nofollow">http://g.raphaeljs.com</a>). The code works as it should (and can thus be a good example for others starting out with gRaphael linecharts), but I have a question/request regarding the text argument of the tag function:</p> <p>As is, the tags will display the Y values for each point (this.values[i]) at the current column, but I would like to have both the X values and the Y values displayed (X, Y). I'm sure it's pretty simple, but so far I've not been able to figure out how to do it. Adding the comma and a space is no problem, that's just <code>', ' + this.values[i]</code>, but I can't figure out how to address the X values. <code>this.attr("x")</code> is the closest I've come so far, but that's the X coordinate on the paper, not the X value on the chart's X axis ;-)</p> <p>Can anyone help me out please?</p> <pre><code>// make tags at every point on the current column for (var i = 0; i &lt; this.y.length; i++) { this.tags.push( // make tag (x, y, text, degree, radius) paper.tag(this.x, this.y[i], this.values[i], 0, 4).insertBefore(this).attr([{ fill: "#ffffff" }, { fill: this.symbols[i].attr("fill") }]) ); </code></pre> <hr> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="raphael-min.js"&gt;&lt;/script&gt; &lt;script src="g.raphael-min.js"&gt;&lt;/script&gt; &lt;script src="g.line-min.js"&gt;&lt;/script&gt; &lt;script language="JavaScript"&gt; function graphael() { var paper = Raphael("paper"); var chartwidth = 800; var chartheight = 300; var charttopleftx = 20; var charttoplefty = 0; // The chart var linechart = paper.linechart(charttopleftx, charttoplefty, chartwidth, chartheight, // The X-coordinate sets [ [0, 1, 2, 3, 4, 5], [0, 1, 2, 3, 4, 5], [0, 1, 2, 3, 4, 5] ], // The Y-coordinate sets [ [500, 550, 540, 510, 600, 570], [500, 525, 400, 450, 390, 490], [500, 425, 500, 430, 650, 425] ], // Chart config { axis: "0 0 1 1", symbol: "circle", smooth: false, axisxstep: 5 }); // The dots linechart.symbols.attr({ r: 4 }); // The tags linechart.hoverColumn( // show function onmousein() { this.tags = paper.set(); // creates a set of tags (to be able to hide them all in one operation) // make tags at every point on the current column for (var i = 0; i &lt; this.y.length; i++) { this.tags.push( // make tag (x, y, text, degree, radius) paper.tag(this.x, this.y[i], this.values[i], 0, 4).insertBefore(this).attr([{ fill: "#ffffff" }, { fill: this.symbols[i].attr("fill") }]) ); } } , // hide function onmouseout() { this.tags.hide(); } ); } &lt;/script&gt; &lt;/head&gt; &lt;body onload="graphael()"&gt; &lt;div id='paper' style='width:900;height:320;'&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USMorten
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. CODo you want the coordinates of the dots on the line chart? If yes, I can post a solution.
      singulars
      1. POHow can I retrieve current X-value in gRaphael linechart hoverColumn function?
      1. USNeha Choudhary
    2. CO@Neha Choudhary Yes, I want both the X and the Y coordinate of the current dot (column) to be displayed in a tag when hoovering the line chart. My code above displays only the Y coordinate (this.values[i]). Thanks
      singulars
      1. POHow can I retrieve current X-value in gRaphael linechart hoverColumn function?
      1. USMorten
    3. CODid you try something like `linechart.symbols.cx` and `linechart.symbols.cy`?
      singulars
      1. POHow can I retrieve current X-value in gRaphael linechart hoverColumn function?
      1. USNeha Choudhary
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload