• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script 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
          })
        }
      }
    }