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',...])
Related
I was developing a solution for another question here on Stack Overflow (see Highcharts : selection) that has some simple slider elements (using input type="range") to change the categories shown in a column chart. Whenever the user changes the range in either slider element, the chart is redrawn using setExtremes().
I noticed that, in some instances, some of the x-axis labels disappeared, even when I moved the sliders back to their original positions. I've tinkered with a number of x-axis settings, including minPadding, startOnTick, and tickInterval, and none of them seem to solve "The Case of the Missing Labels."
The first screenshot below shows the chart when it's first loaded. All of the x-axis labels are present.
The second screenshot below shows the chart when I change one of the sliders. Some of the x-axis labels are now missing. It looks like they're being staggered.
Here's where the plot thickens: if I adjust the sliders to some other values, all of the labels come back:
Here's the fiddle I developed so you can see a live example of this behavior: https://jsfiddle.net/brightmatrix/uvat8u05/
I'm curious to know why this is happening, and what settings I could use to ensure that all x-axis labels are shown, regardless of what values the user chooses in the sliders.
Thank you very much!
Update: The responses from both Max Uppenkamp and Grzegorz Blachliński are valid and helpful solutions. What I also discovered by chance was that explicitly setting the slider values to integers using parseInt() solved this issue as well. It also helps in comparing both values to make sure a user doesn't choose an end date that is earlier than the start date.
This seems to be intended behavior of Highcharts, however inconsistent it may be.
According to this this should be fixed in current versions of Highcharts, but you might as well try this tick formatter solution.
Edit: If the above doesn't work for you, you might be able to solve the issue by rotating your labels:
http://www.highcharts.com/demo/column-rotated-labels/grid
as a part of an app that I'm developing, I am looking for an open source pie chart which can be manipulated on mobiles effectively.
I've found great pie charts such as Flot, jqPlot, HighCharts, etc. however, they only show configured values. While I don't need slice animations of click events, I do need a pie chart with the capability of changing its values from the chart itself, in a way similar to this.
The point is that I want to force a user to have his values sum up at 100 by favoring a slice and increasing its size at the price of lowering another slice.
Thanks in advance.
Chart.js is what you're looking for. If you have a look on the bottom right of the home page you'll see interactivity. You can trigger events when an element is clicked that will resize the chart as long as you are willing to do some javascript yourself.
I have a simple dashboard with six div's each containing a highstocks chart. Each of them currently has a zoom picker (1m, 3m, 6m, YTD etc.) and a range picker below it.
Is it possible to have a single, separate range and zoom picker that will affect all charts?
Is it possible to synchronise zoom/range across all charts? I.e. keep the zoom/range pickers on each chart but once one is changed, all other ones are changed too.
yes it is possible,
It is achievable with highcharts itself. Render navigator chart and other charts in different divs. There is an example given here in highcharts demos called master-detail chart for your ref.
you an have your own date range selector and apply the selected dates using the setExtremes method.
In this way you can have a look and feel near to a highstock while using highcharts. But the total number of points per chart may effect the performance.
--EDIT--
you can do that with highstocks as well use afterSetExtremes method and manually set the extremes of all other charts when the extremes of one chart(the one with navigator and rangeSelctor) is changed.
I have tried using all sorts of combinations of tickInterval, tickPixelInterval label formatter and tickPositioner and I haven't been able to solve this issue.
I have a chart builder that pulls in different feeds and allows the user to modify the date range of those feeds before shooting this data into highcharts and spitting out the chart.
The problem is that some of the time, the first and/or last dates get cut off. Here is an example:
Without adjusting the margins of the chart (which causes the chart to take up less space), how do I prevent this from happening?
If I was able to determine the pixel location of the ticks and their labels, I could in theory, hide the specific ticks and their corresponding labels which were located outside the graph / cut off. Thoughts?
Without looking at your code - there are a few things you can do.
Rotate your labels
Play around with the x/y axis labels
Align them to the right
Hopefully one of these would help your cause.
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().