96f0dc1926
reduce the size of the logo a bit so that second chart is not too much out of view. It cannot be gauranteed that it will be in view in lesser resolutions though. In this comit it is on the same position as it was earlier
258 lines
13 KiB
HTML
258 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Frappe Charts</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="keywords" content="open source javascript js charts library svg zero-dependency interactive data visualization beautiful drag resize">
|
|
<meta name="description" content="A simple, responsive, modern charts library for the web.">
|
|
|
|
<link rel="stylesheet" type="text/css" href="assets/css/normalize.css" media="screen">
|
|
<link href="https://fonts.googleapis.com/css?family=Rubik:400,500,700" rel="stylesheet">
|
|
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" media="screen">
|
|
<link rel="stylesheet" type="text/css" href="assets/css/frappe_theme.css" media="screen">
|
|
<link rel="stylesheet" type="text/css" href="assets/css/index.css" media="screen">
|
|
<link rel="stylesheet" type="text/css" href="assets/css/default.css" media="screen">
|
|
<script src="assets/js/highlight.pack.js"></script>
|
|
<script>hljs.initHighlightingOnLoad();</script>
|
|
|
|
<link rel="shortcut icon" href="https://frappe.github.io/frappe/assets/img/favicon.png" type="image/x-icon">
|
|
<link rel="icon" href="https://frappe.github.io/frappe/assets/img/favicon.png" type="image/x-icon">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<div class="row hero" style="padding-top: 10px; padding-bottom: 0px;">
|
|
<div class="jumbotron" style="background: transparent;">
|
|
<img src="https://raw.githubusercontent.com/frappe/design/master/logos/frappe-charts-symbol.svg?sanitize=true" width="50px" height="auto" style="padding-bottom:1em;">
|
|
<h1>Frappé Charts</h1>
|
|
<p>GitHub-inspired simple and modern charts for the web</br>with zero dependencies.</p>
|
|
<!--<p class="mt-2">Because dumb charts are hard to come by.</p>-->
|
|
</div>
|
|
|
|
<div class="col-sm-10 push-sm-1 later" style="font-size: 14px;">
|
|
<div id="chart-composite-1" class="border"><svg height=225></svg></div>
|
|
<p class="mt-1">Click or use arrow keys to navigate data points</p>
|
|
</div>
|
|
<div class="col-sm-10 push-sm-1 later" style="font-size: 14px;">
|
|
<div id="chart-composite-2" class="border"><svg height=225></svg></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="group later">
|
|
<div class="row section">
|
|
|
|
<div class="col-sm-10 push-sm-1">
|
|
<div class="dashboard-section">
|
|
<h6 class="margin-vertical-rem">
|
|
<!--Bars, Lines or <a href="http://www.storytellingwithdata.com/blog/2011/07/death-to-pie-charts" target="_blank">Percentages</a>-->
|
|
Create a chart
|
|
</h6>
|
|
<p class="step-explain">Install</p>
|
|
<pre><code class="hljs html"> npm install frappe-charts</code></pre>
|
|
<p class="step-explain">Include it in your HTML</p>
|
|
<pre><code class="hljs html"> <script src="frappe-charts.min.js" /></code></pre>
|
|
<p class="step-explain">Make a new Chart</p>
|
|
<pre><code class="hljs html"> <!--HTML-->
|
|
<div id="chart"></div></code></pre>
|
|
<pre><code class="hljs javascript"> // Javascript
|
|
let data = {
|
|
labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
|
|
"12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],
|
|
|
|
datasets: [
|
|
{
|
|
title: "Some Data", color: "light-blue",
|
|
values: [25, 40, 30, 35, 8, 52, 17, -4]
|
|
},
|
|
{
|
|
title: "Another Set", color: "violet",
|
|
values: [25, 50, -10, 15, 18, 32, 27, 14]
|
|
},
|
|
{
|
|
title: "Yet Another", color: "blue",
|
|
values: [15, 20, -3, -15, 58, 12, -17, 37]
|
|
}
|
|
]
|
|
};
|
|
|
|
let chart = new Chart({
|
|
parent: "#chart",
|
|
title: "My Awesome Chart",
|
|
data: data,
|
|
type: 'bar', // or 'line', 'scatter', 'percentage'
|
|
height: 250
|
|
});</code></pre>
|
|
<div id="chart-types" class="border"></div>
|
|
<div class="btn-group chart-type-buttons margin-vertical-px mx-auto" role="group">
|
|
<button type="button" class="btn btn-sm btn-secondary active" data-type='bar'>Bar Chart</button>
|
|
<button type="button" class="btn btn-sm btn-secondary" data-type='line'>Line Chart</button>
|
|
<button type="button" class="btn btn-sm btn-secondary" data-type='scatter'>Scatter Chart</button>
|
|
<button type="button" class="btn btn-sm btn-secondary" data-type='percentage'>Percentage Chart</button>
|
|
</div>
|
|
<p class="text-muted">
|
|
<a target="_blank" href="http://www.storytellingwithdata.com/blog/2011/07/death-to-pie-charts">Why Percentage?</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-10 push-sm-1">
|
|
<div class="dashboard-section">
|
|
<h6 class="margin-vertical-rem">
|
|
Update Values
|
|
</h6>
|
|
<pre><code class="hljs javascript"> // Update entire datasets
|
|
chart.update_values(
|
|
[
|
|
{values: new_dataset_1_values},
|
|
{values: new_dataset_2_values}
|
|
],
|
|
new_labels
|
|
);
|
|
|
|
// Add a new data point
|
|
chart.add_data_point(
|
|
[new_value_1, new_value_2],
|
|
new_label,
|
|
index // defaults to last index
|
|
);
|
|
|
|
// Remove a data point
|
|
chart.remove_data_point(index);</code></pre>
|
|
<div id="chart-update" class="border"></div>
|
|
<div class="chart-update-buttons mt-1 mx-auto" role="group">
|
|
<button type="button" class="btn btn-sm btn-secondary" data-update="random">Random Data</button>
|
|
<button type="button" class="btn btn-sm btn-secondary" data-update="add">Add Value</button>
|
|
<button type="button" class="btn btn-sm btn-secondary" data-update="remove">Remove Value</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-10 push-sm-1">
|
|
<div class="dashboard-section">
|
|
<h6 class="margin-vertical-rem">
|
|
Plot Trends
|
|
</h6>
|
|
<pre><code class="hljs javascript"> ...
|
|
x_axis_mode: 'tick', // for short label ticks
|
|
// or 'span' for long spanning vertical axis lines
|
|
y_axis_mode: 'span', // for long horizontal lines, or 'tick'
|
|
is_series: 1, // to allow for skipping of X values
|
|
...</code></pre>
|
|
<div id="chart-trends" class="border"></div>
|
|
<div class="btn-group chart-plot-buttons mt-1 mx-auto" role="group">
|
|
<button type="button" class="btn btn-sm btn-secondary" data-type="line">Line</button>
|
|
<button type="button" class="btn btn-sm btn-secondary active" data-type="heatline">HeatLine</button>
|
|
<button type="button" class="btn btn-sm btn-secondary" data-type="region">Region</button>
|
|
</div>
|
|
<pre><code class="hljs javascript margin-vertical-px"> ...
|
|
type: 'line', // Line Chart specific properties:
|
|
|
|
show_dots: 0, // Show data points on the line; default 1
|
|
heatline: 1, // Show a value-wise line gradient; default 0
|
|
region_fill: 1, // Fill the area under the graph; default 0
|
|
...</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-10 push-sm-1">
|
|
<div class="dashboard-section">
|
|
<h6 class="margin-vertical-rem">
|
|
Listen to state change
|
|
</h6>
|
|
<div class="row">
|
|
<div class="col-sm-8">
|
|
<div id="chart-events" class="border"></div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div class="chart-events-data" class="border data-container">
|
|
<div class="image-container border">
|
|
<img class="moon-image" src="./assets/img/europa.jpg">
|
|
</div>
|
|
<div class="data margin-vertical-px">
|
|
<h6 class="moon-name">Europa</h6>
|
|
<p>Semi-major-axis: <span class="semi-major-axis">671034</span> km</p>
|
|
<p>Mass: <span class="mass">4800000</span> x 10^16 kg</p>
|
|
<p>Diameter: <span class="diameter">3121.6</span> km</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<pre><code class="hljs javascript margin-vertical-px"> chart.parent.addEventListener('data-select', (e) => {
|
|
update_moon_data(e.index); // e contains index and value of current datapoint
|
|
});</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-10 push-sm-1">
|
|
<div class="dashboard-section">
|
|
<h6 class="margin-vertical-rem">
|
|
Simple Aggregations
|
|
</h6>
|
|
<div id="chart-aggr" class="border"></div>
|
|
<div class="chart-aggr-buttons mt-1 mx-auto" role="group">
|
|
<button type="button" class="btn btn-sm btn-secondary" data-aggregation="sums">Show Sums</button>
|
|
<button type="button" class="btn btn-sm btn-secondary" data-aggregation="average">Show Averages</button>
|
|
</div>
|
|
<pre><code class="hljs javascript margin-vertical-px"> chart.show_sums(); // and `hide_sums()`
|
|
|
|
chart.show_averages(); // and `hide_averages()`</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-10 push-sm-1">
|
|
<div class="dashboard-section">
|
|
<h6 class="margin-vertical-rem">
|
|
And an Annual Heatmap
|
|
</h6>
|
|
<div id="chart-heatmap" class="border"
|
|
style="overflow: scroll; text-align: center; padding: 20px;"></div>
|
|
<div class="heatmap-mode-buttons btn-group mt-1 mx-auto" role="group">
|
|
<button type="button" class="btn btn-sm btn-secondary active" data-mode="discrete">Discrete</button>
|
|
<button type="button" class="btn btn-sm btn-secondary" data-mode="continuous">Continuous</button>
|
|
</div>
|
|
<pre><code class="hljs javascript margin-vertical-px"> let heatmap = new Chart({
|
|
parent: "#heatmap",
|
|
data: heatmap_data, // object with date/timestamp-value pairs
|
|
type: 'heatmap',
|
|
height: 100,
|
|
discrete_domains: 1 // default 0
|
|
});</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-10 push-sm-1">
|
|
<div class="dashboard-section">
|
|
<!-- Closing -->
|
|
<div class="text-center" style="margin-top: 70px">
|
|
<a href="https://github.com/frappe/charts/archive/master.zip"><button class="large blue button">Download</button></a>
|
|
<p class="mt-2"><a href="https://github.com/frappe/charts" target="_blank">View on GitHub</a></p>
|
|
<p>License: MIT</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="built-with-frappe text-center" style="margin-top: -20px">
|
|
<img style="padding: 5px; width: 40px; background: #fff" class="frappe-bird" src="https://frappe.github.io/frappe/assets/img/frappe-bird-grey.svg">
|
|
<p style="margin: 24px 0 80px 0; font-size: 15px">Made with ♥ by <a href="https://github.com/pratu16x7" target="_blank">pratu16x7</a>. Used in <a href="https://erpnext.com" target="_blank">ERPNext</a>.</p>
|
|
<!--<p style="margin: 24px 0 80px 0; font-size: 12px">Data from <a href="https://api.nasa.gov/index.html" target="_blank">NASA Open APIs</a></p>-->
|
|
</div>
|
|
|
|
<a href="https://github.com/frappe/charts" target="_blank" class="github-corner" aria-label="View source on Github">
|
|
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#9a9a9a; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
|
|
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
|
|
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
|
|
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
|
|
</svg>
|
|
</a>
|
|
|
|
<script src="assets/js/frappe-charts.min.js"></script>
|
|
<script src="assets/js/index.js"></script>
|
|
</body>
|
|
</html>
|