1659943277
Create Waffle Chart Visualizations
Square pie charts (a.k.a. waffle charts) can be used to communicate parts of a whole for categorical quantities. To emulate the percentage view of a pie chart, a 10x10 grid should be used with each square representing 1% of the total. Modern uses of waffle charts do not necessarily adhere to this rule and can be created with a grid of any rectangular shape. Best practices suggest keeping the number of categories small, just as should be done when creating pie charts. Tools are provided to create waffle charts as well as stitch them together, and to use glyphs for making isotype pictograms.
It uses ggplot2 and returns a ggplot2 object.
The following functions are implemented:
waffle
: Make waffle (square pie) chartsdraw_key_pictogram
: Legend builder for pictogramsfa_grep
: Search Font Awesome glyph names for a patternfa_list
: List all Font Awesome glyphsgeom_pictogram
: Pictogram Geomgeom_waffle
: Waffle (Square pie chart) Geominstall_fa_fonts
: Install Font Awesome 5 Fontsiron
: Veritical, left-aligned layout for waffle plotsscale_label_pictogram
: Used with geom_pictogram() to map Font Awesome fonts to labelstheme_enhance_waffle
: Waffle chart theme cruft remover that can be used with any other themeinstall.packages("waffle", repos = "https://cinc.rud.is")
# or
devtools::install_git("https://git.rud.is/hrbrmstr/waffle.git")
# or
devtools::install_git("https://git.sr.ht/~hrbrmstr/waffle")
# or
devtools::install_gitlab("hrbrmstr/waffle")
# or
devtools::install_bitbucket("hrbrmstr/waffle")
# or
devtools::install_github("hrbrmstr/waffle")
library(waffle)
library(magrittr)
library(hrbrthemes)
library(ggplot2)
library(dplyr)
library(waffle)
# current verison
packageVersion("waffle")
## [1] '1.0.1'
data.frame(
parts = factor(rep(month.abb[1:3], 3), levels=month.abb[1:3]),
vals = c(10, 20, 30, 6, 14, 40, 30, 20, 10),
col = rep(c("blue", "black", "red"), 3),
fct = c(rep("Thing 1", 3),
rep("Thing 2", 3),
rep("Thing 3", 3))
) -> xdf
xdf %>%
count(parts, wt = vals) %>%
ggplot(aes(fill = parts, values = n)) +
geom_waffle(n_rows = 20, size = 0.33, colour = "white", flip = TRUE) +
scale_fill_manual(
name = NULL,
values = c("#a40000", "#c68958", "#ae6056"),
labels = c("Fruit", "Sammich", "Pizza")
) +
coord_equal() +
theme_ipsum_rc(grid="") +
theme_enhance_waffle()
xdf %>%
count(parts, wt = vals) %>%
ggplot(aes(label = parts, values = n)) +
geom_pictogram(n_rows = 10, aes(colour = parts), flip = TRUE, make_proportional = TRUE) +
scale_color_manual(
name = NULL,
values = c("#a40000", "#c68958", "#ae6056"),
labels = c("Fruit", "Sammich", "Pizza")
) +
scale_label_pictogram(
name = NULL,
values = c("apple-alt", "bread-slice", "pizza-slice"),
labels = c("Fruit", "Sammich", "Pizza")
) +
coord_equal() +
theme_ipsum_rc(grid="") +
theme_enhance_waffle() +
theme(legend.key.height = unit(2.25, "line")) +
theme(legend.text = element_text(size = 10, hjust = 0, vjust = 0.75))
xdf %>%
count(parts, wt = vals) %>%
ggplot(aes(label = parts, values = n)) +
geom_pictogram(
n_rows = 20, size = 6, aes(colour = parts), flip = TRUE,
family = "FontAwesome5Brands-Regular"
) +
scale_color_manual(
name = NULL,
values = c("#073f9c", "black", "#f34323"),
labels = c("BitBucket", "GitHub", "Other")
) +
scale_label_pictogram(
name = NULL,
values = c("bitbucket", "github", "git-alt"),
labels = c("BitBucket", "GitHub", "Other")
) +
coord_equal() +
theme_ipsum_rc(grid="") +
theme_enhance_waffle() +
theme(legend.text = element_text(hjust = 0, vjust = 1))
library(hrbrthemes)
library(waffle)
library(tidyverse)
tibble(
parts = factor(rep(month.abb[1:3], 3), levels=month.abb[1:3]),
values = c(10, 20, 30, 6, 14, 40, 30, 20, 10),
fct = c(rep("Thing 1", 3), rep("Thing 2", 3), rep("Thing 3", 3))
) -> xdf
ggplot(xdf, aes(fill=parts, values=values)) +
geom_waffle(color = "white", size=1.125, n_rows = 6) +
facet_wrap(~fct, ncol=1) +
scale_x_discrete(expand=c(0,0)) +
scale_y_discrete(expand=c(0,0)) +
ggthemes::scale_fill_tableau(name=NULL) +
coord_equal() +
labs(
title = "Faceted Waffle Geoms"
) +
theme_ipsum_rc(grid="") +
theme_enhance_waffle()
library(dplyr)
library(waffle)
storms %>%
filter(year >= 2010) %>%
count(year, status) -> storms_df
ggplot(storms_df, aes(fill = status, values = n)) +
geom_waffle(color = "white", size = .25, n_rows = 10, flip = TRUE) +
facet_wrap(~year, nrow = 1, strip.position = "bottom") +
scale_x_discrete() +
scale_y_continuous(labels = function(x) x * 10, # make this multiplyer the same as n_rows
expand = c(0,0)) +
ggthemes::scale_fill_tableau(name=NULL) +
coord_equal() +
labs(
title = "Faceted Waffle Bar Chart",
subtitle = "{dplyr} storms data",
x = "Year",
y = "Count"
) +
theme_minimal(base_family = "Roboto Condensed") +
theme(panel.grid = element_blank(), axis.ticks.y = element_line()) +
guides(fill = guide_legend(reverse = TRUE))
parts <- c(80, 30, 20, 10)
waffle(parts, rows = 8)
parts <- data.frame(
names = LETTERS[1:4],
vals = c(80, 30, 20, 10)
)
waffle(parts, rows = 8)
parts <- c(`Un-breached\nUS Population` = (318 - 11 - 79), `Premera` = 11, `Anthem` = 79)
waffle(
parts, rows = 8, size = 1,
colors = c("#969696", "#1879bf", "#009bda"), legend_pos = "bottom"
)
Health records breaches as fraction of US Population
One square == 1m ppl
waffle(
parts / 10, rows = 3,
colors = c("#969696", "#1879bf", "#009bda")
)
Health records breaches as fraction of US Population
(One square == 10m ppl)
library(extrafont)
waffle(
parts / 10, rows = 3, colors = c("#969696", "#1879bf", "#009bda"),
use_glyph = "medkit", size = 8
) + expand_limits(y = c(0, 4))
Via: https://www.nytimes.com/2008/07/20/business/20debt.html
savings <- c(
`Mortgage\n($84,911)` = 84911, `Auto and\ntuition loans\n($14,414)` = 14414,
`Home equity loans\n($10,062)` = 10062, `Credit Cards\n($8,565)` = 8565
)
waffle(
savings / 392, rows = 7, size = 0.5, legend_pos = "bottom",
colors = c("#c7d4b6", "#a3aabd", "#a0d0de", "#97b5cf")
)
Average Household Savings Each Year
(1 square == $392)
Similar to https://eagereyes.org/techniques/square-pie-charts
professional <- c(`Male` = 44, `Female (56%)` = 56)
waffle(
professional, rows = 10, size = 0.5,
colors = c("#af9139", "#544616")
)
With:
iron(
waffle(c(thing1 = 0, thing2 = 100), rows = 5),
waffle(c(thing1 = 25, thing2 = 75), rows = 5)
)
Without (you can disable this via keep
parameter now):
iron(
waffle(c(thing1 = 0, thing2 = 100), rows = 5, keep = FALSE),
waffle(c(thing1 = 25, thing2 = 75), rows = 5, keep = FALSE)
)
Professional Workforce Makeup
Iron example (left-align & padding for multiple plots)
pain.adult.1997 <- c(`YOY (406)` = 406, `Adult (24)` = 24)
waffle(
pain.adult.1997 / 2, rows = 7, size = 0.5,
colors = c("#c7d4b6", "#a3aabd"),
title = "Paine Run Brook Trout Abundance (1997)",
xlab = "1 square = 2 fish", pad = 3
) -> A
pine.adult.1997 <- c(`YOY (221)` = 221, `Adult (143)` = 143)
waffle(
pine.adult.1997 / 2, rows = 7, size = 0.5,
colors = c("#c7d4b6", "#a3aabd"),
title = "Piney River Brook Trout Abundance (1997)",
xlab = "1 square = 2 fish", pad = 8
) -> B
stan.adult.1997 <- c(`YOY (270)` = 270, `Adult (197)` = 197)
waffle(
stan.adult.1997 / 2, rows = 7, size = 0.5,
colors = c("#c7d4b6", "#a3aabd"),
title = "Staunton River Trout Abundance (1997)",
xlab = "1 square = 2 fish"
) -> C
iron(A, B, C)
cloc::cloc_pkg_md()
Lang | # Files | (%) | LoC | (%) | Blank lines | (%) | # Lines | (%) |
---|---|---|---|---|---|---|---|---|
R | 16 | 0.89 | 628 | 0.62 | 209 | 0.61 | 430 | 0.7 |
Rmd | 2 | 0.11 | 383 | 0.38 | 135 | 0.39 | 184 | 0.3 |
Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.
Author: hrbrmstr
Source Code: https://github.com/hrbrmstr/waffle
1659664380
Julia interface to Google Chart Tools.
A Google chart involves basically four steps:
This package allows this to be done within julia
by
mapping a DataFrame
object into a Google DataTable.
mapping a Dict of options into a JSON object of chart options. Many of these options can be specified through keyword arguments.
providing various constructors to make the type of chart
providing a method to see the charts. This is called through Julia
's show
mechanism. In general, the render
method can draw the chart or charts to an IOStream or file.
A basic usage (see the test/ directory for more)
using GoogleCharts, DataFrames
scatter_data = DataFrame(
Age = [8, 4, 11, 4, 3, 6.5],
Weight = [12, 5.5, 14, 5, 3.5, 7 ]
)
options = Dict(:title => "Age vs. Weight comparison",
:hAxis => Dict(:title => "Age",
:minValue => 0,
:maxValue => 15),
:vAxis => Dict(:title => "Weight",
:minValue => 0,
:maxValue => 15)
)
scatter_chart(scatter_data, options)
For non-nested options, keyword arguments can be given, as opposed to a dictionary:
chart = scatter_chart(scatter_data, title="Age vs. Weight comparison")
There are constructors for the following charts (cf. Charts Gallery)
area_chart, bar_chart, bubble_chart, candlestick_chart, column_chart, combo_chart,
gauge_chart, geo_chart, line_chart, pie_chart, scatter_chart, stepped_area_chart,
table_chart, tree_chart, annotated_time_line, intensity_map, motion_chart, org_chart,
image_spark_line
The helper function help_on_chart("chart_name")
will open Google's documentation for the specified chart in a local browser.
The names of the data frame are used by the various charts. The order of the columns is important to the charting tools. The "Data Format" section of each web page describes this. We don't have a mechanism in place supporting Google's "Column roles".
The options are specified through a Dict
which is translated into JSON by JSON.to_json
. There are numerous options described in the "Configuration Options" section of each chart's web page. Some useful ones are shown in the example to set labels for the variables and the viewport. Google charts seem to like integer ranges in the viewports by default. Top-level properties, can be set using keyword arguments.
In the tests/
subdirectory is a file with implementations with this package of the basic examples from Google's web pages. Some additional examples of configurations can be found there.
The GoogleCharts.render
method can draw a chart to an IOStream, a specified filename, or (when used as above) to a web page that is displayed locally. One can specify more than one chart at a time using a vector of charts.
There is a Plot
function for plotting functions with a similar interface as Plot
's plot
function:
Plot(sin, 0, 2pi)
A vector of functions:
Plot([sin, u -> cos(u) > 0 ? 0 : NaN], 0, 2pi,
lineWidth=5,
title="A function and where its derivative is positive",
vAxis=Dict(:minValue => -1.2, :maxValue => 1.2))
The Plot
function uses a line_chart
. The above example shows that NaN
values are handled gracefully, unlike Inf
values, which we replace with NaN
.
Plot also works for paired vectors:
x = linspace(0, 1., 20)
y = rand(20)
Plot(x, y) # dot-to-dot plot
Plot(x, y, curveType="function") # smooths things out
Passing a tuple of functions will produce a parametric plot:
Plot((x -> sin(2x), cos), 0, 2pi)
The latter shows that Plot
assumes your data is a discrete approximation to a function. For scatterplots, the Scatter
convenience function is given. A simple use might be:
x = linspace(0, 1., 20)
y = rand(20)
Scatter(x, y)
If the data is in a data frame format we have a interface like:
using RDatasets
mtcars = dataset("datasets", "mtcars")
Scatter(:WT, :MPG, mtcars)
And we can even use with groupby
objects:
iris = dataset("datasets", "iris")
d=iris[:, [2,3,6]] ## in the order "x, y, grouping factor"
gp = groupby(d, :Species)
Scatter(gp) ## in R this would be plot(Sepal.Width ~ Sepal.Length, iris, col=Species)
## or ggplot(iris, aes(x=Sepal.Length, y=Sepal.Width, color=Species)) + geom_point()
Some experimental code is in place for surface plots. It needs work. The basic use is like:
surfaceplot((x,y) -> x^2 + y^2, linspace(0,1,20), linspace(0,2,20))
The above does not seem to work in many browsers and does not work reliably in IJulia
(only success has been with Chrome).
The googleVis
package for R
does a similar thing, but has more customizability. This package should try and provide similar features. In particular, the following could be worked on:
Author: jverzani
Source Code: https://github.com/jverzani/GoogleCharts.jl
License: View license
1658342040
nivo provides supercharged React components to easily build dataviz apps, it's built on top of d3.
Several libraries already exist for React d3 integration, but just a few provide server side rendering ability and fully declarative charts.
In order to use nivo, you have to install the @nivo/core
package and then choose some of the scoped @nivo
packages according to the charts you wish to use:
yarn add @nivo/core @nivo/bar
Join the nivo discord community.
nivo is comprised of several packages/components, for a full list, please use the Components Explorer.
Author: Plouc
Source Code: https://github.com/plouc/nivo
License: MIT license
1658321700
Plotly.js is a standalone Javascript data visualization library, and it also powers the Python and R modules named plotly
in those respective ecosystems (referred to as Plotly.py and Plotly.R).
Plotly.js can be used to produce dozens of chart types and visualizations, including statistical charts, 3D graphs, scientific charts, SVG and tile maps, financial charts and more.
Contact us for Plotly.js consulting, dashboard development, application integration, and feature additions.
Install a ready-to-use distributed bundle
npm i --save plotly.js-dist-min
and use import or require in node.js
// ES6 module
import Plotly from 'plotly.js-dist-min'
// CommonJS
var Plotly = require('plotly.js-dist-min')
You may also consider using plotly.js-dist
if you prefer using an unminified package.
In the examples below
Plotly
object is added to the window scope byscript
. ThenewPlot
method is then used to draw an interactive figure as described bydata
andlayout
into the desireddiv
here namedgd
. As demonstrated in the example above basic knowledge ofhtml
and JSON syntax is enough to get started i.e. with/without JavaScript! To learn and build more with plotly.js please visit plotly.js documentation.
<head>
<script src="https://cdn.plot.ly/plotly-2.13.1.min.js"></script>
</head>
<body>
<div id="gd"></div>
<script>
Plotly.newPlot("gd", /* JSON object */ {
"data": [{ "y": [1, 2, 3] }],
"layout": { "width": 600, "height": 400}
})
</script>
</body>
Alternatively you may consider using native ES6 import in the script tag.
<script type="module">
import "https://cdn.plot.ly/plotly-2.13.1.min.js"
Plotly.newPlot("gd", [{ y: [1, 2, 3] }])
</script>
Fastly supports Plotly.js with free CDN service. Read more at https://www.fastly.com/open-source.
While non-minified source files may contain characters outside UTF-8, it is recommended that you specify the charset
when loading those bundles.
<script src="https://cdn.plot.ly/plotly-2.13.1.js" charset="utf-8"></script>
Please note that as of v2 the "plotly-latest" outputs (e.g. https://cdn.plot.ly/plotly-latest.min.js) will no longer be updated on the CDN, and will stay at the last v1 patch v1.58.5. Therefore, to use the CDN with plotly.js v2 and higher, you must specify an exact plotly.js version.
You could load either version two or version three of MathJax files, for example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_SVG.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-svg.js"></script>
When using MathJax version 3, it is also possible to use
chtml
output on the other parts of the page in addition tosvg
output for the plotly graph. Please refer todevtools/test_dashboard/index-mathjax3chtml.html
to see an example.
There are two kinds of plotly.js bundles:
npm
and the CDN
, described in the dist README.If your library needs to bundle or directly load plotly.js/lib/index.js or parts of its modules similar to index-basic in some other way than via an official or a custom bundle, or in case you want to tweak the default build configurations of browserify
or webpack
, etc. then please visit BUILDING.md
.
Official plotly.js documentation is hosted at https://plotly.com/javascript.
These pages are generated by the Plotly graphing-library-docs repo built with Jekyll and publicly hosted on GitHub Pages. For more info about contributing to Plotly documentation, please read through contributing guidelines.
Have a bug or a feature request? Please open a Github issue keeping in mind the issue guidelines. You may also want to read about how changes get made to Plotly.js
Please read through our contributing guidelines. Included are directions for opening issues, using plotly.js in your project and notes on development.
Plotly.js is at the core of a large and dynamic ecosystem with many contributors who file issues, reproduce bugs, suggest improvements, write code in this repo (and other upstream or downstream ones) and help users in the Plotly community forum. The following people deserve special recognition for their outsized contributions to this ecosystem:
GitHub | Status | ||
---|---|---|---|
Alex C. Johnson | @alexcjohnson | Active, Maintainer | |
Mojtaba Samimi | @archmoj | @solarchvision | Active, Maintainer |
Antoine Roy-Gobeil | @antoinerg | Active, Maintainer | |
Nicolas Kruchten | @nicolaskruchten | @nicolaskruchten | Active, Maintainer |
Jon Mease | @jonmmease | @jonmmease | Active |
Étienne Tétreault-Pinard | @etpinard | @etpinard | Hall of Fame |
Mikola Lysenko | @mikolalysenko | @MikolaLysenko | Hall of Fame |
Ricky Reusser | @rreusser | @rickyreusser | Hall of Fame |
Dmitry Yv. | @dy | @DimaYv | Hall of Fame |
Robert Monfera | @monfera | @monfera | Hall of Fame |
Robert Möstl | @rmoestl | @rmoestl | Hall of Fame |
Nicolas Riesco | @n-riesco | Hall of Fame | |
Miklós Tusz | @mdtusz | @mdtusz | Hall of Fame |
Chelsea Douglas | @cldougl | Hall of Fame | |
Ben Postlethwaite | @bpostlethwaite | Hall of Fame | |
Chris Parmer | @chriddyp | Hall of Fame | |
Alex Vados | @alexander-daniel | Hall of Fame |
Code and documentation copyright 2021 Plotly, Inc.
Code released under the MIT license.
This project is maintained under the Semantic Versioning guidelines.
See the Releases section of our GitHub project for changelogs for each release version of plotly.js.
plotly-js
) or on Stack Overflow (tagged plotly
).plotly
on packages which modify or add to the functionality of plotly.js when distributing through npm.Author: Plotly
Source Code: https://github.com/plotly/plotly.js
License: MIT license
1658314260
TradingView Lightweight Charts are one of the smallest and fastest financial HTML5 charts.
The Lightweight Charting Library is the best choice for you if you want to display financial data as an interactive chart on your web page without affecting your web page loading speed and performance.
It is the best choice for you if you want to replace static image charts with interactive ones. The size of the library is close to static images but if you have dozens of image charts on a web page then using this library can make the size of your web page smaller.
npm install lightweight-charts
import { createChart } from 'lightweight-charts';
const chart = createChart(document.body, { width: 400, height: 300 });
const lineSeries = chart.addLineSeries();
lineSeries.setData([
{ time: '2019-04-11', value: 80.01 },
{ time: '2019-04-12', value: 96.63 },
{ time: '2019-04-13', value: 76.64 },
{ time: '2019-04-14', value: 81.89 },
{ time: '2019-04-15', value: 74.43 },
{ time: '2019-04-16', value: 80.01 },
{ time: '2019-04-17', value: 96.63 },
{ time: '2019-04-18', value: 76.64 },
{ time: '2019-04-19', value: 81.89 },
{ time: '2019-04-20', value: 74.43 },
]);
You can use unpkg:
https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js
The standalone version creates window.LightweightCharts
object with all exports from esm
version:
const chart = LightweightCharts.createChart(document.body, { width: 400, height: 300 });
const lineSeries = chart.addLineSeries();
lineSeries.setData([
{ time: '2019-04-11', value: 80.01 },
{ time: '2019-04-12', value: 96.63 },
{ time: '2019-04-13', value: 76.64 },
{ time: '2019-04-14', value: 81.89 },
{ time: '2019-04-15', value: 74.43 },
{ time: '2019-04-16', value: 80.01 },
{ time: '2019-04-17', value: 96.63 },
{ time: '2019-04-18', value: 76.64 },
{ time: '2019-04-19', value: 81.89 },
{ time: '2019-04-20', value: 74.43 },
]);
See BUILDING.md for instructions on how to build lightweight-charts
from source.
Author: Tradingview
Source Code: https://github.com/tradingview/lightweight-charts
License: Apache-2.0 license
1658312220
A small (~40 KB min), fast chart for time series, lines, areas, ohlc & bars (MIT Licensed)
μPlot is a fast, memory-efficient Canvas 2D-based chart for plotting time series, lines, areas, ohlc & bars; from a cold start it can create an interactive chart containing 150,000 data points in 135ms, scaling linearly at ~25,000 pts/ms. In addition to fast initial render, the zooming and cursor performance is by far the best of any similar charting lib; at ~40 KB, it's likely the smallest and fastest time series plotter that doesn't make use of context-limited WebGL shaders or WASM, both of which have much higher startup cost and code size.
However, if you need 60fps performance with massive streaming datasets, uPlot can only get you so far. If you decide to venture into this realm with uPlot, make sure to unclog your rendering pipeline. WebGL should still be the tool of choice for applications like realtime signal or waveform visualizations: See danchitnis/webgl-plot, huww98/TimeChart, epezent/implot, or commercial products like LightningChart®.
In order to stay lean, fast and focused the following features will not be added:
The docs are a perpetual work in progress, it seems. Start with /docs/README.md for a conceptual overview. The full API is further documented via comments in /dist/uPlot.d.ts. Additionally, an ever-expanding collection of runnable /demos covers the vast majority of uPlot's API.
Benchmarks done on this hardware:
Full size: https://leeoniya.github.io/uPlot/demos/multi-bars.html
Raw data: https://github.com/leeoniya/uPlot/blob/master/bench/results.json
| lib | size | done | js,rend,paint,sys | heap peak,final | mousemove (10s) |
| ---------------------- | ------- | ------- | ----------------- | --------------- | ------------------- |
| uPlot v1.6.9 | 39 KB | 58 ms | 70 1 1 38 | 20 MB 3 MB | 65 159 88 103 |
| ECharts v5.1.0 | 987 KB | 88 ms | 87 1 1 47 | 55 MB 5 MB | 1463 284 84 521 |
| Chart.js v3.2.0 | 233 KB | 80 ms | 118 1 1 41 | 34 MB 11 MB | 725 30 57 1467 |
| Flot v3.0.0 | 494 KB | 91 ms | 118 3 1 55 | 46 MB 16 MB | --- |
| LightningChart® v2.2.1 | 1000 KB | --- ms | 178 2 1 42 | 61 MB 22 MB | 5310 46 43 180 |
| dygraphs v2.1.0 | 125 KB | 135 ms | 159 2 1 75 | 99 MB 44 MB | 1087 162 74 205 |
| CanvasJS v3.2.13 | 482 KB | 241 ms | 271 2 1 66 | 52 MB 26 MB | 961 256 76 195 |
| Highcharts v9.0.1 | 391 KB | --- ms | 286 4 2 42 | 108 MB 33 MB | 840 301 132 155 |
| dvxCharts v5.0.0 | 369 KB | 253 ms | 310 18 1 51 | 60 MB 24 MB | 674 442 148 145 |
| Plotly.js v1.58.4 | 3500 KB | 377 ms | 408 5 1 71 | 199 MB 46 MB | 1087 114 29 82 |
| Chart.js v2.9.4 | 245 KB | 495 ms | 524 2 1 75 | 103 MB 54 MB | 8397 5 6 1158 |
| ECharts v4.9.0 | 785 KB | 366 ms | 498 1 1 581 | 224 MB 78 MB | 2265 64 17 7551 |
| ApexCharts v3.26.1 | 478 KB | --- ms | 1634 22 1 44 | 332 MB 70 MB | 8611 646 99 154 |
| ZingChart v2.9.3 | 857 KB | 2081 ms | 2101 5 1 38 | 191 MB 100 MB | --- |
| amCharts v4.10.18 | 1200 KB | 5564 ms | 4925 19 6 67 | 695 MB 237 MB | 1494 336 164 285 |
Normally, all libs are updated to their latest versions before each benchmark round. However, libraries which show significant performance improvements in latest versions will have prior versions shown to encourage migration; this is especially true for still-widely-deployed libs, such as Chart.js v2.9.4, and ECharts v4.9.0. Deployment prevalence is assessed from public npm and CDN download stats for the prior few months.
size
includes the lib itself plus any dependencies required to render the benchmark, e.g. Moment, jQuery, etc.Some libraries provide their own performance demos:
TODO (all of these use SVG, so performance should be similar to Highcharts):
Your browser's performance is highly dependent on your hardware, operating system, and GPU drivers.
If you're using a Chromium-based browser, there are some hidden settings that can unlock significant performance improvements for Canvas2D rendering. Most of these have to do with where and how the rasterization is performed.
Head over to https://leeoniya.github.io/uPlot/demos/sine-stream.html and open up Chrome's DevTools (F12), then toggle the Performance Monitor.
For me:
If your CPU is close to 100%, it may be rasterizing everything in the same CPU process.
Pop open chrome://gpu
and see what's orange or red.
Then open chrome://flags
and search for "raster" to see what can be force-enabled.
Canvas out-of-process rasterization
resulted in a dramatic framerate improvement.YMMV!
Author: Leeoniya
Source Code: https://github.com/leeoniya/uPlot
License: MIT license
1658299380
100% Powerful, Clean & Functional Javascript Charts
Whether at home, a medium sized or enterprise venture, EJSCharts will seamlessly help you represent your data more clearly and efficiently.
Compatible With:
Features such as Hints, Mouse Tracking, Mouse Events, Key Tracking, and Events, Zooming, Scrolling, and Crosshairs raise interactivity and user experience in web charting to a new level.
Too much data and not enough screen real estate? Show it all. Let your end users zoom in on the pieces they're most interested in. Axis locking for single axis zoom, scrolling and automatic axis scaling are all included.
EJSChart supports XML-formatted data and loads data on the fly. New series can be added and data updated in real time without page reloads.
Multiple chart series can be stacked and combined to fit many charting needs.
100% pure Javascript Charting solution. No more worries of incompatible plugin versions or confusing security warnings. EJSChart is pure JavaScript and requires no client installation.
<script src="./path-to-your-directory/EJSChart.min.js"></script>
<div id="myChart"></div>
<script>
var chart = new EJSC.Chart("myChart");
</script>
Author: EmpriseCorporation
Source Code: https://github.com/EmpriseCorporation/EJSCharts
License: View license
1658291760
Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly customizable charts to your commercial products. It is written in pure JavaScript and based on zrender, which is a whole new lightweight canvas library.
You may choose one of the following methods:
npm install echarts --save
Build echarts source code:
Execute the instructions in the root directory of the echarts: (Node.js is required)
# Install the dependencies from NPM:
npm install
# Rebuild source code immediately in watch mode when changing the source code.
npm run dev
# Check correctness of TypeScript code.
npm run checktype
# If intending to build and get all types of the "production" files:
npm run release
Then the "production" files are generated in the dist
directory.
If you wish to debug locally or make pull requests, please refer to the contributing document.
https://github.com/ecomfe/awesome-echarts
ECharts GL An extension pack of ECharts, which provides 3D plots, globe visualization, and WebGL acceleration.
Extension for Baidu Map 百度地图扩展 An extension provides a wrapper of Baidu Map Service SDK.
vue-echarts ECharts component for Vue.js
echarts-stat Statistics tool for ECharts
Please refer to Apache Code of Conduct.
Deqing Li, Honghui Mei, Yi Shen, Shuang Su, Wenli Zhang, Junting Wang, Ming Zu, Wei Chen. ECharts: A Declarative Framework for Rapid Construction of Web-based Visualization. Visual Informatics, 2018.
Author: Apache
Source Code: https://github.com/apache/echarts
License: Apache-2.0 license
1658233800
Lavacharts is a graphing / chart library for PHP5.4+ that wraps the Google Chart API.
Please don't be discouraged if you see that it has been "years" since an update, but rather think that Lavacharts has settled into a "stable" state and requires less tinkering from me. I would love to add new features, but my responsibilities leave little room for my projects. I am happy to field issues, answer questions, debug and help if needed. Lavacharts is not vaporware! :smile:
In your project's main composer.json
file, add this line to the requirements:
"khill/lavacharts": "^3.1"
Run Composer to install Lavacharts:
$ composer update
If you are using Lavacharts with Silex, Lumen or your own Composer project, that's no problem! Just make sure to: require 'vendor/autoload.php';
within you project and create an instance of Lavacharts: $lava = new Khill\Lavacharts\Lavacharts;
To integrate Lavacharts into Laravel, a ServiceProvider has been included.
Thanks to the fantastic new Package Auto-Discovery feature added in 5.5, you're ready to go, no registration required :+1:
To modify the default configuration of Lavacharts, datetime formats for datatables or adding your maps api key... Publish the configuration with php artisan vendor:publish --tag=lavacharts
Register Lavacharts in your app by adding these lines to the respective arrays found in config/app.php
:
<?php
// config/app.php
// ...
'providers' => [
// ...
Khill\Lavacharts\Laravel\LavachartsServiceProvider::class,
],
// ...
'aliases' => [
// ...
'Lava' => Khill\Lavacharts\Laravel\LavachartsFacade::class,
]
To modify the default configuration of Lavacharts, datetime formats for datatables or adding your maps api key... Publish the configuration with php artisan vendor:publish --tag=lavacharts
Register Lavacharts in your app by adding these lines to the respective arrays found in app/config/app.php
:
<?php
// app/config/app.php
// ...
'providers' => array(
// ...
"Khill\Lavacharts\Laravel\LavachartsServiceProvider",
),
// ...
'aliases' => array(
// ...
'Lava' => "Khill\Lavacharts\Laravel\LavachartsFacade",
)
To modify the default configuration of Lavacharts, datetime formats for datatables or adding your maps api key... Publish the configuration with php artisan config:publish khill/lavacharts
The package also includes a Bundle for Symfony to enable Lavacharts as a service that can be pulled from the Container.
Add the bundle to the registerBundles method in the AppKernel, found at app/AppKernel.php
:
<?php
// app/AppKernel.php
class AppKernel extends Kernel
{
// ..
public function registerBundles()
{
$bundles = array(
// ...
new Khill\Lavacharts\Symfony\Bundle\LavachartsBundle(),
);
}
}
Add the service definition to the app/config/config.yml
file
imports:
# ...
- { resource: "@LavachartsBundle/Resources/config/services.yml"
Usage
The creation of charts is separated into two parts: First, within a route or controller, you define the chart, the data table, and the customization of the output.
Second, within a view, you use one line and the library will output all the necessary JavaScript code for you.
Here is an example of the simplest chart you can create: A line chart with one dataset and a title, no configuration.
Setting up your first chart.
$data = $lava->DataTable();
$data->addDateColumn('Day of Month')
->addNumberColumn('Projected')
->addNumberColumn('Official');
// Random Data For Example
for ($a = 1; $a < 30; $a++) {
$rowData = [
"2017-4-$a", rand(800,1000), rand(800,1000)
];
$data->addRow($rowData);
}
Arrays work for datatables as well...
$data->addColumns([
['date', 'Day of Month'],
['number', 'Projected'],
['number', 'Official']
]);
Or you can use \Khill\Lavacharts\DataTables\DataFactory
to create DataTables in another way
Customize your chart, with any options found in Google's documentation. Break objects down into arrays and pass to the chart.
$lava->LineChart('Stocks', $data, [
'title' => 'Stock Market Trends',
'animation' => [
'startup' => true,
'easing' => 'inAndOut'
],
'colors' => ['blue', '#F4C1D8']
]);
The chart will needs to be output into a div on the page, so an html ID for a div is needed. Here is where you want your chart <div id="stocks-div"></div>
$lava->LineChart('Stocks', $data, 'stocks-div');
$lava->LineChart('Stocks', $data, [
'elementId' => 'stocks-div'
'title' => 'Stock Market Trends'
]);
$lava->LineChart('Stocks', $data, [
'title' => 'Stock Market Trends'
], 'stocks-div');
Pass the main Lavacharts instance to the view, because all of the defined charts are stored within, and render!
<?= $lava->render('LineChart', 'Stocks', 'stocks-div'); ?>
Or if you have multiple charts, you can condense theh view code withL
<?= $lava->renderAll(); ?>
Changelog
The complete changelog can be found here
Author: Kevinkhill
Source Code: https://github.com/kevinkhill/lavacharts
License: View license
1658226180
Charts is a Laravel library used to create Charts using Chartisan. Chartisan does already have a PHP adapter. However, this library attempts to provide more laravel-like features into it by providing support for chart creation using the artisan command, middleware support and routing support. This makes handling charts feel more laravel-like. At the end of the day, this library uses Chartisan and can use all of its potential. Expect to read the Chartisan docs since this library it's just a simple abstraction.
Unfortunately laravel-charts v7
is incompatible with our previous version, v6
, because it has involved a heavy rewrite. If you're still stuck on v6
, you should use:
Please note that we consider v6
unmaintained and unsupported. So you should upgrade to v7
as soon as possible. We're currently working on an upgrade guide. If you can help, please reach out with an issue - we'll take all the help we can get.
The documentation for the latest version of charts can be found here by pressing the image below.
Author: Chartisan
Source Code: https://github.com/Chartisan/Charts
License: MIT license
1657341960
march.dev charts library. Provides highly customizable and configurable charts.
REQUIRED data
data
- set of data with DateTime
keys and double
values based on which chart will be drawned.There are 2 general types of the LineChart
:
Periodical
grid type (only monthly
available for now):
Periodical means that if there's not enough data to draw full chart (there's gaps between dates) chart will automatically fulfill lacking data based on LineChartDataType
.
For LineChartDataType.bidirectional
data type lacking data will be set to 0
.
For LineChartDataType.unidirectional
data type lacking data will calculated from previous values so, that charts will be looking like ascending (e.g. Progress) or descending (e.g. Burndown) chart.
Undefined
grid type:
Undefined means that the chart will be drawned using only provided data.
Note that LineChartDataType
is omitted with this type of grid.
Max Value
predefinedMaxValue
- predefined max value for the chart.maxValueRoundingMap
- rounding map for the maxValue that is used by beautification function of Y axis labels.Limits
limit
- if provided, will be painted on the chart as a horizontal indication line.limitText
- custom text to set to the label of the limit line.Tooltip builders
titleBuilder
- builds title of the tooltip based on DateTime
key and/or double
value from provided data.subtitleBuilder
- builds subtitle of the tooltip based on DateTime
key and/or double
value from provided data.Label builder
xAxisLabelBuilder
- builds X axis label based on DateTime
value from provided data.yAxisLabelBuilder
- builds Y axis label based on double
value from provided data, maxValue
specifically.xAxisDivisions
- quantity of the X axis divisions, defaults to 3
.yAxisDivisions
- quantity of the Y axis divisions, defaults to 2
.axisDivisionEdges
- axis division edges, defaults to AxisDivisionEdges.none
.showAxisX
- whether to show X axis or not, defaults to true
.showAxisY
- whether to show Y axis or not, defaults to true
.lineFilling
- whether to fill chart between the line and the X axis or not, defaults to true
.lineShadow
- whether to draw shadow beneath the line or not, defaults to true
.altitudeLine
- whether to draw the altitude line or not, defaults to true
.limitLabelSnapPosition
- snap position options of limit label, defaults to LimitLabelSnapPosition.axis
.showAxisXLabels
- whether to show labels on the X axis or not, defaults to true
.showAxisYLabels
- whether to show labels on the Y axis or not, defaults to true
.gridStyle
- styling options for the grid, for more details please refer to the source code of the LineChartGridStyle
.axisStyle
- styling options for the axis, for more details please refer to the source code of the LineChartAxisStyle
.lineStyle
- styling options for the chart line, for more details please refer to the source code of the LineChartLineStyle
.limitStyle
- styling options for the limit, for more details please refer to the source code of the LineChartLimitStyle
.pointStyle
- styling options for the point and tooltip above point, for more details please refer to the source code of the LineChartPointStyle
.REQUIRED data
data
- set of data with DateTime
keys and List<double>
values based on which chart will be drawned.Max Value
predefinedMaxValue
- predefined max value for the chart.maxValueRoundingMap
- rounding map for the maxValue that is used by beautification function of Y axis labels.Selection
initialSelectedPeriod
- initial selected period of the bar chart, defaults to null
.onSelectedPeriodChanged
- callback that notifies if selected period has changed, defaults to null
.Label builder
xAxisLabelBuilder
- builds X axis label based on DateTime
value from provided data.yAxisLabelBuilder
- builds Y axis label based on double
value from provided data, maxValue
specifically.yAxisDivisions
- quantity of the Y axis divisions, defaults to 2
.axisDivisionEdges
- axis division edges, defaults to AxisDivisionEdges.none
.showAxisX
- whether to show X axis or not, defaults to true
.showAxisXLabels
- whether to show labels on the X axis or not, defaults to true
.showAxisYLabels
- whether to show labels on the Y axis or not, defaults to true
.barSpacing
- spacing between bars in one item, defaults to 0
.itemSpacing
- spacing between group of bars, defaults to 12
.showSelection
- whether to show selection of the items or not, defaults to true
.duration
- the length of time animation should last.alignment
- alignment of the bars within chart.reverse
- whether the scroll view scrolls in the reading direction.gridStyle
- styling options for the grid, for more details please refer to the source code of the BarChartGridStyle
.axisStyle
- styling options for the axis, for more details please refer to the source code of the BarChartAxisStyle
.barStyle
- styling options for the chart line, for more details please refer to the source code of the BarChartBarStyle
.Run this command:
With Flutter:
$ flutter pub add mdcharts
This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get
):
dependencies:
mdcharts: ^3.0.0
Alternatively, your editor might support flutter pub get
. Check the docs for your editor to learn more.
Now in your Dart code, you can use:
import 'package:mdcharts/mdcharts.dart';
example/lib/main.dart
// Copyright (c) 2022, the MarchDev Toolkit project authors. Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.
import 'package:flutter/material.dart';
import 'src/bar_chart.dart';
import 'src/line_chart.dart';
import 'src/scaffolds/example_scaffold.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
runApp(const App());
}
class App extends StatelessWidget {
const App({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'MDCharts Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return const ExampleScaffold(
tabs: {
'Line Chart': LineChartExample(),
'Bar Chart': BarChartExample(),
},
);
}
}
To see usage example navigate to the Example section.
Feel free to post a feature requests or report a bug here.
Author: Marchdev-tk
Source Code: https://github.com/marchdev-tk/mdcharts
License: BSD-3-Clause license
1656459900
d3-exploder
A tiny d3 extension which lets you turn your maps into other types of charts!
d3-exploder
can be installed via npm
npm install d3-exploder
Note:
d3-exploder >= 2.0.0 supports d3 v4. For use with d3 v3, install version 1 of d3-exploder.
import * as d3 from 'd3';
import { exploder } from 'd3-exploder';
// Create an exploder function
var exploder = exploder()
.projection(d3.geoAlbersUsa().scale(width))
.size(function(d, i) {
// function new size of features in pixels
})
.position(function(d, index) {
// function returning array [x, y]
// which specifies the position of
// the features in the svg
});
// Call exploder, optionally in a transition
var width = 960,
height = 500,
centered;
var projection = d3.geoAlbersUsa().scale(width);
var path = d3.geoPath()
.projection(projection);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var g = svg.append("g");
d3.json("us.json", function(error, us) {
var state_features = topojson.feature(us, us.objects.states).features;
var scale = d3.scaleLinear()
.domain([0, state_features.length])
.range([0, 360]);
var states = g.append("g")
.attr("id", "states")
.selectAll("path")
.data(state_features)
.enter().append("path")
.attr("d", path);
var exploder = d3.exploder()
.projection(projection)
.size(function(d, i) { return 40; });
d3.select("#shuffle").on('click', function() {
var rand = d3.shuffle(d3.range(state_features.length));
states.transition()
.duration(500)
.call(
exploder.position(function(d, index) {
var i = rand[index];
return [120 + (i%10)*60, 40 + Math.floor(i/10)*60];
})
);
});
});
Another example brought up by a user
Author: bsouthga
Source Code: https://github.com/bsouthga/d3-exploder
License:
1656394080
Declarative Charting Framework for Angular!
ngx-charts is unique because we don't merely wrap d3, nor any other chart engine for that matter. It is using Angular to render and animate the SVG elements with all of its binding and speed goodness, and uses d3 for the excellent math functions, scales, axis and shape generators. By having Angular do all of the rendering it opens us up to endless possibilities the Angular platform provides such as AoT, SSR, etc.
Data visualization is a science but that doesn't mean it has to be ugly. One of the big efforts we've made while creating this project is to make the charts aesthetically pleasing. The styles are also completely customizable through CSS, so you can override them as you please.
Also, constructing custom charts is possible by leveraging the various ngx-charts components that are exposed through the ngx-charts module.
To use ngx-charts in your project install it via npm:
npm i @swimlane/ngx-charts --save
To learn how to use the ngx-charts components to build custom charts and find examples, please refer to our Custom Charts Page.
git checkout master
)git pull
)npm ci
)npm test
)git checkout -b release/X.Y.Z
projects/swimlane/ngx-charts/package.json
.projects/docs/changelog.md
git commit -am "(release): X.Y.Z"
git tag X.Y.Z
git push origin HEAD --tags
npm run publish:lib
ngx-charts
is a Swimlane open-source project; we believe in giving back to the open-source community by sharing some of the projects we build for our application. Swimlane is an automated cyber security operations and incident response platform that enables cyber security teams to leverage threat intelligence, speed up incident response and automate security operations.
SecOps Hub is an open, product-agnostic, online community for security professionals to share ideas, use cases, best practices, and incident response strategies.
For more info, check out the documentation and the demos.
Author: Swimlane
Source Code: https://github.com/swimlane/ngx-charts
License: MIT license
1656386580
nivo provides supercharged React components to easily build dataviz apps, it's built on top of d3.
Several libraries already exist for React d3 integration, but just a few provide server side rendering ability and fully declarative charts.
In order to use nivo, you have to install the @nivo/core
package and then choose some of the scoped @nivo
packages according to the charts you wish to use:
yarn add @nivo/core @nivo/bar
Join the nivo discord community.
nivo is comprised of several packages/components, for a full list, please use the Components Explorer.
Author: Plouc
Source Code: https://github.com/plouc/nivo
License: MIT license
1656371640
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 extend and modify. The out-of-the-box behavior these chart components represents our thoughts on best practices in chart interactivity and presentation.
https://emberjs.jsbin.com/rekawobugu/1/edit
Unfortunately, this version of Ember Charts is out of date, and the current maintainers of Ember Charts at Addepar have not been able to update it recently.
Ember Charts is an Ember CLI addon published to the public NPM repository at https://www.npmjs.com/package/ember-charts , so it can be installed like so:
# ember-cli >= 0.2.0
ember install:addon ember-charts
# ember-cli >= 0.2.3
ember install ember-charts
Once it's installed, you can customize the look of Ember Charts with CSS.
npm install -g bower # install Bower
bower install ember-charts --save
Using Ember Charts with bower is deprecated and will eventually be removed. We recommend that you migrate your apps to Ember CLI! Documentation has been updated to show Ember CLI usage. If you need documentation for globals-based use, please check out version 0.5.0 of Ember Charts and follow the setup instructions under "Running Old Versions" to display the old guides.
After cloning this repo, install dependencies and run the demo application:
yarn
bower install
ember serve
Now you can:
We aim to support the last two major versions of every common browser.
If you need to support further browsers, we welcome pull requests with fixes.
Touch support may work but has not been tested.
Got something to add? Great! Bug reports, feature ideas, and (especially) pull requests are extremely helpful, and this project wouldn't be where it is today without lots of help from the community.
Please read the contribution guidelines for directions on opening issues and working on the project.
Ember Charts uses Semantic Versioning to keep track of releases using the following format:
<major>.<minor>.<patch>
In a nutshell, this means:
Prior to releasing, ensure that the CHANGELOG.md is updated to track any changes that have been made since the prior release.
We increment version numbers and release using release-it:
npm run release -- <options>
The local configuration file for release-it
is named .release-it.json
, found in the root directory of the repository.
By default, release-it
without options will increment the version number (X.Y.Z
--> X.Y.(Z+1)
) in the VERSION
file and package.json
file, and then commit the resulting changes to the ember-charts git repository.
If you want to control the version number, use these options:
npm run release -- major # 1.2.3 -> 2.0.0
npm run release -- minor # 1.2.3 -> 1.3.0
npm run release -- X.Y.Z # 1.2.3 -> X.Y.Z
Ember Charts has also configured release-it
to automatically update the gh-pages
branch (from which the demo and documentation website is published). This is done by pushing the /ember-dist/
directory after constructing it with ember build
. These commands can be seen in the .release-it.json
file.
release-it
is also configured to automatically publish the updated version to npm
.
Lastly, the new version should be released on Github, which can be done via the Github UI after the steps above are complete.
https://opensource.addepar.com/ember-charts/
Author: Addepar
Source Code: https://github.com/Addepar/ember-charts/
License: View license