Skip to content

Commit

Permalink
feat: Added horizontal bar chart
Browse files Browse the repository at this point in the history
  • Loading branch information
@kantord
kantord committed Mar 14, 2018
1 parent bec1467 commit c7a5c70
Show file tree
Hide file tree
Showing 16 changed files with 648 additions and 18 deletions.
20 changes: 18 additions & 2 deletions docs/components.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,14 @@
</div>


<div class="gallery-item" markdown="1">

### horizontal bar chart ( [Source](examples/horizontal_bar_chart) )
![](screenshots/horizontal_bar_chart.png)

</div>


<div class="gallery-item" markdown="1">

### donut chart ( [Source](examples/donut_chart) )
Expand All @@ -36,6 +44,14 @@
</div>


<div class="gallery-item" markdown="1">

### horizontal stacked bar chart ( [Source](examples/horizontal_stacked_bar_chart) )
![](screenshots/horizontal_stacked_bar_chart.png)

</div>


<div class="gallery-item" markdown="1">

### stacked line chart ( [Source](examples/stacked_line_chart) )
Expand Down Expand Up @@ -70,8 +86,8 @@

<div class="gallery-item" markdown="1">

### scatter chart ( [Source](examples/scatter_chart) )
![](screenshots/scatter_chart.png)
### scatter plot ( [Source](examples/scatter_plot) )
![](screenshots/scatter_plot.png)

</div>

Expand Down
28 changes: 28 additions & 0 deletions docs/examples/horizontal_bar_chart.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
---
layout: default
title: How to use horizontal bar chart
---

# How to use horizontal bar chart
Here's an example code regarding the use of horizontal bar chart:

```yaml
---
dashboard "Example":
-
horizontal bar chart:
columns:
-
- "Apples"
- 3
-
- "Oranges"
- 2
-
- "Pears"
- 2

```
The code above will render a horizontal bar chart that looks like this:

![](../screenshots/horizontal_bar_chart.png)
15 changes: 15 additions & 0 deletions docs/examples/horizontal_bar_chart.yml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
---
dashboard "Example":
-
horizontal bar chart:
columns:
-
- "Apples"
- 3
-
- "Oranges"
- 2
-
- "Pears"
- 2

40 changes: 40 additions & 0 deletions docs/examples/horizontal_stacked_bar_chart.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
---
layout: default
title: How to use horizontal stacked bar chart
---

# How to use horizontal stacked bar chart
Here's an example code regarding the use of horizontal stacked bar chart:

```yaml
---
dashboard "Example":
-
horizontal stacked bar chart:
columns:
-
- "Apples"
- 3
- 2
- 3
- 4
- 2
-
- "Oranges"
- 2
- 1
- 0
- 1
- 1
-
- "Pears"
- 2
- 0
- 0
- 3
- 4

```
The code above will render a horizontal stacked bar chart that looks like this:

![](../screenshots/horizontal_stacked_bar_chart.png)
27 changes: 27 additions & 0 deletions docs/examples/horizontal_stacked_bar_chart.yml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
---
dashboard "Example":
-
horizontal stacked bar chart:
columns:
-
- "Apples"
- 3
- 2
- 3
- 4
- 2
-
- "Oranges"
- 2
- 1
- 0
- 1
- 1
-
- "Pears"
- 2
- 0
- 0
- 3
- 4

230 changes: 230 additions & 0 deletions docs/examples/scatter_plot.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,230 @@
---
layout: default
title: How to use scatter plot
---

# How to use scatter plot
Here's an example code regarding the use of scatter plot:

```yaml
---
dashboard "Example":
-
scatter plot:
xs:
setosa: "setosa_x"
versicolor: "versicolor_x"
columns:
-
- "setosa_x"
- 3.5
- 3
- 3.2
- 3.1
- 3.6
- 3.9
- 3.4
- 3.4
- 2.9
- 3.1
- 3.7
- 3.4
- 3
- 3
- 4
- 4.4
- 3.9
- 3.5
- 3.8
- 3.8
- 3.4
- 3.7
- 3.6
- 3.3
- 3.4
- 3
- 3.4
- 3.5
- 3.4
- 3.2
- 3.1
- 3.4
- 4.1
- 4.2
- 3.1
- 3.2
- 3.5
- 3.6
- 3
- 3.4
- 3.5
- 2.3
- 3.2
- 3.5
- 3.8
- 3
- 3.8
- 3.2
- 3.7
- 3.3
-
- "versicolor_x"
- 3.2
- 3.2
- 3.1
- 2.3
- 2.8
- 2.8
- 3.3
- 2.4
- 2.9
- 2.7
- 2
- 3
- 2.2
- 2.9
- 2.9
- 3.1
- 3
- 2.7
- 2.2
- 2.5
- 3.2
- 2.8
- 2.5
- 2.8
- 2.9
- 3
- 2.8
- 3
- 2.9
- 2.6
- 2.4
- 2.4
- 2.7
- 2.7
- 3
- 3.4
- 3.1
- 2.3
- 3
- 2.5
- 2.6
- 3
- 2.6
- 2.3
- 2.7
- 3
- 2.9
- 2.9
- 2.5
- 2.8
-
- "setosa"
- 0.2
- 0.2
- 0.2
- 0.2
- 0.2
- 0.4
- 0.3
- 0.2
- 0.2
- 0.1
- 0.2
- 0.2
- 0.1
- 0.1
- 0.2
- 0.4
- 0.4
- 0.3
- 0.3
- 0.3
- 0.2
- 0.4
- 0.2
- 0.5
- 0.2
- 0.2
- 0.4
- 0.2
- 0.2
- 0.2
- 0.2
- 0.4
- 0.1
- 0.2
- 0.2
- 0.2
- 0.2
- 0.1
- 0.2
- 0.2
- 0.3
- 0.3
- 0.2
- 0.6
- 0.4
- 0.3
- 0.2
- 0.2
- 0.2
- 0.2
-
- "versicolor"
- 1.4
- 1.5
- 1.5
- 1.3
- 1.5
- 1.3
- 1.6
- 1
- 1.3
- 1.4
- 1
- 1.5
- 1
- 1.4
- 1.3
- 1.4
- 1.5
- 1
- 1.5
- 1.1
- 1.8
- 1.3
- 1.5
- 1.2
- 1.3
- 1.4
- 1.4
- 1.7
- 1.5
- 1
- 1.1
- 1
- 1.2
- 1.6
- 1.5
- 1.6
- 1.5
- 1.3
- 1.3
- 1.3
- 1.2
- 1.4
- 1.2
- 1
- 1.3
- 1.2
- 1.3
- 1.3
- 1.1
- 1.3

```
The code above will render a scatter plot that looks like this:

![](../screenshots/scatter_plot.png)

0 comments on commit c7a5c70

Please sign in to comment.