I am building a graph with d3, sometimes the graph has smaller numbers on the axis and sometimes the graph has larger numbers on the axis. This causes the following problem from time to time;
Notice how at the left and right hand side the svg element is done and such the entire legend doesnt get displayed. I would prefer not to play around with increasing the margins on either side because that would decrease the screen real estate.
Is there a way such that the axis are responsive with regards to the data input? Ie; when the numbers are in the thousands then a 'k' or an 'm' is added to the number ( 100000 -> 100K, 12000000 -> 12M ).
The function axis.tickFormat() allows you to do exactly that. The formats are described in the documentation for d3.format(). In your case, you need to specify something like
axis.tickFormat(d3.format("s"));
Related
I'm using amchart's Microline chart to display some values ranging from 0 to 50000 or more. But when it reaches the zero value, it displays the chart out of the boundary (As you can see in the screenshot).
How can I fix it? I've tried changing the margins but they didn't help.
amchart microline chart
Unfortunately there isn't a way to fix this due to how the AmCharts library handles smoothed lines internally. As a workaround, you can try setting your minimum to a small negative value that gives the curve enough space to not appear cut off when it curves below zero.
This is for a multiline chart.
I'm displaying 20 points but in between them you might have a gap of days or weeks. This causes the axis to bump the points left and right when looking at a gap of three weeks. in general the points will be hourly, but long gaps may occur. I tried using d3.svg.axis.tickValues to set the values but it still spaces them unevenly.
You need to use a scale
d3.scale.linear().domain([..]).range([...]);
More info here : https://github.com/mbostock/d3/wiki/Quantitative-Scales
I am building an arc graph where the start and end points of the arcs are times in one day. I have a d3 scale that converts date objects into radians, but I need a scale with four ticks applied around the outside of the graph. I did it with jQuery, and you can see how it's supposed to look below
The problem I'm having is that the jQuery (and myself) is doing a poor job keeping those ticks at equal distances from the graph. Different screen sizes are making this a pain.
Does anyone have any idea how do create d3 time axis that is a circle? I've googled with no results.
Here is a link to the live site
I need to find out where to draw my y axis dependent of a date
My data looks like the following in .csv format:
startYYYYMM, endYYYYMM, ProjectName
201301, 201303, Proj1
201302, 201412, Proj2
201304, 201311, Proj3
I've done the chart as laying bar chart
Where to start my bars on the x axis is dependent on the start and is no problem. It's the y that is the problem.
I wonder If there is any built in "optimization" in d3 that I can use. I release that I can loop through my data to decide "the grouping" of my data.
And a pic of how I would like it to look like:
https://www.dropbox.com/s/5xs0jfxb33ipn60/temp.jpg
/Thank's
If I understand correctly, the difference between what you want and a standard Gantt chart is that the Gantt chart puts every project on its own line, but you want to compact the display so that long-finished projects don't continue to take up a row of blank space.
To get that "optimized function based on date" that figures out where on the Y-domain you can fit a project to keep the display compact, you're going to need to keep track of which projects are active at a given time, and loop through them to find out where you have room on your display for a new project.
Here's an algorithm you could implement. The results won't always be perfect (sometimes a small rectangle will end up taking up room in a space where a larger rectangle could have been positioned) but it should be much more compact than a standard Gantt chart.
Sort your projects by start date and work through them in that order, assigning y-positions to each.
As you work through your project list, keep a secondary array of "active" projects -- ones that have been started but not finished at the time you are looking. These will always be projects that you have already positioned on the graph, since you're positioning projects in order of start time.
For each project in your main array:
go through the active-project array (if it's not empty) and remove any projects that finished before the project you are plotting started (if you want padding between rectangles, require a certain minimum time to have passed in between);
sort the active-project array by the y-position you have already assigned to each project-rectangle;
scan through the active-project array, checking the y-position and height of each rectangle, to see if you have room to place the rectangle for your current project;
if you can't fit it in-between any of the currently active projects, set it's position to be above the last active project, and check whether the new position+height of this rectangle exceeds your previous maximum height;
either way, store the calculated y position (which will be in the same units as the variable you are using for rectangle height) in the project's data-object.
Now that you've set this project's position, add it to the active-project array and move on to the next project in your main array.
Once you have determined a relative y-position for each rectangle, set your y-scale domain according to the maximum height you used and draw the axis and rectangles.
You can look at this answer for some inspiration, although that example is more complicated than what you need.
I have a temperature line graph, and I want to draw a red vertical line when the two temperatures (surface temp and dew point) cross. So far what I do is I draw a vertical rectangle on top of my graph at places I calculated it crosses.
It works correctly, but there are a few downsides to this :
The line kind of stands out of the graph ... we can tell I added it later and not in the graph itself;
The pixels are hardcoded, if I change the graph width it might not be good (I could probably fix this, but still)
I would like a little tooltip when I highlight a line, but since it's a simple rectangle, it just sits there and is not dynamic at all.
What would be my best option to integrate this line better un my graphs?
Thanks!
plotLines are your best way to draw the line - http://api.highcharts.com/highcharts#xAxis.plotLines
Two things:
1) The difficult part will be calculating where the lines cross. if they do not cross at a data point, which they most likely won't, there will need to be some guesswork involved, as there is no value you can retrieve from the chart to tell you the axis value where they cross.
2) if you are using separate y axes for these two series, which I assume you must be since they are completely different units and scales, then the point where the lines cross will be COMPLETELY arbitrary and meaningless, as where they cross will be strictly a matter of how the scaling for each axis is set up, and the values have no actual correlation to each other.