Shield UI Pie chart hierarchical functionality - javascript

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.

Related

Market Depth chart using react-stockchart?

Is it somehow possible to make depth chart as in the following image using react-stockchart library.
Any suggestions is welcome even if it is achievable by using any other charting library in react. This chart is using step area chart. But solution or idea using area chart would also be great.
Image Reference: https://www.gdax.com/trade/BTC-USD
Solution to this is multi series area chart. Here one series of data is related to sell orders and another series of data is related to buy orders(eg. the green chart resembles the data related to buy order and the red chart resembles the data related to sell orders.). In case they overlap the orders should be matched and executed.

Multiple charts sharing the same x-axis in Google Charts

I have many signals recorded and i want to show them on a Chart using Google Charts. These signals share the same x-axis (time) but have very wide data range for y-axis (value). Some of them go from 0 to 10, while some others go from 1000 to 20000. Therefore, it's impossible to display them in the same chart.
Yes, You can use the vAxes property, to show them in the same chart but it limits the graph to 2 signals. And I have more than 2.
Therefore i thought about something like this:
Many charts sharing the same X axis, but with dedicated Y axis. Also, the crosshair is only one for all the charts.
I've searched the Google Chart documentation, but i couldn't find anything like that.
The question is, is it possible to do it with Google Chart? Is there a function or option to do that?
We are working on object oriented solution for charts and we are thinking to make it open source. You can have a look and you can use chart skelton to fulfill your needs. Here is the link
(click on the first chart)
http://grafitome.github.io/advanced-charts.html#
I'm not biased here, but want to recommend plottable.js. Have a look at their examples section for the Synchronized Charts and Finance, as well as their tutorials section, specifically "Building flexible layouts". Their API provides a high degree of customization.

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.

Javascript charting API that support multiple grouped data

Can anyone recommend an API that will support multiple groupings in the data? What I mean by that is along the X axis I need to have a group, which contains a number of groups, which each contain a further number of groups which then contain 3 data items.
I have spent hours looking but at the moment I cant seem to find anything that can show this sort of data.
To try and further explain what it is I need to show in case it isnt very clear imagine I wanted to show County, for each County I want to show a number of schools and for each school two tests (Math, English) and then for each test at each school the male and female average test score.
So far I have only been able to find api's that support standard column charts with a single X axis label.
Thanks
My recommendation: keep it simple. The exact chart you're looking for probably doesn't exist because it's so specific. Pick something that comes close.
You can always do the grouping visually, by colour. I've found Google Charts API to be quite usable. If you use the dynamic JavaScript variant you can make charts with as many data points as you like, of any dimension.

Summing graph data in highcharts

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.

Categories

Resources