I'm currently implementing a line chart in gRaphael which requires the x axis to move up the y-axis such that it lies on zero (which I have already accomplished by drawing my own axes).
However, I'm now encountering a problem when attempting to shade the area above/under the x-axis; gRaphael's shade function only shades from the bottom of the graph to Y-height (as opposed to being from 0 on the y-axis to the y-height). The result is the following:
http://i.stack.imgur.com/ZuPhw.png
I have found a couple of lines in g.line.js which look suspiciously like they would help, but I have no idea what the "L", "C", and "M" values mean (I assume they are to tell a part of the program to draw a line etc?)
Any help from anybody more informed than me would be greatly appreciated!
I solved this by overriding the g.line.js file and creating an offset to add to the Y values. The offset was calculated by considering the maximum and minimum values on the Y axis, the height of the SVG itself and the "gutter" - a value which adds padding to the SVG itself (so that values on the axes can be displayed better). The formula looks like this (and is, incidentally, identical to how the axes were moved to zero):
(height - 2*gutter)*(miny/(maxy-miny))
Related
normally I would have some full-blwn code to post with my questions but this is a very generic question... I have create a chart with two y-axis on echarts through yAxis: [{name:'abc', type:'value'},{name:'xyz',type:'value'}]. both axes might have data that goes to negative, but the second axis doesn't always have negative numbers. I would like both axes' 0 value line to align at the same level at all times. As the range of both axes individually might vary greatly depending on the dataset supplied, I wouldn't want to manually set the ranges for them and would like to rely on echarts built-in capability to decide on an appropriate range as long as the zero line is aligned. is this possible at all? thanks in advance
I will try to explain what I'm trying to accomplish.
I have a point feature to which I set an array of 2 styles: 1 style represents a rotated image at the given point, the second one should be a rotated text at a fixed distance of the given point.
To clarify things I've created an image. I want to achieve the situation on the right. (the x,y,z lines and labels are for explanation purposes). I want to move the text over a fixed distance z. The rotation angle is also variable.
So what I did was give a rotation to the ol.style.text object and then give the text an offset for Y but then the text gets pulled straight below the point.
What I am looking for is a method to offset the text for a given distance, taking the rotation in account, without having to manually set the ofssetX and offsetY.
One solution here is indeed to use geometry.. calculate x and y offset based on the angles and the given z , using the sin formulas and the Pythagorean theorem, but I would like to avoid those calculations and find a more simple resolution.
I am using the latest version of openlayers3, currently v3.16.0
Thanks in advance.
I'm relatively new to d3 and am attempting to augment a radar diagram such that it rotates on click and the next axis points directly upwards.
The example in which I am working from is found here.
Problem
Currently, when the svg is clicked, I rotate the entire svg by a specified angle based on the number of axis there are in the graph. Since I am rotating the entire svg the labels that are appended to each axis will rotate also (as shown in the following image).
The text is currently unreadable and I want to achieve a solution which is more similar to the following image:
I would like each label to stay with their respective axis and also stay upright after the svg has been rotated, but I am finding it hard to achieve this.
JSFIDDLE
This JSFIDDLE is the stripped down code of the current implementation (I left out the numerous failed attempts) and the following code, which would be in the 'rotateOnClick' function is the closest I have came to a solution so far (I haven't used the index i variable so far but my intention was to swap the position of labels with each other when clicked).
g.selectAll(".legend")
.transition()
.duration(cfg.rotateDuration)
.attr("transform", function(d, i){
if (i<total) i++;
else i = 0;
return "rotate("+newAngle*-1+", "+(cfg.w/2)+",0 )"
})]
.ease(cfg.easeFunction);
I need to manipulate each label individually and stay aligned with its respective axis and also for it to work with a dynamic number of axis.
I greatly appreciate any help and insight.
In D3, I want to fill up a vertical bar with 3 different colors. How can this be accomplished?
The bar has a "domain" of 0 to 3.
Red from 0 to 1.5.
Blue from 1.5 to 2.
Yellow from 2 to 3.
I can't figure out how to accomplish this. It seemed really simple, I would use 3 <rect>, each one would have a Y of the lower bound, and a height of the range distance.
This seemed to fail, since for the final bar, my scale returns a height of 0. Am I using scales wrong?
http://jsfiddle.net/7V8vZ/
Ok here is my solution: http://jsfiddle.net/7V8vZ/1/
Basically I couldn't do it with (min,max) data. I had to use a weird (min, height). This let me figure out where to position the rect, and then how tall to make it. Maybe d3 gives a scale meant for this?
I'm assuming there is a lot d3.js I'm not leveraging. So if you have a better way of doing it, please comment or answer!
Want a simple fix for jqplot axis display. I am using Bubble charts for chart display, and CategoryAxisRenderer for axis.
All I want is the axes to display in top-down fashion, rather than the default bottom-up one. Meaning, the x axis is displayed on top of the chart increasing from left to right, and the y axis starts from the top increasing from top to bottom!!
Have looked in for various in-built jqplot options but to no luck. I am afraid that the solution lies in altering the css definitions for jqplot axis, but i do not want that, as it would consume huge amounts of time just to understand someone else's css. Please if someone could help!
Have got my solution finally.
Reversed the array that had to be printed row wise, hence both chart and the y axis came up correctly.
The second x axis , did not solve my problem. Instead for the particular chart id , modified the the css class jqplot-xaxis and that did the trick.
myBubbleChartId .jqplot-xaxis{
position : absolute;
top : -20px !important;
}