• 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"];
        var cdata = {
          "type": "vbar",
          "backgroundColor": "#909090 #c9c9c9",
          "title": {
            "text": "Olympic Medals by Country",
            "fontSize": 19,
            "padding": 15,
            "color": "#000000"
          },
          "plotarea": {
            "margin": "80 40 110 40"
          },
          "scaleX": {
            "values": ["China", "USA", "Russia", "Great Britain", "Germany", "Australia", "South Korea", "Japan", "Italy"],
            "maxItems": 9999,
            "itemsOverlap": true,
            "lineWidth": 0,
            "tick": {
              "visible": false
            },
            "item": {
              "color": "#333333",
              "offsetY": 65,
              "width": "80%",
              "fontSize": 11,
              "fontWeight": 900,
              "backgroundColor": "rgba(0,0,0,0)",
              "textAlpha": 1,
              "topState": {
                "x": "+0",
                "y": "+0",
                "height": 20,
                "alpha": 1,
                "backgroundColor": "none",
                "offsetY": 35,
                "callout": true,
                "calloutWidth": 0,
                "calloutHeight": 10,
                "borderLeft": "1px solid #666666",
                "borderRight": "1px solid #666666",
                "borderBottom": "1px solid #666666"
              },
              "jsRule": "rule_scaleX_item()"
            }
          },
          "scaleY": {
            "maxItems": 9999,
            "itemsOverlap": true,
            "lineWidth": 0,
            "backgroundColor": "none",
            "minorTicks": 4,
            "minorTick": {
              "visible": true,
              "lineWidth": 1,
              "lineColor": "#333333"
            },
            "tick": {
              "lineColor": "#333333"
            },
            "guide": {
              "lineWidth": 0,
              "items": [{
                  "backgroundColor": "#acb0b3"
                },
                {
                  "backgroundColor": "#b1b5b8"
                }
              ]
            },
            "item": {
              "color": "#333333",
              "fontSize": 9,
              "fontWeight": 300
            }
          },
          "plot": {
            "barsOverlap": "100%",
            "barsSpaceLeft": 0.1,
            "barsSpaceRight": 0.1,
            "borderWidth": 1,
            "borderColor": "#ffffff",
            "borderAlpha": 0.8
          },
          "tooltip": {
            "shadow": true,
            "shadowColor": "#424242",
            "backgroundColor": "#212121 #424242",
            "callout": true,
            "calloutPosition": "bottom",
            "offsetY": -20,
            "placement": "node:top",
            "padding": 10,
            "fontSize": 15,
            "color": "#ffffff",
            "borderWidth": 1,
            "borderColor": "#000000",
            "text": "%scale-key-text won %node-value %plot-text medals"
          },
          "series": [{
              "values": [100, 110, 72, 47, 41, 46, 31, 25, 28],
              "alpha": 0.25,
              "max-trackers": 0,
              "jsRule": "rule_series_0()",
              "valueBox": {
                "fontSize": 11,
                "fontWeight": 600,
                "offsetY": -10,
                "jsRule": "rule_series_0_valueBox()",
              }
            },
            {
              "values": [51, 36, 23, 19, 16, 14, 13, 9, 8],
              "text": "Gold",
              "column": "1/3",
              "jsRule": "rule_series_123()",
              "zStart": 15,
              "zEnd": 35,
              "valueBox": [{
                  "fontSize": 10,
                  "fontWeight": 600,
                  "offsetY": -10,
                  "jsRule": "rule_series_123_valueBox_0()"
                },
                {
                  "fontSize": 11,
                  "fontWeight": 400,
                  "text": "%plot-text",
                  "angle": 270,
                  "placement": "bottom",
                  "width": 50,
                  "textAlign": "right",
                  "offsetY": 25
                }
              ]
            },
            {
              "values": [28, 36, 28, 15, 15, 17, 8, 6, 10],
              "text": "Silver",
              "column": "2/3",
              "jsRule": "rule_series_123()",
              "zStart": 15,
              "zEnd": 35,
              "valueBox": [{
                  "fontSize": 10,
                  "fontWeight": 600,
                  "offsetY": -10,
                  "jsRule": "rule_series_123_valueBox_0()"
                },
                {
                  "fontSize": 11,
                  "fontWeight": 400,
                  "text": "%plot-text",
                  "angle": 270,
                  "placement": "bottom",
                  "width": 50,
                  "textAlign": "right",
                  "offsetY": 25
                }
              ]
            },
            {
              "values": [21, 38, 21, 13, 10, 15, 10, 10, 10],
              "text": "Bronze",
              "column": "3/3",
              "jsRule": "rule_series_123()",
              "zStart": 15,
              "zEnd": 35,
              "valueBox": [{
                  "fontSize": 10,
                  "fontWeight": 600,
                  "offsetY": -10,
                  "jsRule": "rule_series_123_valueBox_0()"
                },
                {
                  "fontSize": 11,
                  "fontWeight": 400,
                  "text": "%plot-text",
                  "angle": 270,
                  "placement": "bottom",
                  "width": 50,
                  "textAlign": "right",
                  "offsetY": 25
                }
              ]
            }
          ]
        };
    
        var colorSet0 = ['#D03435', '#913891', '#5238BD'];
        var colorSet123 = [
          ['#D33535 #E53B3C', '#E65D35 #EB753E', '#FE8035 #F88746'],
          ['#843584 #A540A6', '#A46590 #B579AA', '#B3818D #B584A3'],
          ['#6038B2 #7643BD', '#6D68B5 #7B7FBF', '#7681B2 #7C86BD']
        ];
    
        window.rule_series_0 = function(p) {
          return {
            backgroundColor: colorSet0[Math.floor(p.nodeindex / 3)]
          };
        };
    
        window.rule_series_0_valueBox = function(p) {
          return {
            color: colorSet0[Math.floor(p.nodeindex / 3)]
          };
        };
    
        window.rule_scaleX_item = function(p) {
          return {
            color: colorSet0[Math.floor(p.index / 3)]
          };
        };
    
        window.rule_series_123 = function(p) {
          return {
            backgroundColor: colorSet123[Math.floor(p.nodeindex / 3)][Math.floor(p.plotindex / 3)]
          };
        };
    
        window.rule_series_123_valueBox_0 = function(p) {
          return {
            color: colorSet0[Math.floor(p.nodeindex / 3)]
          };
        }
    
        zingchart.render({
          id: 'zc',
          width: 900,
          height: 500,
          output: 'svg',
          data: cdata
        });
      </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;
    }
    var cdata = {
      "type": "vbar",
      "backgroundColor": "#909090 #c9c9c9",
      "title": {
        "text": "Olympic Medals by Country",
        "fontSize": 19,
        "padding": 15,
        "color": "#000000"
      },
      "plotarea": {
        "margin": "80 40 110 40"
      },
      "scaleX": {
        "values": ["China", "USA", "Russia", "Great Britain", "Germany", "Australia", "South Korea", "Japan", "Italy"],
        "maxItems": 9999,
        "itemsOverlap": true,
        "lineWidth": 0,
        "tick": {
          "visible": false
        },
        "item": {
          "color": "#333333",
          "offsetY": 65,
          "width": "80%",
          "fontSize": 11,
          "fontWeight": 900,
          "backgroundColor": "rgba(0,0,0,0)",
          "textAlpha": 1,
          "topState": {
            "x": "+0",
            "y": "+0",
            "height": 20,
            "alpha": 1,
            "backgroundColor": "none",
            "offsetY": 35,
            "callout": true,
            "calloutWidth": 0,
            "calloutHeight": 10,
            "borderLeft": "1px solid #666666",
            "borderRight": "1px solid #666666",
            "borderBottom": "1px solid #666666"
          },
          "jsRule": "rule_scaleX_item()"
        }
      },
      "scaleY": {
        "maxItems": 9999,
        "itemsOverlap": true,
        "lineWidth": 0,
        "backgroundColor": "none",
        "minorTicks": 4,
        "minorTick": {
          "visible": true,
          "lineWidth": 1,
          "lineColor": "#333333"
        },
        "tick": {
          "lineColor": "#333333"
        },
        "guide": {
          "lineWidth": 0,
          "items": [{
              "backgroundColor": "#acb0b3"
            },
            {
              "backgroundColor": "#b1b5b8"
            }
          ]
        },
        "item": {
          "color": "#333333",
          "fontSize": 9,
          "fontWeight": 300
        }
      },
      "plot": {
        "barsOverlap": "100%",
        "barsSpaceLeft": 0.1,
        "barsSpaceRight": 0.1,
        "borderWidth": 1,
        "borderColor": "#ffffff",
        "borderAlpha": 0.8
      },
      "tooltip": {
        "shadow": true,
        "shadowColor": "#424242",
        "backgroundColor": "#212121 #424242",
        "callout": true,
        "calloutPosition": "bottom",
        "offsetY": -20,
        "placement": "node:top",
        "padding": 10,
        "fontSize": 15,
        "color": "#ffffff",
        "borderWidth": 1,
        "borderColor": "#000000",
        "text": "%scale-key-text won %node-value %plot-text medals"
      },
      "series": [{
          "values": [100, 110, 72, 47, 41, 46, 31, 25, 28],
          "alpha": 0.25,
          "max-trackers": 0,
          "jsRule": "rule_series_0()",
          "valueBox": {
            "fontSize": 11,
            "fontWeight": 600,
            "offsetY": -10,
            "jsRule": "rule_series_0_valueBox()",
          }
        },
        {
          "values": [51, 36, 23, 19, 16, 14, 13, 9, 8],
          "text": "Gold",
          "column": "1/3",
          "jsRule": "rule_series_123()",
          "zStart": 15,
          "zEnd": 35,
          "valueBox": [{
              "fontSize": 10,
              "fontWeight": 600,
              "offsetY": -10,
              "jsRule": "rule_series_123_valueBox_0()"
            },
            {
              "fontSize": 11,
              "fontWeight": 400,
              "text": "%plot-text",
              "angle": 270,
              "placement": "bottom",
              "width": 50,
              "textAlign": "right",
              "offsetY": 25
            }
          ]
        },
        {
          "values": [28, 36, 28, 15, 15, 17, 8, 6, 10],
          "text": "Silver",
          "column": "2/3",
          "jsRule": "rule_series_123()",
          "zStart": 15,
          "zEnd": 35,
          "valueBox": [{
              "fontSize": 10,
              "fontWeight": 600,
              "offsetY": -10,
              "jsRule": "rule_series_123_valueBox_0()"
            },
            {
              "fontSize": 11,
              "fontWeight": 400,
              "text": "%plot-text",
              "angle": 270,
              "placement": "bottom",
              "width": 50,
              "textAlign": "right",
              "offsetY": 25
            }
          ]
        },
        {
          "values": [21, 38, 21, 13, 10, 15, 10, 10, 10],
          "text": "Bronze",
          "column": "3/3",
          "jsRule": "rule_series_123()",
          "zStart": 15,
          "zEnd": 35,
          "valueBox": [{
              "fontSize": 10,
              "fontWeight": 600,
              "offsetY": -10,
              "jsRule": "rule_series_123_valueBox_0()"
            },
            {
              "fontSize": 11,
              "fontWeight": 400,
              "text": "%plot-text",
              "angle": 270,
              "placement": "bottom",
              "width": 50,
              "textAlign": "right",
              "offsetY": 25
            }
          ]
        }
      ]
    };
    
    var colorSet0 = ['#D03435', '#913891', '#5238BD'];
    var colorSet123 = [
      ['#D33535 #E53B3C', '#E65D35 #EB753E', '#FE8035 #F88746'],
      ['#843584 #A540A6', '#A46590 #B579AA', '#B3818D #B584A3'],
      ['#6038B2 #7643BD', '#6D68B5 #7B7FBF', '#7681B2 #7C86BD']
    ];
    
    window.rule_series_0 = function(p) {
      return {
        backgroundColor: colorSet0[Math.floor(p.nodeindex / 3)]
      };
    };
    
    window.rule_series_0_valueBox = function(p) {
      return {
        color: colorSet0[Math.floor(p.nodeindex / 3)]
      };
    };
    
    window.rule_scaleX_item = function(p) {
      return {
        color: colorSet0[Math.floor(p.index / 3)]
      };
    };
    
    window.rule_series_123 = function(p) {
      return {
        backgroundColor: colorSet123[Math.floor(p.nodeindex / 3)][Math.floor(p.plotindex / 3)]
      };
    };
    
    window.rule_series_123_valueBox_0 = function(p) {
      return {
        color: colorSet0[Math.floor(p.nodeindex / 3)]
      };
    }
    
    zingchart.render({
      id: 'zc',
      width: 900,
      height: 500,
      output: 'svg',
      data: cdata
    });