Dynamically applying plot bands to a Highcharts graph - javascript

I'm outputting a line graph to my page using the Highcharts API and applying the following methods to it:
zoomType: 'x',
event.preventDefault(),
alert(event.xAxis.min) & alert(event.xAxis.max)
This gives the user the ability to highlight a portion of the chart, and have it output the start time and the end time they highlighted without zooming in.
This works great but now I need to literally highlight that section of the graph the user selected. I've been having a look at the xAxis.plotBands method detailed here:
http://api.highcharts.com/highcharts#xAxis.plotBands
xAxis.plotBands allows me to hard code a highlight into the chart but I'm trying to figure out if it's possible to apply plot bands on the fly. It's important that the chart doesn't reset because the user can dynamically add series to the chart as well, so if it resets, the user loses all the series they added. Anyone know if it's possible?

Yes, this can be done with xAxis[i].addPlotBand().

Related

Is there a way to show all values corresponding to a value on x-axis in the tooltip of Google Charts linechart?

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.

How can I use a checkbox to show or hide a graph that is inputed from a csv file?

So basically I have been working with some code to try and use a checkbox to hide/show a graph, the big issue is that the graph is made using dygraph and the graphs are made from a csv file's data therefore there is no specific line of code that the graph corresponds with. I am basically stuck because I really don't know how to get around this problem. I can go in to the website once the data is inputed and show/hide the graph that way however different file will have different amounts of data so I can't just do that every time.
When you create the graph, you specify a div that the graph should be drawn in. Can't you simply show/hide that div?

Add labels between two points in a line graph d3.js

I'm trying to add labels to different sections of a line graph using d3.js. I'm working with a dataset that needs to be labelled by the end user by assigning labels to different section of the graph. My current under use case is to build something like the following:
While I am able to create the line graph, and can guess that the areas can be added to the graph as brushes, I'm unable to get started with regard it.

Legend changes the chart order

I have a line chart using nvd3 as follows :
The issue happens when the legend is used to interact with chart. Since it uses the order of rendering to position each series, it can change the way information is displayed completely. For example, if i click on Blocked (disabling the other) then Requests (enabling it back). The result is as follows:
Which is not very nice.
Looking at the documentation and code I could not find many options on how to handle this issue.

Multiple brushes in dc.js graphs

I'm wondering whether there is some high level way of having more than one brush on a graph. Here's the problem:
I have a stacked bar chart where each bar represents one weekday and different metrics are stacked on top of one another (stacked line charts are not available yet as far as I know). Now I would like to let the user select the days to display (and the selection should propagate into the other graphs). Everything works great with the brush on, but if you want to choose Sunday, which is at the end of the graph, and Monday which is at the beginning, you can't do that using a single brush. Anybody knows of a way to add more brushes?
Alternatively I'm looking for a way to add a click event listener that would "activate" the day you click on in a similar way like a ring chart section would work.
Thanks a lot for your ideas,
Renra
You could try using an ordinal x axis instead of a linear one. The default behavior for ordinal bar charts is to click to select/deselect bars instead of range selection.
That's chart.x(d3.scale.ordinal()).xUnits(dc.units.ordinal). If you are using dc 1.7.1 of earlier, you may have to specify the domain by d3.scale.ordinal().domain([’Monday',...])

Categories

Resources