Reference - Data types - yaml

{chart 'bar',
       data='energymix',
       label='year',
       value='coal, gas, wind, solar',
       stacked,
       title='Electricity by source',
       width=640,
       height=340}

{chart 'sunburst',
       data='world',
       levels='continent',
       label='region',
       value='people',
       title='The world population in millions',
       width=420,
       height=420}

<main class="page home">

  <section class="hero">
    <div class="hero-text">
      <span class="kicker">PAD · {ignore}{chart}{/ignore}</span>
      <h1>Every chart,<br><span class="shine">drawn on the server.</span></h1>
      <p class="lead">One tag turns rows of JSON, YAML, CSV or PHP into an accessible SVG chart -
      lines, areas, streams, bars, funnels, pyramids, waterfalls, pies, waffles, marimekkos,
      parliaments, venns, gauges, radars, roses, bullets, histograms, violins, scatters, heatmaps,
      candlesticks, spirals, sankeys, chords, networks, treemaps, packs, org charts and gantt
      charts. No JavaScript, so it prints, caches and shows up in an e-mail.</p>
      <ul class="stats">
        <li><b>46</b> kinds</li>
        <li><b>{$exampleCount}</b> examples</li>
        <li><b>0</b> lines of JavaScript</li>
      </ul>
    </div>
    <a class="hero-card" href="?sankey/energy" aria-label="Open the energy sankey">
      {page 'sankey/energy'}
    </a>
  </section>

  {families}
  <section class="family" id="{$family}">
    <header class="family-head">
      <h2>{$label}</h2>
      <span class="family-line">{$tagline}</span>
    </header>
    <div class="cards">
      {examples}
      <a class="card" href="?{$page}">
        <span class="card-chart">{page $page}</span>
        <span class="card-body">
          <span class="card-title">{$title}</span>
          <span class="card-text">{$text}</span>
        </span>
      </a>
      {/examples}
    </div>
  </section>
  {/families}

</main>

{chart 'line',
       data='shares',
       label='month',
       value='price',
       title='Closing price per month',
       width=640,
       height=340}

{chart 'network',
       data='flights',
       source='from',
       target='to',
       value='flights',
       layout='radial',
       title='Direct flights per day',
       width=640,
       height=420}

{chart 'donut',
       data='budget',
       label='post',
       value='amount',
       title='A monthly budget',
       width=560,
       height=320}

{chart 'radar',
       data='players',
       label='player',
       value='passing, shooting, tackling, stamina, dribbling, heading',
       to=100,
       title='Two midfielders, skill by skill',
       width=560,
       height=400}

{chart 'sankey',
       source='from',
       target='to',
       value='people',
       title='From visit to order',
       width=640,
       height=400}
  # One month of visitors to a web shop
  - from: Visitors
    to: Product page
    people: 6200
  - from: Visitors
    to: Left at once
    people: 3800
  - from: Product page
    to: Basket
    people: 2100
  - from: Product page
    to: Left browsing
    people: 4100
  - from: Basket
    to: Checkout
    people: 1350
  - from: Basket
    to: Abandoned
    people: 750
  - from: Checkout
    to: Order
    people: 1180
  - from: Checkout
    to: Payment failed
    people: 170
{/chart}

{chart 'bubble',
       data='countries',
       x='income',
       y='life',
       size='people',
       label='country',
       color='continent',
       title='Income, life expectancy and population',
       width=640,
       height=360}

{data 'myYaml', 'level_demo.yaml'}

<table border='1'>
  {myYaml}
    <tr>
      {column}
        <td>{$column}</td>
      {/column}
    </tr>
  {/myYaml}
</table>

<p>
  {block}
    PAD is data driven, the PAD data concepts are named Level and Occurence
    <br><br>
    Below example: <br>
    - Is two levels deep <br>
    - The level 'row' has 3 occurences<br>
    - The level 'column' has 5 occurences<br><br>
  {/block}
  {example 'lvl_occ/1', skipNames, center}
</p>

{block}
  If not specifield for a PAD tag then default it has 1 occurence.
  <br><br><hr><br>
  Just for fun, below the above example implemented in a few different ways.
  <br>
  Hopefully all this magic will be explained in this manual.
{/block}

<p> 
{sequence '2..12', name='xxx'}
  {example 'lvl_occ/{$xxx}', skipNames{notFirst},skipOpen,skipHeader{/notFirst}{notLast},skipClose{/notLast}}
{/sequence}
</p>

{block}
    With the <b>{data}</b> tag it is possible to define data for later use.
{/block}  

{page 'data/1'}

<hr>

{block}
  Data can be in xml/json/yaml/csv format.
  <br><br>
  There is also an own PAD list format with opening ( and closing )</p>
{/block}

{page 'data/2'}

<hr>

{block}
<p>
If <b>{data 'xxx'}</b> is used, then the data will not be processed before it is stored in the data store,<br>all above examples use it in this way.</p>
<p>If <b>{/data 'xxx'}</b> is used, then the data will be processed before it is stored in the data store.<br> Below a crazy example how this can be used: <br>
- first there is a JSON data definition<br>
- then this JSON data is converted to CSV data<br>
- then this CSV data is converted to XML data<br>
- then this XML data is converted to YAML data<br>
- then this YAML data is used to show a HTML table.
{/block}

{page 'data/3'}

{data 'pets', type='yaml'}
names: [cat, dog
kind: 3
{/data}