WebAppers

/ best free open source web resources /

Shopify

A Responsive Pie Chart Based on Snap SVG Framework

Posted · Category: Charts, MIT License

Pizza Pie Charts is a responsive Pie chart based on the Snap SVG framework from Adobe. It focuses on easy integration via HTML markup and CSS instead of JavaScript objects, although you can pass JavaScript objects to Pizza as well.

You can deliver pie charts to any device with Pizza. Your pie will be steaming hot with SVG so that it looks good on retina devices and HiDPI devices. And the pie will fit the width of your box — um, container — or can be given a max-width or max-height.

pizza-pie-charts

Requirements: Sass Framework
Demo: http://zurb.com/playground/pizza-pie-charts
License: MIT License

Ember Charts – Charting Library Built with Ember & D3

Posted · Category: Charts, License Free

Ember Charts is a charting library built with the Ember.js and d3.js frameworks. It includes time series, bar, pie, and scatter charts which are easy to extend and modify. The out-of-the-box behavior these chart components represents their thoughts on best practices in chart interactivity and presentation.

It is highly customizable and extensible. You can add legends, labels, tooltips, and mouseover effects. You can also roll your own charts by extending our ChartComponent class – get labels, automatic resizing, and reasonable defaults for margins, padding, etc.

ember-charts

Requirements: D3.js and Ember.js
Demo: http://addepar.github.io/#/ember-charts/
License: License Free

How to Build Live NASDAQ Bar Charts without Plugins

Posted · Category: Charts, Information

In this article, we’ll get rolling on developing plug-in free by creating bar graphs and similar graphics, using NASDAQ’s current web site as an example. But we won’t be creating merely a picture of a bar graph, but a real, interactive bar graph. Let’s take a look at an existing site that uses Flash, then build one using HTML5.

If you have Flash installed, you’ll see a fancy line chart. You can float your mouse over the line and see a small popup showing the stock price at that point, along with the volume of trading, like so:

If you don’t have Flash installed, then the site just shows you a graphic image. So you’re not left out completely without Flash, but with HTML5, we can include everybody.

Now, we’ll build something similar. To keep this article from getting too long, let’s just show the data in a box below the graph. But as you move the mouse along the graph, or touch it on a tablet, it will highlight the closest point on the graph, and show the information for that point in a box. Here’s what the final product will look like: Read the rest of this entry »

The Simple API for Google Analytics Dashboard

Posted · Category: Charts, License Free

OOcharts is the Simple API for Google Analytics. It is an awesome little project that makes it easy to embed and share Google Analytics data through charts. API Keys are created to give access to certain Google Analytics profiles. For every request to OOcharts, you will need a valid API Key.

They queue your requests that would normally exceed the Google Analytics™ API limits to ensure you get your data fast and reliably. They also cache requests so you don’t have to waste time waiting for the same report you asked for a couple seconds ago. As soon as you connect your Google™ profile and make an API Key for your site, you can start getting data. You can fork OOcharts on Github too.

oocharts

Requirements: JavaScript Enabled
Demo: http://oocharts.com/
License: License Free

Chart.js – HTML5 Charts for Designers & Developers

Posted · Category: Charts, MIT License

Chart.js is an easy, object oriented client side graphs for designers and developers. You can visualise your data in 6 different ways. Each of them animated, fully customizable and look great, even on retina displays. Chart.js uses the HTML5 canvas element. It supports all modern browsers, and polyfills provide support for IE7/8.

Chart.js is dependency free, lightweight (4.5k when minified and gzipped) and offers loads of customization options. it is licensed under MIT License.

chart-js

Requirements: HTML5 Framework
Demo: http://www.chartjs.org/
License: MIT License

Highly Customizable Line Charting Library for Canvas

Posted · Category: Charts, MIT License

Aristochart is highly customizable and flexible line charting library for <canvas>. Aristochart allows you to focus on aesthetic while it manages the data behind the scenes. Aristochart has a growing list of community sourced themes for you to pick and choose from.

Aristochart has indepth documentation of it’s internals and options that you can edit and extend. All packaged together and works locally. Aristochart is completely open-source and hosted on Github.

aristochart

Requirements: Canvas
Demo: http://dunxrion.github.io/aristochart/
License: MIT License

Pretty Ajax Charts with xCharts, jQuery and MySQL

Posted · Category: Charts, License Free

Charts are a great visual aid when presenting data. You can’t build a professional admin panel without them. They are also tricky to set up. However, there is a new library that makes things easier – xCharts.

TutorialZine has published an article: Make Pretty Charts for Your App with jQuery and xCharts, that used xCharts along with the daterange picker for Twitter Bootstrap, to build a pretty, AJAX-powered chart for your web application that fetches data from a MySQL table.

charts-web-app

Requirements: JavaScript and MySQL
Download Link: http://demo.tutorialzine.com/2013/01/charts-jquery-ajax/
License: License Free

A Force Directed Graph Layout Algorithm in JavaScript

Posted · Category: Charts, MIT License

Springy is a force directed graph layout algorithm. It means that springy uses some real world physics to try and figure out how to show a network graph in a way that looks good.

Springy.js is designed to be small and simple. It provides an abstraction for graph manipulation and for calculating the layout and not too much else. The details of drawing and interaction are mostly up to you. This means you can use canvas, SVG, WebGL, or even just plain old positioned HTML elements.

springy

Requirements: JavaScript Framework
Download Link: http://getspringy.com/
License: MIT License

Building Beautiful Data-Driven Charts with xCharts

Posted · Category: Charts, License Free

xCharts is a JavaScript library for building beautiful and custom data-driven chart visualizations for the web using D3.js. Using HTML, CSS, and SVG, xCharts are designed to be dynamic, fluid, and open to integrations and customization.

Since xCharts use SVG, we are able to accomplish most of our styling of xCharts directly through CSS. This means you have quite a bit of control to handle the visualization however you want. The best way to style charts is to start with the included stylesheet, or use your browser’s element inspector to see each elements CSS class selectors that are available to use.

xcharts

Requirements: D3.js
Demo: http://tenxer.github.com/xcharts/
License: License Free

Word Cloud Layout Written in JavaScript and HTML5

Posted · Category: Charts, License Free

D3 Cloud is a Wordle-inspired word cloud layout written in JavaScript. It uses HTML5 canvas and sprite masks to achieve near-interactive speeds. This layout requires D3. It’s similar to d3.layout.force, in that it’s asynchronous and stateful.

The layout algorithm itself is incredibly simple. For each word, starting with the most “important”: Attempt to place the word at some starting point: usually near the middle, or somewhere on a central horizontal line. If the word intersects with any previously-placed words, move it one step along an increasing spiral. Repeat until no intersections are found.

word-cloud

Requirements: D3 Framework
Demo: http://www.jasondavies.com/wordcloud/
License: License Free

Page 2 of 8«12345678»
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons