Pie chart with jQuery - javascript

I want to create a pie chart in JavaScript. On searching I found the Google Charts API. Since we are using jQuery I found that there is jQuery integration for Google Charts available.
But my problem is here the actual data is sent to the Google server for creating the charts. Is there a way to prevent the data from being sent to Google? I am concerned about sending my data to a third party.

Flot
Limitations: lines, points, filled areas, bars, pie and combinations of these
From an interaction perspective, Flot by far will get you as close as possible to Flash graphing as you can get with jQuery. Whilst the graph output is pretty slick, and great looking, you can also interact with data points. What I mean by this is you can have the ability to hover over a data point and get visual feedback on the value of that point in the graph.
The trunk version of flot supports pie charts.
Flot Zoom capability.
On top of this, you also have the ability to select a chunk of the graph to get data back for a particular “zone”. As a secondary feature to this “zoning”, you can also select an area on a graph and zoom in to see the data points a little more closely. Very cool.
Sparklines
Limitations: Pie, Line, Bar, Combination
Sparklines is my favourite mini graphing tool out there. Really great for dashboard style graphs (think Google Analytics dashboard next time you login). Because they’re so tiny, they can be included in line (as in the example above). Another nice idea which can be used in all graphing plugins is the self-refresh capabilities. Their Mouse-Speed demo shows you the power of live charting at its best.
Query Chart 0.21
Limitations: Area, Line, Bar and combinations of these
jQuery Chart 0.21 isn’t the nicest looking charting plugin out there it has to be said. It’s pretty basic in functionality when it comes to the charts it can handle, however it can be flexible if you can put in some time and effort into it.
Adding values into a chart is relatively simple:
.chartAdd({
"label" : "Leads",
"type" : "Line",
"color" : "#008800",
"values" : ["100","124","222","44","123","23","99"]
});
jQchart
Limitations: Bar, Line
jQchart is an odd one, they’ve built in animation transistions and drag/drop functionality into the chart, however it’s a little clunky – and seemingly pointless. It does generate nice looking charts if you get the CSS setup right, but there are better out there.
TufteGraph
Limitations: Bar and Stacked Bar
Tuftegraph sells itself as “pretty bar graphs that you would show your mother”. It comes close, Flot is prettier, but Tufte does lend itself to be very lightweight. Although with that comes restrictions – there are few options to choose from, so you get what you’re given. Check it out for a quick win bar chart.

jqPlot looks pretty good and it is open source.
Here's a link to the most impressive and up-to-date jqPlot examples.

Tons of great suggestions here, just going to throw ZingChart onto the stack for good measure. We recently released a jQuery wrapper for the library that makes it even easier to build and customize charts. The CDN links are in the demo below.
I'm on the ZingChart team and we're here to answer any questions any of you might have!
$('#pie-chart').zingchart({
"data": {
"type": "pie",
"legend": {},
"series": [{
"values": [5]
}, {
"values": [10]
}, {
"values": [15]
}]
}
});
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.zingchart.com/zingchart.jquery.min.js"></script>
<div id="pie-chart"></div>

A few others that have not been mentioned:
For mini pies, lines and bars, Peity is brilliant, simple, tiny, fast, uses really elegant markup.
I'm not sure of it's relationship with Flot (given its name), but Flotr2 is pretty good, certainly does better pies than Flot.
Bluff produces nice-looking line graphs, but I had a bit of trouble with its pies.
Not what I was after, but another commercial product (much like Highcharts) is TeeChart.

Chart.js is quite useful, supporting numerous other types of charts as well.
It can be used both with jQuery and without.

There is a new player in the field, offering advanced Navigation Charts that are using Canvas for super-smooth animations and performance:
https://zoomcharts.com/
Example of charts:
Documentation: https://zoomcharts.com/en/javascript-charts-library/charts-packages/pie-chart/
What is cool about this lib:
Others slice can be expanded
Pie offers drill down for hierarchical structures (see example)
write your own data source controller easily, or provide simple json file
export high res images out of box
full touch support, works smoothly on iPad, iPhone, android, etc.
Charts are free for non-commercial use, commercial licenses and technical support available as well.
Also interactive Time charts and Net Charts are there for you to use.
Charts come with extensive API and Settings, so you can control every aspect of the charts.

Check TeeChart for Javascript
Free for non-commercial use.
Includes plugins for jQuery, Node.js, WordPress, Drupal, Joomla, Microsoft TypeScript, etc...
Interactive demos here and here.
Some screenshots of some of the demos:

Related

Plotting animated pie chart using javascript

I want to create an animated pie chart in JavaScript. I have done some R&D myself and found the Google Charts API.
But my major concern is the actual data is sent to the Google server for creating the charts. I am concerned about sending my data to a third party.
If you're concerned about sharing data with a third party, you might consider an offline charting library, like ZingChart. It gives you the ability to create animated pie charts quickly and easily without the need to transfer any of your data to a third party. This charting library works offline, and is dependency free. There are a number of animations that can be applied to the various types of charts, including pie charts. Check out this animated pie chart demo.
Lists of the different animation effects, methods, and sequences can be found on the animation docs page.
I'm a member of the ZingChart team, so please feel free to ask if you have any questions! :)
I suggest you use jPlot! You can do Pie and Donut Charts, Bar Charts, Line Charts and much more!. See the API here.
A DEMO here.
D3pie is also a good option
They also have a generator that you can use if you want to build your an example and work from there.

Javascripts for an Interactive network visualisation

I have been looking for some javascript code that I can use to create something similar to this.
I need something that can show the links between boxes when clicked on/hovered over. As of this point I have not yet been able to determine what the name of this particular type visualisation is.
I have already looked at:
Google Charts
d3.js
graphdracula
processing.js
Raphael
Protovis
MooWheel
PlotKit
You may want to focus in learning D3.JS because it seems to meet your requirements, and it does things very well.
The two vector graphic libraries you can focus are Raphael and D3.JS, but D3.JS is much more powerful with data binding. You can find a large amount of resources through the internet for D3JS.
Here are some of the tutorials that I think useful:
https://github.com/mbostock/d3/wiki/Tutorials
Examples gallery is here:
https://github.com/mbostock/d3/wiki/Gallery
Besides, D3js is the successor of Protovis, you can find this information at the following Wiki:
http://en.wikipedia.org/wiki/Protovis#Context
Google Charts may have some good features, but it's not a very active and well up to date as some other vector graphic tools.
For other libraries, I think should not spend much time.
Enjoy
Not exactly boxes, but more fluid network layout.
http://datavisualizationsoftwarelab.com/
Graphs are pure HTML5, no dependancies on other libs, thus easy to integrate with any JS framework (such as jQuery). Uses Canvas for rendering, has full multi-touch support for navigation, interaction and exploration of data.
An example of network chart:
Charts come with extensive API and Settings, so you can control every aspect of the charts.

Charting tool similar to Google Visualization

I need to include a dashboard in a JavaScript application I am building. The Google Visualization API would provide all the features I am looking for, except that I need a tool that works without internet access and could be embedded in my application.
My main requirements:
Standard pie, bar and line charts
hover and onclick behaviors
data aggregation: sum, average, etc. (like Google datatables)
time scale with time range filters
nice to have: heat maps, gauges, geo maps, Gantt, etc.
Alternately, I'd be interested in recommendations on a graphing toolkit that would be a good starting point. I've read good things about d3.js, but there is not much documentation around. I haven't even found which browsers d3 supports (I need IE 7).
dojox charting is rich in features, open-source and extensible, works cross browser, and supports multiple rendering engines: svg, canvas, vml - it is being actively evolved and has come a long way since its introduction. I have used it successfully in several projects.
High Charts and Fusion charts also now offer JS based charting
Raphael JS is also good for lightweight charting needs -
You may want to weigh the features/richness with performance, open-source/extensibility and other factors to make the choice - good news is that there are many libraries out there now :-)
There are some different frameworks for it, for example:
flot for jQuery
g.raphael for Raphaël
Highcharts JS as framework for Javascript
But there are many more. Try searching and look for a framework/plugin that fits your needs.
The FusionCharts Suite seems to be the best fit for your needs.
Column, bar, pie charts - http://www.fusioncharts.com/demos/gallery/#column-and-bar
Hover and on-click behaviours - http://www.fusioncharts.com/demos/features/#interactive-legend & http://www.fusioncharts.com/demos/features/#informative-tool-tips
Data aggregation - http://www.fusioncharts.com/demos/gallery/#zoom-line
Time scale charts - http://www.fusioncharts.com/demos/features/#self-updating-charts
Heat map charts - http://www.fusioncharts.com/demos/gallery/#heat-map-chart
Visually editable charts - http://www.fusioncharts.com/demos/gallery/#visually-editable-charts
Gauges with real-time capabilities - http://www.fusioncharts.com/demos/gallery/#gauges
Funnels - http://www.fusioncharts.com/demos/gallery/#funnel-chart
Pyramid charts - http://www.fusioncharts.com/demos/gallery/#pyramid-chart
It has exhaustive documentation too - http://docs.fusioncharts.com/
Just to contribute to the discussion I suggest you check out amCharts.
Their JavaScript Charting library is quite robust, actively developed and supported, well documented. IE7 is supported as well.
The JavaScript Stock Chart product provides most of the features you mentioned like datapoint aggregation. It's even dynamic based on the zoom scope.
Take a look at InfoCaptor Dashboards http://www.infocaptor.com
It can be self hosted and embeddable with other applications. The backend is PHP and it is completely javascript/html5 based charting engine.
Suppports all of the following requirements
Standard pie, bar and line charts - Out of box
hover and onclick behaviors - out of box
data aggregation: sum, average, etc. (like Google datatables) -
provides connectors to all SQL database and
including Google spreadsheet time scale with time range filters -
Dashboard prompts/parameters and filters nice to have: heat maps,
gauges, geo maps, Gantt, etc. - contains Gantts and variety of Gauges
It does not have maps but you can build the charts using jvectormaps or other map api and the custom html widget within the dashboard.
Hope this helps

Employing dynamic data for graphs

I am aiming to build a site that will contain a lot of user generated data, hopefully.
I'm in my first year of self learning programming: Python, Django, MySQL, HTML and Javascript.
I can chart dummy data on a table just fine, but I'm now looking at turning that data into nice colorful looking graphs.
I am in my first day of investigation into finding out how to do this. But before I continue, I would like to ask a few questions.
There seems to be many JavaScript frameworks for building charts, such as Google charts and jquery charts, and some object orientated programs for building charts, such as Cairo Plot and matplotlib.
The Javascript frameworks seem initially like a nice easy way to do it. However, whereas with tables, where you can enter variable data tags in the body of an HTML page, and have Javascript make it look pretty, the data of a graph goes in the scripting area, where the variable data tags don't quite seem to work the same way. I'm using Django, so a variable tag looks like:
{{ uniquenum }}
Q1. Should this work and am I just doing it wrong, or am I right in thinking variable tags can't go in the scripting area?
Q2. Can you have Javascript frameworks produce graphs from data outside the <script> area?
Q3. I've read that Javascript frameworks are getting more powerful, but because I'll be potentially using large amounts of dynamic data, should I be concentrating on using OO style graph programs like Cairo Plot and matplotlib, which to me don't seem to have the same levels of support?
Just looking for a nudge in the right direction.
How are the plots (typically) placed on the web page?
Here's the usual API schema for javascript-based data visualization libraries:
i. pre-allocate a div as the chart container in your markup (or template); typically using an id selector using an id selector, like so:
<div id="chart1"> </div>
Often these libraries also require that this container be pre-sized--styled with height and width properties e.g.,
<div id="chart1" style="height:300px;width:500px; "></div>
HTML5 libraries are particular about the container--i.e., they require the chart to be placed inside the canvas tag, e.g.,
ii. call the plot constructor from your included javascript file and pass in (i) a data source; (ii) aesthetic options (e.g., axis labels), and (iii) the location in your markup of the container that will hold the plot; this location is usually expected to be in the form of an id selector. So in jqplot for instance inside the jQuery ready event,
plot1 = $.jqplot('chart1', [dataSet1, dataSet2], chartOptions)
javascript-based data visualization libraries i recommend (based on having used each for multiple projects).
I. conventional plotting formats: bar, line, point, pie
Among javascript plotting libraries, i recommend the jQuery-based options because you need less code to create yoru plots and because it's easier to use jQuery's AJAX methods to load your data, for instance, jqplot, flot, and HighCharts (the three libraries that i recommend below) all include in their basic distribution, complete (html, css, js) example plots that demonstate loading data via AJAX.
HighCharts (open source but requires paid license for commercial use, but the most polished and longest feature list; active and fairly high signal-noise ratio forums on the HighCharts Site)
flot (perhaps the most widely used)
jqplot (large selection of plot types, highly modular, e.g,. most functinality beyond the basics is added one plugin at a time)
II. graphs, trees, network diagrams, etc.
d3 (the successor to protovis; stunning graphic quality, rich interactive elements, animation; not strictly jQuery-based, but the author clearly borrowed the basic syntax patterns from jQuery; excellent tutorials on d3 by an accomplished data visualization specialist, Jan Willem Tulp Unlike the others mentioned here, this is a low-level library; indeed there are (at least) several plotting libraries based on d3, e.g., rickshaw by shutterstock, and cube by Square. If you want conventional x-y line/bar plots then for instance, you can build your plots in e.g., HighCharts much faster. D3 becomes more interesting as use cases become more specific--in particular animation and unorthodox visualization (sunburst diagrams, chord diagrams, parallel line plots, geographic maps, etc.)
RafaelJS, renders in SVG, along with d3 and processing.js, you can make just about anything (e.g., two-player games in the browser) with this library; gRafael is a separate library for creating the usual plot types (bar, line, pie)
III. time-series plots
dygraphs (a javascript library dedidated soley to time-series plotting, and its feature set reflects this mission, e.g., capacity
to process and render plots with high volumes of data (>10,000
points), wide range of opdtions for tick labels of time axis with
many formatting options
HighStock (a time-series library from the HighChart guys)
IV. real-time/streaming data
Smoothie Charts (sparse feature set, only intended to do one thing well which is smoothly render streaming data; HighCharts, jqplot, and flot will also do this, but depending on the character of your data (variance, rate) these three general-purpose libraries might not show the data as "spiky", which is precisely what Smoothie was designed to eliminate)
If you're going to deal with very large datasets (>10000 elements), you will probably run into performance problems, no matter what Javascript library you end up picking.
Having said that, there's a growing number of Javascript toolkits which dynamycally load the data set with an HTTP request as a JSON, XML, etc... flot is pretty fast and open source. Highcharts is very feature rich and free for non-commercial projects. And if you need more esoteric visualizations, you must take a look at d3.js.
I have found another javascript charting library to be useful for streaming data = https://github.com/INRIA/VisualSedimentation. The code is baed on d3.js, but has some good extensibility.

Javascript library or framework for drawing charts on client side

I'm looking for an library, to generate charts on client side.
I found a lot, by searching on web and stackoverflow, like here
https://stackoverflow.com/questions/2227421/good-javascript-library-for-drawing-charts-using-json
or this very good collection:
http://sixrevisions.com/javascript/20-fresh-javascript-data-visualization-libraries/
There are so much alternatives, I'm a bit overwhelmed. Which one can use JSON data, which one is up to date, which one is easy to use (because I'm absolutely new on this topic), which one is robust, works on mobile phone (or not), which project is still alive, etc.
I need different chards, an line chart is mandatory. Also zoom in and zoom out is mandatory.
So I took a closer look on jqplot an flot.
Both providing zoom, but it looks like zooming is more an scaling. Which means: the granularity will not change by zoom in.
Because the graph will have a lot of data/points, i need to consolidate informations before sending them to the client. By zooming in, I need to rise the granularity, so the chart should be able to process new data for the zoomed area. (I hope I've made ​​myself clear.)
Thanks for any kind of attention.
Raphael.js http://raphaeljs.com/
HTML5 Graph http://chrisvalleskey.com/html5-graph/
Google Visualization API: http://code.google.com/apis/chart/interactive/docs/gallery.html
Flot: http://code.google.com/p/flot/
Unfortunately there is no helpful answer, so I like to write down, what i learned the last days for this question.
jqPlot and frot are supporting zooming at an basic level. That means, it's more an scaling.
By looking at the google groups for qjPlot and flot, the support for jqPlot is better (lot's of unanswered questions at the flot group).
jqPlot has an better axis-label-handling by zooming.
jqPlot also provides hooks. By using those hooks, it's seems to be possible to combine zooming and loading new JSON data in order to get an better granularity of the zoomed view.

Categories

Resources