n0nick / simplegraph Goto Github PK
View Code? Open in Web Editor NEWThis project forked from kball/simplegraph
Simple graphs using jQuery and Raphael
This project forked from kball/simplegraph
Simple graphs using jQuery and Raphael
= SimpleGraph http://benaskins.github.com/simplegraph == Description Simple javascript graphs using Raphael and jQuery. Based on the Raphael analytics example (http://raphaeljs.com/analytics.html) by Dmitry Baranovskiy == Usage The SimpleGraph function takes four arguments: target:: where the rendered graph will land data:: an array of values to plot against the y-axis labels:: an array of values for labelling the x-axis options:: hash of options to customise the graph (see below) Simple example: $("#myGraph").simplegraph([1,2,3,3,2,1], ["a","b","c","d","e","f"]); Will render a graph that looks a little something like this (open index.html for actual rendered samples): | ._. | ./ \. |/ \. |__________ a b c d e f == Options SimpleGraph takes a hash of options as it's third argument. Here's what you can customise: eg. parameter:: [default] description width:: [600] width of rendered image height:: [250] height of rendered image leftGutter:: [30] space to reserve to the left of the graph. Allocates space for y-axis caption and labels bottomGutter:: [20] space to reserve above the graph. Allocates space for x-axis topGutter:: [20] space to reserve below the graph labelColor:: [#000] text color for all labels labelFont:: ["Arial"] font for all labels labelFontSize:: ["9px"] font size for all labels gridBorderColor:: ["#ccc"] background grid color, points will be plotted on the grid drawPoints:: [true] whether or not to draw points on the graph pointColor:: ["#000"] point color pointRadius:: [3] point radius activePointRadius:: [5] active point radius - used when hovering on points drawLine:: [true] whether or not to join points on the graph with a line lineColor:: ["#000"] self explanatory yah? lineWidth:: [3] self explanatory yah? lineJoin:: ["round"] round | miter | bevel - how to join the lines on the graph fillUnderLine:: [false] fill under lines fillColor:: ["#000"] fillOpacity:: [0.2] drawBars:: [false] want a bar graph? barColor:: ["#000"] need i explain? addHover:: [true] oh hover.. displays a little popup with y and x axis values for the selected point mysteryFactor:: [0] it's a mystery == Contributors Dmitry Baranovskiy provided all of the initial code for plotting points on a graph using Raphael Ben Askins took that example and created the SimpleGraph function Lachie Cox improved sample code Lachlan Hardy removed lint Martin Stannard added bar graphs Colin Campbell-McPherson eliminated repetition from setStyleDefaults Fork it on github: http://github.com/benaskins/simplegraph Send feedback & suggestions to ben.askins [at] gmail.com == License Copyright (c) 2008 Ben Askins Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.