Skip to content

Commit 6ee87cb

Browse files
mdmintzmdmintz
committed
Add the ability to create area charts with Chart Maker
1 parent 09120e5 commit 6ee87cb

File tree

5 files changed

+210
-32
lines changed

5 files changed

+210
-32
lines changed

‎examples/chart_maker/ReadMe.md

Lines changed: 77 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,58 @@
22

33
# 📊 Chart Maker 📊
44

5-
SeleniumBase Chart Maker allows you to create HTML charts with Python.<br />
6-
The HighCharts library is used for creating charts.
5+
SeleniumBase Chart Maker allows you to create HTML charts with Python. (The HighCharts library is used for creating charts.)
76

8-
**Here's a sample chart:**
7+
**Here's a sample pie chart:**
98

109
<a href="https://seleniumbase.io/other/chart_presentation.html"><img width="500" src="https://seleniumbase.io/other/sample_pie_chart.png" title="Screenshot"></a><br>
1110

12-
([Click on the image for an actual chart demo](https://seleniumbase.io/other/chart_presentation.html))
11+
([Click to see a presentation with multiple charts](https://seleniumbase.io/other/chart_presentation.html))
1312

14-
Here's how to run the example:
13+
Here's how to run an example presentation with a pie chart:
1514

1615
```bash
1716
cd examples/chart_maker
1817
pytest my_chart.py
1918
```
2019

20+
Here's the code for that pie chart presentation:
2121

22-
### Creating a new chart:
22+
```python
23+
from seleniumbase import BaseCase
24+
25+
class MyChartMakerClass(BaseCase):
26+
def test_chart_maker(self):
27+
self.create_presentation()
28+
self.create_pie_chart(title="Automated Tests")
29+
self.add_data_point("Passed", 7, color="#95d96f")
30+
self.add_data_point("Untested", 2, color="#eaeaea")
31+
self.add_data_point("Failed", 1, color="#f1888f")
32+
self.add_slide("<p>Pie Chart</p>" + self.extract_chart())
33+
self.begin_presentation(filename="my_chart.html")
34+
```
35+
36+
Here's how to run an example presentation with multiple charts: (Press the right arrow to advance to the next slide)
37+
38+
```bash
39+
cd examples/chart_maker
40+
pytest chart_presentation.py
41+
```
42+
43+
Here are screenshots from the examples:
44+
45+
<a href="https://seleniumbase.io/other/sample_column_chart.png"><img width="500" src="https://seleniumbase.io/other/sample_column_chart.png" title="Screenshot"></a><br>
46+
47+
<a href="https://seleniumbase.io/other/sample_bar_chart.png"><img width="500" src="https://seleniumbase.io/other/sample_bar_chart.png" title="Screenshot"></a><br>
48+
49+
<a href="https://seleniumbase.io/other/sample_line_chart.png"><img width="500" src="https://seleniumbase.io/other/sample_line_chart.png" title="Screenshot"></a><br>
50+
51+
<a href="https://seleniumbase.io/other/sample_area_chart.png"><img width="500" src="https://seleniumbase.io/other/sample_area_chart.png" title="Screenshot"></a><br>
52+
53+
<a href="https://seleniumbase.io/other/multi_series_chart.png"><img width="500" src="https://seleniumbase.io/other/multi_series_chart.png" title="Screenshot"></a><br>
54+
55+
56+
### Creating new charts:
2357

2458
```python
2559
self.create_pie_chart(
@@ -85,7 +119,28 @@ self.create_column_chart(
85119
self.create_line_chart(
86120
chart_name=None, title=None, subtitle=None,
87121
data_name=None, unit=None, zero=False, libs=True):
88-
""" Creates a JavaScript column chart using "HighCharts".
122+
""" Creates a JavaScript line chart using "HighCharts".
123+
@Params
124+
chart_name - If creating multiple charts,
125+
use this to select which one.
126+
title - The title displayed for the chart.
127+
subtitle - The subtitle displayed for the chart.
128+
data_name - Set the series name. Useful for multi-series charts.
129+
unit - The description label given to the chart's y-axis values.
130+
zero - If True, the y-axis always starts at 0. (Default: False).
131+
libs - The option to include Chart libraries (JS and CSS files).
132+
Should be set to True (default) for the first time creating
133+
a chart on a web page. If creating multiple charts on
134+
a web page, you no longer need to re-import the libraries
135+
when creating additional charts.
136+
"""
137+
```
138+
139+
```python
140+
self.create_area_chart(
141+
chart_name=None, title=None, subtitle=None,
142+
data_name=None, unit=None, zero=False, libs=True):
143+
""" Creates a JavaScript area chart using "HighCharts".
89144
@Params
90145
chart_name - If creating multiple charts,
91146
use this to select which one.
@@ -187,23 +242,29 @@ All methods have the optional ``chart_name`` argument, which is only needed if y
187242
from seleniumbase import BaseCase
188243

189244
class MyChartMakerClass(BaseCase):
190-
191245
def test_chart_maker(self):
192246
self.create_presentation()
193-
self.create_pie_chart(title="Automated Tests")
194-
self.add_data_point("Passed", 7, color="#95d96f")
195-
self.add_data_point("Untested", 2, color="#eaeaea")
196-
self.add_data_point("Failed", 1, color="#f1888f")
197-
self.add_slide("<p>Pie Chart</p>" + self.extract_chart())
198-
self.begin_presentation(filename="my_chart.html")
247+
self.create_line_chart(
248+
title="Time Outside", subtitle="Last Week", unit="Minutes")
249+
self.add_data_point("Sun", 5)
250+
self.add_data_point("Mon", 10)
251+
self.add_data_point("Tue", 20)
252+
self.add_data_point("Wed", 40)
253+
self.add_data_point("Thu", 80)
254+
self.add_data_point("Fri", 65)
255+
self.add_data_point("Sat", 50)
256+
self.add_slide("<p>Line Chart</p>" + self.extract_chart())
257+
self.begin_presentation(filename="line_chart.html", interval=8)
199258
```
200259

201-
#### This example is from [my_chart.py](https://github.com/seleniumbase/SeleniumBase/blob/master/examples/chart_maker/my_chart.py), which you can run from the ``examples/chart_maker`` folder with the following command:
260+
#### This example is from [test_line_chart.py](https://github.com/seleniumbase/SeleniumBase/blob/master/examples/chart_maker/test_line_chart.py), which you can run from the ``examples/chart_maker`` folder with the following command:
202261

203262
```bash
204-
pytest my_chart.py
263+
pytest test_line_chart.py
205264
```
206265

266+
Because that presentation above has an ``interval`` set to ``8``, it will automatically advance to the next slide after 8 seconds. (Or exit if there are no more slides.)
267+
207268
### For a more advanced example (multiple charts in a presentation):
208269

209270
```python

‎examples/chart_maker/test_area_chart.py

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
from seleniumbase import BaseCase
2+
3+
4+
class MyChartMakerClass(BaseCase):
5+
6+
def test_chart_maker(self):
7+
self.create_presentation(theme="moon")
8+
self.create_area_chart(
9+
title="Time Outside", subtitle="Last Week", unit="Minutes")
10+
self.add_data_point("Sun", 5)
11+
self.add_data_point("Mon", 10)
12+
self.add_data_point("Tue", 20)
13+
self.add_data_point("Wed", 40)
14+
self.add_data_point("Thu", 80)
15+
self.add_data_point("Fri", 65)
16+
self.add_data_point("Sat", 50)
17+
self.add_slide("<p><b>Area Chart</b></p>" + self.extract_chart())
18+
self.begin_presentation(filename="line_chart.html", interval=8)

‎help_docs/chart_maker.md

Lines changed: 77 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,58 @@
22

33
# 📊 Chart Maker 📊
44

5-
SeleniumBase Chart Maker allows you to create HTML charts with Python.<br />
6-
The HighCharts library is used for creating charts.
5+
SeleniumBase Chart Maker allows you to create HTML charts with Python. (The HighCharts library is used for creating charts.)
76

8-
**Here's a sample chart:**
7+
**Here's a sample pie chart:**
98

109
<a href="https://seleniumbase.io/other/chart_presentation.html"><img width="500" src="https://seleniumbase.io/other/sample_pie_chart.png" title="Screenshot"></a><br>
1110

12-
([Click on the image for an actual chart demo](https://seleniumbase.io/other/chart_presentation.html))
11+
([Click to see a presentation with multiple charts](https://seleniumbase.io/other/chart_presentation.html))
1312

14-
Here's how to run the example:
13+
Here's how to run an example presentation with a pie chart:
1514

1615
```bash
1716
cd examples/chart_maker
1817
pytest my_chart.py
1918
```
2019

20+
Here's the code for that pie chart presentation:
2121

22-
### Creating a new chart:
22+
```python
23+
from seleniumbase import BaseCase
24+
25+
class MyChartMakerClass(BaseCase):
26+
def test_chart_maker(self):
27+
self.create_presentation()
28+
self.create_pie_chart(title="Automated Tests")
29+
self.add_data_point("Passed", 7, color="#95d96f")
30+
self.add_data_point("Untested", 2, color="#eaeaea")
31+
self.add_data_point("Failed", 1, color="#f1888f")
32+
self.add_slide("<p>Pie Chart</p>" + self.extract_chart())
33+
self.begin_presentation(filename="my_chart.html")
34+
```
35+
36+
Here's how to run an example presentation with multiple charts: (Press the right arrow to advance to the next slide)
37+
38+
```bash
39+
cd examples/chart_maker
40+
pytest chart_presentation.py
41+
```
42+
43+
Here are screenshots from the examples:
44+
45+
<a href="https://seleniumbase.io/other/sample_column_chart.png"><img width="500" src="https://seleniumbase.io/other/sample_column_chart.png" title="Screenshot"></a><br>
46+
47+
<a href="https://seleniumbase.io/other/sample_bar_chart.png"><img width="500" src="https://seleniumbase.io/other/sample_bar_chart.png" title="Screenshot"></a><br>
48+
49+
<a href="https://seleniumbase.io/other/sample_line_chart.png"><img width="500" src="https://seleniumbase.io/other/sample_line_chart.png" title="Screenshot"></a><br>
50+
51+
<a href="https://seleniumbase.io/other/sample_area_chart.png"><img width="500" src="https://seleniumbase.io/other/sample_area_chart.png" title="Screenshot"></a><br>
52+
53+
<a href="https://seleniumbase.io/other/multi_series_chart.png"><img width="500" src="https://seleniumbase.io/other/multi_series_chart.png" title="Screenshot"></a><br>
54+
55+
56+
### Creating new charts:
2357

2458
```python
2559
self.create_pie_chart(
@@ -85,7 +119,28 @@ self.create_column_chart(
85119
self.create_line_chart(
86120
chart_name=None, title=None, subtitle=None,
87121
data_name=None, unit=None, zero=False, libs=True):
88-
""" Creates a JavaScript column chart using "HighCharts".
122+
""" Creates a JavaScript line chart using "HighCharts".
123+
@Params
124+
chart_name - If creating multiple charts,
125+
use this to select which one.
126+
title - The title displayed for the chart.
127+
subtitle - The subtitle displayed for the chart.
128+
data_name - Set the series name. Useful for multi-series charts.
129+
unit - The description label given to the chart's y-axis values.
130+
zero - If True, the y-axis always starts at 0. (Default: False).
131+
libs - The option to include Chart libraries (JS and CSS files).
132+
Should be set to True (default) for the first time creating
133+
a chart on a web page. If creating multiple charts on
134+
a web page, you no longer need to re-import the libraries
135+
when creating additional charts.
136+
"""
137+
```
138+
139+
```python
140+
self.create_area_chart(
141+
chart_name=None, title=None, subtitle=None,
142+
data_name=None, unit=None, zero=False, libs=True):
143+
""" Creates a JavaScript area chart using "HighCharts".
89144
@Params
90145
chart_name - If creating multiple charts,
91146
use this to select which one.
@@ -187,23 +242,29 @@ All methods have the optional ``chart_name`` argument, which is only needed if y
187242
from seleniumbase import BaseCase
188243

189244
class MyChartMakerClass(BaseCase):
190-
191245
def test_chart_maker(self):
192246
self.create_presentation()
193-
self.create_pie_chart(title="Automated Tests")
194-
self.add_data_point("Passed", 7, color="#95d96f")
195-
self.add_data_point("Untested", 2, color="#eaeaea")
196-
self.add_data_point("Failed", 1, color="#f1888f")
197-
self.add_slide("<p>Pie Chart</p>" + self.extract_chart())
198-
self.begin_presentation(filename="my_chart.html")
247+
self.create_line_chart(
248+
title="Time Outside", subtitle="Last Week", unit="Minutes")
249+
self.add_data_point("Sun", 5)
250+
self.add_data_point("Mon", 10)
251+
self.add_data_point("Tue", 20)
252+
self.add_data_point("Wed", 40)
253+
self.add_data_point("Thu", 80)
254+
self.add_data_point("Fri", 65)
255+
self.add_data_point("Sat", 50)
256+
self.add_slide("<p>Line Chart</p>" + self.extract_chart())
257+
self.begin_presentation(filename="line_chart.html", interval=8)
199258
```
200259

201-
#### This example is from [my_chart.py](https://github.com/seleniumbase/SeleniumBase/blob/master/examples/chart_maker/my_chart.py), which you can run from the ``examples/chart_maker`` folder with the following command:
260+
#### This example is from [test_line_chart.py](https://github.com/seleniumbase/SeleniumBase/blob/master/examples/chart_maker/test_line_chart.py), which you can run from the ``examples/chart_maker`` folder with the following command:
202261

203262
```bash
204-
pytest my_chart.py
263+
pytest test_line_chart.py
205264
```
206265

266+
Because that presentation above has an ``interval`` set to ``8``, it will automatically advance to the next slide after 8 seconds. (Or exit if there are no more slides.)
267+
207268
### For a more advanced example (multiple charts in a presentation):
208269

209270
```python

‎help_docs/method_summary.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -383,6 +383,9 @@ self.create_column_chart(chart_name=None, title=None, subtitle=None,
383383
self.create_line_chart(chart_name=None, title=None, subtitle=None,
384384
data_name=None, unit=None, zero=False, libs=True)
385385

386+
self.create_area_chart(chart_name=None, title=None, subtitle=None,
387+
data_name=None, unit=None, zero=False, libs=True)
388+
386389
self.add_series_to_chart(data_name=None, chart_name=None)
387390

388391
self.add_data_point(label, value, color=None, chart_name=None)

‎seleniumbase/fixtures/base_case.py

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3557,6 +3557,33 @@ def create_line_chart(
35573557
chart_name=chart_name, title=title, subtitle=subtitle,
35583558
style=style, data_name=data_name, unit=unit, zero=zero, libs=libs)
35593559

3560+
def create_area_chart(
3561+
self, chart_name=None, title=None, subtitle=None,
3562+
data_name=None, unit=None, zero=False, libs=True):
3563+
""" Creates a JavaScript area chart using "HighCharts".
3564+
@Params
3565+
chart_name - If creating multiple charts,
3566+
use this to select which one.
3567+
title - The title displayed for the chart.
3568+
subtitle - The subtitle displayed for the chart.
3569+
data_name - Set the series name. Useful for multi-series charts.
3570+
unit - The description label given to the chart's y-axis values.
3571+
zero - If True, the y-axis always starts at 0. (Default: False).
3572+
libs - The option to include Chart libraries (JS and CSS files).
3573+
Should be set to True (default) for the first time creating
3574+
a chart on a web page. If creating multiple charts on
3575+
a web page, you no longer need to re-import the libraries
3576+
when creating additional charts.
3577+
"""
3578+
if not chart_name:
3579+
chart_name = "default"
3580+
if not data_name:
3581+
data_name = ""
3582+
style = "area"
3583+
self.__create_highchart(
3584+
chart_name=chart_name, title=title, subtitle=subtitle,
3585+
style=style, data_name=data_name, unit=unit, zero=zero, libs=libs)
3586+
35603587
def __create_highchart(
35613588
self, chart_name=None, title=None, subtitle=None,
35623589
style=None, data_name=None, unit=None, zero=False, libs=True):
@@ -3726,17 +3753,25 @@ def __create_highchart(
37263753
if style != "pie":
37273754
chart_init_3 = (
37283755
"""
3756+
allowPointSelect: true,
3757+
cursor: 'pointer',
37293758
legend: {
37303759
layout: 'vertical',
37313760
align: 'right',
37323761
verticalAlign: 'middle'
37333762
},
3763+
states: {
3764+
hover: {
3765+
enabled: true
3766+
}
3767+
},
37343768
plotOptions: {
37353769
series: {
37363770
showInLegend: true,
37373771
animation: true,
37383772
shadow: false,
37393773
lineWidth: 3,
3774+
fillOpacity: 0.5,
37403775
marker: {
37413776
enabled: true
37423777
}

0 commit comments

Comments
 (0)