- [init] annotations - basic chart - [outline] stacked and mixed - [outline] trends and regionsdocs
@@ -4,14 +4,14 @@ | |||
* Axis charts | |||
* [A basic chart](basic/basic_chart.md) | |||
* [Trends and Region Charts](basic/trends_regions.md) | |||
* [Adding more datasets](basic/multiple_datasets.md) | |||
* [Annotations and Tooltip format](basic/annotations.md) | |||
* [Stacked and Mixed Charts](basic/stacked_and_mixed.md) | |||
* Aggregation Charts | |||
* [Aka Sliced Diagrams](basic/aggr_sliced_diags.md) | |||
* [Pies and Percentages](basic/aggr_sliced_diags.md) | |||
* Update data | |||
* [Single Points]() | |||
* [Entire Data]() | |||
* Update state | |||
* [Modify data](update_data/modify_data.md) | |||
* Events | |||
* [Navigation]() | |||
@@ -0,0 +1,44 @@ | |||
Annotations are for special values (like range points). They are defined within the `data` property itself. | |||
## Markers | |||
To highlight certain values on the Y axis, `yMarkers` can be set. They will shown ad dotted lines on the graph. | |||
```js | |||
data = { | |||
// labels: [], | |||
// datasets: [], | |||
yMarkers: [ | |||
{ | |||
label: "Marker", | |||
value: 43, | |||
options: { labelPos: 'right' } | |||
} | |||
] | |||
} | |||
``` | |||
[demo only marker] | |||
## Regions | |||
2D counterparts to markers, they have a `start` and `end` instead of value: | |||
```js | |||
yRegions: [ | |||
{ | |||
label: "Region", | |||
start: -10, | |||
end: 50, | |||
options: { labelPos: 'left' } | |||
}, | |||
], | |||
``` | |||
Shown as a a greyed out area between the extremes. | |||
[demo only region] | |||
## Tooltips | |||
Tooltips are by default | |||
[demo format] |
@@ -10,7 +10,7 @@ data = { | |||
} | |||
``` | |||
Plug that in with a type `bar`, a color and height, | |||
Rendering it doesn't require much more that that. Plug the data in with a [type]() `bar`, with an optional [color]() and [height](): | |||
```js | |||
new frappe.Chart( "#chart", { | |||
@@ -22,34 +22,54 @@ new frappe.Chart( "#chart", { | |||
``` | |||
<div class="demo" id="bar-basic-1"></div> | |||
And similarly, a `line` chart: | |||
And similarly, a `line` chart is data-wise homomorphic to a bar chart: | |||
```js | |||
type:'line' | |||
``` | |||
<div class="demo" id="line-basic-1"></div> | |||
## Tweaks | |||
## Adding more datasets | |||
Axes lines are configurable. By default they are long `span`ning lines, but can also be short `tick`s:` | |||
A chart can have multiple datasets. In an axis chart, every dataset is represented individually. | |||
```js | |||
axisOptions: { | |||
xAxisMode: 'tick' // default: 'span' | |||
}, | |||
data: { | |||
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], | |||
datasets: [ | |||
{ name: "Dataset 1", values: [18, 40, 30, 35, 8, 52, 17, -4] }, | |||
{ name: "Dataset 2", values: [30, 50, -10, 15, 18, 32, 27, 14] } | |||
] | |||
} | |||
``` | |||
<div class="demo" id="bar-axis-tick"></div> | |||
<div class="demo" id="multi-dataset-line-bar"></div> | |||
## Responsiveness | |||
The bar <b>width</b> can be set by defining the <b>ratio of the space</b> between bars to the bar width. | |||
Frappe Charts are responsive, as they rerender all the data in the current available container width. To demonstrate, let's take the example of setting the [bar width]() for bar charts. | |||
In order to set the bar width, instead of defining it and the space between the bars independently, we simply define the <b>ratio of the space</b> between bars to the bar width. The chart then adjusts the actual size proportional to the chart container. | |||
```js | |||
barOptions: { | |||
spaceRatio: 0.2 // default: 1 | |||
}, | |||
``` | |||
Try resizing the window to see the effect, with different ratio values. | |||
<div class="demo" id="bar-barwidth"></div> | |||
So can the <b>dot size</b> on a line graph, with the `dotSize` property in `lineOptions`. | |||
## More Tweaks | |||
Axis lines define a chart presentation. By default they are long `span`ning lines, but to give prominence to data points, X and/or Y axes can also be short `tick`s: | |||
```js | |||
axisOptions: { | |||
xAxisMode: 'tick' // default: 'span' | |||
}, | |||
``` | |||
<div class="demo" id="bar-axis-tick"></div> | |||
Just like bar width, we can set the <b>dot size</b> on a line graph, with the [`dotSize`]() property in [`lineOptions`](). | |||
```js | |||
lineOptions: { | |||
@@ -58,4 +78,4 @@ lineOptions: { | |||
``` | |||
<div class="demo" id="line-dotsize"></div> | |||
Next up, we'll discover how multiple datasets can behave in different charts. | |||
These were some of the basic toggles to a chart; there are quite a few line options to go with, particularly to create [regions](). We'll look at those in next section. |
@@ -1 +1,26 @@ | |||
## Day-based Month-wise data | |||
## Day-based Month-wise data | |||
The heatmap is a representation of day-wise data (similar to [the GitHub Contribution Graph]()). It spaces out data values linearly, across 5 levels (zero data kept exclusive). | |||
In this case, the data has three parts, | |||
```js | |||
let heatmapData = { | |||
dataPoints: { | |||
"1426744959": 20, | |||
"1463673055": 113, | |||
"1476892421": 57, | |||
// ... | |||
}, | |||
start: startDate, // a JS date object | |||
end: endDate | |||
} | |||
``` | |||
(We are working on making the start date and end date implicit and optional). [tip] | |||
The chart is rendered by the type `heatmap`: | |||
```js | |||
``` | |||
@@ -1,18 +0,0 @@ | |||
## Multiple datasets | |||
A chart can have multiple datasets. In an axis chart, every dataset is represented individually. | |||
```js | |||
data: { | |||
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], | |||
datasets: [ | |||
{ name: "Dataset 1", values: [18, 40, 30, 35, 8, 52, 17, -4] }, | |||
{ name: "Dataset 2", values: [30, 50, -10, 15, 18, 32, 27, 14] } | |||
] | |||
} | |||
``` | |||
<div class="demo" id="multi-dataset-line-bar"></div> | |||
All the `lineOptions` and `barOptions` apply to mutliple datasets as well. | |||
In [Aggregation Charts]() however, instead of being rendered individually, each data point in aggregated accross every dataset. We'll cover those next. |
@@ -0,0 +1,47 @@ | |||
## Adding more datasets | |||
As we have seen, chart can have [multiple datasets](). In an axis chart, every dataset is represented individually. | |||
```js | |||
data: { | |||
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], | |||
datasets: [ | |||
{ name: "Dataset 1", values: [18, 40, 30, 35, 8, 52, 17, -4] }, | |||
{ name: "Dataset 2", values: [30, 50, -10, 15, 18, 32, 27, 14] } | |||
] | |||
} | |||
``` | |||
<div class="demo" id="multi-dataset-line-bar"></div> | |||
## Stacked Bar Chart | |||
Bars have two ways to show multiple data point values. The property [`stacked`]() in `barOptions` renders a stacked bar chart instead of the default adjacent bars: | |||
```js | |||
barOptions: { | |||
stacked: 1 // default 0 | |||
} | |||
``` | |||
[stacked/adjacent] | |||
## Mixed Bar/Line Chart | |||
Each dataset can also have a different `chartType`, which if specified, will take precedence over the `type` property. | |||
```js | |||
data: { | |||
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], | |||
datasets: [ | |||
{ name: "Dataset 1", values: [18, 40, 30, 35, 8, 52, 17, -4] }, | |||
{ name: "Dataset 2", values: [30, 50, -10, 15, 18, 32, 27, 14] } | |||
] | |||
} | |||
``` | |||
All the `lineOptions` and `barOptions` apply to mix and match datasets as well. | |||
[mix and match demo, no buttons] | |||
In [Aggregation Charts]() however, instead of being rendered individually, each data point in aggregated accross every dataset. We'll cover those next. |
@@ -1,11 +1,67 @@ | |||
`lineOptions` have a bunch of other properties too. Region charts are ... | |||
## Plotting Trends | |||
Line charts a great to show trends data. Given that such data usually involves a large number of data points. Changing some properties of a default line chart can reduce clutter. | |||
The X axis is a continuous (usually time) axis. | |||
## Data points | |||
For a homomorphic to plot | |||
Or you could just choose to show only the dots instead | |||
## Region Chart | |||
Or a more subtle way to show gradation of values. | |||
## Combinations | |||
```js | |||
lineOptions: { | |||
dotSize: 8 // default: 4 | |||
}, | |||
``` | |||
Here's a demo using different combinations of the line options. | |||
<div class="demo" id="line-trends-region-toggle"></div> | |||
Next up, we'll see how multiple datasets play out in charts. | |||
Next up, we'll play around with more than one datasets play out in charts. | |||
@@ -45,3 +45,6 @@ const chart = new frappe.Chart("#chart", { // or a DOM element, | |||
colors: ['#7cd6fd', '#743ee2'] | |||
}) | |||
``` | |||
## Demo | |||
Here's a demo to try out yourself: |