[docs] stream > emptySeries

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script nonce="undefined" src="https://cdn.zingchart.com/2.7.2/zingchart.min.js"></script>
  <style></style>
</head>

<body>
  <div id='myChart1'></div>
  <script>
    let valueArray1 = [
      [2596, 2626, 4480, 6394, 7488, 14510, 7012, 3389, 20281, 48597, 53309, 52385, 47097, 50813, 13510],
      [479, 199, 583, 1624, 2772, 7899, 3467, 2227, 12885, 27873, 34420, 32569, 27721, 31569, 7362],
      [408, 343, 410, 840, 1614, 3274, 2092, 914, 5709, 15317, 15633, 16720, 15504, 15821, 4565],
      [989, 1364, 2161, 2644, 1754, 2015, 818, 77, 1260, 3912, 1671, 1836, 2589, 1706, 1161]
    ];

    let i = 0;

    window.feed = function(callback) {
      let tick = {};

      if ((i + 1) > (valueArray1[0].length - 1)) {
        i = 0;
      };
      tick.plot0 = valueArray1[0][i];
      tick.plot1 = valueArray1[0][i];
      tick.plot2 = valueArray1[1][i];
      tick.plot3 = valueArray1[2][i];
      tick.plot4 = valueArray1[3][i];
      i++;

      callback(JSON.stringify(tick));
    };


    let myConfig1 = {
      type: 'stream',
      globals: {
        fontFamily: 'Helvetica',
        shadow: false,
      },
      backgroundColor: '#fff',
      options: {
        emptySeries: {
          backgroundColor: 'blue'
        }
      },
      title: {
        text: 'Bandwidth for All Sites',
        backgroundColor: 'transparent',
        fontColor: '#5f5f5f',
        fontSize: '20px',
        padding: '15px 15px',
        textAlign: 'left',
      },
      scaleY: {
        lineColor: '#5f5f5f',
        lineWidth: '1px',
        short: true,
        guide: {
          lineStyle: 'solid',
          lineColor: '#626262'
        },
        item: {
          fontColor: '#5f5f5f'
        },
        tick: {
          lineColor: '#5f5f5f',
          lineWidth: '1px'
        },
      },
      tooltip: {
        visible: false
      },
      crosshairX: {
        plotLabel: {
          backgroundColor: '#434343',
          borderRadius: '5px',
          fontColor: '#FFF',
          thousandsSeparator: ',',
        },
        scaleLabel: {
          backgroundColor: '#fff',
          fontColor: 'black'
        },
      },
      plot: {
        alphaArea: 1,
        lineWidth: 0,
      },
      refresh: {
        type: 'feed',
        transport: 'js',
        url: 'feed()',
        maxTicks: 10,
        interval: 400,
        resetTimeout: 1000
      },
      series: [{
          text: 'All Sites',
          values: [],
          backgroundColor: '#E84F28',
          lineColor: '#E84F28'
        },
        {
          text: 'www.zingchart.com',
          values: [],
          backgroundColor: '#45C392',
          lineColor: '#45C392'
        },
        {
          text: 'blog.zingchart.com',
          values: [],
          backgroundColor: '#28C2D1',
          lineColor: '#28C2D1'
        },
        {
          text: 'help.zingchart.com',
          values: [],
          backgroundColor: '#FBA645',
          lineColor: '#FBA645'
        }
      ]
    };

    zingchart.loadModules('stream', function() {
      zingchart.render({
        id: 'myChart1',
        data: myConfig1,
        height: 400,
        width: '100%'
      });
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script src="https://cdn.zingchart.com/2.7.2/zingchart.min.js"></script>
</head>

<body>
  <div id='myChart1'></div>
</body>

</html>

let valueArray1 = [
  [2596, 2626, 4480, 6394, 7488, 14510, 7012, 3389, 20281, 48597, 53309, 52385, 47097, 50813, 13510],
  [479, 199, 583, 1624, 2772, 7899, 3467, 2227, 12885, 27873, 34420, 32569, 27721, 31569, 7362],
  [408, 343, 410, 840, 1614, 3274, 2092, 914, 5709, 15317, 15633, 16720, 15504, 15821, 4565],
  [989, 1364, 2161, 2644, 1754, 2015, 818, 77, 1260, 3912, 1671, 1836, 2589, 1706, 1161]
];

let i = 0;

window.feed = function(callback) {
  let tick = {};

  if ((i + 1) > (valueArray1[0].length - 1)) {
    i = 0;
  };
  tick.plot0 = valueArray1[0][i];
  tick.plot1 = valueArray1[0][i];
  tick.plot2 = valueArray1[1][i];
  tick.plot3 = valueArray1[2][i];
  tick.plot4 = valueArray1[3][i];
  i++;

  callback(JSON.stringify(tick));
};


let myConfig1 = {
  type: 'stream',
  globals: {
    fontFamily: 'Helvetica',
    shadow: false,
  },
  backgroundColor: '#fff',
  options: {
    emptySeries: {
      backgroundColor: 'blue'
    }
  },
  title: {
    text: 'Bandwidth for All Sites',
    backgroundColor: 'transparent',
    fontColor: '#5f5f5f',
    fontSize: '20px',
    padding: '15px 15px',
    textAlign: 'left',
  },
  scaleY: {
    lineColor: '#5f5f5f',
    lineWidth: '1px',
    short: true,
    guide: {
      lineStyle: 'solid',
      lineColor: '#626262'
    },
    item: {
      fontColor: '#5f5f5f'
    },
    tick: {
      lineColor: '#5f5f5f',
      lineWidth: '1px'
    },
  },
  tooltip: {
    visible: false
  },
  crosshairX: {
    plotLabel: {
      backgroundColor: '#434343',
      borderRadius: '5px',
      fontColor: '#FFF',
      thousandsSeparator: ',',
    },
    scaleLabel: {
      backgroundColor: '#fff',
      fontColor: 'black'
    },
  },
  plot: {
    alphaArea: 1,
    lineWidth: 0,
  },
  refresh: {
    type: 'feed',
    transport: 'js',
    url: 'feed()',
    maxTicks: 10,
    interval: 400,
    resetTimeout: 1000
  },
  series: [{
      text: 'All Sites',
      values: [],
      backgroundColor: '#E84F28',
      lineColor: '#E84F28'
    },
    {
      text: 'www.zingchart.com',
      values: [],
      backgroundColor: '#45C392',
      lineColor: '#45C392'
    },
    {
      text: 'blog.zingchart.com',
      values: [],
      backgroundColor: '#28C2D1',
      lineColor: '#28C2D1'
    },
    {
      text: 'help.zingchart.com',
      values: [],
      backgroundColor: '#FBA645',
      lineColor: '#FBA645'
    }
  ]
};

zingchart.loadModules('stream', function() {
  zingchart.render({
    id: 'myChart1',
    data: myConfig1,
    height: 400,
    width: '100%'
  });
});