• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <style></style>
    10. </head>
    11.  
    12. <body>
    13.   <div id='myChart'></div>
    14.   <div id='myNextChart'></div>
    15.   <script>
    16.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    17.     var myConfig = {
    18.       type: 'pie',
    19.       title: {
    20.         text: 'Drilldown Chart',
    21.         fontFamily: 'Georgia'
    22.       },
    23.       plot: {
    24.         detach: false,
    25.         cursor: 'hand',
    26.         valueBox: {
    27.           text: '%t',
    28.           fontFamily: 'Georgia',
    29.           fontSize: 14,
    30.           fontWeight: 'normal',
    31.           offsetR: '30%'
    32.         },
    33.         tooltip: {
    34.           visible: false
    35.         }
    36.       },
    37.       series: [{
    38.           values: [6600],
    39.           text: 'Alpha',
    40.           backgroundColor: '#cc0000'
    41.         },
    42.         {
    43.           values: [3500],
    44.           text: 'Beta',
    45.           backgroundColor: '#ff6600'
    46.         },
    47.         {
    48.           values: [3400],
    49.           text: 'Gamma',
    50.           backgroundColor: '#ffcc00'
    51.         },
    52.         {
    53.           values: [3220],
    54.           text: 'Delta',
    55.           backgroundColor: '#88cc00'
    56.         },
    57.         {
    58.           values: [3100],
    59.           text: 'Epsilon',
    60.           backgroundColor: '#66ccff'
    61.         },
    62.         {
    63.           values: [3713],
    64.           text: 'Zeta',
    65.           backgroundColor: '#0066ff'
    66.         }
    67.       ]
    68.     };
    69.  
    70.     var myDrilldownConfig = [];
    71.  
    72.     //the Next Drilldown Charts
    73.     myDrilldownConfig[0] = {
    74.       type: 'bar',
    75.       title: {
    76.         text: 'Alpha',
    77.         fontFamily: 'Georgia'
    78.       },
    79.       subtitle: {
    80.         text: 'Bar Chart',
    81.         fontWeight: 'normal'
    82.       },
    83.       scaleX: {
    84.         labels: ['A1', 'A2', 'A3', 'A4', 'A5', 'A6']
    85.       },
    86.       scaleY: {
    87.         guide: {
    88.           lineStyle: 'dotted'
    89.         },
    90.       },
    91.       series: [{
    92.         values: [30, 34, 31, 35, 59, 61],
    93.         styles: ["#cc0000", "#ff0000", "#ff3333", "#ff6666", "#ff9999", "#ffcccc"]
    94.       }],
    95.       shapes: [{
    96.         type: 'triangle',
    97.         backgroundColor: '#cc0000',
    98.         size: 10,
    99.         angle: -90,
    100.         x: 20,
    101.         y: 20,
    102.         cursor: 'hand',
    103.         id: 'backwards'
    104.       }]
    105.     };
    106.     myDrilldownConfig[1] = {
    107.       type: 'line',
    108.       title: {
    109.         text: 'Beta',
    110.         fontFamily: 'Georgia'
    111.       },
    112.       subtitle: {
    113.         text: 'Line Chart',
    114.         fontWeight: 'normal'
    115.       },
    116.       scaleX: {
    117.  
    118.       },
    119.       scaleY: {
    120.         guide: {
    121.           lineStyle: 'dotted'
    122.         },
    123.       },
    124.       series: [{
    125.           values: [30, 34, 31, 35, 59, 61],
    126.           lineColor: '#ff6600',
    127.           marker: {
    128.             backgroundColor: '#ff6600'
    129.           }
    130.         },
    131.         {
    132.           values: [35, 40, 66, 19, 29, 33],
    133.           lineColor: '#ff944d',
    134.           marker: {
    135.             backgroundColor: '#ff944d'
    136.           }
    137.         },
    138.         {
    139.           values: [21, 25, 33, 59, 37, 25],
    140.           lineColor: '#ffc299',
    141.           marker: {
    142.             backgroundColor: '#ffc299'
    143.           }
    144.         }
    145.       ],
    146.       shapes: [{
    147.         type: 'triangle',
    148.         backgroundColor: '#ff6600',
    149.         size: 10,
    150.         angle: -90,
    151.         x: 20,
    152.         y: 20,
    153.         cursor: 'hand',
    154.         id: 'backwards'
    155.       }]
    156.     };
    157.     myDrilldownConfig[2] = {
    158.       type: 'area',
    159.       title: {
    160.         text: 'Gamma',
    161.         fontFamily: 'Georgia'
    162.       },
    163.       subtitle: {
    164.         text: 'Area Chart',
    165.         fontWeight: 'normal'
    166.       },
    167.       plot: {
    168.         aspect: 'stepped',
    169.         stacked: true
    170.       },
    171.       scaleX: {
    172.  
    173.       },
    174.       scaleY: {
    175.         values: '0:140:20',
    176.         guide: {
    177.           lineStyle: 'dotted'
    178.         },
    179.       },
    180.       series: [{
    181.           values: [30, 34, 31, 35, 59, 61],
    182.           lineColor: '#ffcc00',
    183.           marker: {
    184.             backgroundColor: '#ffcc00'
    185.           },
    186.           backgroundColor: '#ffcc00'
    187.         },
    188.         {
    189.           values: [35, 40, 66, 19, 29, 33],
    190.           lineColor: '#ffdb4d',
    191.           marker: {
    192.             backgroundColor: '#ffdb4d'
    193.           },
    194.           backgroundColor: '#ffdb4d'
    195.         },
    196.         {
    197.           values: [21, 25, 33, 59, 37, 25],
    198.           lineColor: '#ffeb99',
    199.           marker: {
    200.             backgroundColor: '#ffeb99'
    201.           },
    202.           backgroundColor: '#ffeb99'
    203.         }
    204.       ],
    205.       shapes: [{
    206.         type: 'triangle',
    207.         backgroundColor: '#ffcc00',
    208.         size: 10,
    209.         angle: -90,
    210.         x: 20,
    211.         y: 20,
    212.         cursor: 'hand',
    213.         id: 'backwards'
    214.       }]
    215.     };
    216.     myDrilldownConfig[3] = {
    217.       type: 'scatter',
    218.       title: {
    219.         text: 'Delta',
    220.         fontFamily: 'Georgia'
    221.       },
    222.       subtitle: {
    223.         text: 'Scatter Plot',
    224.         fontWeight: 'normal'
    225.       },
    226.       scaleX: {
    227.         guide: {
    228.           lineStyle: 'dotted'
    229.         }
    230.       },
    231.       scaleY: {
    232.         guide: {
    233.           lineStyle: 'dotted'
    234.         },
    235.       },
    236.       series: [{
    237.           values: [30, 34, 21, 35, 59, 61],
    238.           marker: {
    239.             type: 'square',
    240.             size: 5,
    241.             backgroundColor: '#88cc00',
    242.             borderWidth: 1,
    243.             borderColor: 'gray'
    244.           }
    245.         },
    246.         {
    247.           values: [35, 40, 66, 19, 29, 33],
    248.           marker: {
    249.             type: 'diamond',
    250.             size: 5,
    251.             backgroundColor: '#b3ff1a',
    252.             borderWidth: 1,
    253.             borderColor: 'gray'
    254.           }
    255.         },
    256.         {
    257.           values: [21, 25, 33, 59, 37, 25],
    258.           marker: {
    259.             type: 'triangle',
    260.             size: 5,
    261.             backgroundColor: '#ccff66',
    262.             borderWidth: 1,
    263.             borderColor: 'gray'
    264.           }
    265.         }
    266.       ],
    267.       shapes: [{
    268.         type: 'triangle',
    269.         backgroundColor: '#88cc00',
    270.         size: 10,
    271.         angle: -90,
    272.         x: 20,
    273.         y: 20,
    274.         cursor: 'hand',
    275.         id: 'backwards'
    276.       }]
    277.     };
    278.     myDrilldownConfig[4] = {
    279.       type: 'range',
    280.       title: {
    281.         text: 'Epsilon',
    282.         fontFamily: 'Georgia'
    283.       },
    284.       subtitle: {
    285.         text: 'Range Chart',
    286.         fontWeight: 'normal'
    287.       },
    288.       plot: {
    289.         aspect: 'spline'
    290.       },
    291.       scaleX: {
    292.  
    293.       },
    294.       scaleY: {
    295.         guide: {
    296.           lineStyle: 'dotted'
    297.         },
    298.       },
    299.       series: [{
    300.         values: [
    301.           [30, 35],
    302.           [34, 45],
    303.           [31, 50],
    304.           [35, 40],
    305.           [40, 68],
    306.           [33, 60]
    307.         ],
    308.         lineColor: '#66ccff',
    309.         marker: {
    310.           backgroundColor: '#66ccff'
    311.         },
    312.         backgroundColor: '#66ccff'
    313.       }],
    314.       shapes: [{
    315.         type: 'triangle',
    316.         backgroundColor: '#66ccff',
    317.         size: 10,
    318.         angle: -90,
    319.         x: 20,
    320.         y: 20,
    321.         cursor: 'hand',
    322.         id: 'backwards'
    323.       }]
    324.     };
    325.     myDrilldownConfig[5] = {
    326.       type: 'heatmap',
    327.       title: {
    328.         text: 'Zeta',
    329.         fontFamily: 'Georgia'
    330.       },
    331.       subtitle: {
    332.         text: 'Heatmap',
    333.         fontWeight: 'normal'
    334.       },
    335.       scaleX: {
    336.         guide: {
    337.           visible: false
    338.         }
    339.       },
    340.       scaleY: {
    341.         labels: ['Z1', 'Z2', 'Z3'],
    342.         guide: {
    343.           visible: false
    344.         },
    345.       },
    346.       series: [{
    347.           values: [30, 34, 31, 35, 59, 61],
    348.           backgroundColor: '#0066ff'
    349.         },
    350.         {
    351.           values: [35, 40, 66, 19, 29, 33],
    352.           backgroundColor: '#0066ff'
    353.         },
    354.         {
    355.           values: [21, 25, 33, 59, 37, 25],
    356.           backgroundColor: '#0066ff'
    357.         }
    358.       ],
    359.       shapes: [{
    360.         type: 'triangle',
    361.         backgroundColor: '#0066ff',
    362.         size: 10,
    363.         angle: -90,
    364.         x: 20,
    365.         y: 20,
    366.         cursor: 'hand',
    367.         id: 'backwards'
    368.       }]
    369.     };
    370.  
    371.     zingchart.node_click = function(e) {
    372.       if (e.id === 'myChart') {
    373.         zingchart.exec('myChart', 'destroy');
    374.         zingchart.render({
    375.           id: 'myNextChart',
    376.           data: myDrilldownConfig[e.plotindex], //to reference the drilldown charts
    377.           height: 400,
    378.           width: '100%'
    379.         });
    380.       }
    381.     }
    382.  
    383.     zingchart.shape_click = function(e) {
    384.       var shapeId = e.shapeid;
    385.       console.log(e);
    386.  
    387.       switch (shapeId) {
    388.         case 'forwards':
    389.         case 'backwards':
    390.         case 'default':
    391.           zingchart.exec('myNextChart', 'destroy');
    392.           zingchart.render({
    393.             id: 'myChart',
    394.             data: myConfig,
    395.             height: 400,
    396.             width: '100%'
    397.           });
    398.           break;
    399.       }
    400.     }
    401.  
    402.     zingchart.render({
    403.       id: 'myChart',
    404.       data: myConfig,
    405.       height: 400,
    406.       width: '100%'
    407.     });
    408.   </script>
    409. </body>
    410.  
    411. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <div id='myChart'></div>
    13.   <div id='myNextChart'></div>
    14. </body>
    15.  
    16. </html>
    1.  
    1. var myConfig = {
    2.   type: 'pie',
    3.   title: {
    4.     text: 'Drilldown Chart',
    5.     fontFamily: 'Georgia'
    6.   },
    7.   plot: {
    8.     detach: false,
    9.     cursor: 'hand',
    10.     valueBox: {
    11.       text: '%t',
    12.       fontFamily: 'Georgia',
    13.       fontSize: 14,
    14.       fontWeight: 'normal',
    15.       offsetR: '30%'
    16.     },
    17.     tooltip: {
    18.       visible: false
    19.     }
    20.   },
    21.   series: [{
    22.       values: [6600],
    23.       text: 'Alpha',
    24.       backgroundColor: '#cc0000'
    25.     },
    26.     {
    27.       values: [3500],
    28.       text: 'Beta',
    29.       backgroundColor: '#ff6600'
    30.     },
    31.     {
    32.       values: [3400],
    33.       text: 'Gamma',
    34.       backgroundColor: '#ffcc00'
    35.     },
    36.     {
    37.       values: [3220],
    38.       text: 'Delta',
    39.       backgroundColor: '#88cc00'
    40.     },
    41.     {
    42.       values: [3100],
    43.       text: 'Epsilon',
    44.       backgroundColor: '#66ccff'
    45.     },
    46.     {
    47.       values: [3713],
    48.       text: 'Zeta',
    49.       backgroundColor: '#0066ff'
    50.     }
    51.   ]
    52. };
    53.  
    54. var myDrilldownConfig = [];
    55.  
    56. //the Next Drilldown Charts
    57. myDrilldownConfig[0] = {
    58.   type: 'bar',
    59.   title: {
    60.     text: 'Alpha',
    61.     fontFamily: 'Georgia'
    62.   },
    63.   subtitle: {
    64.     text: 'Bar Chart',
    65.     fontWeight: 'normal'
    66.   },
    67.   scaleX: {
    68.     labels: ['A1', 'A2', 'A3', 'A4', 'A5', 'A6']
    69.   },
    70.   scaleY: {
    71.     guide: {
    72.       lineStyle: 'dotted'
    73.     },
    74.   },
    75.   series: [{
    76.     values: [30, 34, 31, 35, 59, 61],
    77.     styles: ["#cc0000", "#ff0000", "#ff3333", "#ff6666", "#ff9999", "#ffcccc"]
    78.   }],
    79.   shapes: [{
    80.     type: 'triangle',
    81.     backgroundColor: '#cc0000',
    82.     size: 10,
    83.     angle: -90,
    84.     x: 20,
    85.     y: 20,
    86.     cursor: 'hand',
    87.     id: 'backwards'
    88.   }]
    89. };
    90. myDrilldownConfig[1] = {
    91.   type: 'line',
    92.   title: {
    93.     text: 'Beta',
    94.     fontFamily: 'Georgia'
    95.   },
    96.   subtitle: {
    97.     text: 'Line Chart',
    98.     fontWeight: 'normal'
    99.   },
    100.   scaleX: {
    101.  
    102.   },
    103.   scaleY: {
    104.     guide: {
    105.       lineStyle: 'dotted'
    106.     },
    107.   },
    108.   series: [{
    109.       values: [30, 34, 31, 35, 59, 61],
    110.       lineColor: '#ff6600',
    111.       marker: {
    112.         backgroundColor: '#ff6600'
    113.       }
    114.     },
    115.     {
    116.       values: [35, 40, 66, 19, 29, 33],
    117.       lineColor: '#ff944d',
    118.       marker: {
    119.         backgroundColor: '#ff944d'
    120.       }
    121.     },
    122.     {
    123.       values: [21, 25, 33, 59, 37, 25],
    124.       lineColor: '#ffc299',
    125.       marker: {
    126.         backgroundColor: '#ffc299'
    127.       }
    128.     }
    129.   ],
    130.   shapes: [{
    131.     type: 'triangle',
    132.     backgroundColor: '#ff6600',
    133.     size: 10,
    134.     angle: -90,
    135.     x: 20,
    136.     y: 20,
    137.     cursor: 'hand',
    138.     id: 'backwards'
    139.   }]
    140. };
    141. myDrilldownConfig[2] = {
    142.   type: 'area',
    143.   title: {
    144.     text: 'Gamma',
    145.     fontFamily: 'Georgia'
    146.   },
    147.   subtitle: {
    148.     text: 'Area Chart',
    149.     fontWeight: 'normal'
    150.   },
    151.   plot: {
    152.     aspect: 'stepped',
    153.     stacked: true
    154.   },
    155.   scaleX: {
    156.  
    157.   },
    158.   scaleY: {
    159.     values: '0:140:20',
    160.     guide: {
    161.       lineStyle: 'dotted'
    162.     },
    163.   },
    164.   series: [{
    165.       values: [30, 34, 31, 35, 59, 61],
    166.       lineColor: '#ffcc00',
    167.       marker: {
    168.         backgroundColor: '#ffcc00'
    169.       },
    170.       backgroundColor: '#ffcc00'
    171.     },
    172.     {
    173.       values: [35, 40, 66, 19, 29, 33],
    174.       lineColor: '#ffdb4d',
    175.       marker: {
    176.         backgroundColor: '#ffdb4d'
    177.       },
    178.       backgroundColor: '#ffdb4d'
    179.     },
    180.     {
    181.       values: [21, 25, 33, 59, 37, 25],
    182.       lineColor: '#ffeb99',
    183.       marker: {
    184.         backgroundColor: '#ffeb99'
    185.       },
    186.       backgroundColor: '#ffeb99'
    187.     }
    188.   ],
    189.   shapes: [{
    190.     type: 'triangle',
    191.     backgroundColor: '#ffcc00',
    192.     size: 10,
    193.     angle: -90,
    194.     x: 20,
    195.     y: 20,
    196.     cursor: 'hand',
    197.     id: 'backwards'
    198.   }]
    199. };
    200. myDrilldownConfig[3] = {
    201.   type: 'scatter',
    202.   title: {
    203.     text: 'Delta',
    204.     fontFamily: 'Georgia'
    205.   },
    206.   subtitle: {
    207.     text: 'Scatter Plot',
    208.     fontWeight: 'normal'
    209.   },
    210.   scaleX: {
    211.     guide: {
    212.       lineStyle: 'dotted'
    213.     }
    214.   },
    215.   scaleY: {
    216.     guide: {
    217.       lineStyle: 'dotted'
    218.     },
    219.   },
    220.   series: [{
    221.       values: [30, 34, 21, 35, 59, 61],
    222.       marker: {
    223.         type: 'square',
    224.         size: 5,
    225.         backgroundColor: '#88cc00',
    226.         borderWidth: 1,
    227.         borderColor: 'gray'
    228.       }
    229.     },
    230.     {
    231.       values: [35, 40, 66, 19, 29, 33],
    232.       marker: {
    233.         type: 'diamond',
    234.         size: 5,
    235.         backgroundColor: '#b3ff1a',
    236.         borderWidth: 1,
    237.         borderColor: 'gray'
    238.       }
    239.     },
    240.     {
    241.       values: [21, 25, 33, 59, 37, 25],
    242.       marker: {
    243.         type: 'triangle',
    244.         size: 5,
    245.         backgroundColor: '#ccff66',
    246.         borderWidth: 1,
    247.         borderColor: 'gray'
    248.       }
    249.     }
    250.   ],
    251.   shapes: [{
    252.     type: 'triangle',
    253.     backgroundColor: '#88cc00',
    254.     size: 10,
    255.     angle: -90,
    256.     x: 20,
    257.     y: 20,
    258.     cursor: 'hand',
    259.     id: 'backwards'
    260.   }]
    261. };
    262. myDrilldownConfig[4] = {
    263.   type: 'range',
    264.   title: {
    265.     text: 'Epsilon',
    266.     fontFamily: 'Georgia'
    267.   },
    268.   subtitle: {
    269.     text: 'Range Chart',
    270.     fontWeight: 'normal'
    271.   },
    272.   plot: {
    273.     aspect: 'spline'
    274.   },
    275.   scaleX: {
    276.  
    277.   },
    278.   scaleY: {
    279.     guide: {
    280.       lineStyle: 'dotted'
    281.     },
    282.   },
    283.   series: [{
    284.     values: [
    285.       [30, 35],
    286.       [34, 45],
    287.       [31, 50],
    288.       [35, 40],
    289.       [40, 68],
    290.       [33, 60]
    291.     ],
    292.     lineColor: '#66ccff',
    293.     marker: {
    294.       backgroundColor: '#66ccff'
    295.     },
    296.     backgroundColor: '#66ccff'
    297.   }],
    298.   shapes: [{
    299.     type: 'triangle',
    300.     backgroundColor: '#66ccff',
    301.     size: 10,
    302.     angle: -90,
    303.     x: 20,
    304.     y: 20,
    305.     cursor: 'hand',
    306.     id: 'backwards'
    307.   }]
    308. };
    309. myDrilldownConfig[5] = {
    310.   type: 'heatmap',
    311.   title: {
    312.     text: 'Zeta',
    313.     fontFamily: 'Georgia'
    314.   },
    315.   subtitle: {
    316.     text: 'Heatmap',
    317.     fontWeight: 'normal'
    318.   },
    319.   scaleX: {
    320.     guide: {
    321.       visible: false
    322.     }
    323.   },
    324.   scaleY: {
    325.     labels: ['Z1', 'Z2', 'Z3'],
    326.     guide: {
    327.       visible: false
    328.     },
    329.   },
    330.   series: [{
    331.       values: [30, 34, 31, 35, 59, 61],
    332.       backgroundColor: '#0066ff'
    333.     },
    334.     {
    335.       values: [35, 40, 66, 19, 29, 33],
    336.       backgroundColor: '#0066ff'
    337.     },
    338.     {
    339.       values: [21, 25, 33, 59, 37, 25],
    340.       backgroundColor: '#0066ff'
    341.     }
    342.   ],
    343.   shapes: [{
    344.     type: 'triangle',
    345.     backgroundColor: '#0066ff',
    346.     size: 10,
    347.     angle: -90,
    348.     x: 20,
    349.     y: 20,
    350.     cursor: 'hand',
    351.     id: 'backwards'
    352.   }]
    353. };
    354.  
    355. zingchart.node_click = function(e) {
    356.   if (e.id === 'myChart') {
    357.     zingchart.exec('myChart', 'destroy');
    358.     zingchart.render({
    359.       id: 'myNextChart',
    360.       data: myDrilldownConfig[e.plotindex], //to reference the drilldown charts
    361.       height: 400,
    362.       width: '100%'
    363.     });
    364.   }
    365. }
    366.  
    367. zingchart.shape_click = function(e) {
    368.   var shapeId = e.shapeid;
    369.   console.log(e);
    370.  
    371.   switch (shapeId) {
    372.     case 'forwards':
    373.     case 'backwards':
    374.     case 'default':
    375.       zingchart.exec('myNextChart', 'destroy');
    376.       zingchart.render({
    377.         id: 'myChart',
    378.         data: myConfig,
    379.         height: 400,
    380.         width: '100%'
    381.       });
    382.       break;
    383.   }
    384. }
    385.  
    386. zingchart.render({
    387.   id: 'myChart',
    388.   data: myConfig,
    389.   height: 400,
    390.   width: '100%'
    391. });