Summing graph data in highcharts - javascript

I have a highcharts line graph that shows sales data. Is there a way to sum up the data for a selected period of time? For example, if I plot daily sales reports, to be able to highlight and sum up one week of that?

What you're describing is not a native feature of highcharts. You can get a series from the chart object and perform the calculations you want on it individually, or have the tooltips or legends display the sum over the whole series. But it's not natively possible to highlight only part of a series and they provide no convenience methods for what you're describing.
If you're satisfied with summing over a whole series, I would use the legendFormatter hook and show the series sum as part of the legend. If it needs to be a subset of the series you'll need to write it yourself, possibly using the hover event for series to start the event.

Related

Column behind column highchart

So just like highcharts have the basic area graph i.e. one area graph behind the another I want to have multi column graphs in which one series will be exactly behind the other series and will be visible through some transparency.
Currently highcharts have stacked column graphs but in those one series is either on the top of other series or is beside them.
I hope there must be some configuration available for that.
Yes, you can do it by setting grouping: false in the plotOptions.
Updated fiddle:
http://jsfiddle.net/jlbriggs/r8vaL7p8/
However, this is - generally speaking - a really bad way to show data, that adds unnecessary complexity and obfuscation of the data for the user.
FWIW.

multiple graphs for kendo UI

I am using multiple series for scatter graph in kendo(each series represent one attribute). Since every series has multiple ranges, hence I am required to NOT use multiple series instead draw each graph separately and show in the same window. Is there any option provided for the same?
Ex:
Please see the below URL:
http://demos.telerik.com/kendo-ui/scatter-charts/scatter-line
I have the same requirement as above, except the 3 graphs '0.8C', 1.8C' and '3.1C' have to be drawn as separate graphs(separate X and Y axis) but should be displayed in the same window? Is it possible? Any response will be highly appreciated.
Edit: I found one image(via google) to represent what I intend to say:

Multiple charts in separate divs, single range and zoom picker

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.

Shield UI Pie chart hierarchical functionality

I have a question regarding ShieldUI pie chart. What I need is to provide following functionality on a web page. Initially a pie chart will represent some data. When user clicks on a slice
I need that slice’s compound data to be broken down taking up the whole chart. Let’s give an example with sales volumes. Initially we have the sales volumes for all the four quarters of the year. Than the user clicks on the first quarter slice. And it divides into let’s say months, or weeks. All that data I need to take up the whole chart. In other words in need some sort of multi dimensional data zooming.
I searched for some sort of hierarchical pie charts, but what they do is to show all the data a once, which is not quite I really need.
Looking at what you need it might be not the chart itself, but the relation of multiple charts that provide the functionality you want.
You may take a look at this answer:
Linking graphs of two Shield UI Charts
The number of related and subordinate charts will be equal to the data depth you have. For instance if you have 3 levels- quarters, weeks and days, you will have 3 related chart. The users will first click on the quarter slice, than on the week.
You could even more fully match the functional behavior needed by using one container for rendering all the charts to. There is however one disadvantage that you will need a button or a link to provide users the possibility to return to the top level.

d3 transition between time groupings

I can't seem to find a simple example where a chart can easily bounce between time grouping levels. Say I have daily data, and I want the ability to display this data on a chart at different levels of aggregation (daily, weekly, monthly).
Is there a good way to do this with D3 without a lot of processing (removing all rects, and replacing with new rects grouped at a different level)?
d3 has a general update pattern that you should use for this case.
The convention is to have two functions, one to setup the visualization, and another to take data and update the visualization.
The update function takes in the new data, binds it, updates existing svg's (rects in your case) and then adds or removes objects as necessary.
Mike Bostock has a great 3 part series explaining this which you can find here: https://twitter.com/mbostock/status/252496768267333632
Since it's time series data, have you considered a line/area chart with brushing? You could add UI components to dynamically set the brush filter to certain date ranges.

Categories

Resources