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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 32
      pages/basic_customizations.rst
  2. 4
      pages/first_steps.rst
  3. 52
      pages/home.rst
  4. 8
      pages/interpolations.rst
  5. 19
      pages/other_customizations.rst
  6. 2
      pages/styles.rst
  7. 70
      static/css/style.css

32
pages/basic_customizations.rst
Unescape View File

@ -13,7 +13,7 @@ Basic customizations
How to customize: 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:: .. pygal::
@ -32,7 +32,7 @@ pygal is customized with the help of the config class (see `config.py <https://g
By instanciating it By instanciating it
^^^^^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^
Just import the config class and instanciate it: Just import the `Config` class and instanciate it:
.. code-block:: .. code-block::
@ -50,7 +50,7 @@ Just import the config class and instanciate it:
By inheriting it By inheriting it
^^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^
Import the config class and override it: Import the `Config` class and override it:
.. code-block:: .. code-block::
@ -70,7 +70,7 @@ Import the config class and override it:
Using keyword args 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:: .. code-block::
@ -81,7 +81,7 @@ As a shorthand for a one shot config you can specify all config argument as keyw
Size Size
---- ----
`width, height, explicit_size` ``width, height, explicit_size``
The simplest and usefull customizations is the svg size to render. 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 Scaling
------- -------
`x_scale, y_scale, include_x_axis` ``x_scale, y_scale, include_x_axis``
Indicate a hint for the scale computation: 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` ``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:: .. pygal-code::
@ -139,7 +139,7 @@ You can add a title to the chart by setting the title option:
Labels Labels
------ ------
`x_labels, y_labels` ``x_labels, y_labels``
You can specify x labels and y labels, depending on the graph type: 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 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:: .. pygal-code::
@ -172,7 +172,7 @@ You can remove legend and dots by setting these at False
Rendering Rendering
--------- ---------
`fill, stroke, zero` ``fill, stroke, zero``
You can disable line stroking: You can disable line stroking:
@ -199,7 +199,7 @@ To fill to an other reference than zero:
Font sizes 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 Set the various font size
@ -213,7 +213,7 @@ Set the various font size
Label rotation Label rotation
-------------- --------------
`x_label_rotation, y_label_rotation` ``x_label_rotation, y_label_rotation``
Allow label rotation (in degrees) to avoid axis cluttering: 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` ``human_readable``
Display values in human readable form: 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` ``no_data_text``
Text to display instead of the graph when no data is supplied: 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('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]) 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:: .. 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]) 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:: .. pygal-code::

52
pages/home.rst
Unescape View File

@ -7,22 +7,60 @@ Presentation
pygal is a dynamic SVG charting library. 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: It features various graph types:
- Bar charts - `Bar charts </chart_types/#bar-charts-histograms>`_
- Line charts - `Line charts </chart_types/#line-charts>`_
- XY charts - `XY charts </chart_types/#xy-charts>`_
- Pie charts - `Pie charts </chart_types/#pies>`_
- Radar charts - `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 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: Without interpolation:
---------------------- ----------------------
`interpolation` ``interpolate``
.. pygal-code:: .. pygal-code::
@ -39,7 +39,7 @@ Without interpolation:
With cubic interpolation: With cubic interpolation:
------------------------- -------------------------
`interpolation` ``interpolate``
.. pygal-code:: .. pygal-code::
@ -49,7 +49,7 @@ With cubic interpolation:
With krogh interpolation: With krogh interpolation:
------------------------- -------------------------
`interpolation` ``interpolate``
.. pygal-code:: .. pygal-code::
@ -60,7 +60,7 @@ With krogh interpolation:
Interpolation precision Interpolation precision
----------------------- -----------------------
`interpolation_precision` ``interpolation_precision``
You can change the resolution of the interpolation with the help of `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` ``logarithmic``
You can set the scale to be 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 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. 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. 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` ``legend_box_size``
You can change the size of the rectangle next to the legend: 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` ``rounded_bars``
You can add a round effect to bar diagrams with `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 Static options
-------------- --------------
`print_values, print_zeroes` ``print_values, print_zeroes``
By default, when the graph is viewed using a non javascript compatible 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. viewer or as an image, all the values are displayed on the graph.
It can be disabled by setting `print_values` to `False`. 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 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. 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: 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` ``disable_xml_declaration``
When you want to embed directly your SVG in your html, When you want to embed directly your SVG in your html,
this option disables the xml prolog in the output. 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 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:: .. pygal-code::

70
static/css/style.css
Unescape View File

@ -22,7 +22,7 @@ html {
body { body {
font-family: "philisopher"; font-family: "philisopher";
font-size: 0.9em; font-size: 1.1em;
margin: -50px 0 0; margin: -50px 0 0;
min-height: 100%; min-height: 100%;
padding: 0 0 50px; padding: 0 0 50px;
@ -33,7 +33,7 @@ body {
p { p {
margin: 0; margin: 0;
padding: 3px 0; padding: 5px 0;
} }
h2 { h2 {
@ -46,7 +46,7 @@ h3 {
} }
h4 { h4 {
font-size: 1.3em; font-size: 1.25em;
margin: 0.8em 0 0.2em; margin: 0.8em 0 0.2em;
} }
@ -171,6 +171,10 @@ section article {
padding: 0 15px; padding: 0 15px;
} }
article section {
padding: 10px 0;
}
section h2 { section h2 {
background: linear-gradient(#e95355, #d63739); background: linear-gradient(#e95355, #d63739);
border-bottom: 1px solid #e95355; border-bottom: 1px solid #e95355;
@ -180,16 +184,13 @@ section h2 {
padding: 0.2em 10px 0.1em; padding: 0.2em 10px 0.1em;
} }
section > section, section section {
section#id1 > section {
background: url(img/article.png) repeat-x bottom left; background: url(img/article.png) repeat-x bottom left;
margin: 0 15px; margin: 0 15px;
padding: 0.5em 0 1.5em; padding: 0.5em 0 1.5em;
} }
section section:last-child {
section > section:last-child,
section#id1 > section:last-child {
background: none; background: none;
} }
@ -205,18 +206,34 @@ section h3 a {
section h4 { section h4 {
color: #da3d3f; 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; background: #000;
border-radius: 5px; border-radius: 5px;
display: inline-block; display: inline-block;
padding: 15px 30px; padding: 15px 30px;
margin-left: 50px;
}
section aside.topic > header {
font-size: 1.5em;
} }
section aside ul li { section aside ul li {
font-size: 1.1em; font-size: 1em;
padding: 0.2em 0; padding: 0.2em 0;
} }
@ -228,10 +245,39 @@ section figure {
text-align: center; text-align: center;
} }
section figure figcaption { section figure figcaption pre {
text-align: left; 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