• 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>
            zing-grid[loading] {
                height: 400px;
            }
        </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%' 
    });