update charts docs
This commit is contained in:
Prateeksha Singh
parent
436ce11c60
commit
1edc2b2936
6 changed files with 3 additions and 225 deletions
|
|
@ -59,7 +59,6 @@
|
||||||
"PhotoSwipeUI_Default": true,
|
"PhotoSwipeUI_Default": true,
|
||||||
"fluxify": true,
|
"fluxify": true,
|
||||||
"io": true,
|
"io": true,
|
||||||
"c3": true,
|
|
||||||
"__": true,
|
"__": true,
|
||||||
"_p": true,
|
"_p": true,
|
||||||
"_f": true,
|
"_f": true,
|
||||||
|
|
|
||||||
3
frappe/docs/user/en/guides/desk/making_charts.md
Normal file
3
frappe/docs/user/en/guides/desk/making_charts.md
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
# Making Charts
|
||||||
|
|
||||||
|
[**Frappé Charts**](https://frappe.github.io/charts/) enables you to render simple line, bar or percentage graphs for single or multiple discreet sets of data points. You can also set special checkpoint values and summary stats. Check out the docs at https://frappe.github.io/charts/ to learn more.
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
# Making Charts using c3.js
|
|
||||||
|
|
||||||
Frappé bundles the c3.js libary to make charts inside the app and provides a wrapper class so that you can start using charts out of the box. To use chart, you need the x and y data, make a wrapper block and then just make the chart object.
|
|
||||||
|
|
||||||
### Time Series Example
|
|
||||||
|
|
||||||
page.chart = new frappe.ui.Chart({
|
|
||||||
// attach the chart here
|
|
||||||
wrapper: $('<div>').appendTo(page.body),
|
|
||||||
|
|
||||||
// pass the data, like
|
|
||||||
// ['x', '2016-01-01', '2016-01-02']
|
|
||||||
// ['Value', 20, 30]
|
|
||||||
data: {
|
|
||||||
x: 'x',
|
|
||||||
xFormat: '%Y-%m-%d',
|
|
||||||
columns: [data[0], data[1]],
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axis: {
|
|
||||||
x: {
|
|
||||||
type: 'timeseries',
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
min: 0,
|
|
||||||
padding: {bottom: 10}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
### Help
|
|
||||||
|
|
||||||
For more options, see the [c3js.org](http://c3js.org/examples.html) docs
|
|
||||||
|
|
@ -1,100 +0,0 @@
|
||||||
# Making Graphs
|
|
||||||
|
|
||||||
The Frappé UI **Graph** object enables you to render simple line, bar or percentage graphs for single or multiple discreet sets of data points. You can also set special checkpoint values and summary stats.
|
|
||||||
|
|
||||||
### Example: Line graph
|
|
||||||
Here's an example of a simple sales graph:
|
|
||||||
|
|
||||||
// Data
|
|
||||||
let months = ['August, 2016', 'September, 2016', 'October, 2016', 'November, 2016',
|
|
||||||
'December, 2016', 'January, 2017', 'February, 2017', 'March, 2017', 'April, 2017',
|
|
||||||
'May, 2017', 'June, 2017', 'July, 2017'];
|
|
||||||
|
|
||||||
let values1 = [24100, 31000, 17000, 12000, 27000, 16000, 27400, 11000, 8500, 15000, 4000, 20130];
|
|
||||||
let values2 = [17890, 10400, 12350, 20400, 17050, 23000, 7100, 13800, 16000, 20400, 11000, 13000];
|
|
||||||
let goal = 25000;
|
|
||||||
let current_val = 20130;
|
|
||||||
|
|
||||||
let g = new frappe.ui.Graph({
|
|
||||||
parent: $('.form-graph').empty(),
|
|
||||||
height: 200, // optional
|
|
||||||
mode: 'line', // 'line', 'bar' or 'percentage'
|
|
||||||
|
|
||||||
title: 'Sales',
|
|
||||||
subtitle: 'Monthly',
|
|
||||||
|
|
||||||
y: [
|
|
||||||
{
|
|
||||||
title: 'Data 1',
|
|
||||||
values: values1,
|
|
||||||
formatted: values1.map(d => '$ ' + d),
|
|
||||||
color: 'green' // Indicator colors: 'grey', 'blue', 'red',
|
|
||||||
// 'green', 'light-green', 'orange', 'purple', 'darkgrey',
|
|
||||||
// 'black', 'yellow', 'lightblue'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Data 2',
|
|
||||||
values: values2,
|
|
||||||
formatted: values2.map(d => '$ ' + d),
|
|
||||||
color: 'light-green'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
|
|
||||||
x: {
|
|
||||||
values: months.map(d => d.substring(0, 3)),
|
|
||||||
formatted: months
|
|
||||||
},
|
|
||||||
|
|
||||||
specific_values: [
|
|
||||||
{
|
|
||||||
name: 'Goal',
|
|
||||||
line_type: 'dashed', // 'dashed' or 'solid'
|
|
||||||
value: goal
|
|
||||||
},
|
|
||||||
],
|
|
||||||
|
|
||||||
summary: [
|
|
||||||
{
|
|
||||||
name: 'This month',
|
|
||||||
color: 'orange',
|
|
||||||
value: '$ ' + current_val
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Goal',
|
|
||||||
color: 'blue',
|
|
||||||
value: '$ ' + goal
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Completed',
|
|
||||||
color: 'green',
|
|
||||||
value: (current_val/goal*100).toFixed(1) + "%"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
<img src="/docs/assets/img/desk/line_graph_sales.png" class="screenshot">
|
|
||||||
|
|
||||||
`bar` mode yeilds:
|
|
||||||
|
|
||||||
<img src="/docs/assets/img/desk/bar_graph.png" class="screenshot">
|
|
||||||
|
|
||||||
You can set the `colors` property of `x` to an array of color values for `percentage` mode:
|
|
||||||
|
|
||||||
<img src="/docs/assets/img/desk/percentage_graph.png" class="screenshot">
|
|
||||||
|
|
||||||
You can also change the values of an existing graph with a new set of `y` values:
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
g.change_values([
|
|
||||||
{
|
|
||||||
values: data[2],
|
|
||||||
formatted: data[2].map(d => d + 'L')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
values: data[3],
|
|
||||||
formatted: data[3].map(d => d + 'L')
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
}, 1000);
|
|
||||||
|
|
||||||
<img src="/docs/assets/img/desk/animated_line_graph.gif" class="screenshot">
|
|
||||||
|
|
@ -970,47 +970,6 @@ li.user-progress .progress-bar {
|
||||||
.note-editor.note-frame .note-editing-area .note-editable {
|
.note-editor.note-frame .note-editing-area .note-editable {
|
||||||
color: #36414C;
|
color: #36414C;
|
||||||
}
|
}
|
||||||
.c3 svg {
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: 10px;
|
|
||||||
color: #36414C;
|
|
||||||
}
|
|
||||||
.c3-line {
|
|
||||||
stroke-width: 3px;
|
|
||||||
}
|
|
||||||
.c3-tooltip {
|
|
||||||
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
|
|
||||||
border-radius: 3px;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
.c3-tooltip tr {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
.c3-tooltip th {
|
|
||||||
color: #8D99A6;
|
|
||||||
background-color: #ffffff;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: normal;
|
|
||||||
padding: 2px 5px;
|
|
||||||
text-align: left;
|
|
||||||
border: 1px solid #d1d8dd;
|
|
||||||
}
|
|
||||||
.c3-tooltip td {
|
|
||||||
color: #36414C;
|
|
||||||
font-size: 11px;
|
|
||||||
padding: 3px 6px;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 1px solid #d1d8dd;
|
|
||||||
}
|
|
||||||
.c3-tooltip td > span {
|
|
||||||
display: inline-block;
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
margin-right: 6px;
|
|
||||||
}
|
|
||||||
.c3-tooltip td.value {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
input[type="checkbox"] {
|
input[type="checkbox"] {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
|
||||||
|
|
@ -894,54 +894,6 @@ li.user-progress {
|
||||||
color: @text-color;
|
color: @text-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c3 svg {
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: 10px;
|
|
||||||
color: @text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c3-line {
|
|
||||||
stroke-width: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c3-tooltip {
|
|
||||||
box-shadow: 3px 3px 3px rgba(0,0,0,0.1);
|
|
||||||
border-radius: 3px;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c3-tooltip tr {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c3-tooltip th {
|
|
||||||
color: @text-muted;
|
|
||||||
background-color: #ffffff;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: normal;
|
|
||||||
padding: 2px 5px;
|
|
||||||
text-align: left;
|
|
||||||
border: 1px solid @border-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c3-tooltip td {
|
|
||||||
color: @text-color;
|
|
||||||
font-size: 11px;
|
|
||||||
padding: 3px 6px;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 1px solid @border-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c3-tooltip td > span {
|
|
||||||
display: inline-block;
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
margin-right: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c3-tooltip td.value {
|
|
||||||
text-align: right; }
|
|
||||||
|
|
||||||
// custom font awesome checkbox
|
// custom font awesome checkbox
|
||||||
input[type="checkbox"] {
|
input[type="checkbox"] {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue