Multiple Vertical Feeds

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/9SNCLBW4

<!doctype html>
<html class="zc-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"];
    let updatedValues = [];

    // CHART 0 CONFIG
    // -----------------------------
    let chart0 = {
      id: 'voltage',
      type: 'vline',
      title: {
        text: 'Voltage',
      },
      plot: {
        tooltip: {
          visible: false,
        },
        marker: {
          visible: false,
        },
      },
      plotarea: {
        margin: '50 dynamic dynamic dynamic',
      },
      scaleX: {
        step: 1000,
        transform: {
          type: 'date',
          all: '%h:%i:%s %a',
        },
      },
      scaleY: {
        label: {
          text: 'mV',
        },
      },
      series: [{
        text: 'Sensor 2',
        values: updatedValues,
        lineColor: '#ff4081',
        lineWidth: '4px',
      }, ],
      crosshairX: {
        plotLabel: {
          text: '<span style="color:%color">%t:</span> %v mV',
          fontSize: '15px',
          headerText: '%kv',
          padding: '15px',
        },
        shared: true,
      },
      refresh: {
        type: 'feed',
        adjustScale: true,
        interval: 1000,
        maxTicks: 15,
        resetTimeout: 100,
        transport: 'js',
        url: 'getRandomData()',
      },
    };

    // CHART 1 CONFIG
    // -----------------------------
    let chart1 = {
      id: 'temp',
      type: 'hbar',
      title: {
        text: 'Avg Temp °C',
      },
      plot: {
        tooltip: {
          visible: false,
        },
        marker: {
          visible: false,
        },
      },
      plotarea: {
        margin: '50px dynamic dynamic dynamic',
      },
      scaleX: {
        step: 1000,
        transform: {
          type: 'date',
          all: '%h:%i:%s %a',
        },
      },
      scaleY: {
        label: {
          text: '°C',
        },
      },
      series: [{
        text: 'Sensor 2',
        values: updatedValues,
        backgroundColor: '#ff6e40',
      }, ],
      crosshairX: {
        plotLabel: {
          text: '<span style="color:%color">%t:</span> %v °C',
          fontSize: '15px',
          headerText: '%kv',
          padding: '15px',
        },
        shared: true,
      },
      refresh: {
        type: 'feed',
        adjustScale: true,
        interval: 1000,
        maxTicks: 15,
        transport: 'js',
        url: 'getRandomData()',
      },
    };

    // CHART 2 CONFIG
    // -----------------------------
    let chart2 = {
      id: 'vibration',
      type: 'varea',
      title: {
        text: 'Vibration',
      },
      plot: {
        tooltip: {
          visible: false,
        },
        aspect: 'spline',
        marker: {
          visible: false,
        },
      },
      plotarea: {
        margin: '50 dynamic dynamic dynamic',
      },
      scaleX: {
        step: 1000,
        transform: {
          type: 'date',
          all: '%h:%i:%s %a',
        },
      },
      scaleY: {
        label: {
          text: 'ms',
        },
      },
      series: [{
        text: 'Sensor 2',
        values: updatedValues,
        alphaArea: 0.9,
        backgroundColor: '#ffd740',
        lineColor: '#ffc400',
        lineWidth: '2px',
      }, ],
      crosshairX: {
        plotLabel: {
          text: '<span style="color:%color">%t:</span> %v ms',
          decimals: 5, // limit value shown in plotLabel
          fontSize: '15px',
          headerText: '%kv',
          padding: '15px',
        },
        shared: true,
      },
      refresh: {
        type: 'feed',
        adjustScale: true,
        interval: 1000,
        maxTicks: 15,
        transport: 'js',
        url: 'getRandomData()',
      },
    };

    // CHART CONFIG
    // -----------------------------
    let chartConfig = {
      layout: '1x3',
      theme: 'dark',
      graphset: [chart0, chart1, chart2],
    };

    // RENDER CHARTS
    // -----------------------------
    zingchart.render({
      id: 'myChart',
      data: chartConfig,
    });

    // HELPER METHODS
    // -----------------------------
    window.getRandomData = function(callback, oGraphInfo) {
      let tick = {};
      tick.plot0 = 0;
      switch (oGraphInfo.graphid) {
        case 'temp':
          tick.plot0 = parseInt(150 + 25 * Math.random(), 10);
          break;
        case 'voltage':
          tick.plot0 = parseInt(200 + 50 * Math.random(), 10);
          break;
        case 'vibration':
          tick.plot0 = Number(1 * Math.random(), 10);
          break;
      }
      callback(JSON.stringify(tick));
    };
  </script>
</body>

</html>

<!doctype html>
<html class="zc-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>

let updatedValues = [];

// CHART 0 CONFIG
// -----------------------------
let chart0 = {
  id: 'voltage',
  type: 'vline',
  title: {
    text: 'Voltage',
  },
  plot: {
    tooltip: {
      visible: false,
    },
    marker: {
      visible: false,
    },
  },
  plotarea: {
    margin: '50 dynamic dynamic dynamic',
  },
  scaleX: {
    step: 1000,
    transform: {
      type: 'date',
      all: '%h:%i:%s %a',
    },
  },
  scaleY: {
    label: {
      text: 'mV',
    },
  },
  series: [
    {
      text: 'Sensor 2',
      values: updatedValues,
      lineColor: '#ff4081',
      lineWidth: '4px',
    },
  ],
  crosshairX: {
    plotLabel: {
      text: '<span style="color:%color">%t:</span> %v mV',
      fontSize: '15px',
      headerText: '%kv',
      padding: '15px',
    },
    shared: true,
  },
  refresh: {
    type: 'feed',
    adjustScale: true,
    interval: 1000,
    maxTicks: 15,
    resetTimeout: 100,
    transport: 'js',
    url: 'getRandomData()',
  },
};

// CHART 1 CONFIG
// -----------------------------
let chart1 = {
  id: 'temp',
  type: 'hbar',
  title: {
    text: 'Avg Temp °C',
  },
  plot: {
    tooltip: {
      visible: false,
    },
    marker: {
      visible: false,
    },
  },
  plotarea: {
    margin: '50px dynamic dynamic dynamic',
  },
  scaleX: {
    step: 1000,
    transform: {
      type: 'date',
      all: '%h:%i:%s %a',
    },
  },
  scaleY: {
    label: {
      text: '°C',
    },
  },
  series: [
    {
      text: 'Sensor 2',
      values: updatedValues,
      backgroundColor: '#ff6e40',
    },
  ],
  crosshairX: {
    plotLabel: {
      text: '<span style="color:%color">%t:</span> %v °C',
      fontSize: '15px',
      headerText: '%kv',
      padding: '15px',
    },
    shared: true,
  },
  refresh: {
    type: 'feed',
    adjustScale: true,
    interval: 1000,
    maxTicks: 15,
    transport: 'js',
    url: 'getRandomData()',
  },
};

// CHART 2 CONFIG
// -----------------------------
let chart2 = {
  id: 'vibration',
  type: 'varea',
  title: {
    text: 'Vibration',
  },
  plot: {
    tooltip: {
      visible: false,
    },
    aspect: 'spline',
    marker: {
      visible: false,
    },
  },
  plotarea: {
    margin: '50 dynamic dynamic dynamic',
  },
  scaleX: {
    step: 1000,
    transform: {
      type: 'date',
      all: '%h:%i:%s %a',
    },
  },
  scaleY: {
    label: {
      text: 'ms',
    },
  },
  series: [
    {
      text: 'Sensor 2',
      values: updatedValues,
      alphaArea: 0.9,
      backgroundColor: '#ffd740',
      lineColor: '#ffc400',
      lineWidth: '2px',
    },
  ],
  crosshairX: {
    plotLabel: {
      text: '<span style="color:%color">%t:</span> %v ms',
      decimals: 5, // limit value shown in plotLabel
      fontSize: '15px',
      headerText: '%kv',
      padding: '15px',
    },
    shared: true,
  },
  refresh: {
    type: 'feed',
    adjustScale: true,
    interval: 1000,
    maxTicks: 15,
    transport: 'js',
    url: 'getRandomData()',
  },
};

// CHART CONFIG
// -----------------------------
let chartConfig = {
  layout: '1x3',
  theme: 'dark',
  graphset: [chart0, chart1, chart2],
};

// RENDER CHARTS
// -----------------------------
zingchart.render({
  id: 'myChart',
  data: chartConfig,
});

// HELPER METHODS
// -----------------------------
window.getRandomData = function (callback, oGraphInfo) {
  let tick = {};
  tick.plot0 = 0;
  switch (oGraphInfo.graphid) {
    case 'temp':
      tick.plot0 = parseInt(150 + 25 * Math.random(), 10);
      break;
    case 'voltage':
      tick.plot0 = parseInt(200 + 50 * Math.random(), 10);
      break;
    case 'vibration':
      tick.plot0 = Number(1 * Math.random(), 10);
      break;
  }
  callback(JSON.stringify(tick));
};

.zc-body { background:#000; }

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

.zc-ref {
  display: none;
}

Irregular Time Data 123/281 Bar Chart with Selection Tool

Multiple Vertical Feeds

Related Documentation: