Awesome Graphs

Github ->

the way to chain the functions:
1. set() functions [except hover]
2. build() function
3. setHover() function (optional)
4. buildChanged() functions (optional)
5. animate() function (optional)

NOTE: animate() won't work with buildChanged() functions

Type One

const arr = ["First value","Second Value","Third Value","Fourth Value","fifth Value"]; // demo-graph-1 = ID of the div new TypeOne("demo-graph-1").build([426,515,140,251,690]).setHover(arr); // animate(frames [optional]) new TypeOne("demo-graph-1").build([426,515,140,251,690]).setHover(arr).animate(140).setLabels(["Ab","Mo","Fo","Jo","Ho"]);

Type Two

// demo-graph-2 = ID of the div // pieChartValue = 500 // changed = Value when input number is changed (default here is 500) // difference = changed - pieChartValue; new TypeTwo("demo-graph-2") .setCustomTotal(changed) .setChangedLabel(difference) .setHover("It's a value") // set() functions .build(pieChartValue) .buildChanged(changed) .animate();

Type Three

const barGraphValues = [426,515,140,251,690]; const pieChartValue = 505; const polygonValues = [426,555,740,351,300]; const arr = ["First value","Second Value","Third Value","Fourth Value","fifth Value"]; const arr2 = ["Lorem Ipsum","dolor","sit amet","consectuter","lol elit"]; // demo-graph-31, demo-graph-32 = ID of the div new TypeThree("demo-graph-31").build(barGraphValues, pieChartValue, polygonValues).setHover(arr, "Pie Value", arr2); // First new TypeThree("demo-graph-32").build(barGraphValues, pieChartValue, polygonValues, 800).setHover(arr, "Pie Value", arr2); // Second // animate(framesForPieChart [optional], framesForOtherTwoCharts [optional]) new TypeThree("demo-graph-31").build(barGraphValues, pieChartValue, polygonValues).setHover(arr, "Pie Value", arr2).animate(20,20); new TypeThree("demo-graph-32").build(barGraphValues, pieChartValue, polygonValues, 800).setHover(arr, "Pie Value", arr2).animate(20,20);

Type Four

const arr = ["Lorem Ipsum","dolor","sit amet","consectuter","lol elit"]; // demo-graph-4 = ID of the div new TypeFour("demo-graph-4").build([426,555,740,351,300]).setHover(arr); // animate(frames [optional]) new TypeFour("demo-graph-4").build([426,555,740,351,300]).setHover(arr).animate(30).setLabels(["Ab","Mo","Fo","Jo","Ho"]);

Type Five

// demo-graph-5 = ID of the div new TypeFive("demo-graph-51").build(500).setHover("Outer Value"); // first new TypeFive("demo-graph-52").build(500, 600).setHover("Outer Value", "Inner Value"); // second // animate(frames [optional]) new TypeFive("demo-graph-5").build(500).setHover("Outer Value").animate(30); new TypeFive("demo-graph-5").build(500, 600).setHover("Outer Value", "Inner Value").animate(30);

Type Six

// demo-graph-6 = ID of the div new TypeSix("demo-graph-6").build(15); // animate(frames [optional]) new TypeSix("demo-graph-6").build(15).animate();

Type Seven

const text = "Lorem Ipsum dolor sit amet, consectuter adipiscing elit"; // demo-graph-6 = ID of the div new TypeSeven("demo-graph-7").setRange(200).setLimits([-20,20]).build(15, [text, text], true); // animate(frames [optional]) new TypeSeven("demo-graph-7").setRange(200).setLimits([-20,20]).build(15, [text, text], true).animate();

Awesome Graphs 2.0

Radial charts, rebuilt.

The same seven charts, redrawn from scratch: sharp on retina screens, responsive, theme-aware, and animated between any two states, including before/after comparisons.

Explore the charts Quick start

No dependencies
HiDPI & responsive
Animated updates
Light & dark

Quick start

Plain script tags. No build step, no framework.

Include the library

<script src="v2/dist/awesome-graphs.js"></script>

Add a container

<div id="weekly"></div>

Create & update

const chart = new AwesomeGraphs.SegmentRing('#weekly', {
    values: [426, 515, 140, 251, 690],
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
});

chart.update({ values: [480, 500, 220, 251, 610] });

API

Every chart shares the same lifecycle and base options.

Methods

Call	What it does
`new AwesomeGraphs.Radar(target, options)`	Create a chart. `target` is an element, an id or a CSS selector.
`AwesomeGraphs.create('radar', target, options)`	Same as above, by type id.
`chart.update(options, { animate, duration })`	Merge options and animate from the current frame. Returns a promise.
`chart.replay()`	Play the entrance animation again.
`chart.render()`	Redraw right away, e.g. after changing CSS theme variables.
`chart.destroy()`	Remove the canvas, observers and listeners.

Shared options

Option	Default
`max`	`900`: the value that fills a bar or arc
`size`	`320`: max width in px; shrinks to fit its container
`baseline`	`null`: values to compare against (ring, gauge, combo, radar)
`format`	`null`: `(value) => string`
`colors`	`{ fill, success, danger, text, muted, grid }`
`animation`	`{ duration: 900, easing: 'easeOutCubic', onVisible: true }`
`tooltip`	`true`

Coming from v1

Chained setters become one options object, and buildChanged() becomes baseline, which animates too.

v1	v2	Notes
`TypeOne`	`SegmentRing`	`build(values)` → `values`, `setLabels` → `labels`, `setHover` → `tooltips`, `setCustomTotal` → `total`
`TypeTwo`	`ArcGauge`	`build(value)` → `value`, `setHover` → `label`
`TypeThree`	`ComboRing`	`build(bars, pie, polygon, score)` → `bars`, `arc`, `shape`, `score`. The built-in logo is now an optional `image`
`TypeFour`	`Radar`	`build(values)` → `values`, `setMultiplier` → `size`
`TypeFive`	`ConcentricArcs`	`build(outer, inner)` → `values: [outer, inner, …]`, any number of rings
`TypeSix`	`SegmentedDial`	`build(percent)` → `value`, zone count via `segments`
`TypeSeven`	`NeedleMeter`	`setRange` → `range`, `setLimits` → `limits`, `build(value, texts, showLimits)` → `value`, `captions`, `showLimits`