Graph/chart that supports dynamic pie charts? - javascript

Does anyone know of a good charting/graphing tool that supports dynamic pie charts, i.e. where a user could change the values by dragging, etc? It would need an event API so I could get access to the changed values.
And, jQuery > vanilla JS > Flash.

jqplot : jquery, charts, easy to use. Almost fulfill all of your requirements. Details here. Only one problem : not sure that you can change values dynamically or it might be tricky
HighCharts : very good quality, higly configurable, vanilla JS. Check this demo for dynamically adding values (even graphically) : http://www.highcharts.com/demo/?example=dynamic-click-to-add&theme=gray

I gave up searching/tweaking and implemented my own using Raphael. It's still very buggy, but I think it's a good proof of concept. Forks welcome :)

Related

how to make same chart with lightweight chart with javascript

I am use https://github.com/tradingview/lightweight-charts javascript package.
As you can see in the picture, orders are shown in green boxes on the bitmex exchange. I want to learn how I can do this in my own table. I could not find a similar example in the document. Can you help me ?
I'm afraid it couldn't be done with lightweight-charts. If you'd like to add them and want to use TradingView's charts, I'd suggest you take charting library instead.

Creating charts in java or javascript without images

One of the project requirements for my new java web project is to have dynamic charts that will load really fast.
While in discussion , it was asked if we could implement charts without using images ie without loading jpg, png files etc. Also files like pdf cannot be used.
Basically my question is
Can charts be implemented in jsp/javascript without using images,pdf etc ?
ie even api's used should not provide end result as image,or pdf etc.
I did not say no right away , as I have implemented charts in console applications in C on screen. Can we do something like that on a webpage ? ie show a graph by drawing on screen dots,lines,circles etc.But it should be possible inside a div ?
PS : Comments and answer from Lucien Stals helped to understand that the technology i was looking for was svg.
I am looking for some nudging in the right direction from some of the experienced java , javascript programmers in SO.
Many JavaScript chart libraries exist that render in HTML5 on your page. You can probably find one that meets other requirements or wishes of your team, since each have feature areas in which they excel. http://www.zingchart.com has also been adding many ways to include them in your charts if you decide to go with something other than vanilla JavaScript (jQuery, Angular, etc). Full disclosure: I'm on the ZingChart team. I can help you weigh the pro's and con's if you find a few that catch your interest.
A simple bar chart would be easy enough to create with DIVs and CSS.
Anything more complicated and I think you are talking SVG, which could be drawn using http://raphaeljs.com/, or maybe http://d3js.org/ .
Also look at the HTML5 canvas element.
I would suggest to use Google Chart Framework. I did use it in past for my project and it is good.
You can check highcharts http://www.highcharts.com/ . This can be integrated easily with your javascript .
Most of this js chart plugins expects data in array or json format and can dynamically render the charts.Easy to integrate in the web pages
jgccharts.js Jquery charts
jquery charts plugin

javascript chart library that supports the "follows" on line charts with mobile

I am looking for an html5/css/javascript chart library that supports the "follows" on line charts with mobile.
To be precise on what am I refering to by "follows" on line charts, here are good examples:
http://code.shutterstock.com/rickshaw/examples/extensions.html
https://google-developers.appspot.com/chart/interactive/docs/gallery/trendlines
even slightly different, this one would be nice also
http://www.flotcharts.org/flot/examples/tracking/index.html
I have made some tests using the extensive comparison provided here. Unfortunately, I was not able to find a line chart demo with "follows" that worked "out-of-the-box" with both Chrome and Chrome Android. Chrome is my targeted browser for now, I am writing a non commercial app just for fun.
It seems that most of these implementations are based on :hover css selector which is not available for mobile. I tried to bind the :hover logic with the "touchmove" but it was not straightforward (with rickshaw at the very least).
My question is: am I missing a library or an option in the existing libraries or should I keep on trying to implement my custom logic ?
You missed amCharts in your list, it does support "follows", for example:
http://www.amcharts.com/javascript-charts/line-with-duration-on-value-axis/
Note, you should set chart.panEventsEnabled = true in order touch events to work on mobile.
Disclaimer - I am the author of amCharts and amMap.
you can try echarts, it's really good at rendering large data and does supoort "follow", here's the example and the code
http://echarts.baidu.com/gallery/editor.html?c=doc-example/scatter-dataZoom-all

How to implement "Drag-Select" functionaility within Javascript?

I would like to implement some "Drag-select" functionality into a project of mine but i'm unsure how to implement it.
The creation of the selection area is not a problem, it's the capturing of elements within the area itself which is confusing me.
A jQuery example found here.
Selectable Demo
If you can use jquery there are some plugins that do this operation. Anyway you can check if the position of the element is contained into the selection area coordinates and, if it is, you select it.
Script.aculo.us has a nice implementation of drag-n-drop, but then you have to include this rather large library. Or you could investigate how they done it for that matter, since its open-source.

Displaying a Multidimensional Array in a Bar Graph (in JavaScript)?

Is it possible for someone to give me a few pointers on how to display a multidimensional array in the form of a bar graph?
The array is multidimensional, with three elements in each part - and the elements are determined by a HTML form.
So if it is possible to display this kind of array in the form of a bar graph in Javascript on a standard HTML site, i'd appreciate some help!
Thanks
Check out Flot and MilkChart. The former extends jQuery, the latter MooTools. Both use the canvas element, which is now supported by all the major browsers (even IE with the inclusion of an extra script). Take a look at the reputation tab in your stackoverflow profile to see it in use. I've used Flot (haven't tried MilkChart) in a project before and while the manner you pass data into it can seem a bit unintuitive at first, you'll find that it is actually pretty powerful for a non-flash charting solution. Flot also defines custom events that you can use to define chart interactions. Flot supports stacked bar charts with a plugin, and I believe you can do clustered bar charts with it as well.
You could always go with some sort of declarative graphics solution using div elements as bars in a graph, but that's not as easy or consistent across browsers as drawing charts with the canvas.
If you are leery of either of those solutions you could send the data to a service to return a static image. The Google Charting API supports grouped bar charts, or you could use some service you host yourself.
My recommendation is the first solution using the HTML canvas, specifically leveraging Flot since that is the library I have the most experience with and can vouch for. Maybe someone else has some comments about MilkChart.
EDIT:
Another library I forgot to mention is PlotKit which extends MochiKit. I haven't used it but apparently it supports not only the charting using the canvas element but also supports charting using SVG. Scalable Vector Graphics offer you another declarative graphics option beyond hacking a solution using HTML, however I'm not sure how crossbrowser an SVG based solution would be (particularly in IE).
EDIT:
Here is a jQuery plugin which charts using div elements. I personally don't like this option because I think it is more complex and less easily configurable than some of the other options. I feel like using HTML elements to create complex declarative graphics (while impressive) is sort of a hacked solution and will, in my experience, cause problems at some point.
According to the documentation, both Flot and MilkChart only work in IE if the excanvas extension is installed.
For greater portability, I suggest checking out the Google Visualization API which is incredibly simple to use and has many different display possibilities. Visualizations are rendered as either flash elements (interactive) or as plain images (static).

Categories

Resources