playground
/
pygal
mirror of https://github.com/Kozea/pygal.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Add styles

pull/36/head
Florian Mounier 13 years ago
parent
b346a70e99
commit
da33b7be08
4 changed files with 213 additions and 17 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 34
      pages/chart_types.rst
  2. 1
      pages/documentation.rst
  3. 192
      pages/styles.rst
  4. 3
      static/css/style.css

34
pages/chart_types.rst
Unescape View File

@ -6,7 +6,7 @@
Chart types Chart types
=========== ===========
pygal provides X kind of charts: pygal provides 5 kind of charts:
.. contents:: .. contents::
@ -23,10 +23,10 @@ Basic simple line graph:
line_chart = pygal.Line() line_chart = pygal.Line()
line_chart.title = 'Browser usage evolution (in %)' line_chart.title = 'Browser usage evolution (in %)'
line_chart.x_labels = map(str, range(2002, 2013)) line_chart.x_labels = map(str, range(2002, 2013))
line_chart.add('Firefox', [ 0, 0, 0, 16.6, 25, 31, 36.4, 45.5, 46.3, 42.8, 37.1]) line_chart.add('Firefox', [None, None, 0, 16.6, 25, 31, 36.4, 45.5, 46.3, 42.8, 37.1])
line_chart.add('Chrome', [ 0, 0, 0, 0, 0, 0, 0, 3.9, 10.8, 23.8, 35.3]) line_chart.add('Chrome', [None, None, None, None, None, None, 0, 3.9, 10.8, 23.8, 35.3])
line_chart.add('IE', [85.8, 84.6, 84.7, 74.5, 66, 58.6, 54.7, 44.8, 36.2, 26.6, 20.1]) line_chart.add('IE', [85.8, 84.6, 84.7, 74.5, 66, 58.6, 54.7, 44.8, 36.2, 26.6, 20.1])
line_chart.add('Others', [14.2, 15.4, 15.3, 8.9, 9, 10.4, 8.9, 5.8, 6.7, 6.8, 7.5]) line_chart.add('Others', [14.2, 15.4, 15.3, 8.9, 9, 10.4, 8.9, 5.8, 6.7, 6.8, 7.5])
Stacked Stacked
^^^^^^^ ^^^^^^^
@ -38,10 +38,10 @@ Same graph but with stacked values and filled rendering:
line_chart = pygal.StackedLine(fill=True) line_chart = pygal.StackedLine(fill=True)
line_chart.title = 'Browser usage evolution (in %)' line_chart.title = 'Browser usage evolution (in %)'
line_chart.x_labels = map(str, range(2002, 2013)) line_chart.x_labels = map(str, range(2002, 2013))
line_chart.add('Firefox', [ 0, 0, 0, 16.6, 25, 31, 36.4, 45.5, 46.3, 42.8, 37.1]) line_chart.add('Firefox', [None, None, 0, 16.6, 25, 31, 36.4, 45.5, 46.3, 42.8, 37.1])
line_chart.add('Chrome', [ 0, 0, 0, 0, 0, 0, 0, 3.9, 10.8, 23.8, 35.3]) line_chart.add('Chrome', [None, None, None, None, None, None, 0, 3.9, 10.8, 23.8, 35.3])
line_chart.add('IE', [85.8, 84.6, 84.7, 74.5, 66, 58.6, 54.7, 44.8, 36.2, 26.6, 20.1]) line_chart.add('IE', [85.8, 84.6, 84.7, 74.5, 66, 58.6, 54.7, 44.8, 36.2, 26.6, 20.1])
line_chart.add('Others', [14.2, 15.4, 15.3, 8.9, 9, 10.4, 8.9, 5.8, 6.7, 6.8, 7.5]) line_chart.add('Others', [14.2, 15.4, 15.3, 8.9, 9, 10.4, 8.9, 5.8, 6.7, 6.8, 7.5])
Bar charts / Histograms Bar charts / Histograms
@ -57,10 +57,10 @@ Basic simple bar graph:
line_chart = pygal.Bar() line_chart = pygal.Bar()
line_chart.title = 'Browser usage evolution (in %)' line_chart.title = 'Browser usage evolution (in %)'
line_chart.x_labels = map(str, range(2002, 2013)) line_chart.x_labels = map(str, range(2002, 2013))
line_chart.add('Firefox', [ 0, 0, 0, 16.6, 25, 31, 36.4, 45.5, 46.3, 42.8, 37.1]) line_chart.add('Firefox', [None, None, 0, 16.6, 25, 31, 36.4, 45.5, 46.3, 42.8, 37.1])
line_chart.add('Chrome', [ 0, 0, 0, 0, 0, 0, 0, 3.9, 10.8, 23.8, 35.3]) line_chart.add('Chrome', [None, None, None, None, None, None, 0, 3.9, 10.8, 23.8, 35.3])
line_chart.add('IE', [85.8, 84.6, 84.7, 74.5, 66, 58.6, 54.7, 44.8, 36.2, 26.6, 20.1]) line_chart.add('IE', [85.8, 84.6, 84.7, 74.5, 66, 58.6, 54.7, 44.8, 36.2, 26.6, 20.1])
line_chart.add('Others', [14.2, 15.4, 15.3, 8.9, 9, 10.4, 8.9, 5.8, 6.7, 6.8, 7.5]) line_chart.add('Others', [14.2, 15.4, 15.3, 8.9, 9, 10.4, 8.9, 5.8, 6.7, 6.8, 7.5])
Stacked Stacked
@ -73,10 +73,10 @@ Same graph but with stacked values:
line_chart = pygal.StackedBar() line_chart = pygal.StackedBar()
line_chart.title = 'Browser usage evolution (in %)' line_chart.title = 'Browser usage evolution (in %)'
line_chart.x_labels = map(str, range(2002, 2013)) line_chart.x_labels = map(str, range(2002, 2013))
line_chart.add('Firefox', [ 0, 0, 0, 16.6, 25, 31, 36.4, 45.5, 46.3, 42.8, 37.1]) line_chart.add('Firefox', [None, None, 0, 16.6, 25, 31, 36.4, 45.5, 46.3, 42.8, 37.1])
line_chart.add('Chrome', [ 0, 0, 0, 0, 0, 0, 0, 3.9, 10.8, 23.8, 35.3]) line_chart.add('Chrome', [None, None, None, None, None, None, 0, 3.9, 10.8, 23.8, 35.3])
line_chart.add('IE', [85.8, 84.6, 84.7, 74.5, 66, 58.6, 54.7, 44.8, 36.2, 26.6, 20.1]) line_chart.add('IE', [85.8, 84.6, 84.7, 74.5, 66, 58.6, 54.7, 44.8, 36.2, 26.6, 20.1])
line_chart.add('Others', [14.2, 15.4, 15.3, 8.9, 9, 10.4, 8.9, 5.8, 6.7, 6.8, 7.5]) line_chart.add('Others', [14.2, 15.4, 15.3, 8.9, 9, 10.4, 8.9, 5.8, 6.7, 6.8, 7.5])
Horizontal Horizontal

1
pages/documentation.rst
Unescape View File

@ -8,6 +8,7 @@ User documentation
- `First steps </first_steps>`_ - `First steps </first_steps>`_
- `Charts types </chart_types>`_ - `Charts types </chart_types>`_
- `Styles </styles>`_
Developper documentation Developper documentation

192
pages/styles.rst
Unescape View File

@ -0,0 +1,192 @@
===============
Documentation
===============
Styles
======
pygal provides 6 different styles and 2 ways to add your own:
.. contents::
Default
-------
.. pygal-code::
chart = pygal.StackedLine(fill=True, interpolate='cubic')
chart.add('A', [1, 3, 5, 16, 13, 3, 7])
chart.add('B', [5, 2, 3, 2, 5, 7, 17])
chart.add('C', [6, 10, 9, 7, 3, 1, 0])
chart.add('D', [2, 3, 5, 9, 12, 9, 5])
chart.add('E', [7, 4, 2, 1, 2, 10, 0])
Neon
----
.. pygal-code::
from pygal.style import NeonStyle
chart = pygal.StackedLine(fill=True, interpolate='cubic', style=NeonStyle)
chart.add('A', [1, 3, 5, 16, 13, 3, 7])
chart.add('B', [5, 2, 3, 2, 5, 7, 17])
chart.add('C', [6, 10, 9, 7, 3, 1, 0])
chart.add('D', [2, 3, 5, 9, 12, 9, 5])
chart.add('E', [7, 4, 2, 1, 2, 10, 0])
Dark Solarized
--------------
.. pygal-code::
from pygal.style import DarkSolarizedStyle
chart = pygal.StackedLine(fill=True, interpolate='cubic', style=DarkSolarizedStyle)
chart.add('A', [1, 3, 5, 16, 13, 3, 7])
chart.add('B', [5, 2, 3, 2, 5, 7, 17])
chart.add('C', [6, 10, 9, 7, 3, 1, 0])
chart.add('D', [2, 3, 5, 9, 12, 9, 5])
chart.add('E', [7, 4, 2, 1, 2, 10, 0])
Light Solarized
---------------
.. pygal-code::
from pygal.style import LightSolarizedStyle
chart = pygal.StackedLine(fill=True, interpolate='cubic', style=LightSolarizedStyle)
chart.add('A', [1, 3, 5, 16, 13, 3, 7])
chart.add('B', [5, 2, 3, 2, 5, 7, 17])
chart.add('C', [6, 10, 9, 7, 3, 1, 0])
chart.add('D', [2, 3, 5, 9, 12, 9, 5])
chart.add('E', [7, 4, 2, 1, 2, 10, 0])
Light
-----
.. pygal-code::
from pygal.style import LightStyle
chart = pygal.StackedLine(fill=True, interpolate='cubic', style=LightStyle)
chart.add('A', [1, 3, 5, 16, 13, 3, 7])
chart.add('B', [5, 2, 3, 2, 5, 7, 17])
chart.add('C', [6, 10, 9, 7, 3, 1, 0])
chart.add('D', [2, 3, 5, 9, 12, 9, 5])
chart.add('E', [7, 4, 2, 1, 2, 10, 0])
Clean
-----
.. pygal-code::
from pygal.style import CleanStyle
chart = pygal.StackedLine(fill=True, interpolate='cubic', style=CleanStyle)
chart.add('A', [1, 3, 5, 16, 13, 3, 7])
chart.add('B', [5, 2, 3, 2, 5, 7, 17])
chart.add('C', [6, 10, 9, 7, 3, 1, 0])
chart.add('D', [2, 3, 5, 9, 12, 9, 5])
chart.add('E', [7, 4, 2, 1, 2, 10, 0])
Custom
------
You can customize styles in two ways:
Using Style class
^^^^^^^^^^^^^^^^^
You can instantiate the Style class with some customizations for quick styling:
.. pygal-code::
from pygal.style import Style
custom_style = Style(
background='transparent',
plot_background='transparent',
foreground='#53E89B',
foreground_light='#53A0E8',
foreground_dark='#630C0D',
opacity='.6',
opacity_hover='.9',
transition='400ms ease-in',
colors=('#E853A0', '#E8537A', '#E95355', '#E87653', '#E89B53'))
chart = pygal.StackedLine(fill=True, interpolate='cubic', style=custom_style)
chart.add('A', [1, 3, 5, 16, 13, 3, 7])
chart.add('B', [5, 2, 3, 2, 5, 7, 17])
chart.add('C', [6, 10, 9, 7, 3, 1, 0])
chart.add('D', [2, 3, 5, 9, 12, 9, 5])
chart.add('E', [7, 4, 2, 1, 2, 10, 0])
Using a custom css
^^^^^^^^^^^^^^^^^^
You can also specify a file containing a custom css for more customization.
(See the `default css <https://github.com/Kozea/pygal/blob/master/pygal/css/graph.css>`_)
.. pygal-code::
from tempfile import NamedTemporaryFile
custom_css = '''
text {
fill: green;
font-family: monospace;
}
.legends .legend text {
font-size: {{ font_sizes.legend }};
}
.axis {
stroke: #666;
}
.axis text {
font-size: {{ font_sizes.label }};
font-family: sans;
stroke: none;
}
.axis.y text {
text-anchor: end;
}
#tooltip text {
font-size: {{ font_sizes.tooltip }};
}
.dot {
fill: yellow;
}
.color-0 {
stroke: #ff1100;
fill: #ff1100;
}
.color-1 {
stroke: #ffee00;
fill: #ffee00;
}
.color-2 {
stroke: #66bb44;
fill: #66bb44;
}
.color-3 {
stroke: #88bbdd;
fill: #88bbdd;
}
.color-4 {
stroke: #0000ff;
fill: #0000ff;
}
'''
custom_css_file = '/tmp/pygal_custom_style.css'
with open(custom_css_file, 'w') as f:
f.write(custom_css)
chart = pygal.StackedLine(fill=True, interpolate='cubic', base_css=custom_css_file)
chart.add('A', [1, 3, 5, 16, 13, 3, 7])
chart.add('B', [5, 2, 3, 2, 5, 7, 17])
chart.add('C', [6, 10, 9, 7, 3, 1, 0])
chart.add('D', [2, 3, 5, 9, 12, 9, 5])
chart.add('E', [7, 4, 2, 1, 2, 10, 0])

3
static/css/style.css
Unescape View File

@ -228,6 +228,9 @@ section figure {
text-align: center; text-align: center;
} }
section figure figcaption {
text-align: left;
}
/* /*

Write Preview
Loading…
Cancel
Save