bar > scatter > marker > labels > responsive > api > FAQ

<!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='myChart'></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    var myConfig = {
      type: "mixed",
      title: {
        text: 'Dynamic Labels'
      },
      plot: {
        barWidth: "2px"
      },
      scaleX: {
        itemsOverlap: true,
        maxItems: 28,
        labels: [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 15, 16, 17, 18, 19, 20, 21, 1, 2, 3, 4, 5, 6, 7, 8, 9],
        placement: 'opposite',
        lineColor: 'none',
        refLine: {
          visible: false
        },
        tick: {
          visible: false
        }
      },
      scaleY: {
        guide: {
          visible: false
        },
        values: '0:27',
        lineColor: 'none',
        item: {
          visible: false
        },
        tick: {
          visible: false
        },
        markers: [{
          type: "area",
          range: [0, 20],
          backgroundColor: "#c4c4c4",
          alpha: 0.5
        }]
      },
      series: [{
          type: 'bar',
          backgroundColor: 'grey',
          values: [25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25]
        },
        {
          type: 'scatter',
          marker: {
            backgroundColor: 'grey'
          },
          values: [25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25]
        }
      ],
      labels: [{
          hook: 'node:plot=0,index=10',
          width: 150,
          height: 40,
          offsetY: 85,
          borderRadius: 20,
          padding: 5,
          backgroundColor: '#e91e63',
          text: '#162',
          fontSize: 16,
          fontColor: 'white',
          textAlign: 'left',
          backgroundImage: 'http://demos.zingchart.com/view/ZC30JD22/icon_pet.png',
          backgroundRepeat: 'no-repeat',
          backgroundPosition: "110 5"
        },
        {
          hook: 'node:plot=0,index=17',
          width: 150,
          height: 40,
          offsetY: 85,
          borderRadius: 20,
          padding: 5,
          backgroundColor: '#e91e63',
          text: '#152',
          fontSize: 16,
          fontColor: 'white',
          textAlign: 'left',
          backgroundImage: 'http://demos.zingchart.com/view/ZC30JD22/icon_pet.png',
          backgroundRepeat: 'no-repeat',
          backgroundPosition: "110 5"
        }
      ]
    };

    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 300,
      width: "100%"
    });

    /**
     * Handle labels to be responsive.
     * This is not necessary, but will make the graph
     * much more dynamic and usable in smaller windows.
     */
    var labelsResetFlag = false;

    zingchart.load = function(p) {
      resizeGraphLabels(window.outerWidth);
    }

    window.onresize = function(p) {
      resizeGraphLabels(p.currentTarget.outerWidth);
    }

    window.load = function(p) {
      resizeGraphLabels(p.currentTarget.outerWidth);
    }

    function resizeGraphLabels(windowWidth) {
      var graphJSON = {};
      var labelsArray;
      if (windowWidth < 768) {
        if (!labelsResetFlag) {
          labelsResetFlag = true;

          // make a deep copy otherwise we will have changed original graph JSON and the API 'setdata' call willnot work below
          graphJSON = JSON.parse(JSON.stringify(myConfig));
          labelsArray = graphJSON.labels;
          for (var i = 0; i < labelsArray.length; i++) {
            labelsArray[i].width = 90;
            labelsArray[i].height = 30;
            labelsArray[i].fontSize = 15;
            labelsArray[i].offsetY = 95,
              labelsArray[i].backgroundPosition = "55 0";
          }

          zingchart.exec('myChart', 'setdata', {
            data: graphJSON
          });
        }
      } else {
        if (labelsResetFlag) {
          labelsResetFlag = false;
          zingchart.exec('myChart', 'setdata', {
            data: myConfig
          })
        }
      }
    }
  </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='myChart'></div>
</body>

</html>

var myConfig = {
  type: "mixed",
  title: {
    text: 'Dynamic Labels'
  },
  plot: {
    barWidth: "2px"
  },
  scaleX: {
    itemsOverlap: true,
    maxItems: 28,
    labels: [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 15, 16, 17, 18, 19, 20, 21, 1, 2, 3, 4, 5, 6, 7, 8, 9],
    placement: 'opposite',
    lineColor: 'none',
    refLine: {
      visible: false
    },
    tick: {
      visible: false
    }
  },
  scaleY: {
    guide: {
      visible: false
    },
    values: '0:27',
    lineColor: 'none',
    item: {
      visible: false
    },
    tick: {
      visible: false
    },
    markers: [{
      type: "area",
      range: [0, 20],
      backgroundColor: "#c4c4c4",
      alpha: 0.5
    }]
  },
  series: [{
      type: 'bar',
      backgroundColor: 'grey',
      values: [25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25]
    },
    {
      type: 'scatter',
      marker: {
        backgroundColor: 'grey'
      },
      values: [25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25]
    }
  ],
  labels: [{
      hook: 'node:plot=0,index=10',
      width: 150,
      height: 40,
      offsetY: 85,
      borderRadius: 20,
      padding: 5,
      backgroundColor: '#e91e63',
      text: '#162',
      fontSize: 16,
      fontColor: 'white',
      textAlign: 'left',
      backgroundImage: 'http://demos.zingchart.com/view/ZC30JD22/icon_pet.png',
      backgroundRepeat: 'no-repeat',
      backgroundPosition: "110 5"
    },
    {
      hook: 'node:plot=0,index=17',
      width: 150,
      height: 40,
      offsetY: 85,
      borderRadius: 20,
      padding: 5,
      backgroundColor: '#e91e63',
      text: '#152',
      fontSize: 16,
      fontColor: 'white',
      textAlign: 'left',
      backgroundImage: 'http://demos.zingchart.com/view/ZC30JD22/icon_pet.png',
      backgroundRepeat: 'no-repeat',
      backgroundPosition: "110 5"
    }
  ]
};

zingchart.render({
  id: 'myChart',
  data: myConfig,
  height: 300,
  width: "100%"
});

/**
 * Handle labels to be responsive.
 * This is not necessary, but will make the graph
 * much more dynamic and usable in smaller windows.
 */
var labelsResetFlag = false;

zingchart.load = function(p) {
  resizeGraphLabels(window.outerWidth);
}

window.onresize = function(p) {
  resizeGraphLabels(p.currentTarget.outerWidth);
}

window.load = function(p) {
  resizeGraphLabels(p.currentTarget.outerWidth);
}

function resizeGraphLabels(windowWidth) {
  var graphJSON = {};
  var labelsArray;
  if (windowWidth < 768) {
    if (!labelsResetFlag) {
      labelsResetFlag = true;

      // make a deep copy otherwise we will have changed original graph JSON and the API 'setdata' call willnot work below
      graphJSON = JSON.parse(JSON.stringify(myConfig));
      labelsArray = graphJSON.labels;
      for (var i = 0; i < labelsArray.length; i++) {
        labelsArray[i].width = 90;
        labelsArray[i].height = 30;
        labelsArray[i].fontSize = 15;
        labelsArray[i].offsetY = 95,
          labelsArray[i].backgroundPosition = "55 0";
      }

      zingchart.exec('myChart', 'setdata', {
        data: graphJSON
      });
    }
  } else {
    if (labelsResetFlag) {
      labelsResetFlag = false;
      zingchart.exec('myChart', 'setdata', {
        data: myConfig
      })
    }
  }
}