I am looking into trying to stack completely different series/charts on top of each other but on the same chart. For instance I could have two charts stacked vertically and when I move the cross-hair on one, it will move on the other almost as if the charts are linked. As well, I'd when I zoom in one, it would trigger the other to zoom. Please see the image at the bottom I "doctored" to give you an idea of what I'm trying to accomplish.
Things I've tried:
creating two completely separate charts and stacking them.
This is the closest I've gotten to what I need but they are still separate entities so it won't work for what I need, cross-hairs/zooming/etc. all need to work as though the charts are linked/combined.
In the options I tried the "stacking" option.
this won't work because it "stacks" or groups data, I want to literally have two separate series that might not have anything in common with each other.
Rendering muliple y-axis.
the only issue with this is that it's overlapped data, I'd like it to be offset so we can see it in a stacked layout.
I'm pretty new to using this library so if any of my terminology or explanation doesn't sound right, please sound off and I'll elaborate.
Thanks everyone!
Related
I have lots of svg element containing each one a line chart. I'd like to display these charts at groups of four. If I understand well from the documentation, it'd be better to use a grid for this purpose since I can select position I want (single box of the grid) for a specific graph. Is it true, or is there another better way to do this?
NB: charts are built each one from different datasets and using d3.js and so javascript.
Thank you so much for the help.
If it's possible, I'd like you to show me a code snippet just to understand better.
Thank you again.
I'm hoping to make an application which shows multiple graphs but show them as stacked cards. There can be a button nearby to cycle through the cards, or the user can hover on one of the graph-cards to highlight it. I've used CanvasJS before and while it has stacked graphs, it doesn't have anything for stacked cards. I've searched quite a bit but all I've found are ways to make stacked graphs, but sort of like what CanvasJS already has. I found this code to make some stacked cards, but I couldn't integrate CanvasJS graphs into it.
Does anyone know any way by which I can have graphs stacked on top of one another?
It seems like it was more of an implementation issue, rather than framework. I found this code which works perfectly with my requirements.
I have a new requirement, that one page contains several highcharts.
And when I move mouse on one highchart, tooltips will be shown, and a guideline also will be shown. Maybe it calls trackball. In the same time, another highchart in this page, will also show its tooltips and guideline(trackball).
Just like this, http://jsfiddle.net/highcharts/nhVbs/,
but this is in one series.
Any one do such job before can give me some advise?
I only got one example for similar work.
http://vikinghammer.com/2012/02/02/connecting-highcharts-and-jqgrid-with-trigger-and-bind/
But not understand how he implement it.
When move the mouse to one line chart, two charts will all show the guidelines and tooltips.
Like this demonstrate.
I have been using KendoUI Dataviz for only a short time, and have found I am able to customize it in almost anyway to meet my needs except one. I have two different charts where certain series just happen to have more than one point with the same plots. (dynamic data) I am unable to see all of the tooltips for all of the markers (since they are on top of each other), which means I am also unable to use the seriesClick or seriesHover events on those that are hidden. I have searched Kendo's forums, Stackflow and even Google but can't find anything specifically on the unreachable issue. Kendo's forums mention hiding the tooltip and making a custom one, but I haven't found anything that addressed the fact that some series markers are just unreachable and I need to reach them to use those events. Does anyone have an idea on how I can reach all markers for the series?
I've not been able to figure out a way to show "hidden" data points. I've had to do something similar in the past, and used a custom tooltip template function. In the function I grab the category (x value in my scatter chart sample), and get all matching items from the datasource. Then just put together some sort of list/etc. and return that. You can always go super fancy and make a box with tabs and the whole nine yards to show each dataItem on that particular point.
See sample on jsbin
http://jsbin.com/ONuQUgiY/1/edit
I am trying to create a pie chart and am customizing the example here: http://raphaeljs.com/pie.html
I need to draw lines from the labels to the slices but IE is giving me trouble and I'm not sure what to do about overlapping lines and labels.
Has anyone done this before?
this maybe useful to you:
Overlapping issues can usually be solved by using:
a) ".toFront()" on the raphael element, that should appear in foreground
b) ".getBBox()" at your label and use its parameters to figure out the starting point.
those functions can be looked up in the raphaeljs reference.
.getBBox() should be a good way to start, when you try to connect elements. you can easily figure out its meassurements and use those values (x,y,width,height) to calculate the entry point of your path
that makes it easier to avoid any overlapping at all. but keep in mind the end SVG elements are directly placed within the dom and therefor are meant to work in layers.
overlapping / partially hiding elements often offer you a great animation potential and are not really a bad thing to work with.