Code Examples

// app/chart/[id]/page.tsx
import { LiquiChart } from '@liquichart/sdk';

const lc = new LiquiChart({ apiKey: process.env.LIQUICHART_API_KEY! });

export default async function ChartPage({ params }: { params: { id: string } }) {
  const { data: chart } = await lc.charts.get(params.id);

  return (
    <article>
      <h2>{chart.title}</h2>
      {/* Native HTML — Google indexes this */}
      <table>
        <tbody>
          {chart.data.map(d => (
            <tr key={d.label}>
              <td>{d.label}</td>
              <td>{d.value}</td>
            </tr>
          ))}
        </tbody>
      </table>
      {chart.insight && <blockquote>{chart.insight.text}</blockquote>}
      <cite>Source: {chart.source.attribution}</cite>
    </article>
  );
}

<!-- pages/chart/[id].vue -->
<script setup>
const { id } = useRoute().params;
const { data: response } = await useFetch(
  `https://www.liquichart.com/api/v1/charts/${id}`,
  { headers: { 'x-api-key': useRuntimeConfig().liquichartApiKey } }
);
const chart = response.value?.data;
</script>

<template>
  <article v-if="chart">
    <h2>{{ chart.title }}</h2>
    <table>
      <tr v-for="d in chart.data" :key="d.label">
        <td>{{ d.label }}</td>
        <td>{{ d.value }}</td>
      </tr>
    </table>
  </article>
</template>

---
// src/pages/chart/[id].astro
const { id } = Astro.params;
const res = await fetch(`https://www.liquichart.com/api/v1/charts/${id}`, {
  headers: { 'x-api-key': import.meta.env.LIQUICHART_API_KEY },
});
const { data: chart } = await res.json();
---

<article>
  <h2>{chart.title}</h2>
  <table>
    {chart.data.map(d => (
      <tr><td>{d.label}</td><td>{d.value}</td></tr>
    ))}
  </table>
</article>

<?php
// functions.php or template file
function liquichart_get_chart($short_id) {
    $response = wp_remote_get(
        "https://www.liquichart.com/api/v1/charts/{$short_id}",
        ['headers' => ['x-api-key' => LIQUICHART_API_KEY]]
    );
    $body = json_decode(wp_remote_retrieve_body($response), true);
    return $body['data'] ?? null;
}

$chart = liquichart_get_chart('abc12345');
if ($chart): ?>
<article>
    <h2><?= esc_html($chart['title']) ?></h2>
    <table>
        <?php foreach ($chart['data'] as $d): ?>
        <tr><td><?= esc_html($d['label']) ?></td><td><?= $d['value'] ?></td></tr>
        <?php endforeach; ?>
    </table>
</article>
<?php endif; ?>