I'm using angular nv-d3 and while making a chart, I'd like to have a specific point on the graph be highlighted.
My graph looks like:
I'm getting the data by consuming a rest response, my graphs will have 1 to 3 lines, and the each line is guaranteed to have the date point that I will be highlighting.
I could also live with just having a straight vertical line through that date, I just want a way to differentiate that specific date in the rest of the chart.
Couldn't find anything in the docs about this, and most of the methods I've found to do this use d3.select and jQuery, but I'm not sure if that will work with angular.
Related
I have a simple linechart with 2 lines. On hover, I would like to display both y-values in the tooltip that appears. I know I can accomplish this by writing a Javascript function that creates a custom tooltip for every x-value on the graph, but this seems so redundant to do, especially when the graph gets large. Since Google Chart is able to auto-generate the standard tooltip which contain both the x and y-value I feel like there should be an option to do this with built-in tools, is there?
Probably setting focusTarget to 'category' will do the trick.
See here for an example that uses it.
I'm trying to find a way to dynamically scale a chart's y-axis so the values are shown in single digits, with a exponential denotation at the top, effectively changing this:
To this:
Note, this works automatically in e.g. Matlab/Matplotlib/etc., but I'm struggling to find a solution with the web plotting frameworks (maybe my search language is wrong)... I know D3.js is not a charting library, but I'd be open to a solution that works with the frontend DC.js or the backend D3.js
Edit based on #Gordon's answer below, I get the following graph using this
chart.yAxis().tickFormat(d3.format('.1e'));
Is it somehow possible to move all of the e+6 to the top? Or do I need to write a custom scaling function and insert a separate text box myself?
In dc.js, the axes are straight from d3-axis.
Access them using chart.xAxis() and chart.yAxis(), and to reduce confusion, do this in a separate statement from the rest of your chart initialization.
You can use axis.tickFormat to control how the tick text is formatted.
You can use d3.format to do automatic formatting. It seems like exponent or SI notation might suit what you're doing, although it's not exactly the same as having the exponent in a separate text element like in your screenshot.
Putting it together, this is pretty close
chart.yAxis().tickFormat(d3.format('.1e'))
The tick formatting question comes up a lot. I wonder where we could put this information so that people don't have to ask.
Anyone know if there is a way to hide the view finder, while still having the chart display a subset of the data? If I filter the data before sending it to the chart, the chart lines are skewed instead of contiguous.
I'm trying to filter on a date range subset of the data, while keeping the lines contiguous with the entire set of data.
I noticed in the source, on line 362, they filter on !d.disabled. I'm wondering if I can hook into that somehow. Does anyone know the proper usage pattern for this?
The view finder is actually Square's Crossfilter found here [0] if you wanted to browse the source and view more documentation.
However, I would just set the display attribute to none in CSS of the svg containing the crossfilter and be done with it.
[0] http://square.github.io/crossfilter/
I am using the Highstock library (not Highcharts) and I'm running into an issue I'm sure can be solved.
I need to add some dynamic information to each point on a series. Highstock has a built in tooltip that displays limited information about a point onHover.
I have tried adding a new property to the point at the time of creation; however, this new property is not available in the tooltip.
What's interesting is this exact functionality is available in the Highcharts library, but I would like to stick with Highstock if at all possible.
Here is a fiddle showing the desired result in Highcharts.
I have started looking around inside the Highstock javascript file looking for a way to expand the properties of the points that actually get added to the series and I have had some limited success.
I have added the property to the block beginning on line 8319 and again on ll320. This does seem to work, but only when the chart is zoomed in... very odd.
Has anyone tried this before, or have some insight on what I may be overlooking?
You can simply add own custom properties, then in tooltip you have access to them via:
this.points[x].point.options.your_property;
See: http://jsfiddle.net/dWDE6/199/
There is only one limitations which you should be aware of: when dataGrouping is affected all points are created as new one, so you don't have access to that custom properties.
I've been using the chart API to draw a cross sectional profile of a landmass, using a slightly modified version of the chart example shown here.
however, I now need to draw a line of sight between the two end points, as well as a Fresnel(1) zone between the two. can this be done through the interactive chart API? or is there a better way to get this done?
also, I would like to 'select' the first and last entries to display their elevation, however my code doesn't appear to do anything:
Chart.setSelection([{row:0,column:null},{row:Results.length - 1, column:null}]);
After finding some other problems with the visualization API, I just gave up and did the whole thing using Raphael instead, works way better :D
EDIT: didn't know you couldn't answer your own posts within two days :| kinda of annoying since I've spent like a week straight trying to fandangle the bleeding chart -.-