I am looking for some sort of a free JavaScript/JQuery graphing library that has a lot of scatter plot functionality. Ultimately, I want to link the plot up with a SharePoint list and drop it in a collaboration site; in such a way it will dynamically update.
My difficulty is that I want a scatter plot where I can change the x-axis and y-axis values to strings (i.e.; x-axis employee names, and y-axis proposal names).
I looked at a whole bunch of libraries (i.e.; flot, Dojox, most of the other options in this thread JavaScript Chart Library), but cannot find this funcitonality in free software (pretty sure Fusion Charts has it if you pay).
I also realize what I am creating (a scatterplot with fixed grid employee & proposal name values) is basically just a chart... however there's nothing--to my knowledge--that will allow me to make a dyanmically updating chart.
Can anyone offer any library tips, or advice? I am not experienced enough to know of any "work arounds" for this problem.
jqPlot can do it: jqPlot Home
Scatterplot Examples
Related
Hi I'm just getting into Data Visualization and D3 and I'm trying to make a diagram that conveys the relationships between a group of people and I was wondering if I should use a Chord Diagram layout or a Hierarchal Bundling layout?
I like the look of the edges in Hierarchal Bundling layout but I really don't have an Hierarchy. Also Im not sure how the bundling works.
Can I make a chord layout in D3 with just strokes and not fills?
Here's a list of resources that can help you choose the right visualization technique for your data:
How to design Charts and Graphs
Guide to Visual Communication
Visualization Cheatseet by Tom MacWright
A Tour through the Visualization Zoo by Jeffrey Heer, Michael Bostock, and Vadim Ogievetsky
if you have number of people plototed against their attributes, then parallel plotting is the best option. In parallel Plotting you can compare the feature of 1 perso with another on the same chart.
Here are the two links that will help you in creating parallel coordinates:
parallel chart 1 with all the capability making use of 1 library`
The famous chart directory blocks.org
I am trying to make a dynamic graph something like as below:
Y-axis gives no. of users and x axis date range(For continuous graph )
x axis gives release of an algo on that date.(For discontinued graph)
I tried combined charts of highchart this and looked in google charts library.
Is there any way by how i can either directly generate a similar chart or merge two chart types in to one? Preferably using high charts or google graphs.
I guess we can merge two highcharts in to one but I am not very sure about it, also if we can Iam not sure how to do that.
Any help is appreciated.
Thanks
I am aware that you said "Preferably using high charts or google graphs", but I want to point out that this can be done very easily in C3.js using the "types" parameter to specify the graph type for each data item.
Demo: http://c3js.org/samples/chart_combination.html
I would suggest using plot bands to indicate release dates and types. You can dynamically add them using the addPlotBand() method (see http://api.highcharts.com/highcharts#Axis.addPlotBand). They would then overlay your "run of the mill" line chart showing number of users over time.
Assuming you have data that can distinguish between the release types, you could write code that adds a plot band of the desired color at the specific points on the x-axis.
I'd suggest making the plot bands have a from and to value thin enough (say, one interval or one date's worth) so it shows up as the thin stripes in your example.
You'd need to add a manual legend to show users what those colors mean, since plot bands wouldn't automatically show up in a Highcharts legend.
I hope this helps!
I'm currently working on building a charting web application, and I've chosen dygraphs for my time series data (Two weeks of data at an hourly level, if anyone finds this information relevant). On the same page, I also have a couple of customized d3.js charts that pull metrics from the same database as the trendline.
I want to know if I will be able to link the selection on my dygraph line (Supposing I zoom in on 3 hours worth of data, i.e., 3 rows) - to my d3 charts, so that the data in the d3 charts also get filtered down to the date range chosen by zooming in?
I'm quite the amateur here, and apologize if my question seems vague, but any sense of direction would be helpful.
I'm guessing I should be able to do this by modifying some class in the dygraphs source code, or reference the same from my d3 chart.
Thanks.
You shouldn't have any trouble doing this. There's no need to modify the dygraphs source. You can implement handlers on the dygraph object (zoomHandler or drawCallback, most likely) which update the D3 chart.
See this demo for an example of synchronization between multiple dygraphs.
I am working on d3.js and dc.js libraries from few weeks. I have created scatter plot in d3.js and bar graph in dc.js. I want to know that is there possibility to interact between these two different graphs created in two different javascripts. In short, is it possible to interact between two different graphs created in d3.js and dc.js?
thank you.
Not going to give you the codes, sorry.
You'll want to use crossfilter as the bridge between the graphs, though:
create a dimension which is for the scatterplot (different from the dimensions used in the dc.js charts, but same crossfilter instance)
react to the interaction in d3 and set the filter on that dimension
Often when creating a dimension for a scatterplot, you will use a key that is unique for each row, or barring that, the row index itself. If you search around for dc.js scatterplot or bubblechart, you ought to find examples.
Also dc.js has a scatterplot now. It needs some love and is not as feature-rich as the bubble plot, but it exists.
I am evaluating to change the graphics I generated so far using highcharts.js to d3.js
just for fun and I want to learn how d3.js works.
I wonder if there is something similar to the url below (see if you click on a pie it gives you new data), something dynamic and ready to use (or not to implement from zero).
What I wanna achieve, more or less...
http://lully.snv.jussieu.fr/gbif/mapping/graphs/examples/pie-legend.htm
thanks in advance
Pere
If you want to replace Highcharts, I think the only good open-source alternative available at the moment is Bob Monteverde's Novus charts library: http://novus.github.com/nvd3/. NVD3 has a nice pie chart and also has good legends. Take a look at all the charts from this library and you will see what I mean. You can also find a good pie chart in Stephen Boak's tutorial: http://blog.stephenboak.com/2011/08/07/easy-as-a-pie.html. Another interesting option is to look for Frank Guerino's questions on the D3 js google group. I would use NVD3 if I were you. It might need some adjustments, but it seems to be the best option currently. Good luck!
Simple function to generate Pie Charts utilisiing d3.js. This function is part of the http://xhprof.io/ project. It is able to handle datasets of arbitrary size. It has several options that allow for customisation, such as the label margin, circle radius and visibility of the percentage data (refer to the source code).
The demo is available at https://dev.anuary.com/858b33b7-bd66-507b-a9f1-533e4de79ba3/. The source code is available at https://github.com/gajus/pie-chart.