Clustered Chart (Demo3)

<!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 {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #myChart {
      height: 100%;
      width: 100%;
      min-height: 150px;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>

<body>
  <div id="zc"></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    window.plot_jsRule = function(p) {
      return {
        backgroundColor: barColors[p.plotindex][p.nodeindex]
      };
    }

    var barColors = [
      ['#F1D4D4', '#E3A9A9', '#D67F7F', '#C85454', '#BA2929', '#8C1F1F'],
      ['#DFD9E2', '#BFB4C5', '#9F8EA7', '#7F698A', '#5F436D', '#473252'],
      ['#D4DFE5', '#A9BFCA', '#7F9FB0', '#547F95', '#295F7B', '#1F475C'],
      ['#D4E9F3', '#A9D4E6', '#7DBEDA', '#52A9CD', '#2793C1', '#1D6E91']
    ];
    var legendColors = ['#D3D3D3', '#A7A7A7', '#7A7A7A', '#4E4E4E', '#393939', '#1A1A1A'];

    var chartJSON = {

      "graphset": [{
        "clustered": true,

        "background-color": "#FFF",
        "type": "bar",

        "plotarea": {
          "margin": "90 40 50 40"
        },

        "title": {
          "text": "SNAPCHAT IS TOPS WITH AMERICAN TEENS",
          "font-size": "22px",
          "font-color": "#000",
          "font-weight": "bold",
          "text-align": "center",
          "padding": 0
        },

        "subtitle": {
          "text": "Percentage of US teens who consider the following social networks their favorite",
          "font-size": "14px",
          "font-color": "#656263",
          "font-weight": "normal",
          "text-align": "left",
          "padding": "0 0 0 10"
        },

        "source": {
          "text": "<b>SOURCES:</b> Piper Jaffray; Fall '17 survey of 6,100 teens with an average age of 16 years",
          "font-size": "12px",
          "font-color": "#656263",
          "font-weight": "normal",
          "text-align": "left",
          "padding-left": 20,
          "margin-bottom": 2
        },

        "plot": {
          "bar-width": "90%",
          "jsRule": "plot_jsRule()",

          "value-box": {
            "placement": "top",
            "font-color": "#000",
            "font-size": "12px",
            "offset-y": 5
          }
        },

        "tooltip": {
          "color": "#000",
          "fontWeight": "bold",
          "fontSize": 19,
          "text": "%plot-text: %node-value%",
          "jsRule": "plot_jsRule()"
        },

        "legend": {
          "layout": "x6",
          "border-width": 0,
          "padding": 0,
          "offset-y": 40,
          "toggle-action": "disabled",

          "item": {
            "font-size": "14px",
            "font-weight": "bold",
            "font-color": "#222"
          },
          "marker": {
            "size": 8
          }
        },

        "scale-x": {
          "values": ["Snapchat", "Instagram", "Facebook", "Twitter"],
          "max-items": 99,
          "line-width": 2,
          "item": {
            "font-color": "#000",
            "text-align": "center",
            "font-size": "16px",
            "font-weight": "bold"
          },
          "tick": {
            "visible": false
          }
        },
        "scale-y": {
          "min-value": 0,
          "max-value": 50,
          "line-width": 0,
          "format": "%scale-value%",
          "item": {
            "font-color": "#7A7A7A"
          },
          "tick": {
            "visible": false
          }
        },

        "series": [{
            "values": [11, 17, 24, 35, 39, 47],
            "clustered": true,
            "text": "Spring 2015",
            "legend-marker": {
              "background-color": legendColors[0]
            }
          },
          {
            "values": [29, 29, 23, 24, 23, 24],
            "clustered": true,
            "text": "Fall 2015",
            "legend-marker": {
              "background-color": legendColors[1]
            }
          },
          {
            "values": [12, 13, 15, 13, 11, 9],
            "clustered": true,
            "text": "Spring 2016",
            "legend-marker": {
              "background-color": legendColors[2]
            }
          },
          {
            "values": [21, 18, 16, 13, 11, 7],
            "clustered": true,
            "text": "Fall 2016",
            "legend-marker": {
              "background-color": legendColors[3]
            }
          },
          {
            "values": [],
            "text": "Spring 2017",
            "legend-marker": {
              "background-color": legendColors[4]
            }
          },
          {
            "values": [],
            "text": "Fall 2017",
            "legend-marker": {
              "background-color": legendColors[5]
            }
          }
        ]
      }]

    };

    window.addEventListener('load', function() {

      zingchart.render({
        id: "zc",
        width: 800,
        height: 500,
        output: "svg",
        data: chartJSON
      });

    });
  </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="zc"></div>
</body>

</html>

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#myChart {
  height: 100%;
  width: 100%;
  min-height: 150px;
}

.zc-ref {
  display: none;
}

window.plot_jsRule = function(p) {
  return {
    backgroundColor: barColors[p.plotindex][p.nodeindex]
  };
}

var barColors = [
  ['#F1D4D4', '#E3A9A9', '#D67F7F', '#C85454', '#BA2929', '#8C1F1F'],
  ['#DFD9E2', '#BFB4C5', '#9F8EA7', '#7F698A', '#5F436D', '#473252'],
  ['#D4DFE5', '#A9BFCA', '#7F9FB0', '#547F95', '#295F7B', '#1F475C'],
  ['#D4E9F3', '#A9D4E6', '#7DBEDA', '#52A9CD', '#2793C1', '#1D6E91']
];
var legendColors = ['#D3D3D3', '#A7A7A7', '#7A7A7A', '#4E4E4E', '#393939', '#1A1A1A'];

var chartJSON = {

  "graphset": [{
    "clustered": true,

    "background-color": "#FFF",
    "type": "bar",

    "plotarea": {
      "margin": "90 40 50 40"
    },

    "title": {
      "text": "SNAPCHAT IS TOPS WITH AMERICAN TEENS",
      "font-size": "22px",
      "font-color": "#000",
      "font-weight": "bold",
      "text-align": "center",
      "padding": 0
    },

    "subtitle": {
      "text": "Percentage of US teens who consider the following social networks their favorite",
      "font-size": "14px",
      "font-color": "#656263",
      "font-weight": "normal",
      "text-align": "left",
      "padding": "0 0 0 10"
    },

    "source": {
      "text": "<b>SOURCES:</b> Piper Jaffray; Fall '17 survey of 6,100 teens with an average age of 16 years",
      "font-size": "12px",
      "font-color": "#656263",
      "font-weight": "normal",
      "text-align": "left",
      "padding-left": 20,
      "margin-bottom": 2
    },

    "plot": {
      "bar-width": "90%",
      "jsRule": "plot_jsRule()",

      "value-box": {
        "placement": "top",
        "font-color": "#000",
        "font-size": "12px",
        "offset-y": 5
      }
    },

    "tooltip": {
      "color": "#000",
      "fontWeight": "bold",
      "fontSize": 19,
      "text": "%plot-text: %node-value%",
      "jsRule": "plot_jsRule()"
    },

    "legend": {
      "layout": "x6",
      "border-width": 0,
      "padding": 0,
      "offset-y": 40,
      "toggle-action": "disabled",

      "item": {
        "font-size": "14px",
        "font-weight": "bold",
        "font-color": "#222"
      },
      "marker": {
        "size": 8
      }
    },

    "scale-x": {
      "values": ["Snapchat", "Instagram", "Facebook", "Twitter"],
      "max-items": 99,
      "line-width": 2,
      "item": {
        "font-color": "#000",
        "text-align": "center",
        "font-size": "16px",
        "font-weight": "bold"
      },
      "tick": {
        "visible": false
      }
    },
    "scale-y": {
      "min-value": 0,
      "max-value": 50,
      "line-width": 0,
      "format": "%scale-value%",
      "item": {
        "font-color": "#7A7A7A"
      },
      "tick": {
        "visible": false
      }
    },

    "series": [{
        "values": [11, 17, 24, 35, 39, 47],
        "clustered": true,
        "text": "Spring 2015",
        "legend-marker": {
          "background-color": legendColors[0]
        }
      },
      {
        "values": [29, 29, 23, 24, 23, 24],
        "clustered": true,
        "text": "Fall 2015",
        "legend-marker": {
          "background-color": legendColors[1]
        }
      },
      {
        "values": [12, 13, 15, 13, 11, 9],
        "clustered": true,
        "text": "Spring 2016",
        "legend-marker": {
          "background-color": legendColors[2]
        }
      },
      {
        "values": [21, 18, 16, 13, 11, 7],
        "clustered": true,
        "text": "Fall 2016",
        "legend-marker": {
          "background-color": legendColors[3]
        }
      },
      {
        "values": [],
        "text": "Spring 2017",
        "legend-marker": {
          "background-color": legendColors[4]
        }
      },
      {
        "values": [],
        "text": "Fall 2017",
        "legend-marker": {
          "background-color": legendColors[5]
        }
      }
    ]
  }]

};

window.addEventListener('load', function() {

  zingchart.render({
    id: "zc",
    width: 800,
    height: 500,
    output: "svg",
    data: chartJSON
  });

});