riff
/
riff_site


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
							<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Charts | Riff</title>
<link href="../assets/css/all-nocdn.css" rel="stylesheet" type="text/css">
<link rel="alternate" type="application/rss+xml" title="RSS" href="../rss.xml">
<link rel="canonical" href="http://media.pagelibre.org/riff/site/pages/charts.html">
<link rel="icon" href="../favicon.ico" sizes="16x16">
<!--[if lt IE 9]><script src="../assets/js/html5.js"></script><![endif]--><meta name="author" content="Riff">
<meta property="og:site_name" content="Riff">
<meta property="og:title" content="Charts">
<meta property="og:url" content="http://media.pagelibre.org/riff/site/pages/charts.html">
<meta property="og:description" content="If you are using reStructuredText and install pygal, Nikola has support for rather nice charts
with little effort, and i's even semi-interactive (hover your pointer over the legend!):
.. chart:: Stack">
<meta property="og:type" content="article">
<meta property="article:published_time" content="2013-08-27T18:20:55-03:00">
</head>
<body>
<a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>

<!-- Menubar -->

<div class="blog-masthead">
    <div class="container">
<!-- This keeps the margins nice -->
        <nav class="blog-nav" role="navigation"><a href="../index.html" class="blog-nav-item">Accueil</a>
            <a href="about.html" class="blog-nav-item">About Riff</a>
            <a href="../rss.xml" class="blog-nav-item">RSS feed</a>

            
        </nav>
</div>
<!-- /.container -->
</div>
<!-- End of Menubar -->

<div class="container" id="content" role="main">
    <div class="body-content">
        <div class="blog-header">
            <h1 class="blog-title">
                <a href="http://media.pagelibre.org/riff/site/">

                    <span id="blog-title">Riff</span>
                </a>
            </h1>
            <p class="lead blog-description">Riff la radio rock</p>
            
        </div>
        <!--Body content-->
        <div class="row">
            <div class="col-sm-8 blog-main">
                
<article class="post-text storypage" itemscope="itemscope" itemtype="http://schema.org/Article"><header><h2 class="p-name entry-title blog-post-title" itemprop="headline name"><a href="#" class="u-url">Charts</a></h2>

        
    </header><div class="e-content entry-content" itemprop="articleBody text">
    <p>If you are using reStructuredText and install pygal, Nikola has support for rather nice charts
with little effort, and i's even semi-interactive (hover your pointer over the legend!):</p>
<pre class="code rest"><a name="rest_code_91a1f286eedc43478c8da8fc3d5cbf6b-1"></a><span class="p">..</span> <span class="ow">chart</span><span class="p">::</span> StackedLine
<a name="rest_code_91a1f286eedc43478c8da8fc3d5cbf6b-2"></a>   <span class="nc">:title:</span> 'Browser usage evolution (in %)'
<a name="rest_code_91a1f286eedc43478c8da8fc3d5cbf6b-3"></a>   <span class="nc">:fill:</span> True
<a name="rest_code_91a1f286eedc43478c8da8fc3d5cbf6b-4"></a>   <span class="nc">:x_labels:</span> ['2002','2003','2004','2005','2006','2007','2008','2009','2010','2011','2012']
<a name="rest_code_91a1f286eedc43478c8da8fc3d5cbf6b-5"></a>   <span class="nc">:width:</span> 600
<a name="rest_code_91a1f286eedc43478c8da8fc3d5cbf6b-6"></a>   <span class="nc">:height:</span> 400
<a name="rest_code_91a1f286eedc43478c8da8fc3d5cbf6b-7"></a>   <span class="nc">:explicit_size:</span> True
<a name="rest_code_91a1f286eedc43478c8da8fc3d5cbf6b-8"></a>   <span class="nc">:style:</span> BlueStyle
<a name="rest_code_91a1f286eedc43478c8da8fc3d5cbf6b-9"></a>
<a name="rest_code_91a1f286eedc43478c8da8fc3d5cbf6b-10"></a>   ('Others',  [14.2, 15.4, 15.3,  8.9,    9, 10.4,  8.9,  5.8,  6.7,  6.8,  7.5])
<a name="rest_code_91a1f286eedc43478c8da8fc3d5cbf6b-11"></a>   ('IE',      [85.8, 84.6, 84.7, 74.5,   66, 58.6, 54.7, 44.8, 36.2, 26.6, 20.1])
<a name="rest_code_91a1f286eedc43478c8da8fc3d5cbf6b-12"></a>   ('Firefox', [None, None, None, 16.6,   25,   31, 36.4, 45.5, 46.3, 42.8, 37.1])
<a name="rest_code_91a1f286eedc43478c8da8fc3d5cbf6b-13"></a>   ('Chrome',  [None, None, None, None, None, None,    0,  3.9, 10.8, 23.8, 35.3])
</pre>
<div style="text-align: center;">
<?xml version='1.0' encoding='utf-8'?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="chart-38461fe4-83dc-4ef4-8096-6700507a543f" class="pygal-chart" viewbox="0 0 600 400" width="600" height="400"><!--Generated with pygal 3.0.0 (lxml) ©Kozea 2012-2016 on 2023-01-27--><!--http://pygal.org--><!--http://github.com/Kozea/pygal--><defs><style type="text/css">#chart-38461fe4-83dc-4ef4-8096-6700507a543f{-webkit-user-select:none;-webkit-font-smoothing:antialiased;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .title{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:16px}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .legends .legend text{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:14px}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .axis text{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:10px}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .axis text.major{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:10px}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .text-overlay text.value{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:16px}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .text-overlay text.label{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:10px}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .tooltip{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:14px}#chart-38461fe4-83dc-4ef4-8096-6700507a543f text.no_data{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:64px}
#chart-38461fe4-83dc-4ef4-8096-6700507a543f{background-color:#f0f0f0}#chart-38461fe4-83dc-4ef4-8096-6700507a543f path,#chart-38461fe4-83dc-4ef4-8096-6700507a543f line,#chart-38461fe4-83dc-4ef4-8096-6700507a543f rect,#chart-38461fe4-83dc-4ef4-8096-6700507a543f circle{-webkit-transition:250ms ease-in;-moz-transition:250ms ease-in;transition:250ms ease-in}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .graph &gt; .background{fill:#f0f0f0}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .plot &gt; .background{fill:#f8f8f8}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .graph{fill:rgba(0,0,0,0.9)}#chart-38461fe4-83dc-4ef4-8096-6700507a543f text.no_data{fill:rgba(0,0,0,0.9)}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .title{fill:rgba(0,0,0,0.9)}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .legends .legend text{fill:rgba(0,0,0,0.9)}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .legends .legend:hover text{fill:rgba(0,0,0,0.9)}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .axis .line{stroke:rgba(0,0,0,0.9)}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .axis .guide.line{stroke:rgba(0,0,0,0.6)}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .axis .major.line{stroke:rgba(0,0,0,0.9)}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .axis text.major{fill:rgba(0,0,0,0.9)}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .axis.y .guides:hover .guide.line,#chart-38461fe4-83dc-4ef4-8096-6700507a543f .line-graph .axis.x .guides:hover .guide.line,#chart-38461fe4-83dc-4ef4-8096-6700507a543f .stackedline-graph .axis.x .guides:hover .guide.line,#chart-38461fe4-83dc-4ef4-8096-6700507a543f .xy-graph .axis.x .guides:hover .guide.line{stroke:rgba(0,0,0,0.9)}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .axis .guides:hover text{fill:rgba(0,0,0,0.9)}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .reactive{fill-opacity:.5;stroke-opacity:.8;stroke-width:1}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .ci{stroke:rgba(0,0,0,0.9)}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .reactive.active,#chart-38461fe4-83dc-4ef4-8096-6700507a543f .active .reactive{fill-opacity:.9;stroke-opacity:.9;stroke-width:4}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .ci .reactive.active{stroke-width:1.5}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .series text{fill:rgba(0,0,0,0.9)}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .tooltip rect{fill:#f8f8f8;stroke:rgba(0,0,0,0.9);-webkit-transition:opacity 250ms ease-in;-moz-transition:opacity 250ms ease-in;transition:opacity 250ms ease-in}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .tooltip .label{fill:rgba(0,0,0,0.9)}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .tooltip .label{fill:rgba(0,0,0,0.9)}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .tooltip .legend{font-size:.8em;fill:rgba(0,0,0,0.6)}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .tooltip .x_label{font-size:.6em;fill:rgba(0,0,0,0.9)}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .tooltip .xlink{font-size:.5em;text-decoration:underline}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .tooltip .value{font-size:1.5em}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .bound{font-size:.5em}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .max-value{font-size:.75em;fill:rgba(0,0,0,0.6)}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .map-element{fill:#f8f8f8;stroke:rgba(0,0,0,0.6) !important}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .map-element .reactive{fill-opacity:inherit;stroke-opacity:inherit}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .color-0,#chart-38461fe4-83dc-4ef4-8096-6700507a543f .color-0 a:visited{stroke:#00b2f0;fill:#00b2f0}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .color-1,#chart-38461fe4-83dc-4ef4-8096-6700507a543f .color-1 a:visited{stroke:#43d9be;fill:#43d9be}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .color-2,#chart-38461fe4-83dc-4ef4-8096-6700507a543f .color-2 a:visited{stroke:#0662ab;fill:#0662ab}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .color-3,#chart-38461fe4-83dc-4ef4-8096-6700507a543f .color-3 a:visited{stroke:#00668a;fill:#00668a}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .text-overlay .color-0 text{fill:black}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .text-overlay .color-1 text{fill:black}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .text-overlay .color-2 text{fill:black}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .text-overlay .color-3 text{fill:black}
#chart-38461fe4-83dc-4ef4-8096-6700507a543f text.no_data{text-anchor:middle}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .guide.line{fill:none}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .centered{text-anchor:middle}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .title{text-anchor:middle}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .legends .legend text{fill-opacity:1}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .axis.x text{text-anchor:middle}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .axis.x:not(.web) text[transform]{text-anchor:start}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .axis.x:not(.web) text[transform].backwards{text-anchor:end}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .axis.y text{text-anchor:end}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .axis.y text[transform].backwards{text-anchor:start}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .axis.y2 text{text-anchor:start}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .axis.y2 text[transform].backwards{text-anchor:end}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .axis .guide.line{stroke-dasharray:4,4;stroke:black}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .axis .major.guide.line{stroke-dasharray:6,6;stroke:black}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .horizontal .axis.y .guide.line,#chart-38461fe4-83dc-4ef4-8096-6700507a543f .horizontal .axis.y2 .guide.line,#chart-38461fe4-83dc-4ef4-8096-6700507a543f .vertical .axis.x .guide.line{opacity:0}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .horizontal .axis.always_show .guide.line,#chart-38461fe4-83dc-4ef4-8096-6700507a543f .vertical .axis.always_show .guide.line{opacity:1 !important}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .axis.y .guides:hover .guide.line,#chart-38461fe4-83dc-4ef4-8096-6700507a543f .axis.y2 .guides:hover .guide.line,#chart-38461fe4-83dc-4ef4-8096-6700507a543f .axis.x .guides:hover .guide.line{opacity:1}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .axis .guides:hover text{opacity:1}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .nofill{fill:none}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .subtle-fill{fill-opacity:.2}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .dot{stroke-width:1px;fill-opacity:1;stroke-opacity:1}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .dot.active{stroke-width:5px}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .dot.negative{fill:transparent}#chart-38461fe4-83dc-4ef4-8096-6700507a543f text,#chart-38461fe4-83dc-4ef4-8096-6700507a543f tspan{stroke:none !important}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .series text.active{opacity:1}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .tooltip rect{fill-opacity:.95;stroke-width:.5}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .tooltip text{fill-opacity:1}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .showable{visibility:hidden}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .showable.shown{visibility:visible}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .gauge-background{fill:rgba(229,229,229,1);stroke:none}#chart-38461fe4-83dc-4ef4-8096-6700507a543f .bg-lines{stroke:#f0f0f0;stroke-width:2px}</style>
<script type="text/javascript">window.pygal = window.pygal || {};window.pygal.config = window.pygal.config || {};window.pygal.config['38461fe4-83dc-4ef4-8096-6700507a543f'] = {"allow_interruptions": false, "box_mode": "extremes", "classes": ["pygal-chart"], "css": ["file://style.css", "file://graph.css"], "defs": [], "disable_xml_declaration": false, "dots_size": 2.5, "dynamic_print_values": false, "explicit_size": true, "fill": true, "force_uri_protocol": "https", "formatter": null, "half_pie": false, "height": 400, "include_x_axis": false, "inner_radius": 0, "interpolate": null, "interpolation_parameters": {}, "interpolation_precision": 250, "inverse_y_axis": false, "js": ["//kozea.github.io/pygal.js/2.0.x/pygal-tooltips.min.js"], "legend_at_bottom": false, "legend_at_bottom_columns": null, "legend_box_size": 12, "logarithmic": false, "margin": 20, "margin_bottom": null, "margin_left": null, "margin_right": null, "margin_top": null, "max_scale": 16, "min_scale": 4, "missing_value_fill_truncation": "x", "no_data_text": "No data", "no_prefix": false, "order_min": null, "pretty_print": false, "print_labels": false, "print_values": false, "print_values_position": "center", "print_zeroes": true, "range": null, "rounded_bars": null, "secondary_range": null, "show_dots": true, "show_legend": true, "show_minor_x_labels": true, "show_minor_y_labels": true, "show_only_major_dots": false, "show_x_guides": false, "show_x_labels": true, "show_y_guides": true, "show_y_labels": true, "spacing": 10, "stack_from_top": false, "strict": false, "stroke": true, "stroke_style": null, "style": {"background": "#f0f0f0", "ci_colors": [], "colors": ["#00b2f0", "#43d9be", "#0662ab", "#00668a", "#98eadb", "#97d959", "#033861", "#ffd541", "#7dcf30", "#3ecdff", "#daaa00"], "dot_opacity": "1", "font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "foreground": "rgba(0, 0, 0, 0.9)", "foreground_strong": "rgba(0, 0, 0, 0.9)", "foreground_subtle": "rgba(0, 0, 0, 0.6)", "guide_stroke_color": "black", "guide_stroke_dasharray": "4,4", "label_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "label_font_size": 10, "legend_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "legend_font_size": 14, "major_guide_stroke_color": "black", "major_guide_stroke_dasharray": "6,6", "major_label_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "major_label_font_size": 10, "no_data_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "no_data_font_size": 64, "opacity": ".5", "opacity_hover": ".9", "plot_background": "#f8f8f8", "stroke_opacity": ".8", "stroke_opacity_hover": ".9", "stroke_width": "1", "stroke_width_hover": "4", "title_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "title_font_size": 16, "tooltip_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "tooltip_font_size": 14, "transition": "250ms ease-in", "value_background": "rgba(229, 229, 229, 1)", "value_colors": [], "value_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "value_font_size": 16, "value_label_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "value_label_font_size": 10}, "title": "Browser usage evolution (in %)", "tooltip_border_radius": 0, "tooltip_fancy_mode": true, "truncate_label": null, "truncate_legend": null, "width": 600, "x_label_rotation": 0, "x_labels": ["2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012"], "x_labels_major": null, "x_labels_major_count": null, "x_labels_major_every": null, "x_title": null, "xrange": null, "y_label_rotation": 0, "y_labels": null, "y_labels_major": null, "y_labels_major_count": null, "y_labels_major_every": null, "y_title": null, "zero": 0, "legends": ["Others", "IE", "Firefox", "Chrome"]}</script><script type="text/javascript" xlink:href="https://kozea.github.io/pygal.js/2.0.x/pygal-tooltips.min.js"></script></defs><title>Browser usage evolution (in %)</title>
<g class="graph stackedline-graph vertical"><rect x="0" y="0" width="600" height="400" class="background"></rect><g transform="translate(128, 46)" class="plot"><rect x="0" y="0" width="451.2" height="314" class="background"></rect><g class="axis y always_show"><path d="M0.000000 314.000000 h451.200000" class="line"></path><g class="guides"><path d="M0.000000 294.500000 h451.200000" class="guide line"></path><text x="-5" y="298.0" class="">10</text><title>10</title></g><g class="guides"><path d="M0.000000 262.448718 h451.200000" class="guide line"></path><text x="-5" y="265.94871794871796" class="">20</text><title>20</title></g><g class="guides"><path d="M0.000000 230.397436 h451.200000" class="guide line"></path><text x="-5" y="233.8974358974359" class="">30</text><title>30</title></g><g class="guides"><path d="M0.000000 198.346154 h451.200000" class="guide line"></path><text x="-5" y="201.84615384615387" class="">40</text><title>40</title></g><g class="guides"><path d="M0.000000 166.294872 h451.200000" class="major guide line"></path><text x="-5" y="169.7948717948718" class="major">50</text><title>50</title></g><g class="guides"><path d="M0.000000 134.243590 h451.200000" class="guide line"></path><text x="-5" y="137.74358974358975" class="">60</text><title>60</title></g><g class="guides"><path d="M0.000000 102.192308 h451.200000" class="guide line"></path><text x="-5" y="105.69230769230771" class="">70</text><title>70</title></g><g class="guides"><path d="M0.000000 70.141026 h451.200000" class="guide line"></path><text x="-5" y="73.64102564102564" class="">80</text><title>80</title></g><g class="guides"><path d="M0.000000 38.089744 h451.200000" class="guide line"></path><text x="-5" y="41.58974358974359" class="">90</text><title>90</title></g><g class="guides"><path d="M0.000000 6.038462 h451.200000" class="major guide line"></path><text x="-5" y="9.538461538461547" class="major">100</text><title>100</title></g></g><g class="axis x"><g class="guides"><path d="M8.676923 0.000000 v314.000000" class="line"></path><text x="8.676923076923076" y="329.0" class="">2002</text></g><g class="guides"><path d="M52.061538 0.000000 v314.000000" class="guide line"></path><text x="52.06153846153847" y="329.0" class="">2003</text></g><g class="guides"><path d="M95.446154 0.000000 v314.000000" class="guide line"></path><text x="95.44615384615383" y="329.0" class="">2004</text></g><g class="guides"><path d="M138.830769 0.000000 v314.000000" class="guide line"></path><text x="138.83076923076922" y="329.0" class="">2005</text></g><g class="guides"><path d="M182.215385 0.000000 v314.000000" class="guide line"></path><text x="182.21538461538464" y="329.0" class="">2006</text></g><g class="guides"><path d="M225.600000 0.000000 v314.000000" class="guide line"></path><text x="225.6" y="329.0" class="">2007</text></g><g class="guides"><path d="M268.984615 0.000000 v314.000000" class="guide line"></path><text x="268.9846153846153" y="329.0" class="">2008</text></g><g class="guides"><path d="M312.369231 0.000000 v314.000000" class="guide line"></path><text x="312.36923076923074" y="329.0" class="">2009</text></g><g class="guides"><path d="M355.753846 0.000000 v314.000000" class="guide line"></path><text x="355.75384615384615" y="329.0" class="">2010</text></g><g class="guides"><path d="M399.138462 0.000000 v314.000000" class="guide line"></path><text x="399.1384615384615" y="329.0" class="">2011</text></g><g class="guides"><path d="M442.523077 0.000000 v314.000000" class="guide line"></path><text x="442.52307692307687" y="329.0" class="">2012</text></g></g><g class="series serie-0 color-0"><path d="M8.676923 314.000000 L8.676923 281.038462 52.061538 277.192308 95.446154 277.512821 138.830769 298.025641 182.215385 297.705128 225.600000 293.217949 268.984615 298.025641 312.369231 307.961538 355.753846 305.076923 399.138462 304.756410 442.523077 302.512821 442.523077 314.000000" class="line reactive"></path></g><g class="series serie-1 color-1"><path d="M8.676923 6.038462 L52.061538 6.038462 95.446154 6.038462 138.830769 59.243590 182.215385 86.166667 225.600000 105.397436 268.984615 122.705128 312.369231 164.371795 355.753846 189.051282 399.138462 219.500000 442.523077 238.089744 442.523077 302.512821 399.138462 304.756410 355.753846 305.076923 312.369231 307.961538 268.984615 298.025641 225.600000 293.217949 182.215385 297.705128 138.830769 298.025641 95.446154 277.512821 52.061538 277.192308 8.676923 281.038462" class="line reactive"></path></g><g class="series serie-2 color-2"><path d="M8.676923 6.038462 L52.061538 6.038462 95.446154 6.038462 138.830769 6.038462 182.215385 6.038462 225.600000 6.038462 268.984615 6.038462 312.369231 18.538462 355.753846 40.653846 399.138462 82.320513 442.523077 119.179487 442.523077 238.089744 399.138462 219.500000 355.753846 189.051282 312.369231 164.371795 268.984615 122.705128 225.600000 105.397436 182.215385 86.166667 138.830769 59.243590 95.446154 6.038462 52.061538 6.038462 8.676923 6.038462" class="line reactive"></path></g><g class="series serie-3 color-3"><path d="M8.676923 6.038462 L52.061538 6.038462 95.446154 6.038462 138.830769 6.038462 182.215385 6.038462 225.600000 6.038462 268.984615 6.038462 312.369231 6.038462 355.753846 6.038462 399.138462 6.038462 442.523077 6.038462 442.523077 119.179487 399.138462 82.320513 355.753846 40.653846 312.369231 18.538462 268.984615 6.038462 225.600000 6.038462 182.215385 6.038462 138.830769 6.038462 95.446154 6.038462 52.061538 6.038462 8.676923 6.038462" class="line reactive"></path></g></g><g class="titles"><text x="300.0" y="26" class="title plot_title">Browser usage evolution (in %)</text></g><g transform="translate(128, 46)" class="plot overlay"><g class="series serie-0 color-0"><g class="dots"><circle cx="8.676923076923076" cy="281.03846153846155" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">14.2</desc><desc class="x top">8.676923076923076</desc><desc class="y top">281.03846153846155</desc><desc class="x_label">2002</desc></g><g class="dots"><circle cx="52.06153846153847" cy="277.1923076923077" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">15.4</desc><desc class="x top">52.06153846153847</desc><desc class="y top">277.1923076923077</desc><desc class="x_label">2003</desc></g><g class="dots"><circle cx="95.44615384615383" cy="277.5128205128205" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">15.3</desc><desc class="x top">95.44615384615383</desc><desc class="y top">277.5128205128205</desc><desc class="x_label">2004</desc></g><g class="dots"><circle cx="138.83076923076922" cy="298.025641025641" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">8.9</desc><desc class="x top">138.83076923076922</desc><desc class="y top">298.025641025641</desc><desc class="x_label">2005</desc></g><g class="dots"><circle cx="182.21538461538464" cy="297.7051282051282" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">9</desc><desc class="x top">182.21538461538464</desc><desc class="y top">297.7051282051282</desc><desc class="x_label">2006</desc></g><g class="dots"><circle cx="225.6" cy="293.21794871794873" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">10.4</desc><desc class="x top">225.6</desc><desc class="y top">293.21794871794873</desc><desc class="x_label">2007</desc></g><g class="dots"><circle cx="268.9846153846153" cy="298.025641025641" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">8.9</desc><desc class="x left top">268.9846153846153</desc><desc class="y left top">298.025641025641</desc><desc class="x_label">2008</desc></g><g class="dots"><circle cx="312.36923076923074" cy="307.96153846153845" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">5.8</desc><desc class="x left top">312.36923076923074</desc><desc class="y left top">307.96153846153845</desc><desc class="x_label">2009</desc></g><g class="dots"><circle cx="355.75384615384615" cy="305.0769230769231" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">6.7</desc><desc class="x left top">355.75384615384615</desc><desc class="y left top">305.0769230769231</desc><desc class="x_label">2010</desc></g><g class="dots"><circle cx="399.1384615384615" cy="304.7564102564103" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">6.8</desc><desc class="x left top">399.1384615384615</desc><desc class="y left top">304.7564102564103</desc><desc class="x_label">2011</desc></g><g class="dots"><circle cx="442.52307692307687" cy="302.5128205128205" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">7.5</desc><desc class="x left top">442.52307692307687</desc><desc class="y left top">302.5128205128205</desc><desc class="x_label">2012</desc></g></g><g class="series serie-1 color-1"><g class="dots"><circle cx="8.676923076923076" cy="6.038461538461547" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">100 (+85.8)</desc><desc class="x ">8.676923076923076</desc><desc class="y ">6.038461538461547</desc><desc class="x_label">2002</desc></g><g class="dots"><circle cx="52.06153846153847" cy="6.038461538461547" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">100 (+84.6)</desc><desc class="x ">52.06153846153847</desc><desc class="y ">6.038461538461547</desc><desc class="x_label">2003</desc></g><g class="dots"><circle cx="95.44615384615383" cy="6.038461538461547" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">100 (+84.7)</desc><desc class="x ">95.44615384615383</desc><desc class="y ">6.038461538461547</desc><desc class="x_label">2004</desc></g><g class="dots"><circle cx="138.83076923076922" cy="59.24358974358972" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">83.4 (+74.5)</desc><desc class="x ">138.83076923076922</desc><desc class="y ">59.24358974358972</desc><desc class="x_label">2005</desc></g><g class="dots"><circle cx="182.21538461538464" cy="86.16666666666669" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">75 (+66)</desc><desc class="x ">182.21538461538464</desc><desc class="y ">86.16666666666669</desc><desc class="x_label">2006</desc></g><g class="dots"><circle cx="225.6" cy="105.39743589743591" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">69 (+58.6)</desc><desc class="x ">225.6</desc><desc class="y ">105.39743589743591</desc><desc class="x_label">2007</desc></g><g class="dots"><circle cx="268.9846153846153" cy="122.7051282051282" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">63.6 (+54.7)</desc><desc class="x left">268.9846153846153</desc><desc class="y left">122.7051282051282</desc><desc class="x_label">2008</desc></g><g class="dots"><circle cx="312.36923076923074" cy="164.3717948717949" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">50.6 (+44.8)</desc><desc class="x left top">312.36923076923074</desc><desc class="y left top">164.3717948717949</desc><desc class="x_label">2009</desc></g><g class="dots"><circle cx="355.75384615384615" cy="189.05128205128204" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">42.9 (+36.2)</desc><desc class="x left top">355.75384615384615</desc><desc class="y left top">189.05128205128204</desc><desc class="x_label">2010</desc></g><g class="dots"><circle cx="399.1384615384615" cy="219.5" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">33.4 (+26.6)</desc><desc class="x left top">399.1384615384615</desc><desc class="y left top">219.5</desc><desc class="x_label">2011</desc></g><g class="dots"><circle cx="442.52307692307687" cy="238.0897435897436" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">27.6 (+20.1)</desc><desc class="x left top">442.52307692307687</desc><desc class="y left top">238.0897435897436</desc><desc class="x_label">2012</desc></g></g><g class="series serie-2 color-2"><g class="dots"><circle cx="8.676923076923076" cy="6.038461538461547" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">100 (+0)</desc><desc class="x ">8.676923076923076</desc><desc class="y ">6.038461538461547</desc><desc class="x_label">2002</desc></g><g class="dots"><circle cx="52.06153846153847" cy="6.038461538461547" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">100 (+0)</desc><desc class="x ">52.06153846153847</desc><desc class="y ">6.038461538461547</desc><desc class="x_label">2003</desc></g><g class="dots"><circle cx="95.44615384615383" cy="6.038461538461547" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">100 (+0)</desc><desc class="x ">95.44615384615383</desc><desc class="y ">6.038461538461547</desc><desc class="x_label">2004</desc></g><g class="dots"><circle cx="138.83076923076922" cy="6.038461538461547" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">100 (+16.6)</desc><desc class="x ">138.83076923076922</desc><desc class="y ">6.038461538461547</desc><desc class="x_label">2005</desc></g><g class="dots"><circle cx="182.21538461538464" cy="6.038461538461547" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">100 (+25)</desc><desc class="x ">182.21538461538464</desc><desc class="y ">6.038461538461547</desc><desc class="x_label">2006</desc></g><g class="dots"><circle cx="225.6" cy="6.038461538461547" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">100 (+31)</desc><desc class="x ">225.6</desc><desc class="y ">6.038461538461547</desc><desc class="x_label">2007</desc></g><g class="dots"><circle cx="268.9846153846153" cy="6.038461538461547" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">100 (+36.4)</desc><desc class="x left">268.9846153846153</desc><desc class="y left">6.038461538461547</desc><desc class="x_label">2008</desc></g><g class="dots"><circle cx="312.36923076923074" cy="18.538461538461547" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">96.1 (+45.5)</desc><desc class="x left">312.36923076923074</desc><desc class="y left">18.538461538461547</desc><desc class="x_label">2009</desc></g><g class="dots"><circle cx="355.75384615384615" cy="40.65384615384613" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">89.2 (+46.3)</desc><desc class="x left">355.75384615384615</desc><desc class="y left">40.65384615384613</desc><desc class="x_label">2010</desc></g><g class="dots"><circle cx="399.1384615384615" cy="82.32051282051287" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">76.2 (+42.8)</desc><desc class="x left">399.1384615384615</desc><desc class="y left">82.32051282051287</desc><desc class="x_label">2011</desc></g><g class="dots"><circle cx="442.52307692307687" cy="119.17948717948715" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">64.7 (+37.1)</desc><desc class="x left">442.52307692307687</desc><desc class="y left">119.17948717948715</desc><desc class="x_label">2012</desc></g></g><g class="series serie-3 color-3"><g class="dots"><circle cx="8.676923076923076" cy="6.038461538461547" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">100 (+0)</desc><desc class="x ">8.676923076923076</desc><desc class="y ">6.038461538461547</desc><desc class="x_label">2002</desc></g><g class="dots"><circle cx="52.06153846153847" cy="6.038461538461547" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">100 (+0)</desc><desc class="x ">52.06153846153847</desc><desc class="y ">6.038461538461547</desc><desc class="x_label">2003</desc></g><g class="dots"><circle cx="95.44615384615383" cy="6.038461538461547" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">100 (+0)</desc><desc class="x ">95.44615384615383</desc><desc class="y ">6.038461538461547</desc><desc class="x_label">2004</desc></g><g class="dots"><circle cx="138.83076923076922" cy="6.038461538461547" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">100 (+0)</desc><desc class="x ">138.83076923076922</desc><desc class="y ">6.038461538461547</desc><desc class="x_label">2005</desc></g><g class="dots"><circle cx="182.21538461538464" cy="6.038461538461547" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">100 (+0)</desc><desc class="x ">182.21538461538464</desc><desc class="y ">6.038461538461547</desc><desc class="x_label">2006</desc></g><g class="dots"><circle cx="225.6" cy="6.038461538461547" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">100 (+0)</desc><desc class="x ">225.6</desc><desc class="y ">6.038461538461547</desc><desc class="x_label">2007</desc></g><g class="dots"><circle cx="268.9846153846153" cy="6.038461538461547" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">100 (+0)</desc><desc class="x left">268.9846153846153</desc><desc class="y left">6.038461538461547</desc><desc class="x_label">2008</desc></g><g class="dots"><circle cx="312.36923076923074" cy="6.038461538461547" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">100 (+3.9)</desc><desc class="x left">312.36923076923074</desc><desc class="y left">6.038461538461547</desc><desc class="x_label">2009</desc></g><g class="dots"><circle cx="355.75384615384615" cy="6.038461538461547" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">100 (+10.8)</desc><desc class="x left">355.75384615384615</desc><desc class="y left">6.038461538461547</desc><desc class="x_label">2010</desc></g><g class="dots"><circle cx="399.1384615384615" cy="6.038461538461604" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">100 (+23.8)</desc><desc class="x left">399.1384615384615</desc><desc class="y left">6.038461538461604</desc><desc class="x_label">2011</desc></g><g class="dots"><circle cx="442.52307692307687" cy="6.038461538461547" r="2.5" class="dot reactive tooltip-trigger"></circle><desc class="value">100 (+35.3)</desc><desc class="x left">442.52307692307687</desc><desc class="y left">6.038461538461547</desc><desc class="x_label">2012</desc></g></g></g><g transform="translate(128, 46)" class="plot text-overlay"><g class="series serie-0 color-0"></g><g class="series serie-1 color-1"></g><g class="series serie-2 color-2"></g><g class="series serie-3 color-3"></g></g><g transform="translate(128, 46)" class="plot tooltip-overlay"><g transform="translate(0 0)" style="opacity: 0" class="tooltip"><rect rx="0" ry="0" width="0" height="0" class="tooltip-box"></rect><g class="text"></g></g></g><g transform="translate(10, 56)" class="legends"><g id="activate-serie-0" class="legend reactive activate-serie"><rect x="0.0" y="1.0" width="12" height="12" class="color-0 reactive"></rect><text x="17.0" y="11.2">Others</text></g><g id="activate-serie-1" class="legend reactive activate-serie"><rect x="0.0" y="22.0" width="12" height="12" class="color-1 reactive"></rect><text x="17.0" y="32.2">IE</text></g><g id="activate-serie-2" class="legend reactive activate-serie"><rect x="0.0" y="43.0" width="12" height="12" class="color-2 reactive"></rect><text x="17.0" y="53.2">Firefox</text></g><g id="activate-serie-3" class="legend reactive activate-serie"><rect x="0.0" y="64.0" width="12" height="12" class="color-3 reactive"></rect><text x="17.0" y="74.2">Chrome</text></g></g><g transform="translate(590, 56)" class="legends"></g></g></svg>
</div>
<p>Here's how it works:</p>
<ul class="simple">
<li><p>Next to the directive, use the <a class="reference external" href="http://pygal.org/chart_types/">chart type you want</a></p></li>
<li><p>Any option you can set in a chart? Use it like <code class="docutils literal">:title:</code> in this example. Syntax on
the value is just like in the pygal examples.</p></li>
<li><p>For each data series do it like the line that says <code class="docutils literal">Firefox</code> in this example. The first element
is the label, then comes the data.</p></li>
</ul>
<p>Easy, right? Please explore <a class="reference external" href="http://pygal.org">the pygal site</a> for more information, and just
take this example and tweak stuff.</p>
    </div>
    

</article>
</div>
            <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
                <div class="sidebar-module sidebar-module-inset">
  <h4>About</h4>
  <div id="shoutcastdiv">
    <script type="text/javascript">
      refreshdiv();
    </script>
</div>
</div>
<div class="sidebar-module">
  <h4>Links</h4>
  <ol class="list-unstyled">
<li><a href="http://getbootstrap.com/examples/blog/">Bootstrap Blog Theme</a></li>
    <li><a href="https://getnikola.com/">Nikola</a></li>
    <li><a href="https://twitter.com/mdo">@mdo</a></li>
    <li><a href="https://twitter.com/Kwpolska">@Kwpolska</a></li>
    <li><a href="https://twitter.com/GetNikola">@GetNikola</a></li>
  </ol>
</div>


            </div>
        <!--End of body content-->
        </div>
    </div>
</div>

<footer class="blog-footer" id="footer">
    Contents © 2023         <a href="mailto:contact@riff-radio.org">Riff</a> - Powered by         <a href="https://getnikola.com" rel="nofollow">Nikola</a>         
    
</footer><script src="../assets/js/all-nocdn.js"></script><!-- fancy dates --><script>
    moment.locale("en");
    fancydates(0, "YYYY-MM-DD HH:mm");
    </script><!-- end fancy dates --><script>
    baguetteBox.run('div#content', {
        ignoreClass: 'islink',
        captions: function(element) {
            return element.getElementsByTagName('img')[0].alt;
    }});
    </script><script type="text/javascript" src="../refresh.js"></script>
</body>
</html>