• 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></style>
    </head>
    
    <body>
      <div id='myChart'></div>
      <div id='myNextChart'></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var myConfig = {
          type: 'pie',
          title: {
            text: 'Drilldown Chart',
            fontFamily: 'Georgia'
          },
          plot: {
            detach: false,
            cursor: 'hand',
            valueBox: {
              text: '%t',
              fontFamily: 'Georgia',
              fontSize: 14,
              fontWeight: 'normal',
              offsetR: '30%'
            },
            tooltip: {
              visible: false
            }
          },
          series: [{
              values: [6600],
              text: 'Alpha',
              backgroundColor: '#cc0000'
            },
            {
              values: [3500],
              text: 'Beta',
              backgroundColor: '#ff6600'
            },
            {
              values: [3400],
              text: 'Gamma',
              backgroundColor: '#ffcc00'
            },
            {
              values: [3220],
              text: 'Delta',
              backgroundColor: '#88cc00'
            },
            {
              values: [3100],
              text: 'Epsilon',
              backgroundColor: '#66ccff'
            },
            {
              values: [3713],
              text: 'Zeta',
              backgroundColor: '#0066ff'
            }
          ]
        };
    
        var myDrilldownConfig = [];
    
        //the Next Drilldown Charts
        myDrilldownConfig[0] = {
          type: 'bar',
          title: {
            text: 'Alpha',
            fontFamily: 'Georgia'
          },
          subtitle: {
            text: 'Bar Chart',
            fontWeight: 'normal'
          },
          scaleX: {
            labels: ['A1', 'A2', 'A3', 'A4', 'A5', 'A6']
          },
          scaleY: {
            guide: {
              lineStyle: 'dotted'
            },
          },
          series: [{
            values: [30, 34, 31, 35, 59, 61],
            styles: ["#cc0000", "#ff0000", "#ff3333", "#ff6666", "#ff9999", "#ffcccc"]
          }],
          shapes: [{
            type: 'triangle',
            backgroundColor: '#cc0000',
            size: 10,
            angle: -90,
            x: 20,
            y: 20,
            cursor: 'hand',
            id: 'backwards'
          }]
        };
        myDrilldownConfig[1] = {
          type: 'line',
          title: {
            text: 'Beta',
            fontFamily: 'Georgia'
          },
          subtitle: {
            text: 'Line Chart',
            fontWeight: 'normal'
          },
          scaleX: {
    
          },
          scaleY: {
            guide: {
              lineStyle: 'dotted'
            },
          },
          series: [{
              values: [30, 34, 31, 35, 59, 61],
              lineColor: '#ff6600',
              marker: {
                backgroundColor: '#ff6600'
              }
            },
            {
              values: [35, 40, 66, 19, 29, 33],
              lineColor: '#ff944d',
              marker: {
                backgroundColor: '#ff944d'
              }
            },
            {
              values: [21, 25, 33, 59, 37, 25],
              lineColor: '#ffc299',
              marker: {
                backgroundColor: '#ffc299'
              }
            }
          ],
          shapes: [{
            type: 'triangle',
            backgroundColor: '#ff6600',
            size: 10,
            angle: -90,
            x: 20,
            y: 20,
            cursor: 'hand',
            id: 'backwards'
          }]
        };
        myDrilldownConfig[2] = {
          type: 'area',
          title: {
            text: 'Gamma',
            fontFamily: 'Georgia'
          },
          subtitle: {
            text: 'Area Chart',
            fontWeight: 'normal'
          },
          plot: {
            aspect: 'stepped',
            stacked: true
          },
          scaleX: {
    
          },
          scaleY: {
            values: '0:140:20',
            guide: {
              lineStyle: 'dotted'
            },
          },
          series: [{
              values: [30, 34, 31, 35, 59, 61],
              lineColor: '#ffcc00',
              marker: {
                backgroundColor: '#ffcc00'
              },
              backgroundColor: '#ffcc00'
            },
            {
              values: [35, 40, 66, 19, 29, 33],
              lineColor: '#ffdb4d',
              marker: {
                backgroundColor: '#ffdb4d'
              },
              backgroundColor: '#ffdb4d'
            },
            {
              values: [21, 25, 33, 59, 37, 25],
              lineColor: '#ffeb99',
              marker: {
                backgroundColor: '#ffeb99'
              },
              backgroundColor: '#ffeb99'
            }
          ],
          shapes: [{
            type: 'triangle',
            backgroundColor: '#ffcc00',
            size: 10,
            angle: -90,
            x: 20,
            y: 20,
            cursor: 'hand',
            id: 'backwards'
          }]
        };
        myDrilldownConfig[3] = {
          type: 'scatter',
          title: {
            text: 'Delta',
            fontFamily: 'Georgia'
          },
          subtitle: {
            text: 'Scatter Plot',
            fontWeight: 'normal'
          },
          scaleX: {
            guide: {
              lineStyle: 'dotted'
            }
          },
          scaleY: {
            guide: {
              lineStyle: 'dotted'
            },
          },
          series: [{
              values: [30, 34, 21, 35, 59, 61],
              marker: {
                type: 'square',
                size: 5,
                backgroundColor: '#88cc00',
                borderWidth: 1,
                borderColor: 'gray'
              }
            },
            {
              values: [35, 40, 66, 19, 29, 33],
              marker: {
                type: 'diamond',
                size: 5,
                backgroundColor: '#b3ff1a',
                borderWidth: 1,
                borderColor: 'gray'
              }
            },
            {
              values: [21, 25, 33, 59, 37, 25],
              marker: {
                type: 'triangle',
                size: 5,
                backgroundColor: '#ccff66',
                borderWidth: 1,
                borderColor: 'gray'
              }
            }
          ],
          shapes: [{
            type: 'triangle',
            backgroundColor: '#88cc00',
            size: 10,
            angle: -90,
            x: 20,
            y: 20,
            cursor: 'hand',
            id: 'backwards'
          }]
        };
        myDrilldownConfig[4] = {
          type: 'range',
          title: {
            text: 'Epsilon',
            fontFamily: 'Georgia'
          },
          subtitle: {
            text: 'Range Chart',
            fontWeight: 'normal'
          },
          plot: {
            aspect: 'spline'
          },
          scaleX: {
    
          },
          scaleY: {
            guide: {
              lineStyle: 'dotted'
            },
          },
          series: [{
            values: [
              [30, 35],
              [34, 45],
              [31, 50],
              [35, 40],
              [40, 68],
              [33, 60]
            ],
            lineColor: '#66ccff',
            marker: {
              backgroundColor: '#66ccff'
            },
            backgroundColor: '#66ccff'
          }],
          shapes: [{
            type: 'triangle',
            backgroundColor: '#66ccff',
            size: 10,
            angle: -90,
            x: 20,
            y: 20,
            cursor: 'hand',
            id: 'backwards'
          }]
        };
        myDrilldownConfig[5] = {
          type: 'heatmap',
          title: {
            text: 'Zeta',
            fontFamily: 'Georgia'
          },
          subtitle: {
            text: 'Heatmap',
            fontWeight: 'normal'
          },
          scaleX: {
            guide: {
              visible: false
            }
          },
          scaleY: {
            labels: ['Z1', 'Z2', 'Z3'],
            guide: {
              visible: false
            },
          },
          series: [{
              values: [30, 34, 31, 35, 59, 61],
              backgroundColor: '#0066ff'
            },
            {
              values: [35, 40, 66, 19, 29, 33],
              backgroundColor: '#0066ff'
            },
            {
              values: [21, 25, 33, 59, 37, 25],
              backgroundColor: '#0066ff'
            }
          ],
          shapes: [{
            type: 'triangle',
            backgroundColor: '#0066ff',
            size: 10,
            angle: -90,
            x: 20,
            y: 20,
            cursor: 'hand',
            id: 'backwards'
          }]
        };
    
        zingchart.node_click = function(e) {
          if (e.id === 'myChart') {
            zingchart.exec('myChart', 'destroy');
            zingchart.render({
              id: 'myNextChart',
              data: myDrilldownConfig[e.plotindex], //to reference the drilldown charts
              height: 400,
              width: '100%'
            });
          }
        }
    
        zingchart.shape_click = function(e) {
          var shapeId = e.shapeid;
          console.log(e);
    
          switch (shapeId) {
            case 'forwards':
            case 'backwards':
            case 'default':
              zingchart.exec('myNextChart', 'destroy');
              zingchart.render({
                id: 'myChart',
                data: myConfig,
                height: 400,
                width: '100%'
              });
              break;
          }
        }
    
        zingchart.render({
          id: 'myChart',
          data: myConfig,
          height: 400,
          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'></div>
      <div id='myNextChart'></div>
    </body>
    
    </html>
    
          
    var myConfig = {
      type: 'pie',
      title: {
        text: 'Drilldown Chart',
        fontFamily: 'Georgia'
      },
      plot: {
        detach: false,
        cursor: 'hand',
        valueBox: {
          text: '%t',
          fontFamily: 'Georgia',
          fontSize: 14,
          fontWeight: 'normal',
          offsetR: '30%'
        },
        tooltip: {
          visible: false
        }
      },
      series: [{
          values: [6600],
          text: 'Alpha',
          backgroundColor: '#cc0000'
        },
        {
          values: [3500],
          text: 'Beta',
          backgroundColor: '#ff6600'
        },
        {
          values: [3400],
          text: 'Gamma',
          backgroundColor: '#ffcc00'
        },
        {
          values: [3220],
          text: 'Delta',
          backgroundColor: '#88cc00'
        },
        {
          values: [3100],
          text: 'Epsilon',
          backgroundColor: '#66ccff'
        },
        {
          values: [3713],
          text: 'Zeta',
          backgroundColor: '#0066ff'
        }
      ]
    };
    
    var myDrilldownConfig = [];
    
    //the Next Drilldown Charts
    myDrilldownConfig[0] = {
      type: 'bar',
      title: {
        text: 'Alpha',
        fontFamily: 'Georgia'
      },
      subtitle: {
        text: 'Bar Chart',
        fontWeight: 'normal'
      },
      scaleX: {
        labels: ['A1', 'A2', 'A3', 'A4', 'A5', 'A6']
      },
      scaleY: {
        guide: {
          lineStyle: 'dotted'
        },
      },
      series: [{
        values: [30, 34, 31, 35, 59, 61],
        styles: ["#cc0000", "#ff0000", "#ff3333", "#ff6666", "#ff9999", "#ffcccc"]
      }],
      shapes: [{
        type: 'triangle',
        backgroundColor: '#cc0000',
        size: 10,
        angle: -90,
        x: 20,
        y: 20,
        cursor: 'hand',
        id: 'backwards'
      }]
    };
    myDrilldownConfig[1] = {
      type: 'line',
      title: {
        text: 'Beta',
        fontFamily: 'Georgia'
      },
      subtitle: {
        text: 'Line Chart',
        fontWeight: 'normal'
      },
      scaleX: {
    
      },
      scaleY: {
        guide: {
          lineStyle: 'dotted'
        },
      },
      series: [{
          values: [30, 34, 31, 35, 59, 61],
          lineColor: '#ff6600',
          marker: {
            backgroundColor: '#ff6600'
          }
        },
        {
          values: [35, 40, 66, 19, 29, 33],
          lineColor: '#ff944d',
          marker: {
            backgroundColor: '#ff944d'
          }
        },
        {
          values: [21, 25, 33, 59, 37, 25],
          lineColor: '#ffc299',
          marker: {
            backgroundColor: '#ffc299'
          }
        }
      ],
      shapes: [{
        type: 'triangle',
        backgroundColor: '#ff6600',
        size: 10,
        angle: -90,
        x: 20,
        y: 20,
        cursor: 'hand',
        id: 'backwards'
      }]
    };
    myDrilldownConfig[2] = {
      type: 'area',
      title: {
        text: 'Gamma',
        fontFamily: 'Georgia'
      },
      subtitle: {
        text: 'Area Chart',
        fontWeight: 'normal'
      },
      plot: {
        aspect: 'stepped',
        stacked: true
      },
      scaleX: {
    
      },
      scaleY: {
        values: '0:140:20',
        guide: {
          lineStyle: 'dotted'
        },
      },
      series: [{
          values: [30, 34, 31, 35, 59, 61],
          lineColor: '#ffcc00',
          marker: {
            backgroundColor: '#ffcc00'
          },
          backgroundColor: '#ffcc00'
        },
        {
          values: [35, 40, 66, 19, 29, 33],
          lineColor: '#ffdb4d',
          marker: {
            backgroundColor: '#ffdb4d'
          },
          backgroundColor: '#ffdb4d'
        },
        {
          values: [21, 25, 33, 59, 37, 25],
          lineColor: '#ffeb99',
          marker: {
            backgroundColor: '#ffeb99'
          },
          backgroundColor: '#ffeb99'
        }
      ],
      shapes: [{
        type: 'triangle',
        backgroundColor: '#ffcc00',
        size: 10,
        angle: -90,
        x: 20,
        y: 20,
        cursor: 'hand',
        id: 'backwards'
      }]
    };
    myDrilldownConfig[3] = {
      type: 'scatter',
      title: {
        text: 'Delta',
        fontFamily: 'Georgia'
      },
      subtitle: {
        text: 'Scatter Plot',
        fontWeight: 'normal'
      },
      scaleX: {
        guide: {
          lineStyle: 'dotted'
        }
      },
      scaleY: {
        guide: {
          lineStyle: 'dotted'
        },
      },
      series: [{
          values: [30, 34, 21, 35, 59, 61],
          marker: {
            type: 'square',
            size: 5,
            backgroundColor: '#88cc00',
            borderWidth: 1,
            borderColor: 'gray'
          }
        },
        {
          values: [35, 40, 66, 19, 29, 33],
          marker: {
            type: 'diamond',
            size: 5,
            backgroundColor: '#b3ff1a',
            borderWidth: 1,
            borderColor: 'gray'
          }
        },
        {
          values: [21, 25, 33, 59, 37, 25],
          marker: {
            type: 'triangle',
            size: 5,
            backgroundColor: '#ccff66',
            borderWidth: 1,
            borderColor: 'gray'
          }
        }
      ],
      shapes: [{
        type: 'triangle',
        backgroundColor: '#88cc00',
        size: 10,
        angle: -90,
        x: 20,
        y: 20,
        cursor: 'hand',
        id: 'backwards'
      }]
    };
    myDrilldownConfig[4] = {
      type: 'range',
      title: {
        text: 'Epsilon',
        fontFamily: 'Georgia'
      },
      subtitle: {
        text: 'Range Chart',
        fontWeight: 'normal'
      },
      plot: {
        aspect: 'spline'
      },
      scaleX: {
    
      },
      scaleY: {
        guide: {
          lineStyle: 'dotted'
        },
      },
      series: [{
        values: [
          [30, 35],
          [34, 45],
          [31, 50],
          [35, 40],
          [40, 68],
          [33, 60]
        ],
        lineColor: '#66ccff',
        marker: {
          backgroundColor: '#66ccff'
        },
        backgroundColor: '#66ccff'
      }],
      shapes: [{
        type: 'triangle',
        backgroundColor: '#66ccff',
        size: 10,
        angle: -90,
        x: 20,
        y: 20,
        cursor: 'hand',
        id: 'backwards'
      }]
    };
    myDrilldownConfig[5] = {
      type: 'heatmap',
      title: {
        text: 'Zeta',
        fontFamily: 'Georgia'
      },
      subtitle: {
        text: 'Heatmap',
        fontWeight: 'normal'
      },
      scaleX: {
        guide: {
          visible: false
        }
      },
      scaleY: {
        labels: ['Z1', 'Z2', 'Z3'],
        guide: {
          visible: false
        },
      },
      series: [{
          values: [30, 34, 31, 35, 59, 61],
          backgroundColor: '#0066ff'
        },
        {
          values: [35, 40, 66, 19, 29, 33],
          backgroundColor: '#0066ff'
        },
        {
          values: [21, 25, 33, 59, 37, 25],
          backgroundColor: '#0066ff'
        }
      ],
      shapes: [{
        type: 'triangle',
        backgroundColor: '#0066ff',
        size: 10,
        angle: -90,
        x: 20,
        y: 20,
        cursor: 'hand',
        id: 'backwards'
      }]
    };
    
    zingchart.node_click = function(e) {
      if (e.id === 'myChart') {
        zingchart.exec('myChart', 'destroy');
        zingchart.render({
          id: 'myNextChart',
          data: myDrilldownConfig[e.plotindex], //to reference the drilldown charts
          height: 400,
          width: '100%'
        });
      }
    }
    
    zingchart.shape_click = function(e) {
      var shapeId = e.shapeid;
      console.log(e);
    
      switch (shapeId) {
        case 'forwards':
        case 'backwards':
        case 'default':
          zingchart.exec('myNextChart', 'destroy');
          zingchart.render({
            id: 'myChart',
            data: myConfig,
            height: 400,
            width: '100%'
          });
          break;
      }
    }
    
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 400,
      width: '100%'
    });