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.
Related
I need to be able to draw links between the circles in a circle pack layout, like {source: i, target: j}. I've seen some questions about how to combine this layout with the force layout that made me think It could be a way to achieve this but I haven't had any luck on that path, also what I need is something completely static. Thank you in advance for any suggestions.
I finally could draw lines between nodes by appending them to the svg and calculating each line position based on the radius of the nodes that each line were to connect, but the problem was that the pack layout that I'm using is zoomable, so when I tried to zoom by clicking the lines neither translate nor re-sized (of course, since there was no code performing such things), so I tried to implement a translation function for the lines so they would move along with the zoom, then I saw that it would take some serious geometry to achieve this, so since I'm a lazy programmer and not at all experienced with d3 I tried to come with something more simple... at last I decided to represent the links between the nodes with a different approach (without lines), I used the "mouseover" event so when the pointer is over a node it will highlight (changed circle stroke attribute color and width) the nodes connected to it. This way I achieved my goal and the view looks a lot cleaner without all the lines crossing over it (they were a lot). I know that some may think that this does not answer the original question, and I'm sure that this can be achieved by someone with more experience (and time and patience) using lines and implementing the right calculation, but in my case this solution solves my problem and maybe it could be of help to others.
I'm working on a project where we have some Highcharts graphs populated from database; one of them is an scatter graph and we need to surround the points placed on the outside area of the graph.
We need a graph like this but we need the area surrounding the outside points of the scatter; is there a easy way to do this with Highcharts?
We need it to work on IE11 (client's specs).
We can do it with a new polygon serie to make by getting it from codebehind or from database, but that may take too much development time and will slow down the queries. So we need to know if there is an easier way to do it via Highcharts or Javascript
Thanks in advance.
I am not very familiar with Highcharts, but i could not find such functionality in their API. However there is an easy algorithm to solve your problem.
All you need is to have an array containing the border elements and connect the points from this list like here.
Finding those points is not too hard. Compute the linear equation between two extreme points (like the one on the very top and very right). The resulting formula looks like f(x) = m*x + b
Now you check for all points within that x-range if their y-coordinate is higher than this line (or lower when doing it with the point on the very bottom). If so just add them to your border array and continue with the other extreme points.
I'm looking at plotting a scatterplot with a large number of points (500,000 and upwards).
Currently, we're doing this in Python with Matplotlib. It plots the points, and it provides controls to pan and zoom. I don't believe it provides any clustering or points, it just plots them all - doesn't make much sense at the zoomed out view, I suppose, but you can zoom in and they're all there.
I was looking at doing the chart in JavaScript, to make it a bit easier to distribute. I was looking at D3.js, to see if something similar is feasible there. I did find this example of a basic scatterplot:
http://bl.ocks.org/mbostock/3887118
Firstly, would you be able to plot that number of points? (500,000 and upwards) I was under the impression you couldn't due to the overhead of all the DOM objects? Are there ways around this?
Secondly, is there any kind of clustering available, either a library or even just an example of this being done in D3.js?
Thirdly, if anybody knows any good examples of pan/zoom functionality and clustering, or even just a packaged JS library that handles it, that would be awesome.
Fourth, it would be also nice to have click handlers for each point - and to display some text either in a overlay, or even just in a separate window. Any thoughts on this?
Can you draw half a million points with D3? Sure, but not with SVG. You'll have to use canvas (here's a simple example with 10,000 points that includes brush-based selection: http://bl.ocks.org/emeeks/306e64e0d687a4374bcd) and that means that you no longer have individual elements to assign click handlers to. You will not be able to render half a million points with SVG, because all those DOM elements will choke your interface, as you mentioned.
D3 does include quadtree support that can be leveraged for clustering. It's in use in the above example to speed up search but you could use it to nest elements in proximity at certain scales.
Ultimately, your choices are:
1) Some other library/custom implementation that renders in canvas and polls the mouse position to give you the data element rendered at that point.
2) A sophisticated custom D3 approach that nests elements in proximity and only renders SVG elements appropriate at the zoom level and canvas position (pan) you're at.
Yes, D3.js can be made to work with million scale data with two things:
pre-rendering on the server side. For more see here: https://mango-is.com/blog/engineering/pre-render-d3-js-charts-at-server-side/
By aggregating (or clustering) part of the data so that user can interact and expand the graph if need be. For this use collapsible nodes if you can (http://bl.ocks.org/mbostock/1062288).
Also avoid using force layout. It takes time to settle and converge to a stable positioning.
For clustering libraries, I would pick one up off the shelf. I would choose the scikits library from python, there are many in JavaScript but they are not very robust as they mostly cover k-means or hierarchical clustering. I would precalculate the coordinates using scikits by clustering and then render it using D3.
D3 handles Pan and zoom. Again click handlers and text display are available in D3. (http://bl.ocks.org/robschmuecker/7880033)
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!
I've an application that based on some values from different inputs (temperature, humidity...), show different charts.So far I've done that with JpGraph, and I found it pretty easy to do. You can add a legend easily, and plot as many functions as you want. You can also fix the scale easily. Regardless of that, I would like to have some interactivity with the user (I just want that one the user clicks on a point of the graph, the X and Y value are shown). That is not easy to do with JpGraph because it is just a PNG image.
I was recommended to use Raphael JS library, and I've been reading to the documentation (Raphael JS Reference), but I don't see that what I want to do (line charts) is that simple.
So, I am asking, to both Jpgraph users and Raphael JS users if they had had experience with this, and if there is any good tutorial online (I have not able to find one that works with line charts). The kind of graphs I'm drawing now are like this: JpGraph Example
Some other options:
D3.js (SVG)
JSXGraph (SVG and VML for IE)
Protovis (SVG)
There is a chart plugin for Raphael. It supports line charts. The documentation is certainly lacking - but there is always the source.
Answering myself. After doing some research, I found this one pretty interesting for doing line charts:Grafico