Reference - Data types - file

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

{chart 'column',
       data='profit',
       label='quarter',
       value='result',
       title='Result per quarter, in thousands',
       width=640,
       height=340}

{chart 'boxplot',
       data='salaries',
       label='team',
       value='salary',
       title='Monthly salary per team, in euros',
       width=640,
       height=360}

{chart 'gantt',
       data='release',
       label='work',
       from='week',
       to='weeks',
       color='team',
       title='A release in twelve weeks, by team',
       width=640,
       height=340}

{chart 'heatmap',
       data='rainfall',
       x='month',
       y='city',
       value='mm',
       title='Rainfall in millimetres',
       width=640,
       height=300}

{chart 'treemap',
       data='company',
       levels='department',
       label='post',
       value='amount',
       title='The budget, in thousands',
       width=640,
       height=420}

{chart 'pack',
       data='sourcefiles',
       levels='folder',
       label='file',
       value='kb',
       title='The files of a project by folder, in kilobytes',
       width=560,
       height=520}

{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 'network',
       data='friends',
       source='person',
       target='friend',
       title='Who is friends with whom',
       width=640,
       height=420}

{chart 'pie',
       data='browsers',
       label='browser',
       value='share',
       title='Browser market share',
       width=560,
       height=320}

{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}