Charts for Raphaël

Overview

g.Raphaël - Official charting plugin for Raphaël

For more information, see: http://g.raphaeljs.com/

Changelog

v0.51

  • Fixed issues with piechart related to hrefs
  • Exposed minPercent and maxSlices in piechart
  • merged several pull requests fixing other issues
  • created docs using dr.js (see docs/reference.html)

v0.5

  • Refactored codebase and API to work with Raphaël 2.0
  • g is no longer a namespace, but instead a prototype object that all charts inherit. See documentation for all configurable options on the g prototype.
  • g.markers has been removed. The marker parameter strings now just try and resolve functions on the Paper prototype.
  • All primitive shapes have been removed. They are now part of Raphaël core in plugins/
  • The companion function original to the brightness functions lighter and darker has been renamed to resetBrightness to account for the g namespace removal
  • Tooltips have been modified/enhanced in the following ways:
    • All tooltips can now be called on any Element or Set instance, as well as from the paper object.
    • All tooltip update functions have been removed. Tooltip functions now return their path element. It is up to the caller to manage both the Element or set that is used as the context and the path element that was drawn by the tooltip function.
    • All tooltip dir options have been changed from 0, 1, 2, 3, to 'down', 'left', 'up', 'right' repectively.
    • blob and drop tooltips no longer accept size parameters. Instead, the bounding box of the Element/Set being used as content is used to automatically determine the size.
    • popupit and labelit have been removed. Their functionality is now the default behavior of all tooltips
Comments
  • Allow users to preserve the order of values for pie charts

    Allow users to preserve the order of values for pie charts

    Added an option to the piechart named preserveOrder to allow users to preserve the order of the values provided so that the pie section colors are always consistent.

    This is a non breaking change as the default value is falsy, whereas https://github.com/DmitryBaranovskiy/g.raphael/pull/176 and #79 will break existing functionality

    opened by stephenbinns 9
  • *Pie Chart won't generate more than 10 sectors*

    *Pie Chart won't generate more than 10 sectors*

    When I create a pie chart, it doesn't seem capable of creating more than 10 sectors. Please let me know as soon as possible what I'm doing wrong. It draws a piechart, and it does everything perfectly... for ten sectors only. I want to be able to create a dynamic pie chart, where a slice is created for every directorate in my company, and there are 18. Thankyou in advance.

    Here is my code, most of which is taken from raphael's site:

    // Creates canvas 640 × 480 at 10, 50 var r = Raphael(10, 50, 640, 480); // Creates pie chart at with center at 320, 200, // radius 100 and data: [55, 20, 13, 32, 5, 1, 2] var pie = r.g.piechart(320, 240, 100, [55, 20, 13, 32, 5, 1, 2, 25, 20, 15, 11, 14, 16]);

    pie.hover(function () { this.sector.stop(); this.sector.scale(1.1, 1.1, this.cx, this.cy); },

    function () { this.sector.animate({scale: [1, 1, this.cx, this.cy]}, 500, "bounce"); })//this is the end of pie.hover

    opened by gamerdudes 9
  • initial documentation for g.raphael

    initial documentation for g.raphael

    hi dmitry,

    here's the set of documentation for g.raphael (pretty basic outline, some in-depth coverage for g.line.js and g.pie.js). perhaps this can be helpful to beginners in getting started. will work on getting more examples up and elaborate on g.dot.js, and g.barchart.js in the next few weeks, plus cover some of the helper functions in g.raphael.js.

    let me know what's missing and how i might improve this further.

    thanks! kenny

    opened by qoelet 7
  • Only one piechart is allowed per page

    Only one piechart is allowed per page

    I'm running into a weird bug: I am not able to have more than one chart per page. If I delete the call to the first pie, than the second shows up, and so on.

    Is there a limitation for the number of piecharts we can have in a page?

    See this screenshot:

    http://cl.ly/2g2T2z1D2G3X3x032r0I

    With this code:

    var data = {
      items: [
        {label: 'One', data: 12015},
        {label: 'Two', data: 23834},
        {label: 'Three', data: 24689}
      ]
    };
    
    //Push our data into two separate arrays
    var labels = [];
    var values = [];
     for (i in data.items) {
       var item = data.items[i];
       labels.push(item.label);
       values.push(item.data);
     }
    
    var r = Raphael("pie_chart");
    var pie = r.piechart(60, 60, 50, values, {legend: labels, legendpos: "east"});
    
    var r_two = Raphael("pie_chart_two");
    var pie_two = r_two.piechart(60, 60, 50, values, {legend: labels, legendpos: "east"});
    
    var r_three = Raphael("pie_chart_three");
    var pie_three = r_three.piechart(60, 60, 50, values, {legend: labels, legendpos: "east"});
    
    opened by kurko 3
  • Fix for labeling bar graphs

    Fix for labeling bar graphs

    This branch contains a fix for #11.

    The bug is that we get a crash when attempting to label bar graphs:

    Uncaught exception: TypeError: Cannot convert 'v[x*(B||1)+s]' to object
    
    Error thrown at line 7, column 3997 in (y, S) in http://localhost:8000/media/js/g.bar-min.js:
        T=c.g.text(v[x*(B||1)+s].x,S?A+d-g/2:v[x*(B||1)+s].y-10,U).insertBefore(e[x*(B||1)+s]);
    called from line 19, column 6 in () in http://localhost:8000/blog/:
        chart.label(labels);
    called from line 26, column 212 in () in http://localhost:8000/media/js/jquery-1.4.1.min.js:
        a.call(r,c);
    called via Function.prototype.call() from line 33, column 9 in () in http://localhost:8000/media/js/jquery-1.4.1.min.js:
        c.ready()
    

    The problem was simply that a set of variable assignments were misordered: multi = len; len = 0;

    I've fixed both g.bar.js and g.bar-min.js

    opened by vezult 3
  • Demo charts are not showing

    Demo charts are not showing

    Hi,

    I wanted to see what your charts look like, but they don't show up on the demo website :

    http://g.raphaeljs.com/piechart.html http://g.raphaeljs.com/piechart2.html http://g.raphaeljs.com/barchart.html http://g.raphaeljs.com/barchart2.html http://g.raphaeljs.com/linechart.html http://g.raphaeljs.com/dotchart.html http://g.raphaeljs.com/basic.html

    I'm using chrome 15 under Ubuntu 11.10 64b.

    Cheers ;)

    opened by rsertelon 2
  • Refactored and removed 'g' namespace to port g.Raphael to Raphael 2.0

    Refactored and removed 'g' namespace to port g.Raphael to Raphael 2.0

    This is a port of g.Raphael to make it compatible with Raphael 2.0 by completely removing the g namespace from the Paper prototype.

    This was achieved by doing two things:

    • Hiding all utility functions inside function closures
    • Moving all of the tooltip functions into the main Raphael repo as plugins, similar to what was done with the primitives plugin [see pull request: https://github.com/DmitryBaranovskiy/raphael/pull/429 ]

    In order to make g.Raphael have a small footprint on the host Raphael instance, only the functions barchart, hbarchart, piechart, linechart, and dotchart are attached to the fn object. Each function retains its original parameters and options, with one change: There is no more g.marker object. Instead, the graph functions defer to the paper instance for function names. This means that you can use any function on the Paper prototype or instance as your marker function by simply supplying that function's name as the marker option.

    This refactor lead to a few noteworthy changes in the code base. First, the g.raphael.js file has been deleted. All of its contents were either moved into function closures for the graph types that required them or were moved into the main Raphael repo as a plugin package.

    As a result of this, each chart file has grown slightly larger in file size. This also means that there is some duplication of code between some of the graphs (bar and pie share equivalent definitions of snapEnds and _axis functions), but this was chosen to make each graph only dependent on the raphael.js library file (unless you want to use some of the shapes defined in the primatives or tooltips plugins as markers for your graphs).

    All original examples from http://g.raphaeljs.com/ are working as before. They are located in the test/ directory and can be temporarily viewed here: http://www.srsfknbzns.com/graphael/test/

    In order to make tests easily work, I've included my fork of the main Raphael repository with the tooltips plugin as a git submodule (make sure it is set to the 'tooltips' branch if you check it out). In its current state, this pull request depends on my pull request that was made to the Raphael repository. If, instead, you would rather have the tooltips and brightness plugins shipped with g.Raphael instead of Raphael, then they can be easily moved back into here making this pull request no longer have any dependencies.

    opened by rzurad 2
  • Blank page, chart is not drawn

    Blank page, chart is not drawn

    With the new Raphaël (v2.0) all the charts are not drawn. The problem is due to an infinite loop.

    Temporary workarond: With the old Raphaël ver all works fine!

    opened by DrLuiji 2
  • Add option for explicit axis bounds

    Add option for explicit axis bounds

    This commit adds 4 new options: minx, miny, maxx, maxy, which override the implicitly calculated bounds. The need arose from wanting to show a line graph of percentages which were all in a smaller range (60–80%), and still give the context of 0–100%.

    opened by eager 2
  • Adding support to custom alpha channels on linechart shades.

    Adding support to custom alpha channels on linechart shades.

    Hi Dmitry, Here is an small improvement to linechart, it add support to change the alpha for each shade. Some colors don't look good at .3 alpha.

    Cheers, Fabiano

    opened by wundo 2
  • Dotchart not rendering in IE8

    Dotchart not rendering in IE8

    I'm trying to render a dotchart in IE8 which is failing with an infinite loop because when calling var xdim = this.g.snapEnds(Math.min.apply(Math, valuesx), Math.max.apply(Math, valuesx), valuesx.length - 1)

    in line 15 of g.dot.js. Specifically, the bug arises because Math.min.apply & Math.max.apply are returning NaN when passed the following array as data.

    valuesx = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

    opened by CamonZ 2
  • Update drawing of pie chart when there are single or no values

    Update drawing of pie chart when there are single or no values

    • When the length of data is 1, it draws a path instead of a circle so hover functionality to use this.sector will work the same as if there are multiple slices. (line 85 - 102)
    • Fix drawing when a single value equals the total. Prior, it did not draw the chart. This change draws a circle path. (line 134, 147-162)
    • Added an additional option to ignore the min percentage and show all values. Passing in a min-percent as 0 to show all values and evaluating Boolean( minPercent ) is still false, so it didn’t show all values. Passing in in opts.ignoreMinPercent allows you to evaluate it correctly. (line 61)
    opened by sethfair 0
  • Fixes href sort order for pie charts

    Fixes href sort order for pie charts

    Fixes #88

    I realize this is unlikely to ever get pulled, but I ran into an old project that relied on g.raphael and experienced this bug. In case anyone else might benefit from this...

    opened by rmm5t 0
  • One legend for two or more charts (pie)

    One legend for two or more charts (pie)

    Hello. Do not get to do one legend on two or more diagrams. pie2 = r.piechart(545, 440, 25, [0, 22.22, 22.22, 11.11, 44.44]); pie = r.piechart(490, 540, 25, [0, 0, 12.5, 25, 62.5], { legend: ["-20%", "21 - 40 %", "41 - 60 %", "61 - 80 %", "81 - 100 %"], colors: [ "#475664", "#8C5F66", "#DB7369", "#F29961", "#F0B165" ], legendpos: "west", legendothers: "Другие", });

    for(var i = 0, l = pie.labels.length; i < l; i++ ) {
            pie.labels[i].attr("font", "13px sans-serif");
            pie.labels[i].attr("x", 230+20);
            pie.labels[i].attr("cx", 230);
            pie.labels[i].attr("y", 535+i*20);
            pie.labels[i].attr("cy", 535+i*20);
            pie.labels[i][1].attr( "fill", "#000000" );
        }
    

    pie.hover(function () { this.sector.stop(); this.sector.scale(1.1, 1.1, this.cx, this.cy);

                    if (this.label) {
                        this.label[0].stop();
                        this.label[0].attr({ r: 7.5 });
                        this.label[1].attr({ "font-weight": 800 });
                    }
                }, function () {
                    this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");
    
                    if (this.label) {
                        this.label[0].animate({ r: 5 }, 500, "bounce");
                        this.label[1].attr({ "font-weight": 400 });
                    }
                });
    
                pie2.hover(function () {
                    this.sector.stop();
                    this.sector.scale(1.1, 1.1, pie2.cx, pie2.cy);
    
                    pie.labels[1].stop();
                    pie.labels[1].attr({ r: 7.5 });
                    pie.labels[1].attr({ "font-weight": 800 });
    
                }, function () {
                    this.sector.animate({ transform: 's1 1 ' + pie2.cx + ' ' + pie2.cy }, 500, "bounce");
    
                    pie.labels[1].animate({ r: 5 }, 500, "bounce");
                    pie.labels[1].attr({ "font-weight": 400 });
    
                });
    
    opened by robertobadjio 0
  • Created new functionality: Donut chart

    Created new functionality: Donut chart

    I've added a new file: g.donut.js similar with g.pie.js and a testing one: donutchart.html

    I've also resolved two bugs (only for these two files): Bug 1: if you test piechart2.html with opt.init = true, the hover events are not working. Bug 2: Also testing piechart2.html: applying a stress test for hoverIn and hoverOut will make the sectors to scale more than 1.1.

    opened by codrinf 0
  • Something important is not in the DOCUMENTATION.

    Something important is not in the DOCUMENTATION.

    There are something important only seen in the script of DEMOs. Like:

    piechart.sector piechart.label

    or

    element.insertBefore element.insertAfter element.tear

    and so on...

    Please write them and anything unseen in the documentation but useful and necessary into the DOCUMENTATION IN THE RAPHAEL.COM

    THANKS!!!

    opened by vrbvillor 0
  • Is it time to add new life to this project?

    Is it time to add new life to this project?

    Hi Dmitry.

    I'm just writing a public letter to you. Seems like you have many interesting things in your life. But this project is forgotten and it's miss you. More than 50 PRs (not all ideal) are waiting and may be they are never will be merged :(

    What do you think if this repo will be added some top contributors to write access mode? Then this "write board" could clean up PRs with good ideas/fixes.

    Have a nice twenty for hours :)

    opened by garex 3
Owner
Dmitry Baranovskiy
JavaScript Artist
Dmitry Baranovskiy
Simple HTML5 Charts using the tag

Simple yet flexible JavaScript charting for designers & developers Documentation Currently, there are two versions of the library (2.9.4 and 3.x.x). V

Chart.js 58.8k Nov 22, 2022
Simple responsive charts

Big welcome by the Chartist Guy Checkout the documentation site at http://gionkunz.github.io/chartist-js/ Checkout this lightning talk that gives you

Gion Kunz 21 Nov 20, 2022
Simple, responsive, modern SVG Charts with zero dependencies

Frappe Charts GitHub-inspired modern, intuitive and responsive charts with zero dependencies Explore Demos » Edit at CodePen » Contents Installation U

Frappe 14.6k Nov 28, 2022
📊 A highly interactive data-driven visualization grammar for statistical charts.

English | 简体中文 G2 A highly interactive data-driven visualization grammar for statistical charts. Website • Tutorial Docs • Blog • G2Plot G2 is a visua

AntV team 11.4k Nov 23, 2022
JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.

GoJS, a JavaScript Library for HTML Diagrams GoJS is a JavaScript and TypeScript library for creating and manipulating diagrams, charts, and graphs. S

Northwoods Software Corporation 6.5k Nov 22, 2022
Attractive JavaScript charts for jQuery

flot About flot is a JavaScript plotting library for engineering and scientific applications derived from Flot: http://www.flotcharts.org/ Take a look

Flot 6k Nov 25, 2022
Progressive pie, donut, bar and line charts

Peity Peity (sounds like deity) is a jQuery plugin that converts an element's content into a mini <svg> pie, donut, line or bar chart. Basic Usage HTM

Ben Pickles 4.2k Nov 27, 2022
A plugin for the jQuery javascript library to generate small sparkline charts directly in the browser

jQuery Sparklines This jQuery plugin makes it easy to generate a number of different types of sparklines directly in the browser, using online a line

Gareth Watts 1.2k Nov 22, 2022
Awesome charts for AngularJS.

n3-line-chart v2 n3-line-chart is an easy-to-use JavaScript library for creating beautiful charts in AngularJS applications and it is built on top of

null 1.2k Nov 14, 2022
Create beautiful charts with one line of JavaScript

Chartkick.js Create beautiful charts with one line of JavaScript See it in action Supports Chart.js, Google Charts, and Highcharts Also available for

Andrew Kane 1.2k Nov 21, 2022
Ember Charts 3.5 2.3 L2 JavaScript A powerful and easy to use charting library for Ember.js

Ember Charts 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

Addepar 794 Oct 22, 2022
A friendly reusable charts DSL for D3

D4 D4 is a friendly charting DSL for D3. The goal of D4 is to allow developers to quickly build data-driven charts with little knowledge of the intern

Mark Daggett 430 Sep 26, 2022
Reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser.

roughViz.js is a reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser, based on D3v5, roughjs, and handy. Why? Use

Jared Wilber 6.4k Nov 17, 2022
Financial lightweight charts built with HTML5 canvas

Lightweight Charts Demos | Documentation | Discord community TradingView Lightweight Charts are one of the smallest and fastest financial HTML5 charts

TradingView, Inc. 5.6k Nov 26, 2022
Create beautiful JavaScript charts with one line of React

React Chartkick Create beautiful JavaScript charts with one line of React See it in action Supports Chart.js, Google Charts, and Highcharts Quick Star

Andrew Kane 1.2k Nov 20, 2022
JQuery plugin for creating charts

JQuery Linechart JQuery plugin for building a linechart. Chart ruler completely on HTML/CSS/JS. Bar chart, calendar view visualisation. Diagram, graph

Kirill Stepkin 42 Oct 25, 2022
Compose complex, data-driven visualizations from reusable charts and components with d3

d3.compose Compose rich, data-bound charts from charts (like Lines and Bars) and components (like Axis, Title, and Legend) with d3 and d3.chart. Advan

Cornerstone Systems 699 May 6, 2022
📊 Interactive JavaScript Charts built on SVG

A modern JavaScript charting library to build interactive charts and visualizations with simple API. Our Partner ApexCharts is now a partner of Fusion

ApexCharts 12k Nov 22, 2022
Create beautiful JavaScript charts with one line of Ruby

Chartkick Create beautiful JavaScript charts with one line of Ruby. No more fighting with charting libraries! See it in action Chartkick 4.0 was recen

Andrew Kane 6k Nov 24, 2022