Skip to content

Commit 565168a

Browse files
committed
Add the ability to create line charts and more
1 parent a070d04 commit 565168a

File tree

4 files changed

+431
-64
lines changed

4 files changed

+431
-64
lines changed

examples/chart_maker/ReadMe.md

Lines changed: 104 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,27 +9,30 @@ The HighCharts library is used for creating charts.
99

1010
<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>
1111

12-
([Click on the image for the actual chart](https://seleniumbase.io/other/chart_presentation.html))
12+
([Click on the image for an actual chart demo](https://seleniumbase.io/other/chart_presentation.html))
1313

14-
Here's how to run the example (multiple charts in a presentation):
14+
Here's how to run the example:
1515

1616
```bash
1717
cd examples/chart_maker
1818
pytest my_chart.py
1919
```
2020

21-
(Press the Right Arrow to advance to the next slide in the chart presentation)
22-
2321

2422
### Creating a new chart:
2523

2624
```python
27-
self.create_pie_chart(chart_name=None, title="My Chart", libs=True)
25+
self.create_pie_chart(
26+
chart_name=None, title=None, subtitle=None,
27+
data_name=None, unit=None, libs=True):
2828
""" Creates a JavaScript pie chart using "HighCharts".
2929
@Params
3030
chart_name - If creating multiple charts,
3131
use this to select which one.
3232
title - The title displayed for the chart.
33+
subtitle - The subtitle displayed for the chart.
34+
data_name - Set the series name. Useful for multi-series charts.
35+
unit - The description label given to the chart's y-axis values.
3336
libs - The option to include Chart libraries (JS and CSS files).
3437
Should be set to True (default) for the first time creating
3538
a chart on a web page. If creating multiple charts on
@@ -39,12 +42,37 @@ self.create_pie_chart(chart_name=None, title="My Chart", libs=True)
3942
```
4043

4144
```python
42-
self.create_bar_chart(chart_name=None, title="My Chart", libs=True)
45+
self.create_bar_chart(
46+
chart_name=None, title=None, subtitle=None,
47+
data_name=None, unit=None, libs=True):
4348
""" Creates a JavaScript bar chart using "HighCharts".
4449
@Params
4550
chart_name - If creating multiple charts,
4651
use this to select which one.
4752
title - The title displayed for the chart.
53+
subtitle - The subtitle displayed for the chart.
54+
data_name - Set the series name. Useful for multi-series charts.
55+
unit - The description label given to the chart's y-axis values.
56+
libs - The option to include Chart libraries (JS and CSS files).
57+
Should be set to True (default) for the first time creating
58+
a chart on a web page. If creating multiple charts on
59+
a web page, you no longer need to re-import the libraries
60+
when creating additional charts.
61+
"""
62+
```
63+
64+
```python
65+
self.create_column_chart(
66+
chart_name=None, title=None, subtitle=None,
67+
data_name=None, unit=None, libs=True):
68+
""" Creates a JavaScript column chart using "HighCharts".
69+
@Params
70+
chart_name - If creating multiple charts,
71+
use this to select which one.
72+
title - The title displayed for the chart.
73+
subtitle - The subtitle displayed for the chart.
74+
data_name - Set the series name. Useful for multi-series charts.
75+
unit - The description label given to the chart's y-axis values.
4876
libs - The option to include Chart libraries (JS and CSS files).
4977
Should be set to True (default) for the first time creating
5078
a chart on a web page. If creating multiple charts on
@@ -54,12 +82,18 @@ self.create_bar_chart(chart_name=None, title="My Chart", libs=True)
5482
```
5583

5684
```python
57-
self.create_column_chart(chart_name=None, title="My Chart", libs=True)
85+
self.create_line_chart(
86+
chart_name=None, title=None, subtitle=None,
87+
data_name=None, unit=None, zero=False, libs=True):
5888
""" Creates a JavaScript column chart using "HighCharts".
5989
@Params
6090
chart_name - If creating multiple charts,
6191
use this to select which one.
6292
title - The title displayed for the chart.
93+
subtitle - The subtitle displayed for the chart.
94+
data_name - Set the series name. Useful for multi-series charts.
95+
unit - The description label given to the chart's y-axis values.
96+
zero - If True, the y-axis always starts at 0. (Default: False).
6397
libs - The option to include Chart libraries (JS and CSS files).
6498
Should be set to True (default) for the first time creating
6599
a chart on a web page. If creating multiple charts on
@@ -87,6 +121,19 @@ self.add_data_point(label, value, color=None, chart_name=None):
87121
"""
88122
```
89123

124+
### Adding a new data series to an existing chart:
125+
126+
```python
127+
self.add_series_to_chart(self, data_name=None, chart_name=None):
128+
""" Add a new data series to an existing chart.
129+
This allows charts to have multiple data sets.
130+
@Params
131+
data_name - Set the series name. Useful for multi-series charts.
132+
chart_name - If creating multiple charts,
133+
use this to select which one.
134+
"""
135+
```
136+
90137

91138
### Saving a chart to a file:
92139

@@ -126,6 +173,8 @@ self.display_chart(chart_name=None, filename=None):
126173
use this to select the one you wish to use.
127174
filename - The name of the HTML file that you wish to
128175
save the chart to. (filename must end in ".html")
176+
interval - The delay time for auto-advancing charts. (in seconds)
177+
If set to 0 (default), auto-advancing is disabled.
129178
"""
130179
```
131180

@@ -141,30 +190,70 @@ class MyChartMakerClass(BaseCase):
141190

142191
def test_chart_maker(self):
143192
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")
199+
```
200+
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:
202+
203+
```bash
204+
pytest my_chart.py
205+
```
206+
207+
### For a more advanced example (multiple charts in a presentation):
208+
209+
```python
210+
from seleniumbase import BaseCase
211+
212+
class MyChartMakerClass(BaseCase):
213+
214+
def test_chart_maker_presentation(self):
215+
self.create_presentation(theme="sky")
144216

145217
self.create_pie_chart(title="Automated Tests")
146218
self.add_data_point("Passed", 7, color="#95d96f")
147219
self.add_data_point("Untested", 2, color="#eaeaea")
148220
self.add_data_point("Failed", 1, color="#f1888f")
149-
self.add_slide(self.extract_chart())
221+
self.add_slide("<p>Pie Chart</p>" + self.extract_chart())
150222

151-
self.create_bar_chart(title="Code", libs=False)
223+
self.create_bar_chart(title="Language", libs=False)
152224
self.add_data_point("Python", 33, color="Orange")
153225
self.add_data_point("JavaScript", 27, color="Teal")
154226
self.add_data_point("HTML + CSS", 21, color="Purple")
155-
self.add_slide(self.extract_chart())
227+
self.add_slide("<p>Bar Chart</p>" + self.extract_chart())
156228

157229
self.create_column_chart(title="Colors", libs=False)
158230
self.add_data_point("Red", 10, color="Red")
159231
self.add_data_point("Green", 25, color="Green")
160232
self.add_data_point("Blue", 15, color="Blue")
161-
self.add_slide(self.extract_chart())
162-
163-
self.begin_presentation()
233+
self.add_slide("<p>Column Chart</p>" + self.extract_chart())
234+
235+
self.create_line_chart(title="Last Week's Data", libs=False)
236+
self.add_data_point("Sun", 5)
237+
self.add_data_point("Mon", 10)
238+
self.add_data_point("Tue", 20)
239+
self.add_data_point("Wed", 40)
240+
self.add_data_point("Thu", 80)
241+
self.add_data_point("Fri", 65)
242+
self.add_data_point("Sat", 50)
243+
self.add_slide("<p>Line Chart</p>" + self.extract_chart())
244+
245+
self.begin_presentation(filename="chart_presentation.html")
164246
```
165247

166-
#### 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:
248+
Here's how to run that example:
167249

168250
```bash
169-
pytest my_chart.py
251+
cd examples/chart_maker
252+
pytest chart_presentation.py
170253
```
254+
255+
(Press the Right Arrow to advance to the next slide in that chart presentation)
256+
257+
([Click to see a live example of that presentation](https://seleniumbase.io/other/chart_presentation.html))
258+
259+
Multi-Series charts can also be created. Try the available examples to learn more.

0 commit comments

Comments
 (0)