Custom valueBox values

<!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>
    html,
    body,
    #myChart {
      width: 100%;
    }
  </style>
</head>

<body>
  <div id='myChart'></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    ZC.customFn = {}; //Global wrapper

    var globalArray = [];
    var inputData = [114, 164, 154, 97, 87, 133, 180];

    function initGraphData() {
      //initialze globalArray with this function to create whatever custom values you want
      customFormatingFunction();

      //initiate graph JSON
      var myConfig = {
        type: "mixed",
        theme: "light",
        plot: {
          valueBox: { //this is for displaying percentage value all the time
            jsRule: "ZC.customFn.myfunc()", //function will be called once for each node before render!
            placement: "top",
            padding: 5,
            backgroundColor: "#c4c4c4",
            shadow: false,
            rules: [{
              rule: "%p == 1", // If plot is bar graph, hide the value box. Otherwise we will
              visible: false // have two of the same valueBoxes.
            }]
          },
        },
        title: {
          text: "Sales"
        },
        scaleX: {
          values: ["Jan", "Feb", "March", "April", "May", "June", "July"]
        },
        scaleY: {
          "values": "0:250:50",
        },
        series: [{ //first graph
            type: 'bar',
            values: inputData, //input data is the same for the line to map it to the top of the bar graph
            tooltip: {
              text: '%kv had %v sales'
            },
          },
          { //second graph
            type: 'line',
            lineColor: "#c0c0c0",
            marker: {
              backgroundColor: "#c0c0c0",
              size: 3,
              type: "square",
              borderColor: "#c0c0c0"
            },
            values: inputData, //input data is the same for the line to map it to the top of the bar graph
            tooltip: {
              visible: false
            },
          },
        ]
      };

      return myConfig;
    }

    // ZC is a object (wrapper)
    // This function determines the text value and color value
    // based on if we went up or down in sales
    ZC.customFn.myfunc = function(p) {
      var value = globalArray[p.nodeindex];
      var textValue = "%" + value;
      var color = "red";

      if (p.nodeindex === 0) //if januaray display no text
        textValue = "";

      if (value > 0)
        color = "green";

      return {
        text: textValue,
        fontColor: color
      }
    };

    //make this function calculate whatever you want!
    function customFormatingFunction() {
      for (var i = 0; i < inputData.length; i++) {
        var sumTotal = 0;
        if (i === 0) { //display no text on the first plot (January)
          globalArray.push('');
        } else {
          sumTotal = inputData[i] + inputData[i - 1];
          globalArray.push(Math.round((inputData[i] - inputData[i - 1]) / sumTotal * 100))
        }
      }
    }

    //this renders the chart, does not need to be in window.:load function
    zingchart.render({
      id: 'myChart',
      data: initGraphData(),
      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/zingchart.min.js"></script>
</head>

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

</html>

html,
body,
#myChart {
  width: 100%;
}

ZC.customFn = {}; //Global wrapper

var globalArray = [];
var inputData = [114, 164, 154, 97, 87, 133, 180];

function initGraphData() {
  //initialze globalArray with this function to create whatever custom values you want
  customFormatingFunction();

  //initiate graph JSON
  var myConfig = {
    type: "mixed",
    theme: "light",
    plot: {
      valueBox: { //this is for displaying percentage value all the time
        jsRule: "ZC.customFn.myfunc()", //function will be called once for each node before render!
        placement: "top",
        padding: 5,
        backgroundColor: "#c4c4c4",
        shadow: false,
        rules: [{
          rule: "%p == 1", // If plot is bar graph, hide the value box. Otherwise we will
          visible: false // have two of the same valueBoxes.
        }]
      },
    },
    title: {
      text: "Sales"
    },
    scaleX: {
      values: ["Jan", "Feb", "March", "April", "May", "June", "July"]
    },
    scaleY: {
      "values": "0:250:50",
    },
    series: [{ //first graph
        type: 'bar',
        values: inputData, //input data is the same for the line to map it to the top of the bar graph
        tooltip: {
          text: '%kv had %v sales'
        },
      },
      { //second graph
        type: 'line',
        lineColor: "#c0c0c0",
        marker: {
          backgroundColor: "#c0c0c0",
          size: 3,
          type: "square",
          borderColor: "#c0c0c0"
        },
        values: inputData, //input data is the same for the line to map it to the top of the bar graph
        tooltip: {
          visible: false
        },
      },
    ]
  };

  return myConfig;
}

// ZC is a object (wrapper)
// This function determines the text value and color value
// based on if we went up or down in sales
ZC.customFn.myfunc = function(p) {
  var value = globalArray[p.nodeindex];
  var textValue = "%" + value;
  var color = "red";

  if (p.nodeindex === 0) //if januaray display no text
    textValue = "";

  if (value > 0)
    color = "green";

  return {
    text: textValue,
    fontColor: color
  }
};

//make this function calculate whatever you want!
function customFormatingFunction() {
  for (var i = 0; i < inputData.length; i++) {
    var sumTotal = 0;
    if (i === 0) { //display no text on the first plot (January)
      globalArray.push('');
    } else {
      sumTotal = inputData[i] + inputData[i - 1];
      globalArray.push(Math.round((inputData[i] - inputData[i - 1]) / sumTotal * 100))
    }
  }
}

//this renders the chart, does not need to be in window.:load function
zingchart.render({
  id: 'myChart',
  data: initGraphData(),
  height: 400,
  width: '100%'
});