I'm trying http://bl.ocks.org/mbostock/9490516 with some modifications.
I found this: D3js - adding yaxis to small multiples chart yields no or overlapped values
But it doesn't really help me.
What I would like is:
an x axis at the top of my page
an x axis at the bottom of the page
y axis for each chart with different domains
So far, I've been able to add x axis to each individual graph, but that's not what I want.
I'm able to add y axis to individual graphs, but the domain for all are the same.
Related
In at least amCharts 4, the chart widths seem to be dependent on the length (e.g., the number of digits) of the valueAxis labels. For example, take the charts in this codepen. With the top chart labels set at a precision of 8 and the bottom chart having a max of 5 digits (e.g., "10,000" as the max), the width of the bottom chart can be made equal to the width of the top chart by including the following:
valueAxis2.marginLeft = "32px";
However, if the number of digits in the bottom chart's valueAxis labels changes, then the left margin is no longer correct. For example, uncomment line 22 to see this. How can the chart widths be made equal independently of the valueAxis label length?
This answer discusses a solution for amCharts 3, but there doesn't seem to be a minMarginLeft property in amCharts 4.
Good question. I highly recommend checking out our Working with Containers guide. The last section illustrates the pre-defined Containers for XYCharts.
Any y axes rendered on the left will be in the chart.leftAxesContainer, so you can set those to the same width on each chart, e.g.
// Top chart's left y axis is around 96px (checked via its measuredWidth)
chart1.leftAxesContainer.width = 100;
chart2.leftAxesContainer.width = 100;
Here's a fork:
https://codepen.io/team/amcharts/pen/a0a990fa6420b446508770ccae40ca7d
Screenshot (no playing with margins required!):
I'm attempting to plot a graph using d3js. I wanted to keep everything proportional, so I have been using the 'viewBox' attribute on my svg element, like this:
svg.attr("viewBox", "-5 -5 10 10")
Everything worked great until I tried to add an axis. When I add an axis, the scale is completely messed up and looks wrong. I've simplified it down to this jsfiddle:
http://jsfiddle.net/gq6tykwL/5/
The axis just displays as a giant black bar, and if you inspect those html elements you will see that they are tick marks that are huge..
If I change my viewbox to mirror the width/height of the svg, like this:
svg.attr("viewBox", "0 0 500 500")
Then the axis appears as I would expect, however my graph won't draw at the appropriate scale any longer. Jsfiddle here:
http://jsfiddle.net/rdua3ncp/
Can someone explain what I'm doing wrong? Or should I just take another approach on the axis?
I would like to implement a scatterplot over timeline using plotly.js, similar to the image below.
Plotly takes in x and y values to plot the chart. But I will be plotting x-values(time) without any y-values. Is it possible to do so ? Or can I generate random values for y-axis ? Any suggestion or idea would be great.
i am using c3.js to plot 3 set of data on y axis and time stamp on x axis. Is there any way to avoid same values overlapping on one another. Need to display all 3 set of data irrespective of same values. Thanks in advance
I've been working on a similar stacked bar chart to that in the example here https://bl.ocks.org/mbostock/1134768 however running d3 v4 as shown in the fiddle here https://jsfiddle.net/z75L7cfz/7/
However as you can see in the fiddle, I have a problem that the last element in the graph extends off the end of the axis. I mean I guess this makes sense. But I'm not sure how to make this show in the graph and ensure all the elements fit into the supplied width of the graph.
I assume I need to modify the domain of the x-axis which is currently
x.domain(d3.extent(data, function(d) { return d.Date; }));
But other than somehow manually adding an extra data point with no data in but the subsequent date I'm not sure how to manage this. If anyone could supply any pointers it would be hugely appreciated!
For bar charts, it is best to use band scale. It calculates the bar sizes, location and padding.
var x = d3.scaleBand()
.range([0, width])
.padding(0.05);
Here is the updated fiddle:
https://jsfiddle.net/dtb02eze/2/
Actually, there is nothing wrong with the code per se. The problem here is the very concept of a time scale, and the use of a bar chart with such scale.
If you look closely in your fiddle, each bar starts exactly where it should start, that is, the x value of each bar corresponds to the temporal value in the x axis. But a bar has a width, and here lies the problem: when you set the width to 18px (or any other value), the bar will overflow the time scale. That's normal and expected.
A time scale should be used with dots, where every dot (adimentional) sits exactly in the correct position of the time scale, or with a line, which is simply a path connecting the dots.
Having said all that, you have two options:
Use an ordinal scale. A bar chart is not supposed to use a time scale, and a time scale is not supposed to be used with a bar chart. Bostock's code, for instance, uses an ordinal scale:
var x = d3.scale.ordinal()
You can use scaleOrdinal or, better yet, scaleBand.
If you want to stick to the time scale, change your chart to a line chart. Technically speaking, a line chart is the best option to visualize a trend in data over intervals of time.