Gallery Back to Gallery

Live Sparkline Chart

Powered by ZingChart 
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    .zc-body {
      background: #000;
    }

    .chart--container {
      height: 100%;
      width: 100%;
      min-height: 530px;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>

<body class="zc-body">

  <div id="myChart" class="chart--container">
    <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
  </div>

  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    // DEFINE CHART LOCATIONS (IDS)
    // -----------------------------
    // Main chart render location
    let chartId = 'myChart';


    // CHART CONFIG
    // -----------------------------
    let chartConfig = {
      graphset: [{
        type: 'null',
        backgroundColor: '#000',
        height: '30%',
        width: '100%',
        x: 0,
        y: 0,
        labels: [{
          id: 'main_label',
          text: '42k',
          anchor: 'c',
          fontColor: '#40c4ff',
          fontFamily: 'Bungee',
          fontSize: 80,
          x: '50%',
          y: '90%'
        }]
      }, {
        type: 'line',
        backgroundColor: '#000',
        height: '70%',
        width: '100%',
        x: 0,
        y: '30%',
        plot: {
          aspect: 'spline',
          marker: {
            visible: false
          }
        },
        scaleX: {
          visible: false
        },
        scaleY: {
          visible: false
        },
        series: [{
          values: [35, 42, 67, 89, 25, 34, 67, 85]
        }]
      }]
    }

    // RENDER CHART
    // -----------------------------
    zingchart.render({
      id: chartId,
      data: chartConfig,
      height: 560,
      width: '100%'
    });


    // UPDATE CHART
    // -----------------------------
    let startingValue = 42;
    setInterval(function() {
      chartConfig.graphset[1].series[0].values.push(Math.floor(Math.random() * 100));
      chartConfig.graphset[0].labels[0].text = ++startingValue + 'k';
      zingchart.exec(chartId, 'setdata', {
        data: chartConfig
      });
    }, 1000);
  </script>
</body>

</html>
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body class="zc-body">

  <div id="myChart" class="chart--container">
    <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
  </div>

</body>
</html>
// DEFINE CHART LOCATIONS (IDS)
// -----------------------------
// Main chart render location
let chartId = 'myChart';


// CHART CONFIG
// -----------------------------
let chartConfig = {
  graphset: [{
    type: 'null',
    backgroundColor: '#000',
    height: '30%',
    width: '100%',
    x: 0,
    y: 0,
    labels: [{
      id: 'main_label',
      text: '42k',
      anchor: 'c',
      fontColor: '#40c4ff',
      fontFamily: 'Bungee',
      fontSize: 80,
      x: '50%',
      y: '90%'
    }]
  }, {
    type: 'line',
    backgroundColor: '#000',
    height: '70%',
    width: '100%',
    x: 0,
    y: '30%',
    plot: {
      aspect: 'spline',
      marker: {
        visible: false
      }
    },
    scaleX: {
      visible: false
    },
    scaleY: {
      visible: false
    },
    series: [{
      values: [35, 42, 67, 89, 25, 34, 67, 85]
    }]
  }]
}

// RENDER CHART
// -----------------------------
zingchart.render({
  id: chartId,
  data: chartConfig,
  height: 560,
  width: '100%'
});


// UPDATE CHART
// -----------------------------
let startingValue = 42;
setInterval(function() {
  chartConfig.graphset[1].series[0].values.push(Math.floor(Math.random() * 100));
  chartConfig.graphset[0].labels[0].text = ++startingValue + 'k';
  zingchart.exec(chartId, 'setdata', {
    data: chartConfig
  });
}, 1000);
.zc-body { background:#000; }

.chart--container {
  height: 100%;
  width: 100%;
  min-height: 530px;
}

.zc-ref {
  display: none;
}
Grouped Bar Chart 30/281 Star Wars Word Cloud

Related Documentation: