• 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>
        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
      });
    
    });