Get started with vizceral CDN

Apache-2.0 licensed

Vizceral is a lightweight library for creating interactive data visualizations.

Tags:
  • webgl
  • traffic
  • graph
  • particles
  • flow
  • intuition
  • visceral

Stable version

Copied!

How to start using vizceral CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with vizceral CDN - cdnhub.io</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
  <script src="https://cdn.cdnhub.io/vizceral/4.9.0/vizceral.min.js"></script>
  <style>
    #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; text-align: center; }
  </style>
</head>
<body>
  <div id="app">
    <vizceral :data="data" :fields="fields" :columns="columns">
      <template slot="table-actions">
        <button @click="exportCSV">Export CSV</button>
      </template>
      <template slot="table-body" slot-scope="{ row }">
        <td>{{ row.name }}</td>
        <td>{{ row.age }}</td>
        <td>{{ row.city }}</td>
      </template>
    </vizceral>
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        data: [
          { name: 'John Doe', age: 30, city: 'New York' },
          { name: 'Jane Doe', age: 25, city: 'Los Angeles' },
          { name: 'Bob Smith', age: 45, city: 'Chicago' },
        ],
        fields: ['name', 'age', 'city'],
        columns: ['Name', 'Age', 'City'],
      },
      methods: {
        exportCSV() {
          this.$refs.table.exportCSV();
        },
      },
    });
  </script>
</body>
</html>
Copied!
Copied!
Copied!

All versions