Reference - Data types - json

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

{chart 'histogram',
       bins=8,
       title='Delivery time of the last 40 orders, in days',
       width=640,
       height=340}
  [ 1, 2, 2, 2, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 5, 5, 5,
    5, 5, 6, 6, 6, 6, 7, 7, 7, 8, 8, 9, 9, 10, 11, 12, 14, 15, 18, 21 ]
{/chart}

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

<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',
       label='day',
       value='visits',
       title='Visits this week',
       width=640,
       height=340}
  [
    { "day": "Mon", "visits": 1240 },
    { "day": "Tue", "visits": 1580 },
    { "day": "Wed", "visits": 1395 },
    { "day": "Thu", "visits": 1720 },
    { "day": "Fri", "visits": 2110 },
    { "day": "Sat", "visits": 2640 },
    { "day": "Sun", "visits": 2380 }
  ]
{/chart}

{chart 'proportional',
       label='ocean',
       value='area',
       square,
       title='The five oceans, area in million km²',
       width=640,
       height=280}
  [ { "ocean": "Pacific",  "area": 165.25 },
    { "ocean": "Atlantic", "area": 106.46 },
    { "ocean": "Indian",   "area": 70.56 },
    { "ocean": "Southern", "area": 21.96 },
    { "ocean": "Arctic",   "area": 15.56 } ]
{/chart}

{chart 'rings',
       label='project',
       value='percent',
       title='Projects, per cent done',
       width=520,
       height=300}
  [ { "project": "Website relaunch", "percent": 82 },
    { "project": "Mobile app",       "percent": 64 },
    { "project": "Data warehouse",   "percent": 47 },
    { "project": "Support portal",   "percent": 91 },
    { "project": "Billing rewrite",  "percent": 23 } ]
{/chart}

{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 'radar',
       label='model',
       value='battery, camera, screen, speed, price',
       to=10,
       title='Three phones compared, out of ten',
       width=560,
       height=400}
  [
    { "model": "Aurora", "battery": 8, "camera": 6, "screen": 7, "speed": 9, "price": 5 },
    { "model": "Brisk",  "battery": 6, "camera": 9, "screen": 8, "speed": 7, "price": 4 },
    { "model": "Comet",  "battery": 9, "camera": 5, "screen": 6, "speed": 5, "price": 9 }
  ]
{/chart}

{chart 'parallel',
       data='cars',
       label='model',
       value='mpg, cylinders, horsepower, weight, acceleration, year',
       color='origin',
       title='Thirty-two cars of the seventies, six measures each',
       width=680,
       height=400}