diff --git a/pages/chart_types.rst b/pages/chart_types.rst index 3c9caff..c8f2fe4 100644 --- a/pages/chart_types.rst +++ b/pages/chart_types.rst @@ -204,15 +204,53 @@ Punch card like chart: dot_chart.add('IE', [43, 41, 59, 79, 144, 136, 34, 102]) +Funnel charts +------------- + +Basic +^^^^^ + +Funnel chart: + +.. pygal-code:: + + funnel_chart = pygal.Funnel() + funnel_chart.title = 'V8 benchmark results' + funnel_chart.x_labels = ['Richards', 'DeltaBlue', 'Crypto', 'RayTrace', 'EarleyBoyer', 'RegExp', 'Splay', 'NavierStokes'] + funnel_chart.add('Opera', [3472, 2933, 4203, 5229, 5810, 1828, 9013, 4669]) + funnel_chart.add('Firefox', [7473, 8099, 11700, 2651, 6361, 1044, 3797, 9450]) + funnel_chart.add('Chrome', [6395, 8212, 7520, 7218, 12464, 1660, 2123, 8607]) + + +Gauge charts +------------ + +Basic +^^^^^ + +Simple gauge chart: + +.. pygal-code:: + + gauge_chart = pygal.Gauge(human_readable=True) + gauge_chart.title = 'DeltaBlue V8 benchmark results' + gauge_chart.x_labels = ['Richards', 'DeltaBlue', 'Crypto', 'RayTrace', 'EarleyBoyer', 'RegExp', 'Splay', 'NavierStokes'] + gauge_chart.range = [0, 10000] + gauge_chart.add('Chrome', 8212) + gauge_chart.add('Firefox', 8099) + gauge_chart.add('Opera', 2933) + gauge_chart.add('IE', 41) + + Pyramid charts -------------- Basic ^^^^^ -Punch card like chart: +Population pyramid: -.. pygal-code:: 1000 800 +.. pygal-code:: 600 600 ages = [(364381, 358443, 360172, 345848, 334895, 326914, 323053, 312576, 302015, 301277, 309874, 318295, 323396, 332736, 330759, 335267, 345096, 352685, 368067, 381521, 380145, 378724, 388045, 382303, 373469, 365184, 342869, 316928, 285137, 273553, 250861, 221358, 195884, 179321, 171010, 162594, 152221, 148843, 143013, 135887, 125824, 121493, 115913, 113738, 105612, 99596, 91609, 83917, 75688, 69538, 62999, 58864, 54593, 48818, 44739, 41096, 39169, 36321, 34284, 32330, 31437, 30661, 31332, 30334, 23600, 21999, 20187, 19075, 16574, 15091, 14977, 14171, 13687, 13155, 12558, 11600, 10827, 10436, 9851, 9794, 8787, 7993, 6901, 6422, 5506, 4839, 4144, 3433, 2936, 2615), (346205, 340570, 342668, 328475, 319010, 312898, 308153, 296752, 289639, 290466, 296190, 303871, 309886, 317436, 315487, 316696, 325772, 331694, 345815, 354696, 354899, 351727, 354579, 341702, 336421, 321116, 292261, 261874, 242407, 229488, 208939, 184147, 162662, 147361, 140424, 134336, 126929, 125404, 122764, 116004, 105590, 100813, 95021, 90950, 85036, 79391, 72952, 66022, 59326, 52716, 46582, 42772, 38509, 34048, 30887, 28053, 26152, 23931, 22039, 20677, 19869, 19026, 18757, 18308, 14458, 13685, 12942, 12323, 11033, 10183, 10628, 10803, 10655, 10482, 10202, 10166, 9939, 10138, 10007, 10174, 9997, 9465, 9028, 8806, 8450, 7941, 7253, 6698, 6267, 5773), @@ -230,8 +268,7 @@ Punch card like chart: pyramid_chart = pygal.Pyramid(human_readable=True, legend_at_bottom=True) pyramid_chart.title = 'England population by age (source: ons.gov.uk)' - pyramid_chart.x_labels = map(lambda x: str(x) if not x % 10 else '', range(90)) + pyramid_chart.x_labels = map(lambda x: str(x) if not x % 5 else '', range(90)) for type, age in zip(types, ages): - pyramid_chart.add(type, age) - + pyramid_chart.add(type, age) diff --git a/static/css/style.css b/static/css/style.css index c2bfefa..a3ef94d 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -241,6 +241,8 @@ section pre { padding: 1em; background-color: #0a0a0a; border: 1px solid black; + width: 100%; + overflow-x: auto; } section samp {