• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <!-- IMPORT Javascript variable -->
      <script nonce="undefined" src="https://cdn.zingchart.com/themes/vividTheme.js"></script>
      <style>
        html,
        body {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
        }
    
        .main--container {
          width: '100%';
          height: '100%';
          min-height: 1000px;
          display: flex;
          flex-direction: column;
        }
    
        .row {
          display: flex;
          flex-direction: row;
          flex-grow: 1;
          height: 100%;
        }
    
        .chart--container {
          height: 100%;
          width: 100%;
          min-height: 500px;
        }
    
        .zc-ref {
          display: none;
        }
      </style>
    </head>
    
    <body>
      <select>
          <option value="light">light</option>
          <option value="dark">dark</option>
          <option value="classic">classic</option>
          <option value="spark">spark</option>
          <option value="vivid" selected>vivid</option>
        </select>
      <div class="main--container">
        <div class="row">
          <div id="barChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
          <div id="rangeChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
          <div id="areaChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
          <div id="treeMap" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
        </div>
        <div class="row">
          <div id="pieChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
          <div id="mapChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
          <div id="gaugeChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
          <div id="radarChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
        </div>
      </div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window:load event for Javascript to run after HTML
        // because this Javascript is injected into the document head
        window.addEventListener('load', () => {
          // Javascript code to execute after DOM content
    
          function renderChart(id, data, theme) {
            zingchart.exec(id, 'destroy');
    
            let renderObject = {
              id,
              data,
              height: '100%',
              width: '100%',
              theme: theme ? theme : ''
            };
    
            // variable "vividTheme" is pulled in script tag. Check HTML
            if (theme === 'vivid') renderObject.defaults = vividTheme;
    
            // render chart with width and height to
            // fill the parent container CSS dimensions
            zingchart.render(renderObject);
          }
    
          function renderAllCharts(theme) {
            renderChart('barChart', barConfig, theme);
            renderChart('rangeChart', rangeConfig, theme);
            renderChart('areaChart', areaConfig, theme);
            renderChart('treeMap', treeConfig, theme);
            renderChart('pieChart', pieConfig, theme);
            renderChart('mapChart', mapConfig, theme);
            renderChart('gaugeChart', gaugeConfig, theme);
            renderChart('radarChart', radarConfig, theme);
          }
    
          let selectDropdown = document.querySelector('select');
          selectDropdown.addEventListener('change', function(e) {
            renderAllCharts(e.target.value);
          });
          // full ZingChart schema can be found here:
          // https://www.zingchart.com/docs/api/json-configuration/
          let barConfig = {
            type: 'bar',
            plot: {
              stacked: true
            },
            legend: {},
            scaleX: {
              values: ['Cats', 'Dogs', 'Fish', 'Birds'],
              guide: {
                visible: false
              },
              lineColor: 'none',
              lineWidth: '0px',
              tick: {
                visible: false
              }
            },
            scaleY: {
              guide: {
                lineStyle: 'solid'
              },
              lineColor: 'none',
              lineWidth: '0px',
              maxValue: '495px',
              minValue: '0px',
              step: 123.75,
              tick: {
                visible: false
              }
            },
            series: [{
                values: [100, 180, 120, 120],
              },
              {
                values: [125, 125, 125, 125],
              },
              {
                values: [125, 145, 135, 165],
              }
            ]
          };
          let rangeConfig = {
            type: 'range',
            title: {
              text: 'A Simple Area Chart',
            },
            legend: {},
            scaleX: {
              // set scale label
              label: {
                text: 'Days'
              },
              // convert text on scale indices
              labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            scaleY: {
              // scale label with unicode character
              label: {
                text: 'Temperature (°F)'
              }
            },
            series: [{
                text: 'Week 1',
                values: [
                  [15, 30],
                  [20, 40],
                  [16, 35],
                  [21, 30],
                  [25, 45],
                  [18, 27],
                  [23, 35],
                  [29, 39],
                  [27, 30],
                  [19, 34]
                ],
              },
              {
                text: 'Week 2',
                values: [
                  [40, 45],
                  [30, 43],
                  [35, 36],
                  [41, 50],
                  [50, 54],
                  [45, 52],
                  [39, 42],
                  [31, 40],
                  [41, 49],
                  [35, 40]
                ],
              }
            ]
          };
          let areaConfig = {
            "type": "area",
            "title": {
              "text": "Customer Survey Response Quality",
              "text-align": "center",
              "adjust-layout": true
            },
            "plotarea": {
              "margin": "dynamic"
            },
            "scale-x": {
              "values": [
                "Jan",
                "Feb",
                "Mar",
                "Apr",
                "May",
                "Jun",
                "Jul",
                "Aug",
                "Sept",
                "Oct",
                "Nov",
                "Dec"
              ],
              "label": {
                "text": "Surveys per Month",
              },
              "maxTicks": 4,
              "maxItems": 4
            },
            "scale-y": {
              "min-value": 0,
              "max-value": 100,
              "step": 20,
              "format": "%v%",
              "label": {
                "text": "Surveys per Quality Guidelines",
              },
            },
            "plot": {
              "stacked": true,
              "stack-type": "100%",
            },
            "legend": {},
            "series": [{
                "values": [
                  116,
                  125,
                  109,
                  86,
                  76,
                  95,
                  85,
                  77,
                  101,
                  90,
                  87,
                  62
                ],
                "text": "Poor",
              },
              {
                "values": [
                  195,
                  206,
                  215,
                  140,
                  185,
                  176,
                  184,
                  190,
                  110,
                  174,
                  155,
                  165
                ],
                "text": "Moderate",
              },
              {
                "values": [
                  223,
                  284,
                  268,
                  274,
                  230,
                  199,
                  185,
                  208,
                  248,
                  295,
                  210,
                  225
                ],
                "text": "Good",
              },
              {
                "values": [
                  185,
                  175,
                  168,
                  154,
                  198,
                  175,
                  124,
                  145,
                  168,
                  174,
                  154,
                  125
                ],
                "text": "Excellent",
              }
            ]
          };
          let treeConfig = {
            "type": "treemap",
            "plotarea": {
              "margin": "0 0 30 0"
            },
            "tooltip": {
    
            },
            "options": {
    
            },
            "series": [{
                "text": "North America",
                "children": [{
                    "text": "United States",
                    "children": [{
                        "text": "Texas",
                        "value": 21
                      },
                      {
                        "text": "California",
                        "value": 53
                      },
                      {
                        "text": "Ohio",
                        "value": 12
                      },
                      {
                        "text": "New York",
                        "value": 46
                      },
                      {
                        "text": "Michigan",
                        "value": 39
                      },
                      {
                        "text": "Alabama",
                        "value": 25
                      }
                    ]
                  },
                  {
                    "text": "Canada",
                    "value": 113
                  },
                  {
                    "text": "Mexico",
                    "value": 78
                  }
                ]
              },
              {
                "text": "Europe",
                "children": [{
                    "text": "France",
                    "value": 42
                  },
                  {
                    "text": "Spain",
                    "value": 28
                  },
                  {
                    "text": "Switzerland",
                    "value": 13
                  },
                  {
                    "text": "Germany",
                    "value": 56
                  },
                  {
                    "text": "Cyprus",
                    "value": 7
                  }
                ]
              },
              {
                "text": "Africa",
                "children": [{
                    "text": "Egypt",
                    "value": 22
                  },
                  {
                    "text": "Congo",
                    "value": 38
                  },
                  {
                    "text": "Lesotho",
                    "value": 9
                  }
                ]
              },
              {
                "text": "Asia",
                "children": [{
                    "text": "India",
                    "value": 92
                  },
                  {
                    "text": "China",
                    "value": 68
                  },
                  {
                    "text": "Mongolia",
                    "value": 25
                  }
                ]
              },
              {
                "text": "South America",
                "children": [{
                    "text": "Brazil",
                    "value": 42
                  },
                  {
                    "text": "Argentina",
                    "value": 28
                  },
                  {
                    "text": "Peru",
                    "value": 15
                  },
                  {
                    "text": "Uruguay",
                    "value": 33
                  }
                ]
              },
              {
                "text": "Australia (continent)",
                "children": [{
                    "text": "Australia (country)",
                    "value": 121
                  },
                  {
                    "text": "New Zealand",
                    "value": 24
                  }
                ]
              }
            ]
          };
          let pieConfig = {
            type: 'pie',
            title: {
              text: 'Custom Theme'
            },
            legend: {},
            shapes: {
              type: 'triangle'
            },
            series: [{
                values: [35]
              },
              {
                values: [135]
              },
              {
                values: [135]
              },
              {
                values: [135]
              },
              {
                values: [135]
              }
            ]
          };
          let mapConfig = {
            type: 'heatmap',
            title: {
              text: 'A Simple Heatmap Chart',
            },
            legend: {
              draggable: true,
              // don't allow removing of plots. Just display legend text
              toggleAction: 'none'
            },
            scaleX: {
              // set scale label
              label: {
                text: 'Days'
              },
              // convert text on scale indices
              labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            scaleY: {
              // scale label with unicode character
              label: {
                text: 'Temperature (°F)'
              }
            },
            series: [{
                text: 'Week 1',
                values: [59, 15, 5, 30, 60, 99, 28]
              },
              {
                text: 'Week 2',
                values: [34, 32, 87, 65, 9, 17, 40]
              },
              {
                text: 'Week 3',
                values: [90, 19, 50, 39, 12, 49, 14]
              }
            ]
          };
          let gaugeConfig = {
            type: 'gauge',
            title: {
              text: 'A Simple Gauge Chart',
            },
            legend: {},
            scaleR: {
    
            },
            series: [{
                text: 'Day 1',
                // plot values
                values: [23],
              },
              {
                text: 'Day 2',
                // plot values
                values: [20],
              },
              {
                text: 'Day 3',
                // plot values
                values: [25],
              }
            ]
          };
          let radarConfig = {
            type: 'radar',
            plot: {
              aspect: 'area',
            },
            plotarea: {
              margin: 'dynamic'
            },
            scaleK: {
              values: '0:330:30',
              aspect: 'circle', // To set the chart shape to circular.
              format: '%v°',
            },
            scaleV: {
              values: '0:100:25',
              labels: ['', '', '', '', ''],
            },
            series: [{
                values: [59, 30, 65, 34, 40, 33, 31, 90, 81, 70, 100, 28],
              },
              {
                values: [30, 100, 90, 99, 59, 34, 5, 3, 12, 15, 16, 75, 34],
              },
              {
                values: [34, 0, 0, 0, 0, 0, 0, 0, 0, 0, 30, 100],
              }
            ]
          };
    
          renderAllCharts('vivid');
        });
      </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>
      <!-- IMPORT Javascript variable -->
      <script src="https://cdn.zingchart.com/themes/vividTheme.js"></script>
    </head>
    
    <body>
      <select>
          <option value="light">light</option>
          <option value="dark">dark</option>
          <option value="classic">classic</option>
          <option value="spark">spark</option>
          <option value="vivid" selected>vivid</option>
        </select>
      <div class="main--container">
        <div class="row">
          <div id="barChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
          <div id="rangeChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
          <div id="areaChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
          <div id="treeMap" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
        </div>
        <div class="row">
          <div id="pieChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
          <div id="mapChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
          <div id="gaugeChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
          <div id="radarChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
        </div>
      </div>
    </body>
    
    </html>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    
    .main--container {
      width: '100%';
      height: '100%';
      min-height: 1000px;
      display: flex;
      flex-direction: column;
    }
    
    .row {
      display: flex;
      flex-direction: row;
      flex-grow: 1;
      height: 100%;
    }
    
    .chart--container {
      height: 100%;
      width: 100%;
      min-height: 500px;
    }
    
    .zc-ref {
      display: none;
    }
    // window:load event for Javascript to run after HTML
    // because this Javascript is injected into the document head
    window.addEventListener('load', () => {
      // Javascript code to execute after DOM content
    
      function renderChart(id, data, theme) {
        zingchart.exec(id, 'destroy');
    
        let renderObject = {
          id,
          data,
          height: '100%',
          width: '100%',
          theme: theme ? theme : ''
        };
    
        // variable "vividTheme" is pulled in script tag. Check HTML
        if (theme === 'vivid') renderObject.defaults = vividTheme;
    
        // render chart with width and height to
        // fill the parent container CSS dimensions
        zingchart.render(renderObject);
      }
    
      function renderAllCharts(theme) {
        renderChart('barChart', barConfig, theme);
        renderChart('rangeChart', rangeConfig, theme);
        renderChart('areaChart', areaConfig, theme);
        renderChart('treeMap', treeConfig, theme);
        renderChart('pieChart', pieConfig, theme);
        renderChart('mapChart', mapConfig, theme);
        renderChart('gaugeChart', gaugeConfig, theme);
        renderChart('radarChart', radarConfig, theme);
      }
    
      let selectDropdown = document.querySelector('select');
      selectDropdown.addEventListener('change', function(e) {
        renderAllCharts(e.target.value);
      });
      // full ZingChart schema can be found here:
      // https://www.zingchart.com/docs/api/json-configuration/
      let barConfig = {
        type: 'bar',
        plot: {
          stacked: true
        },
        legend: {},
        scaleX: {
          values: ['Cats', 'Dogs', 'Fish', 'Birds'],
          guide: {
            visible: false
          },
          lineColor: 'none',
          lineWidth: '0px',
          tick: {
            visible: false
          }
        },
        scaleY: {
          guide: {
            lineStyle: 'solid'
          },
          lineColor: 'none',
          lineWidth: '0px',
          maxValue: '495px',
          minValue: '0px',
          step: 123.75,
          tick: {
            visible: false
          }
        },
        series: [{
            values: [100, 180, 120, 120],
          },
          {
            values: [125, 125, 125, 125],
          },
          {
            values: [125, 145, 135, 165],
          }
        ]
      };
      let rangeConfig = {
        type: 'range',
        title: {
          text: 'A Simple Area Chart',
        },
        legend: {},
        scaleX: {
          // set scale label
          label: {
            text: 'Days'
          },
          // convert text on scale indices
          labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        scaleY: {
          // scale label with unicode character
          label: {
            text: 'Temperature (°F)'
          }
        },
        series: [{
            text: 'Week 1',
            values: [
              [15, 30],
              [20, 40],
              [16, 35],
              [21, 30],
              [25, 45],
              [18, 27],
              [23, 35],
              [29, 39],
              [27, 30],
              [19, 34]
            ],
          },
          {
            text: 'Week 2',
            values: [
              [40, 45],
              [30, 43],
              [35, 36],
              [41, 50],
              [50, 54],
              [45, 52],
              [39, 42],
              [31, 40],
              [41, 49],
              [35, 40]
            ],
          }
        ]
      };
      let areaConfig = {
        "type": "area",
        "title": {
          "text": "Customer Survey Response Quality",
          "text-align": "center",
          "adjust-layout": true
        },
        "plotarea": {
          "margin": "dynamic"
        },
        "scale-x": {
          "values": [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun",
            "Jul",
            "Aug",
            "Sept",
            "Oct",
            "Nov",
            "Dec"
          ],
          "label": {
            "text": "Surveys per Month",
          },
          "maxTicks": 4,
          "maxItems": 4
        },
        "scale-y": {
          "min-value": 0,
          "max-value": 100,
          "step": 20,
          "format": "%v%",
          "label": {
            "text": "Surveys per Quality Guidelines",
          },
        },
        "plot": {
          "stacked": true,
          "stack-type": "100%",
        },
        "legend": {},
        "series": [{
            "values": [
              116,
              125,
              109,
              86,
              76,
              95,
              85,
              77,
              101,
              90,
              87,
              62
            ],
            "text": "Poor",
          },
          {
            "values": [
              195,
              206,
              215,
              140,
              185,
              176,
              184,
              190,
              110,
              174,
              155,
              165
            ],
            "text": "Moderate",
          },
          {
            "values": [
              223,
              284,
              268,
              274,
              230,
              199,
              185,
              208,
              248,
              295,
              210,
              225
            ],
            "text": "Good",
          },
          {
            "values": [
              185,
              175,
              168,
              154,
              198,
              175,
              124,
              145,
              168,
              174,
              154,
              125
            ],
            "text": "Excellent",
          }
        ]
      };
      let treeConfig = {
        "type": "treemap",
        "plotarea": {
          "margin": "0 0 30 0"
        },
        "tooltip": {
    
        },
        "options": {
    
        },
        "series": [{
            "text": "North America",
            "children": [{
                "text": "United States",
                "children": [{
                    "text": "Texas",
                    "value": 21
                  },
                  {
                    "text": "California",
                    "value": 53
                  },
                  {
                    "text": "Ohio",
                    "value": 12
                  },
                  {
                    "text": "New York",
                    "value": 46
                  },
                  {
                    "text": "Michigan",
                    "value": 39
                  },
                  {
                    "text": "Alabama",
                    "value": 25
                  }
                ]
              },
              {
                "text": "Canada",
                "value": 113
              },
              {
                "text": "Mexico",
                "value": 78
              }
            ]
          },
          {
            "text": "Europe",
            "children": [{
                "text": "France",
                "value": 42
              },
              {
                "text": "Spain",
                "value": 28
              },
              {
                "text": "Switzerland",
                "value": 13
              },
              {
                "text": "Germany",
                "value": 56
              },
              {
                "text": "Cyprus",
                "value": 7
              }
            ]
          },
          {
            "text": "Africa",
            "children": [{
                "text": "Egypt",
                "value": 22
              },
              {
                "text": "Congo",
                "value": 38
              },
              {
                "text": "Lesotho",
                "value": 9
              }
            ]
          },
          {
            "text": "Asia",
            "children": [{
                "text": "India",
                "value": 92
              },
              {
                "text": "China",
                "value": 68
              },
              {
                "text": "Mongolia",
                "value": 25
              }
            ]
          },
          {
            "text": "South America",
            "children": [{
                "text": "Brazil",
                "value": 42
              },
              {
                "text": "Argentina",
                "value": 28
              },
              {
                "text": "Peru",
                "value": 15
              },
              {
                "text": "Uruguay",
                "value": 33
              }
            ]
          },
          {
            "text": "Australia (continent)",
            "children": [{
                "text": "Australia (country)",
                "value": 121
              },
              {
                "text": "New Zealand",
                "value": 24
              }
            ]
          }
        ]
      };
      let pieConfig = {
        type: 'pie',
        title: {
          text: 'Custom Theme'
        },
        legend: {},
        shapes: {
          type: 'triangle'
        },
        series: [{
            values: [35]
          },
          {
            values: [135]
          },
          {
            values: [135]
          },
          {
            values: [135]
          },
          {
            values: [135]
          }
        ]
      };
      let mapConfig = {
        type: 'heatmap',
        title: {
          text: 'A Simple Heatmap Chart',
        },
        legend: {
          draggable: true,
          // don't allow removing of plots. Just display legend text
          toggleAction: 'none'
        },
        scaleX: {
          // set scale label
          label: {
            text: 'Days'
          },
          // convert text on scale indices
          labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        scaleY: {
          // scale label with unicode character
          label: {
            text: 'Temperature (°F)'
          }
        },
        series: [{
            text: 'Week 1',
            values: [59, 15, 5, 30, 60, 99, 28]
          },
          {
            text: 'Week 2',
            values: [34, 32, 87, 65, 9, 17, 40]
          },
          {
            text: 'Week 3',
            values: [90, 19, 50, 39, 12, 49, 14]
          }
        ]
      };
      let gaugeConfig = {
        type: 'gauge',
        title: {
          text: 'A Simple Gauge Chart',
        },
        legend: {},
        scaleR: {
    
        },
        series: [{
            text: 'Day 1',
            // plot values
            values: [23],
          },
          {
            text: 'Day 2',
            // plot values
            values: [20],
          },
          {
            text: 'Day 3',
            // plot values
            values: [25],
          }
        ]
      };
      let radarConfig = {
        type: 'radar',
        plot: {
          aspect: 'area',
        },
        plotarea: {
          margin: 'dynamic'
        },
        scaleK: {
          values: '0:330:30',
          aspect: 'circle', // To set the chart shape to circular.
          format: '%v°',
        },
        scaleV: {
          values: '0:100:25',
          labels: ['', '', '', '', ''],
        },
        series: [{
            values: [59, 30, 65, 34, 40, 33, 31, 90, 81, 70, 100, 28],
          },
          {
            values: [30, 100, 90, 99, 59, 34, 5, 3, 12, 15, 16, 75, 34],
          },
          {
            values: [34, 0, 0, 0, 0, 0, 0, 0, 0, 0, 30, 100],
          }
        ]
      };
    
      renderAllCharts('vivid');
    });