• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
WittySparks Logo White

WittySparks

Ignite Your Thoughts

  • Topics
  • Reviews
  • Newsletter
WittySparks / Technology / Open Source / Ways to create charts and graphs with Javascript
PlotKit - Javascript Chart Plotting

Ways to create charts and graphs with Javascript

Open Source August 2, 2008 by Sravan K

A chart or graph gives an overview of the data variation in a short and comprehensive way. It also reduces the time to grab the actual data fluctuations or variations and is available in visual form.

It is a diagram displaying the relationship between numbers or amounts. Common graphs use bars, lines, or parts of a circle to display data. Charts and Graphs are mainly used for statistical purposes and play a critical role in many applications.

Here are few tools which can build pretty good looking custom charts or graphs with defined statistics:

PlotKit – Javascript Chart Plotting

PlotKit is a Chart and Graph Plotting Library for Javascript. It has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support. PlotKit is a complete rewrite of CanvasGraph. It is better structured and supported. And is well documented with a couple of live demos.

PlotKit - Javascript Chart Plotting
PlotKit – Javascript Chart Plotting

Examples:

PlotKit Dynamic Charting Test – Redrawing values from a dynamic table.

PlotKit Simple Canvas Demo – A self-contained demo in a single file. Use this to get started!

PlotKit Simple SVG Demo – A self-contained demo in a single file. Use this to get started!

Sweet Canvas Test

Sweet SVG Test

Simple Canvas Test

Simple SVG Test

liquidx.net Stats Page

Flot is a pure Javascript plotting library for jQuery

It produces graphical plots of arbitrary datasets on the on-the-fly client-side. The focus is on simple usage (all settings are optional), attractive looks, and interactive features like zooming. Although Flot is easy to use, it is also advanced enough to be suitable for Web 2.0 data mining/business intelligence purposes which is its original application.

The plugin is targeting all newer browsers. If you find a problem, please report it. Drawing is done with the <canvas> tag introduced by Safari and is now available on all major browsers, except Internet Explorer where the excanvas Javascript emulation helper is used.

Flot is a pure Javascript plotting library for jQuery
Flot is a pure Javascript plotting library for jQuery

Examples:

Basic example

Different graph types

Setting various options

Real data with a bit of interactivity

Selection support and zooming

Zooming with overview

Plotting time series

Visitors per day with zooming and weekends

Interacting with the data

Flotr Javascript Plotting Library

Flotr is a javascript plotting library based on the Prototype Javascript Framework (version 1.6.0.2 at the moment) and inspired by Flot (written by Ole Laursen). Flotr enables you to draw appealing graphs in most modern browsers with easy-to-learn syntax. It comes with great features like legend support, negative value support, mouse tracking, selection support, zoom support, event hooks, CSS styling support, and much more.

Flotr Javascript Plotting Library
Flotr Javascript Plotting Library

Examples:

Basic Example

Basic Axis Example

Basic Bar Example

Basic Legend Example

Mouse Tracking Support Example

Mouse Zoom Support Example

Negative Value Support Example

Click Event Hook Example

JSON Data Example

ProtoChart is a new opensource library to plot pretty charts with examples included

ProtoChart is a new opensource library to plot pretty charts
ProtoChart is a new opensource library to plot pretty charts

ProtoChart is a new open-source library using Prototype and Canvas to create good-looking charts. This library is highly motivated by Flot, Flotr, and PlotKit libraries.

Related Topics

  • How to Install Android on Raspberry Pi 4
  • WordPress Membership plugins – tools to capture recurring revenue
  • Everything you need on How to speed up WordPress site
Previous Post: « WittySparks wins a prize in truveo contest
Next Post: Does Cuil stand apart from Google? »
Profile picture for Sravan K

About Sravan K

Contributor at WittySparks
WittySparks Staff

Sravan is a highly experienced web designer, user experience designer and developer. You can connect with him on Twitter or LinkedIn and initiate a chat.

View all posts by Sravan K

Primary Sidebar

Search

Exclusive Coupons

  • Moqups coupon code: WITTYSPARKS for 20% or PARTNERS50 for 50% discount.
  • WPForms coupon code: WITTYSPARKS for 50% off.
  • Serpstat coupon code: wittysparks_discount for 30% off.
  • SEO Buddy coupon code: WITTYSPARKS for 25% off.
  • Morningscore coupon code: wittysparks for 30% off for 3 months.
  • FlexClip coupon code: WITTYSPARKS for 30% off.
  • Uplead coupon code: “witty” for 30-day free trial.
  • FastestVPN coupon codes: WITTYSPARKS15 or WITTYSPARKS10 or Get up to 93% OFF.
  • Outranking.io coupon code: WITTYSPARKS50 for 50% off.

For more such offers visit our exclusive offers for SEO, Bloggers, Marketers and for Business owners.

Featured Productivity Software

Notion logo
Notion

Whether you’re a solo entrepreneur or a large team, Notion Workspace can help you stay organized and get more done. Get started today and take your productivity to the next level.

Try Notion for FREE

Footer

Affiliate Disclosure

If you make a purchase from WittySparks links, we will receive a small commission. See our Affiliate Disclosure.

Sponsors

Partnered with FreePik to use the licensed images.

turn to dhgate for smartphone

Follow Us

  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn
  • Instagram
  • YouTube
  • RSS

Copyright © 2023 · Hosting sponsored by Rocket.net (Affiliate link)

  • About Us
  • Contact Us
  • Privacy Policy
  • LinkedIn
  • Twitter
  • Like
  • Pinterest