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

Add more content and style it a bit

pull/36/head
Florian Mounier 13 years ago
parent
b9d0612314
commit
5a9536b625
7 changed files with 141 additions and 56 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 32
      pages/basic_customizations.rst
  2. 4
      pages/first_steps.rst
  3. 60
      pages/home.rst
  4. 8
      pages/interpolations.rst
  5. 19
      pages/other_customizations.rst
  6. 2
      pages/styles.rst
  7. 72
      static/css/style.css

32
pages/basic_customizations.rst
Unescape View File

@ -13,7 +13,7 @@ Basic customizations
How to customize:
-----------------
pygal is customized with the help of the config class (see `config.py <https://github.com/Kozea/pygal/blob/master/pygal/config.py>`_). It can be changed in several ways:
pygal is customized with the help of the `Config` class (see `config.py <https://github.com/Kozea/pygal/blob/master/pygal/config.py>`_). It can be changed in several ways:
.. pygal::
@ -32,7 +32,7 @@ pygal is customized with the help of the config class (see `config.py <https://g
By instanciating it
^^^^^^^^^^^^^^^^^^^
Just import the config class and instanciate it:
Just import the `Config` class and instanciate it:
.. code-block::
@ -50,7 +50,7 @@ Just import the config class and instanciate it:
By inheriting it
^^^^^^^^^^^^^^^^
Import the config class and override it:
Import the `Config` class and override it:
.. code-block::
@ -70,7 +70,7 @@ Import the config class and override it:
Using keyword args
^^^^^^^^^^^^^^^^^^
As a shorthand for a one shot config you can specify all config argument as keyword args:
As a shorthand for a one shot config, you can specify all config arguments as keyword args:
.. code-block::
@ -81,7 +81,7 @@ As a shorthand for a one shot config you can specify all config argument as keyw
Size
----
`width, height, explicit_size`
``width, height, explicit_size``
The simplest and usefull customizations is the svg size to render.
@ -99,7 +99,7 @@ You can also set `explicit_size` to True to add size attributes to the svg tag.
Scaling
-------
`x_scale, y_scale, include_x_axis`
``x_scale, y_scale, include_x_axis``
Indicate a hint for the scale computation:
@ -126,9 +126,9 @@ You may want to always have the absissa in your graph:
Title
-----
`title`
``title``
You can add a title to the chart by setting the title option:
You can add a title to the chart by setting the `title` option:
.. pygal-code::
@ -139,7 +139,7 @@ You can add a title to the chart by setting the title option:
Labels
------
`x_labels, y_labels`
``x_labels, y_labels``
You can specify x labels and y labels, depending on the graph type:
@ -154,9 +154,9 @@ You can specify x labels and y labels, depending on the graph type:
Display
-------
`show_legend, show dots`
``show_legend, show dots``
You can remove legend and dots by setting these at False
You can remove legend and dots by setting these at `False`
.. pygal-code::
@ -172,7 +172,7 @@ You can remove legend and dots by setting these at False
Rendering
---------
`fill, stroke, zero`
``fill, stroke, zero``
You can disable line stroking:
@ -199,7 +199,7 @@ To fill to an other reference than zero:
Font sizes
----------
`label_font_size, value_font_size, tooltip_font_size, title_font_size, legend_font_size`
``label_font_size, value_font_size, tooltip_font_size, title_font_size, legend_font_size``
Set the various font size
@ -213,7 +213,7 @@ Set the various font size
Label rotation
--------------
`x_label_rotation, y_label_rotation`
``x_label_rotation, y_label_rotation``
Allow label rotation (in degrees) to avoid axis cluttering:
@ -235,7 +235,7 @@ Allow label rotation (in degrees) to avoid axis cluttering:
Human readable
--------------
`human_readable`
``human_readable``
Display values in human readable form:
@ -252,7 +252,7 @@ Display values in human readable form:
No data text
------------
`no_data_text`
``no_data_text``
Text to display instead of the graph when no data is supplied:

4
pages/first_steps.rst
Unescape View File

@ -36,7 +36,7 @@ To make a multiple series graph just add another one:
bar_chart.add('Fibonacci', [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55])
bar_chart.add('Padovan', [1, 1, 1, 2, 2, 3, 4, 5, 7, 9, 12])
If you want to stack them, use StackedBar instead of Bar:
If you want to stack them, use `StackedBar` instead of `Bar`:
.. pygal-code::
@ -45,7 +45,7 @@ If you want to stack them, use StackedBar instead of Bar:
bar_chart.add('Padovan', [1, 1, 1, 2, 2, 3, 4, 5, 7, 9, 12])
You can also make it horizontal with HorizontalStackedBar:
You can also make it horizontal with `HorizontalStackedBar`:
.. pygal-code::

60
pages/home.rst
Unescape View File

@ -7,22 +7,60 @@ Presentation
pygal is a dynamic SVG charting library.
.. class:: thumbs
.. compound::
.. pygal:: 300 200
chart = pygal.HorizontalBar(y_label_rotation=-25)
chart.x_labels = 'one', 'two', 'three', 'four', 'five'
chart.add('red', [1, 2, 3, 1, 2])
chart.add('green', [4, 3, 0, 1, 2])
.. pygal:: 300 200
chart = pygal.Line(x_label_rotation=25, fill=True, style=pygal.style.NeonStyle, interpolate='cubic')
chart.x_labels = 'one', 'two', 'three', 'four', 'five'
chart.add('red', [1, 2, 3, 1, 2])
chart.add('green', [4, 3, 0, 1, 2])
.. pygal:: 300 200
chart = pygal.Pie()
chart.x_labels = 'one', 'two', 'three', 'four', 'five'
chart.add('red', [1, 2, 3, 1, 2])
chart.add('green', [4, 3, 0, 1, 2])
.. pygal:: 300 200
chart = pygal.Radar(fill=True, style=pygal.style.NeonStyle)
chart.x_labels = 'one', 'two', 'three', 'four', 'five'
chart.add('red', [1, 2, 3, 1, 2])
chart.add('green', [4, 3, 0, 1, 2])
It features various graph types:
- Bar charts
- Line charts
- XY charts
- Pie charts
- Radar charts
- `Bar charts </chart_types/#bar-charts-histograms>`_
- `Line charts </chart_types/#line-charts>`_
- `XY charts </chart_types/#xy-charts>`_
- `Pie charts </chart_types/#pies>`_
- `Radar charts </chart_types/#radar-charts>`_
Python/Css styling with some packaged themes (default, light, neon, clean, dark_solarized, light_solarized)
Python/Css styling with some packaged themes (`default </styles/#default>`_,
`light </styles/#light>`_,
`neon </styles/#neon>`_,
`clean </styles/#clean>`_,
`dark_solarized </styles/#dark-solarized>`_,
`light_solarized </styles/#light-solarized>`_)
And a lot of options to customize the charts.
`And a lot of options to customize the charts. </basic_customizations>`_
Technical Description
=====================

8
pages/interpolations.rst
Unescape View File

@ -29,7 +29,7 @@ For more info see `interp1d definition on scipy <http://docs.scipy.org/doc/scipy
Without interpolation:
----------------------
`interpolation`
``interpolate``
.. pygal-code::
@ -39,7 +39,7 @@ Without interpolation:
With cubic interpolation:
-------------------------
`interpolation`
``interpolate``
.. pygal-code::
@ -49,7 +49,7 @@ With cubic interpolation:
With krogh interpolation:
-------------------------
`interpolation`
``interpolate``
.. pygal-code::
@ -60,7 +60,7 @@ With krogh interpolation:
Interpolation precision
-----------------------
`interpolation_precision`
``interpolation_precision``
You can change the resolution of the interpolation with the help of `interpolation_precision`:

19
pages/other_customizations.rst
Unescape View File

@ -12,7 +12,7 @@ Other customizations
Logarithmic
-----------
`logarithmic`
``logarithmic``
You can set the scale to be logarithmic:
@ -27,7 +27,7 @@ You can set the scale to be logarithmic:
Custom css and js
-----------------
`base_css, base_js`
``base_css, base_js``
You can specify a css/js file to replace the one by default using `base_css` and `base_js` options.
These options take a filename in parameter.
@ -36,7 +36,7 @@ These options take a filename in parameter.
Legend box size
---------------
`legend_box_size`
``legend_box_size``
You can change the size of the rectangle next to the legend:
@ -51,7 +51,7 @@ You can change the size of the rectangle next to the legend:
Rounded bars
---------------
`rounded_bars`
``rounded_bars``
You can add a round effect to bar diagrams with `rounded_bars`:
@ -64,22 +64,23 @@ You can add a round effect to bar diagrams with `rounded_bars`:
Static options
--------------
`print_values, print_zeroes`
``print_values, print_zeroes``
By default, when the graph is viewed using a non javascript compatible
viewer or as an image, all the values are displayed on the graph.
It can be disabled by setting `print_values` to `False`.
`print_zeroes` can be enabled to display static values even if equal to zero.
``print_zeroes`` can be enabled to display static values even if equal to zero.
Tooltip animation
-----------------
`animation_steps`
``animation_steps``
*Experimental* (might be slow sometimes)
.. caution::
Experimental (might be slow acconding to particular conditions)
If you want some smoothing in tooltip display you can set animation_steps to a number.
The greater the number the slowest but detailed the animation:
@ -96,7 +97,7 @@ The greater the number the slowest but detailed the animation:
Disable xml declaration
-----------------------
`disable_xml_declaration`
``disable_xml_declaration``
When you want to embed directly your SVG in your html,
this option disables the xml prolog in the output.

2
pages/styles.rst
Unescape View File

@ -102,7 +102,7 @@ You can customize styles in two ways:
Using Style class
^^^^^^^^^^^^^^^^^
You can instantiate the Style class with some customizations for quick styling:
You can instantiate the `Style` class with some customizations for quick styling:
.. pygal-code::

72
static/css/style.css
Unescape View File

@ -22,7 +22,7 @@ html {
body {
font-family: "philisopher";
font-size: 0.9em;
font-size: 1.1em;
margin: -50px 0 0;
min-height: 100%;
padding: 0 0 50px;
@ -32,8 +32,8 @@ body {
}
p {
margin: 0;
padding: 3px 0;
margin: 0;
padding: 5px 0;
}
h2 {
@ -46,7 +46,7 @@ h3 {
}
h4 {
font-size: 1.3em;
font-size: 1.25em;
margin: 0.8em 0 0.2em;
}
@ -171,6 +171,10 @@ section article {
padding: 0 15px;
}
article section {
padding: 10px 0;
}
section h2 {
background: linear-gradient(#e95355, #d63739);
border-bottom: 1px solid #e95355;
@ -180,16 +184,13 @@ section h2 {
padding: 0.2em 10px 0.1em;
}
section > section,
section#id1 > section {
section section {
background: url(img/article.png) repeat-x bottom left;
margin: 0 15px;
padding: 0.5em 0 1.5em;
}
section > section:last-child,
section#id1 > section:last-child {
section section:last-child {
background: none;
}
@ -205,18 +206,34 @@ section h3 a {
section h4 {
color: #da3d3f;
text-decoration: underline;
}
section aside > ul {
section aside.caution > header {
color: #feed6c;
margin: .25em 1em .75em;
}
section aside.caution {
margin: 10px;
padding: 1em;
border: 1px solid rgba(254, 237, 108, .5);
background-color: #111;
}
section aside.topic {
background: #000;
border-radius: 5px;
display: inline-block;
padding: 15px 30px;
margin-left: 50px;
}
section aside.topic > header {
font-size: 1.5em;
}
section aside ul li {
font-size: 1.1em;
font-size: 1em;
padding: 0.2em 0;
}
@ -228,10 +245,39 @@ section figure {
text-align: center;
}
section figure figcaption {
section figure figcaption pre {
text-align: left;
display: inline-block;
margin: 1em;
padding: 1em;
background-color: #0a0a0a;
border: 1px solid black;
}
section samp {
background-color: #111;
border: 1px solid black;
margin: .5em;
padding: .25em .5em;
color: #9e6ffe;
}
section cite {
font-style: normal;
color: #9e6ffe;
font-family: monospace;
}
section > p:first-of-type {
padding-top: 20px;
}
section .thumbs embed {
display: inline-block;
border-radius: 15px;
box-shadow: 0 0 5px #000;
margin: 1em;
}
/*
----------

Write Preview
Loading…
Cancel
Save