release notes stream feed

<!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></style>
</head>

<body>
  <div id='myChart1'></div>
  <div id='myChart2'></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    var 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]
    ];

    var i = 0;

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

      if ((i + 1) > (valueArray1[0].length - 1))
        i = 0;
      tick.plot0 = null; // insert a null value to create space
      tick.plot1 = valueArray1[0][i];
      tick.plot2 = valueArray1[1][i];
      tick.plot3 = valueArray1[2][i];
      tick.plot4 = valueArray1[3][i];
      i++;
      //tick.plot1 = Math.floor(Math.random() * 2) + 2;
      callback(JSON.stringify(tick));
    };


    var myConfig1 = {
      "graphset": [{
        "backgroundColor": "#fff",
        "globals": {
          "shadow": false,
          "fontFamily": "Helvetica"
        },
        "type": "stream",
        "title": {
          "text": "Bandwidth for All Sites",
          "fontColor": "#5f5f5f",
          "backgroundColor": "transparent",
          "textAlign": "left",
          "padding": "15px 15px",
          "fontSize": "20px"
        },
        "scaleY": {
          "lineColor": "#5f5f5f",
          "lineWidth": "1px",
          "tick": {
            "lineColor": "#5f5f5f",
            "lineWidth": "1px"
          },
          "guide": {
            "lineStyle": "solid",
            "lineColor": "#626262"
          },
          "item": {
            "fontColor": "#5f5f5f"
          }
        },
        "tooltip": {
          "visible": false
        },
        "crosshairX": {
          "scaleLabel": {
            "backgroundColor": "#fff",
            "fontColor": "black"
          },
          "plotLabel": {
            "backgroundColor": "#434343",
            "fontColor": "#FFF",
            "_text": "Number of hits : %v"
          }
        },
        "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"
          }
        ]
      }]
    };

    var myConfig2 = JSON.parse(JSON.stringify(myConfig1));
    myConfig2.graphset[0].type = 'vstream';
    myConfig2.graphset[0].plotarea = {};
    myConfig2.graphset[0].plotarea.marginLeft = 'dynamic';

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

      zingchart.render({
        id: 'myChart2',
        data: myConfig2,
        height: 800,
        width: 400
      });
    });
  </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>
  <div id='myChart1'></div>
  <div id='myChart2'></div>
</body>

</html>

var 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]
];

var i = 0;

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

  if ((i + 1) > (valueArray1[0].length - 1))
    i = 0;
  tick.plot0 = null; // insert a null value to create space
  tick.plot1 = valueArray1[0][i];
  tick.plot2 = valueArray1[1][i];
  tick.plot3 = valueArray1[2][i];
  tick.plot4 = valueArray1[3][i];
  i++;
  //tick.plot1 = Math.floor(Math.random() * 2) + 2;
  callback(JSON.stringify(tick));
};


var myConfig1 = {
  "graphset": [{
    "backgroundColor": "#fff",
    "globals": {
      "shadow": false,
      "fontFamily": "Helvetica"
    },
    "type": "stream",
    "title": {
      "text": "Bandwidth for All Sites",
      "fontColor": "#5f5f5f",
      "backgroundColor": "transparent",
      "textAlign": "left",
      "padding": "15px 15px",
      "fontSize": "20px"
    },
    "scaleY": {
      "lineColor": "#5f5f5f",
      "lineWidth": "1px",
      "tick": {
        "lineColor": "#5f5f5f",
        "lineWidth": "1px"
      },
      "guide": {
        "lineStyle": "solid",
        "lineColor": "#626262"
      },
      "item": {
        "fontColor": "#5f5f5f"
      }
    },
    "tooltip": {
      "visible": false
    },
    "crosshairX": {
      "scaleLabel": {
        "backgroundColor": "#fff",
        "fontColor": "black"
      },
      "plotLabel": {
        "backgroundColor": "#434343",
        "fontColor": "#FFF",
        "_text": "Number of hits : %v"
      }
    },
    "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"
      }
    ]
  }]
};

var myConfig2 = JSON.parse(JSON.stringify(myConfig1));
myConfig2.graphset[0].type = 'vstream';
myConfig2.graphset[0].plotarea = {};
myConfig2.graphset[0].plotarea.marginLeft = 'dynamic';

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

  zingchart.render({
    id: 'myChart2',
    data: myConfig2,
    height: 800,
    width: 400
  });
});