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.
Related
I basically want to have an area range chart similar to what Highcharts is capable of: https://www.highcharts.com/demo/arearange
I looked at the examples and documentation but i am still not sure if area range charts are possible.
This is about grouping multiple data points into one. If you are zoomed in you see an ordinary line chart. If you zoom out and the chart no longer can show each data point separately, it basically shows a range of min/max values for a date range per horizontal pixel.
Is this possible with vega and how would the spec look like?
Edit
Made a first working prototype
Edit 2
Found an example in the documentation of vega-lite
Edit 3
Combination of area range with master/detail
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 am displaying some visualizations using Google Charts.
There is great variance in the data so some large numbers co-exist with small ones. In the case of a Column Chart this results in a scaling whereby some of the small values probably compute to less than one pixel of height and are thus invisible.
As a result there is no area to hover above, so I cannot show a tooltip.
Is anyone aware of a way to show a tooltip in this situation?
How about the white space above columns? Is there a way to include that as part of the hover region? I cannot find info about this in the Google Charts documentation so it is unlikely, but maybe someone is aware of a way...
By using the option focusTarget: 'category', you can achieve this. It's mainly used for displaying multiple values from the same "grouping" at the hAxis, but it fulfills your needs for this as well.
Example
I'm trying to develop a Gantt chart to display a certain list of grouped activities. In the image below I have attached the sample set of data that is used to generate my Gantt chart.
I have used the Gantt chart provided in this link (http://yukon-admin.tzdthemes.com/html/plugins-gantt_chart.html) and modified it so that I can display multiple activities per group. [In here they only let you add one activity per group].
This is the Gantt chart from the template,
Modified Gantt chart based on my requirement,
Now I want to display my activities one after the other, something similar to what would happen when you apply float:left,(float:left is not working in this situation).
This is how I want to display my activities, I can achieve this by setting the CSS property to absolute but the lines stay static and I can't scroll my gantt chart to see the other activities.
I see that even though a width is defined to that particular div, it is taking up the whole width of its container div.That's why the divs are stacked one below the other.
What can I do to get the lines displayed one beside the other and not one below the other? Any help would be appreciated.
Thanks in advance. :)
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',...])