I have 2 line chart shown side by side which has 5 lines being plotted on each chart. So there are 5 legend for each of them. Unchecking each legend would hide the respective line specific to legend and optimize(May be zooming or scale) the chart with new scale measurement.
This is default functionality of legend. What i am looking for is ONLY just show/hide respective line. No other functionality like zoom/scale so that user does get distracted by zooming as s/he is comparing 2 charts side by side. I hunted documentation but did not find these feature on/off information.
Force X
List of numbers to Force into the X scale (ie. 0, or a max / min, etc.). The numbers tell the d3.js the values to use in the scale, rather than d3.js determining the values.
Force Y
List of numbers to Force into the Y scale (ie. 0, or a max / min, etc.). The numbers tell the d3.js the values to use in the scale, rather than d3.js determining the values.
Datatype: Array of Numbers (i.e. [0, 50]
Reference: http://cmaurer.github.io/angularjs-nvd3-directives/line.chart.html
Related
If one examines this block:
https://bl.ocks.org/mbostock/8d2112a115ad95f4a6848001389182fb
The gridlines are in increments of 20. However the radius of each gridline does not appear to be equal as it scales up:
I'm guessing there is some geometric justification for this, but that's not what I'm after for my chart. I only want aesthetics, I need the gridline circles to be equidistant from each other.
Question
Using Bostock's radial scale script as seen in the above block, is there any way to adjust the scaling of the radii? I want the scaling to be equidistant.
The only thing you need is to change this...
var y = d3.scaleRadial()
... for this:
var y = d3.scaleLinear()
Here is the bl.ocks with that change only: https://bl.ocks.org/GerardoFurtado/0a0b22d15c4e715e4c748335e37330fb/1670bbcdfdcbed6b6a0ae2a56d5f153570d969d1
PS: There is indeed a geometrical explanation for this: a circle with radius 2r has an area four times bigger than a circle with a radius r. That's why we always (at least in truthful charts) scale the circle's radius to the square root of the encoded datum. Well, you mentioned that "I only want aesthetics". As a data visualisation specialist/enthusiast who happens to be a D3 programmer, not the other way around, I suggest you reconsider your approach and keep the radial scale. Charts that prioritise aesthetics over information are normally bad charts, and charts that impose aesthetics ignoring information are simply untruthful charts.
Im working on this project where I have a big amount of data. It's segmented by categories Soybean, MA20, MA50, MA100, BBW_2 and date.
What I've done so far was to use a code where you can filter and zoom in the data. The result is
Selecting Soybean:
Selecting MA50:
Selecting BBW_2 !HERE IS THE PROBLEM! :
The problem is when BBW_2 is selected. You can see an orange line touching the X axis. This is BBW_2. It has it's Y' axis max value of 2, which is infinitely smaller than 1200, so the scale doesn't work as expected. This doesn't occur with the other categories because they have similar Y' axis values.
What Do I Want to Achieve?
I want to plot all the categories that the user selects appending the selected categories`generated linechart to the same X axis but with different Y scales. One example of what it would look like is this one: .
What I've tried:
Change the Y scale by changing it when the user selects BBW_2.
Plot in different SVG`s. This doesnt work great because it loses the zooming effect.
The code:
https://jsfiddle.net/ldepaula/3q1k9hyj/1/
I am using highchairs 3.0 to create a graph that has N Boxes on it. So far so good. However, one of the user desires is to draw a few plotLines (based on values on the Yaxis) for each Box on the graph. The catch is that the information is different for each of the boxes, so they want the plotLine to just extend from the start of the box on the left side (x-axis basis) to the right of the single box.
Highchairs by default draws the y-axis plotLines (and plotBands, looked at those too) all the way from left to right, causing a very chaotic chart indeed!
Is there a way to limit the length (start / end on the x-axis I guess) of a plotLine in a box plot to just the width of the box?? I guess I basically want to overlay lines onto the area of each Box on the graph.
Thanks!
The best way that I have found to do this is by extending the marker symbol types to create a horizontal line.
Use this as the marker symbol type for a scatter series to accomplish what you're looking for.
Highcharts.Renderer.prototype.symbols.hline = function(x, y, width, height) {
return ['M',x ,y + height / 2,'L',x+width,y + width / 2];
};
Example:
http://jsfiddle.net/jlbriggs/m85yv3aq/
Required inputs of: radius, lineWidth, color
((also a useful way to build bullet charts:
http://jsfiddle.net/jlbriggs/UGs2E/
))
I have a highcharts chart that I need to plot but which has lines which can go back on themselves on the X Axis.
e.g. jsfiddle example
My problem isn't that I can't plot it but rather the series tooltips don't display correctly.
If you zoom right in to individual points they seem ok, but not at normal zoom level.
E.g. if you scan your mouse across the series from right to left it doesn't want to show you the tooltip on x Value 1, intead it jumps to the second set of values on x value 2.
I've changed the tooltips to being not shared:
tooltip: {
shared: false,
},
but this has made little difference, apart from now it seems to work when zoomed in, but I suspect this is only because there are only one set of x Axis values visible.
Does anybody know how it is possible to configure Highcharts to allow for series where the x values aren't sorted either ascending or descending as I can't find anything in the documentation.
From the API documentation:
Note that line series and derived types like spline and area, require
data to be sorted by X because it interpolates mouse coordinates for
the tooltip. Column and scatter series, where each point has its own
mouse event, does not require sorting.
So change your series to type: 'scatter' with a lineWidth > 0. Here's an updated fiddle.
I have a candleStick and Column(volume) chart. I want the user to pick the interval (1m, 3m, 5m, 15m) etc.
The problem i am having is i cannot correctly set the point padding in pixels so the spacing will either vary between the different intervals (pointPadding is represented as a percent of the interval width on the axis). This screws up the chart as you change intervals.
As an additional problem, if highcharts own datagrouping calculates the total points in the plotArea based on the width of the plot (in pixels) and the width of the points. If this is off by one pixel my volume/column chart loses it's last points depending on how it determines the grouping.
It is strange because setting the column and candle pixelPoint widths the same for each gives different results as well.