• 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="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var myConfig = {
          "type": "pop-pyramid",
          "background-color": "#424242",
          "title": {
            "text": "Women in the Chambers of Congress",
            "font-size": "18px",
            "font-color": "#DDD",
          },
          "subtitle": {
            "text": "Percentage of each chamber who are women, 1965-2015",
            "font-size": "14px",
            "font-color": "#999",
            "padding-top": 0,
          },
          "tooltip": {
            "visible": false,
          },
          "legend": {
            "item": {
              "font-color": "#FFF",
              "cursor": "pointer"
            },
            "background-color": "#999 #777",
            "border-width": "1px",
            "border-radius": "3px",
            "border-color": "#AAA",
            "offset-x": 50,
            "offset-y": 60,
            "align": "left",
            "z-index": 9999
          },
          "scale-x": {
            "values": "1965:2015:2",
            "tick": {
              "line-color": "#CCC",
            },
            "minor-ticks": 2,
            "minor-tick": {
              "line-color": "#999",
              "placement": "outer",
            }
          },
          "scale-y": {
            "values": "0:25:5",
            "guide": {
              "line-color": "#777",
            },
          },
          "crosshair-x": {
            "line-width": "1px",
            "line-color": "#bdbdbd",
            "line-style": "dashed",
            "line-segment-size": 4,
            "line-gap-size": 10,
            "shared": true,
            "plot-label": {
              "multiple": true,
              "font-color": "#333",
              "text": "%t: %v%",
              "border-color": "#666",
              "padding": 10,
              "font-size": 14,
              "border-radius": 5
            },
            "scaleLabel": {
              "background-color": "#EEE",
              "font-color": "#333",
              "border-width": "1px",
              "border-color": "#000",
            },
          },
          "plot": {
            "alpha-area": 0.5,
            "line-width": 1,
            "marker": {
              "size": 3,
              "border-color": "#FFF",
              "border-width": 1,
            },
            "hover-marker": {
              "size": 5,
            },
          },
          "series": [{
              "data-side": 1,
              "text": "House",
              "values": [2.3, 2.5, 2.3, 2.8, 3.2, 4.1, 4.1, 3.7, 4.1, 4.8, 5.1, 5.3, 5.7, 6.4, 10.8, 10.8, 11.7, 12.9, 13.6, 13.6, 14.9, 16.3, 17, 16.6, 17.9, 19.3],
              "background-color": "#69f0ae",
              "marker": {
                "background-color": "#64ffda",
                "border-color": "#00bfa5",
              },
              "line-color": "#00bfa5",
            },
            {
              "data-side": 2,
              "text": "Senate",
              "values": [2, 1, 1, 1, 0, 0, 0, 1, 2, 2, 2, 2, 2, 2, 6, 9, 9, 9, 12, 14, 14, 16, 17, 17, 20, 20],
              "background-color": "#7c4dff",
              "marker": {
                "background-color": "#d500f9",
                "border-color": "#aa00ff",
              },
              "line-color": "#aa00ff",
            },
          ],
          "options": {
            "side-1": {
              "crosshair-x": {
                "scale-label": {
                  "visible": false,
                },
              },
              "scale-x": {
                "visible": false,
              },
              "scale-y": {
                "guide": {
                  "items": [{
                      "background-color": "#5F5F5F",
                    },
                    {
                      "background-color": "#666",
                    },
                  ],
                },
              },
            },
            "side-2": {
              "subtitle": {
                "visible": false,
              },
              "scale-y": {
                "guide": {
                  "items": [{
                      "background-color": "#666",
                    },
                    {
                      "background-color": "#5F5F5F",
                    },
                  ],
                },
              },
            },
            "aspect": "area",
          },
        };
    
        zingchart.render({
          id: 'myChart',
          data: myConfig,
          height: '450',
          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"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></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 myConfig = {
      "type": "pop-pyramid",
      "background-color": "#424242",
      "title": {
        "text": "Women in the Chambers of Congress",
        "font-size": "18px",
        "font-color": "#DDD",
      },
      "subtitle": {
        "text": "Percentage of each chamber who are women, 1965-2015",
        "font-size": "14px",
        "font-color": "#999",
        "padding-top": 0,
      },
      "tooltip": {
        "visible": false,
      },
      "legend": {
        "item": {
          "font-color": "#FFF",
          "cursor": "pointer"
        },
        "background-color": "#999 #777",
        "border-width": "1px",
        "border-radius": "3px",
        "border-color": "#AAA",
        "offset-x": 50,
        "offset-y": 60,
        "align": "left",
        "z-index": 9999
      },
      "scale-x": {
        "values": "1965:2015:2",
        "tick": {
          "line-color": "#CCC",
        },
        "minor-ticks": 2,
        "minor-tick": {
          "line-color": "#999",
          "placement": "outer",
        }
      },
      "scale-y": {
        "values": "0:25:5",
        "guide": {
          "line-color": "#777",
        },
      },
      "crosshair-x": {
        "line-width": "1px",
        "line-color": "#bdbdbd",
        "line-style": "dashed",
        "line-segment-size": 4,
        "line-gap-size": 10,
        "shared": true,
        "plot-label": {
          "multiple": true,
          "font-color": "#333",
          "text": "%t: %v%",
          "border-color": "#666",
          "padding": 10,
          "font-size": 14,
          "border-radius": 5
        },
        "scaleLabel": {
          "background-color": "#EEE",
          "font-color": "#333",
          "border-width": "1px",
          "border-color": "#000",
        },
      },
      "plot": {
        "alpha-area": 0.5,
        "line-width": 1,
        "marker": {
          "size": 3,
          "border-color": "#FFF",
          "border-width": 1,
        },
        "hover-marker": {
          "size": 5,
        },
      },
      "series": [{
          "data-side": 1,
          "text": "House",
          "values": [2.3, 2.5, 2.3, 2.8, 3.2, 4.1, 4.1, 3.7, 4.1, 4.8, 5.1, 5.3, 5.7, 6.4, 10.8, 10.8, 11.7, 12.9, 13.6, 13.6, 14.9, 16.3, 17, 16.6, 17.9, 19.3],
          "background-color": "#69f0ae",
          "marker": {
            "background-color": "#64ffda",
            "border-color": "#00bfa5",
          },
          "line-color": "#00bfa5",
        },
        {
          "data-side": 2,
          "text": "Senate",
          "values": [2, 1, 1, 1, 0, 0, 0, 1, 2, 2, 2, 2, 2, 2, 6, 9, 9, 9, 12, 14, 14, 16, 17, 17, 20, 20],
          "background-color": "#7c4dff",
          "marker": {
            "background-color": "#d500f9",
            "border-color": "#aa00ff",
          },
          "line-color": "#aa00ff",
        },
      ],
      "options": {
        "side-1": {
          "crosshair-x": {
            "scale-label": {
              "visible": false,
            },
          },
          "scale-x": {
            "visible": false,
          },
          "scale-y": {
            "guide": {
              "items": [{
                  "background-color": "#5F5F5F",
                },
                {
                  "background-color": "#666",
                },
              ],
            },
          },
        },
        "side-2": {
          "subtitle": {
            "visible": false,
          },
          "scale-y": {
            "guide": {
              "items": [{
                  "background-color": "#666",
                },
                {
                  "background-color": "#5F5F5F",
                },
              ],
            },
          },
        },
        "aspect": "area",
      },
    };
    
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: '450',
      width: '100%'
    });