Skip to content

ChattyCrow/d3_simple_gauge_charts

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

D3 Simple Gauge Charts

Simple Gauge charts based on D3 and JQuery, with highly configurable options.

Examples

![]

or example on jsfiddle https://jsfiddle.net/z4mao901/4/ !

Usage

  1. Add libraries D3, JQuery and d3 simple gauge chart (both js & css) to your project

  2. Create div for chart (only required variable is value)

    <div class='chart' data-value=30></div>
  3. Run

    $(document).ready(function() {
       $('.chart').d3SimpleGauge();
    });

Customization

Each parameter can be passed via data-* attributes or directly in javascript options. Imagine you want to change percents into days.

$(document).ready(function() {
   $('.chart').d3SimpleGauge({
      value: 30, // Percentage
      primaryLabelText: function(d) {
          // Reverse countdown for days
          return Math.round(50 - (50 * d) / 100) + " days"; 
      }
    });
});

Charts are drawed via SVG, you can modify some effects via CSS like smooth hover opacity change.

Attributes

Attribute Default value Explain
duration 1000 Effect duration
value 50 Chart value in %
showHoverClass showHover Class for show on hover
hideHoverClass hideHover Class for hide on hover
width 170 Chart width
height 140 Chart height
diameter 200 Circle diameter
margin {} Margins (top, right, bottom, left)
circle 180 Circle radius (half / full ... - examples)
primaryLabelText fct(d) % Label text (function with percent attribute or text)
primaryLabelTextHover "" Label text on hover
primaryFontSize 34 Primary font size
secondaryLabelText "" Secondary label (yellow label)
secondaryLabelTextHover "" Secondary label on hover
secondaryFontSize 10 Secondary font size
grayLines 5 Number of gray lines
spaceBetweenGrayLines 7 Space between gray lines
startColor #f9a535 Start gradient color
stopColor #f48e07 Stop gradient color

Licence

MIT

This library is based on Radial Progress library from BrightPoint Inc. (under MIT license) http://www.brightpointinc.com/clients/brightpointinc.com/library/radialProgress/download.html

Pull request

Fork, create new branch, feel free to hack :-)

[]: https://raw.githubusercontent.com/ChattyCrow/d3_simple_gauge_charts/master/example.png

About

Simple Gauge charts required D3 and JQuery

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published