• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
      <style>
        #interactive {
          margin-bottom: 10px;
        }
    
        .hidden-prompt {
          display: none;
        }
    
        .fa-circle-o {
          color: #c30;
        }
    
        .fa-check-circle-o {
          color: #7ca82b;
        }
    
        [id^=list] {
          background-color: #F4F4F4;
          border-radius: 4px;
          padding: 10px;
          height: 110px;
        }
    
        #list2 {
          display: none;
        }
    
        #list3 {
          display: none;
        }
    
        #list4 {
          display: none;
        }
    
        #interactive-graph-id0-objects-top circle {
          animation: fadein 2s;
          -moz-animation: fadein 2s;
          /* Firefox */
          -webkit-animation: fadein 2s;
          /* Safari and Chrome */
          -o-animation: fadein 2s;
          /* Opera */
        }
    
        @keyframes fadein {
          from {
            opacity: 0;
          }
          to {
            opacity: 1;
          }
        }
    
        @-moz-keyframes fadein {
          /* Firefox */
          from {
            opacity: 0;
          }
          to {
            opacity: 1;
          }
        }
    
        @-webkit-keyframes fadein {
          /* Safari and Chrome */
          from {
            opacity: 0;
          }
          to {
            opacity: 1;
          }
        }
    
        @-o-keyframes fadein {
          /* Opera */
          from {
            opacity: 0;
          }
          to {
            opacity: 1;
          }
        }
    
        [id^=interactive-graph-id0-shape-noanim] {
          animation: none !important;
          -moz-animation: none !important;
          /* Firefox */
          -webkit-animation: none !important;
          /* Safari and Chrome */
          -o-animation: none !important;
          /* Opera */
        }
    
        [id^=list] {
          transition: height 2s;
          -moz-transition: height 2s;
          /* Firefox 4 */
          -webkit-transition: height 2s;
          /* Safari and Chrome */
          -o-transition: height 2s;
          /* Opera */
        }
    
        body {
          text-align: center;
          font-family: Helvetica, Arial, sans-serif;
        }
      </style>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style></style>
    </head>
    
    <body>
      <div id='interactive'></div>
      <div style="min-height:430px;">
        <div id="interactive" class="chart-placeholder"></div>
        <div class="centered" id="list1">
          <div>
            <div><i class="fa fa-circle-o" id="action1-1"></i> <span>Hover over a bar to see the tooltip.</span></div>
            <div><i class="fa fa-circle-o" id="action1-2"></i> <span>Click on a legend item to toggle products.</span></div>
            <div class="hidden-prompt" id="prompt1-3"><i class="fa fa-circle-o" id="action1-3"></i> <span>Now, click on a bar segment.</span></div>
          </div>
        </div>
        <div id="list2">
          <div class="centered">
            <div id="info1"></div>
            <div><i class="fa fa-circle-o" id="action2-2"></i> <span>Click and drag to zoom, or use the zoom controls.</span></div>
            <div><i class="fa fa-circle-o" id="action2-1"></i> <span>Drag the scroll bar or preview handles.</span></div>
            <div class="hidden-prompt" id="prompt2-3"><i class="fa fa-circle-o" id="action2-3"></i> <span>Now, select a product's bar.</span></div>
          </div>
        </div>
        <div id="list3">
          <div class="centered">
            <div>This chart is showing a single product in two charts: one by revenue, one by number of transactions.
              <br/><i class="fa fa-circle-o" id="action3-1"></i> <span>Hover over a chart to see the shared crosshair of the other chart.</span></div>
            <div class="hidden-prompt" id="prompt3-2"><i class="fa fa-circle-o" id="action3-2"></i> <span>Now, click on a transaction to see sales by location.</span></div>
          </div>
        </div>
        <div id="list4">Thanks for taking a look at some of the interactive features ZingChart has to offer! <a href="#" id="restartBtn">Start over?</a></div>
      </div>
      </div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var oSavedChart2, oSavedChart3;
        var aLabels = [];
        var aBurgers = [396913, 389658.5, 372542.5, 416993.5, 415475.5, 491029, 380748.5, 432591.5, 408606, 496556.5, 439395, 421448.5, 472752.5, 390659.5, 481052, 368043.5, 388685, 421888.5, 335830, 404629.5, 430138.5, 380231.5, 476338.5, 445164.5, 400559.5, 381755, 361256.5, 336495.5, 417202.5, 417472, 421107.5, 345471.5, 420084.5, 403199.5, 349200.5, 430419];
        var aFries = [131305.5, 120313.5, 96967.5, 104880, 113172, 112639.5, 121602, 121084.5, 108736.5, 105789, 117139.5, 117682.5, 141787.5, 104947.5, 99141, 115342.5, 114259.5, 117624, 119613, 116079, 125955, 119406, 118629, 107458.5, 104362.5, 101518.5, 104380.5, 113367, 122548.5, 112105.5, 108640.5, 119797.5, 112216.5, 98821.5, 108972, 110578.5];
        var aShakes = [189745, 209532.5, 198027.5, 197210, 193497.5, 185797.5, 194602.5, 183852.5, 158705, 195552.5, 185767.5, 183040, 178495, 212522.5, 204565, 183115, 202615, 191275, 189595, 200705, 194557.5, 200637.5, 182547.5, 211557.5, 162640, 199110, 185422.5, 210700, 191800, 171335, 182220, 168185, 194437.5, 207652.5, 188045, 194057.5];
        var oDefaults = {
          "root": {
            "gui": {
              "context-menu": {
                "button": {
                  "visible": false
                },
                "gear": {
                  "visible": false
                }
              }
            }
          },
          "graph": {
            "tooltip": {
              "shadow": 0,
              "border-radius": 3
            },
            "crosshair-x": {
              "line-color": "white",
              "plot-label": {
                "border-radius": 3
              },
              "scale-label": {
                "visible": 0
              }
            },
            "background-color": "none",
            "border-color": "#eee",
            "border-radius": 3,
            "border-width": 1,
            "scale-x": {
              "guide": {
                "visible": 0
              },
              "alpha": 0.5,
              "line-color": "#5E5C5B",
              "item": {
                "color": "#5E5C5B"
              },
              "tick": {
                "line-color": "#5E5C5B",
                "alpha": 0.8
              },
              "items-overlap": true
            },
            "scale-y": {
              "guide": {
                "line-width": 1,
                "-line-style": "dashed"
              },
              "line-color": "none",
              "item": {
                "color": "#5E5C5B"
              },
              "tick": {
                "visible": false
              }
            },
            "legend": {
              "marker": {
                "type": "circle"
              },
              "layout": "h",
              "background-color": "none",
              "border-color": "none",
              "shadow": {
                "visible": 0
              },
              "marker": {
                "border-color": "white"
              },
              "item": {
                "color": "#5E5C5B"
              },
              "y": "8.5%"
            },
            "title": {
              "color": "#5E5C5B",
              "background-color": "none",
              "height": 24,
              "text-align": "left",
              "font-weight": "none"
            }
          }
        };
        var oChart = {
          "type": "bar",
          "utc": 1,
          "plot": {
            "stacked": 1,
            "tooltip": {
              "text": "%kt<br>%t: $%v",
              "decimals": 2,
              "thousands-separator": ","
            },
            "-animation": {
              "delay": 10,
              "effect": "1",
              "speed": "200",
              "method": "0",
              "sequence": "0",
              "attributes": {
    
              }
            }
          },
          "plotarea": {
            "margin-left": 70
          },
          "title": {
            "text": "Revenue by Month"
          },
          "legend": {
            "toggle-action": "remove"
          },
          "scale-y": {
            "format": "$%v",
            "thousands-separator": ","
          },
          "scale-x": {
            "values": ["Jan 2013", "Feb 2013", "Mar 2013", "Apr 2013", "May 2013", "Jun 2013", "Jul 2013", "Aug 2013", "Sep 2013", "Oct 2013", "Nov 2013", "Dec 2013", "Jan 2014", "Feb 2014", "Mar 2014", "Apr 2014", "May 2014", "Jun 2014", "Jul 2014", "Aug 2014", "Sep 2014", "Oct 2014", "Nov 2014", "Dec 2014", "Jan 2015", "Feb 2015", "Mar 2015", "Apr 2015", "May 2015", "Jun 2015", "Jul 2015", "Aug 2015", "Sep 2015", "Oct 2015", "Nov 2015", "Dec 2015"]
          },
          "series": [{
            "values": aBurgers,
            "text": "Burgers"
          }, {
            "values": aFries,
            "text": "Fries"
          }, {
            "values": aShakes,
            "text": "Shakes"
          }]
        };
    
        function level2(p, nDays) {
          var aBurgers = [],
            aFries = [],
            aShakes = [];
          aLabels = [];
          for (var n = 0; n < nDays; n++) {
            aBurgers.push((Math.random() * (500000 - 300000) + 300000) / nDays);
            aFries.push((Math.random() * (150000 - 100000) + 100000) / nDays);
            aShakes.push((Math.random() * (220000 - 160000) + 160000) / nDays);
            aLabels.push(p.scaletext.slice(0, 3) + " " + (n + 1) + ",<br>" + p.scaletext.slice(4, 8));
          }
          var oLevel2 = {
            "type": "bar",
            "plot": {
              "tooltip": {
                "text": "%t: $%v",
                "decimals": 2,
                "thousands-separator": ","
              }
            },
            "plotarea": {
              "margin-left": 70,
              "margin-bottom": 128
            },
            "title": {
              "text": "Revenue by Product by Day"
            },
            "legend": {
              "layout": "h"
            },
            "shapes": [{
                "type": "rectangle",
                "id": "up1",
                "z-index": 99,
                "width": 70,
                "height": 20,
                "border-width": 1,
                "border-color": "#5E5C5B",
                "border-radius": 8,
                "background-color": "white",
                "x": "90%",
                "y": 15,
                "cursor": "hand",
                "shadow": 1,
                "label": {
                  "text": "Up A Level",
                  "color": "#5E5C5B"
                }
              }, {
                "type": "rectangle",
                "id": "zoomout",
                "width": 40,
                "height": 20,
                "border-width": 1,
                "border-color": "#999",
                "border-radius-top-left": 8,
                "border-radius-bottom-left": 8,
                "background-color": "white",
                "x": "2.5%",
                "y": "10%",
                "cursor": "hand",
                "shadow": 1,
                "label": {
                  "text": "-"
                }
              },
              {
                "type": "rectangle",
                "id": "zoomin",
                "width": 40,
                "height": 20,
                "border-width": 1,
                "border-color": "#999",
                "border-radius-top-right": 8,
                "border-radius-bottom-right": 8,
                "background-color": "white",
                "x": "6%",
                "y": "10%",
                "cursor": "hand",
                "shadow": 1,
                "label": {
                  "text": "+"
                }
              }
            ],
            "scale-y": {
              "format": "$%v",
              "thousands-separator": ",",
              "max-value": 20000
            },
            "scale-x": {
              "values": aLabels,
              "zooming": 1
            },
            "scroll-x": {},
            "preview": {
              "margin-left": 70
            },
            "series": [{
              "values": aBurgers,
              "text": "Burgers"
            }, {
              "values": aFries,
              "text": "Fries"
            }, {
              "values": aShakes,
              "text": "Shakes"
            }]
          }
          return oLevel2;
        };
    
        function level3(p, aChartValues) {
          var aLabelsNew = [];
          for (var n = 0; n < aLabels.length; n++) {
            aLabelsNew.push(aLabels[n].replace(/(<br>)/, ' '));
          }
          var aSeries = [],
            aSeries2 = [],
            aChartValues2 = [],
            title = null;
          if (p.plotindex == 0) {
            title = "Burgers";
            aSeries = [{
              "values": aChartValues[0],
              "text": "Burgers"
            }];
            for (var n = 0; n < aChartValues[0].length; n++) {
              aChartValues2.push(Math.floor(aChartValues[0][n] / 5.5));
            }
            aSeries2 = [{
              "values": aChartValues2,
              "text": "Burgers"
            }];
          } else if (p.plotindex == 1) {
            title = "Fries";
            aSeries = [{
              "values": aChartValues[1],
              "text": "Fries",
              "palette": 1
            }];
            for (var n = 0; n < aChartValues[1].length; n++) {
              aChartValues2.push(Math.floor(aChartValues[1][n] / 1.5));
            }
            aSeries2 = [{
              "values": aChartValues2,
              "text": "Fries",
              "palette": 1
            }];
          } else {
            title = "Shakes";
            aSeries = [{
              "values": aChartValues[2],
              "text": "Shakes",
              "palette": 2
            }];
            for (var n = 0; n < aChartValues[2].length; n++) {
              aChartValues2.push(Math.floor(aChartValues[2][n] / 2.5));
            }
            aSeries2 = [{
              "values": aChartValues2,
              "text": "Shakes",
              "palette": 2
            }];
          }
    
          var oLevel3 = {
            "graphset": [{
              "type": "bar",
              "plot": {
                "tooltip": {
                  "text": "%t: $%v",
                  "decimals": 2,
                  "thousands-separator": ",",
                  "visible": 0
                }
              },
              "shapes": [{
                "type": "rectangle",
                "id": "up2",
                "z-index": 99,
                "width": 70,
                "height": 20,
                "border-width": 1,
                "border-color": "#5E5C5B",
                "border-radius": 8,
                "background-color": "white",
                "x": "90%",
                "y": 15,
                "cursor": "hand",
                "shadow": 1,
                "label": {
                  "text": "Up A Level",
                  "color": "#5E5C5B"
                }
              }],
              "plotarea": {
                "margin-bottom": "20%",
                "margin-top": "28%"
              },
              "title": {
                "text": "Revenue From " + title,
              },
              "legend": {
                "shared": 1,
                "y": "11%"
              },
              "scale-x": {
                "labels": aLabelsNew
              },
              "scale-y": {
                "format": "$%v"
              },
              "crosshair-x": {
                "shared": 1,
                "plot-label": {
                  "text": "$%v",
                  "thousands-separator": ",",
                  "decimals": 2
                }
              },
              "series": aSeries
            }, {
              "type": "bar",
              "plot": {
                "tooltip": {
                  "visible": 0
                }
              },
              "title": {
                "text": "Number of Transactions by Date Nationwide"
              },
              "plotarea": {
                "margin-bottom": "20%",
                "margin-top": "22%"
              },
              "legend": {
                "shared": 1,
                "visible": 0
              },
              "scale-x": {
                "labels": aLabelsNew
              },
              "crosshair-x": {
                "shared": 1,
                "plot-label": {
                  "text": "%v %t Sold",
                  "thousands-separator": ","
                }
              },
              "series": aSeries2
            }]
          };
          return oLevel3;
        };
    
        function level4() {
          var oLevel4 = {
            "title": {
              "text": "Big Kahuna Burger Sales by Location"
            },
            "plotarea": {
              "margin-top": "20%"
            },
            "background-color": "#E7EFF1",
            "shapes": [
              /*{
                             "type":"rectangle",
                             "id":"up3",
                             "z-index":99,
                             "width":70,
                             "height":20,
                             "border-width":1,
                             "border-color":"#666",
                             "border-radius":8,
                             "background-color":"#397CF8 #5F97FB",
                             "x":"90%",
                             "y":2,
                             "cursor":"hand",
                             "shadow":1,
                             "label":{
                                 "text":"Up A Level",
                                 "color":"white"
                             }
                         },*/
              {
                "type": "circle",
                "id": "noanim1",
                "size": 5,
                "label": {
                  "text": "Low",
                  "width": 30,
                  "offset-x": 24,
                  "text-align": "left",
                  "color": "#5E5C5B"
                },
                "background-color": "#FFDBDB",
                "border-color": "black",
                "border-width": 1,
                "x": "2%",
                "y": 40
              },
              {
                "type": "circle",
                "id": "noanim2",
                "size": 5,
                "label": {
                  "text": "Medium",
                  "width": 30,
                  "offset-x": 24,
                  "text-align": "left",
                  "color": "#5E5C5B"
                },
                "background-color": "#FFB8B8",
                "border-color": "black",
                "border-width": 1,
                "x": "2%",
                "y": 60
              },
              {
                "type": "circle",
                "id": "noanim3",
                "size": 5,
                "label": {
                  "text": "High",
                  "width": 30,
                  "offset-x": 24,
                  "text-align": "left",
                  "color": "#5E5C5B"
                },
                "background-color": "#D95D5D",
                "border-color": "black",
                "border-width": 1,
                "x": "2%",
                "y": 80
              },
              {
                "type": "circle",
                "id": "noanim4",
                "size": 5,
                "label": {
                  "text": "Very High",
                  "width": 30,
                  "color": "#5E5C5B",
                  "offset-x": 24,
                  "text-align": "left"
                },
                "background-color": "#B53333",
                "border-color": "black",
                "border-width": 1,
                "x": "2%",
                "y": 100
              },
              {
                "type": "zingchart.maps",
                "options": {
                  "id": "map",
                  "name": "usa",
                  "scale": true,
                  "y": 14,
                  "style": {
                    "background-color": "rgb(203,224,168)",
                    "shadow": 0,
                    "label": {
                      "visible": 0
                    },
                    "hover-state": {
                      "background-color": "#A3BE74"
                    },
                    "tooltip": {
                      "visible": 0
                    }
                  }
                }
              }
            ]
          };
          return oLevel4;
        };
    
        function daysInMonth(month, year) {
          return new Date(year, month, 0).getDate();
        }
        var bZoomBuff = 0,
          bAction1_1 = 0,
          bAction1_2 = 0,
          bAction2_1 = 0,
          bAction2_2 = 0,
          bAction3_1 = 0;
        zingchart.MODULESDIR = "http://cdn.zingchart.io/lib/zingchart/modules/";
        zingchart.loadModules('maps,maps-usa');
        zingchart.render({
          id: 'interactive',
          width: '100%',
          height: 320,
          data: oChart,
          defaults: oDefaults,
          theme: "light",
          events: {
            shape_click: function(p) {
              switch (p.shapeid) {
                case "zoomin":
                  zingchart.exec('interactive', 'zoomin');
                  break;
                case "zoomout":
                  zingchart.exec('interactive', 'zoomout');
                  break;
                case "up1":
                  //Reset Flags
                  resetAll();
                  //Back to level 1
                  zingchart.exec('interactive', 'setdata', {
                    data: oChart
                  });
                  //Fade 2 to 1
                  setTimeout(function() {
                    $("#list2").fadeOut(400, function() {
                      $("#list1").fadeIn(400, function() {});
                    });
                  }, 200);
                  break;
                case "up2":
                  //reset flags
                  resetAll();
                  //back to level 2
                  zingchart.exec('interactive', 'setdata', {
                    data: oSavedChart2
                  });
                  //fade 3 to 2
                  setTimeout(function() {
                    $("#list3").fadeOut(400, function() {
                      $("#list2").fadeIn(400, function() {});
                    });
                  }, 200);
                  break;
                case "up3":
                  //flags
                  resetAll();
                  //back to level 3
                  zingchart.exec('interactive', 'setdata', {
                    data: oSavedChart3
                  });
                  //list 4 to 3
                  setTimeout(function() {
                    $("#list4").fadeOut(400, function() {
                      $("#list3").fadeIn(400, function() {});
                    });
                  }, 200);
                  setTimeout(function() {
                    zingchart.exec('interactive', 'removeobject', {
                      cls: 'marker'
                    });
                  }, 3000);
                  break;
              }
            },
            node_mouseover: function(p) {
              $('#action1-1').removeClass('fa-circle-o');
              $('#action1-1').addClass('fa-check-circle-o ').next().replaceWith('<strike>Hover over a bar to see the tooltip.</strike>');
              bAction1_1 = 1;
              checkComplete();
            },
            legend_item_click: function(p) {
              $('#action1-2').removeClass('fa-circle-o');
              $('#action1-2').addClass('fa-check-circle-o ').next().replaceWith('<strike>Click on a legend item to toggle products.</strike>');
              bAction1_2 = 1;
              checkComplete();
            },
            legend_marker_click: function(p) {
              $('#action1-2').removeClass('fa-circle-o');
              $('#action1-2').addClass('fa-check-circle-o ').next().replaceWith('<strike>Click on a legend item to toggle products.</strike>');
              bAction1_2 = 1;
              checkComplete();
            },
            node_click: function(p) {
              if (bAction1_1 && bAction1_2) {
                $('#action1-3').removeClass('fa-circle-o');
                $('#action1-3').addClass('fa-check-circle-o ').next().replaceWith('<strike>Now, click on a bar segment.</strike>');
                var aIndexValues = [];
                for (var n = 0; n < 3; n++) {
                  var iVal;
                  iVal = zingchart.exec('interactive', 'getnodevalue', {
                    plotindex: n,
                    nodeindex: p.nodeindex
                  });
                  aIndexValues.push(iVal);
                }
                if (p.nodeindex < 12) {
                  var iMonth = p.nodeindex + 1,
                    iYear = 2013;
                } else if (p.nodeindex >= 12 && p.nodeindex < 24) {
                  var iMonth = p.nodeindex - 11,
                    iYear = 2014;
                } else {
                  var iMonth = p.nodeindex - 23,
                    iYear = 2015;
                }
                var nDays = daysInMonth(iMonth, iYear);
                zingchart.exec('interactive', 'setdata', {
                  data: level2(p, nDays)
                });
                $('#info1').html('You are now viewing data for ' + p.scaletext + '.');
                setTimeout(function() {
                  $("#list1").fadeOut(400, function() {
                    $("#list2").fadeIn(400, function() {
                      // Animation complete.
                    });
                    oSavedChart2 = zingchart.exec('interactive', 'getdata');
                  });
                }, 200);
                bAction1_1 = 0, bAction1_2 = 0;
              }
              if (bAction2_1 && bAction2_2) {
                var aChartValues = zingchart.exec('interactive', 'getseriesvalues');
                $('#action2-3').removeClass('fa-circle-o');
                $('#action2-3').addClass('fa-check-circle-o ').next().replaceWith("<strike>Now, select a product's bar.</strike>");
                zingchart.exec('interactive', 'setdata', {
                  data: level3(p, aChartValues)
                });
                setTimeout(function() {
                  $("#list2").fadeOut(400, function() {
                    $("#list3").fadeIn(400, function() {
                      // Animation complete.
                    });
                    oSavedChart3 = zingchart.exec('interactive', 'getdata');
                  });
                }, 200);
                bAction2_1 = 0, bAction2_2 = 0;
              }
              if (bAction3_1) {
                $('#action3-2').removeClass('fa-circle-o');
                $('#action3-2').addClass('fa-check-circle-o ').next().replaceWith('<strike>Now, click on a transaction to see sales by location.</strike>');
                zingchart.exec('interactive', 'setdata', {
                  data: level4()
                });
                setTimeout(function() {
                  $("#list3").fadeOut(400, function() {
                    $("#list4").fadeIn(400, function() {});
                  });
                }, 200);
                $('#list2').css('display', 'none');
                //LonLats for rando cities across the US
                var aLonLat = [
                  [-118.385450, 34.053300],
                  [-117.878705, 33.820872],
                  [-117.164594, 32.748663],
                  [-122.272206, 37.809039],
                  [-121.503163, 38.586083],
                  [-119.767324, 36.742530],
                  [-115.131093, 36.177030],
                  [-122.673207, 45.532628],
                  [-122.321645, 47.587005],
                  [-116.213246, 43.623464],
                  [-112.071401, 33.453573],
                  [-106.600209, 35.123630],
                  [-95.350209, 29.768327],
                  [-97.745229, 30.267741],
                  [-90.823842, 29.792165],
                  [-90.065786, 29.954117],
                  [-81.364614, 28.516140],
                  [-82.457753, 27.945053],
                  [-80.189077, 25.769364],
                  [-78.892690, 33.705278],
                  [-80.848256, 35.226902],
                  [-78.640004, 35.781405],
                  [-76.288930, 36.834913],
                  [-77.431508, 37.539474],
                  [-77.036000, 38.911673],
                  [-75.157338, 39.963768],
                  [-73.876058, 40.748623],
                  [-72.684041, 41.760365],
                  [-71.167928, 42.367994],
                  [-71.409627, 41.829986],
                  [-77.605916, 43.142394],
                  [-83.011190, 39.953241],
                  [-86.526815, 39.157021],
                  [-94.590779, 39.122936],
                  [-97.337361, 37.685247],
                  [-97.513143, 35.462139],
                  [-95.991536, 36.157074],
                  [-92.278157, 34.743094],
                  [-90.190755, 32.297944],
                  [-86.806966, 33.533740],
                  [-84.488851, 33.771514],
                  [-84.286977, 33.900414],
                  [-86.791860, 36.149312],
                  [-85.737172, 38.257931],
                  [-81.639272, 38.350610],
                  [-157.858382, 21.302330]
                ];
                var aXY = [];
                for (var n = 0; n < aLonLat.length; n++) {
                  aXY.push(zingchart.maps.getXY("map", aLonLat[n]));
                }
                var aShapes = [];
                for (var n = 0; n < aXY.length; n++) {
                  var sBg, iColorVal = Math.floor(Math.random() * (5 - 1)) + 1;
                  switch (iColorVal) {
                    case 1:
                      sBg = "#FFDBDB";
                      break;
                    case 2:
                      sBg = "#FFB8B8";
                      break;
                    case 3:
                      sBg = "#D95D5D";
                      break;
                    case 4:
                      sBg = "#B53333";
                      break;
                  }
                  var oShape = {
                    "type": "circle",
                    "size": 3,
                    "cls": "marker",
                    "border-width": 1,
                    "border-color": "black",
                    "background-color": sBg,
                    "x": aXY[n][0],
                    "y": aXY[n][1]
                  }
                  aShapes.push(oShape);
                }
                //Draw shapes
                setTimeout(function() {
                  zingchart.exec('interactive', 'addobject', {
                    type: "shape",
                    data: aShapes
                  });
                }, 1000);
              }
            },
            zoom: function(p) {
              if (p.scroll || p.preview) {
                $('#action2-1').removeClass('fa-circle-o');
                $('#action2-1').addClass('fa-check-circle-o ').next().replaceWith('<strike>Drag the scroll bar or preview handles.</strike>');
                bAction2_1 = 1;
                checkComplete2();
              } else {
                $('#action2-2').removeClass('fa-circle-o');
                $('#action2-2').addClass('fa-check-circle-o ').next().replaceWith('<strike>Click and drag to zoom, or use the zoom controls.</strike>');
                bAction2_2 = 1;
                checkComplete2();
              }
            },
            guide_mousemove: function(p) {
              $('#action3-1').removeClass('fa-circle-o');
              $('#action3-1').addClass('fa-check-circle-o').next().replaceWith('<strike>Hover over a chart to see the shared crosshair of the other chart.</strike>');
              $('#prompt3-2').css('display', 'initial');
              bAction3_1 = 1;
            }
          }
        });
    
        function checkComplete() {
          if (bAction1_1 && bAction1_2) {
            $('#prompt1-3').css('display', 'initial');
          }
        };
    
        function checkComplete2() {
          if (bAction2_1 && bAction2_2) {
            $('#prompt2-3').css('display', 'initial');
          }
        };
    
        function checkComplete3() {
          if (bAction3_1) {
            $('#prompt3-2').css('display', 'initial');
          }
        };
    
        function resetAll() {
          //Reset progress flag
          bAction1_1 = 0, bAction1_2 = 0, bAction2_1 = 0, bAction2_2 = 0, bAction3_1 = 0;
          //Reset ticks and prompts
          $('[id^=action]').attr('class', 'fa fa-circle-o');
          $('[id^=prompt]').css('display', 'none');
          $('#action1-1').next().replaceWith('<span>Hover over a bar to see the tooltip.</span>');
          $('#action1-2').next().replaceWith('<span>Click on a legend item to toggle products.</span>');
          $('#action1-3').next().replaceWith('<span>Now, click on a bar segment.</span>');
          $('#action2-1').next().replaceWith('<span>Drag the scroll bar or preview handles.</span>');
          $('#action2-2').next().replaceWith('<span>Click and drag to zoom, or use the zoom controls.</span>');
          $('#action2-3').next().replaceWith("<span>Now, select a product's bar.</span>");
          $('#action3-1').next().replaceWith('<span>Hover over a chart to see the shared crosshair of the other chart.</span>');
          $('#action3-2').next().replaceWith('<span>Now, click on a transaction to see sales by location.</span>');
          //Remove markers
          setTimeout(function() {
            zingchart.exec('interactive', 'removeobject', {
              cls: 'marker'
            });
          }, 2000);
        };
        $('#restartBtn').click(function() {
          resetAll();
          zingchart.exec('interactive', 'setdata', {
            data: oChart
          });
          zingchart.exec('interactive', 'removeobject', {
            cls: 'marker'
          });
          setTimeout(function() {
            $("#list4").fadeOut(400, function() {
              $("#list1").fadeIn(400, function() {});
            });
          }, 200);
        });
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
      <style>
        #interactive {
          margin-bottom: 10px;
        }
    
        .hidden-prompt {
          display: none;
        }
    
        .fa-circle-o {
          color: #c30;
        }
    
        .fa-check-circle-o {
          color: #7ca82b;
        }
    
        [id^=list] {
          background-color: #F4F4F4;
          border-radius: 4px;
          padding: 10px;
          height: 110px;
        }
    
        #list2 {
          display: none;
        }
    
        #list3 {
          display: none;
        }
    
        #list4 {
          display: none;
        }
    
        #interactive-graph-id0-objects-top circle {
          animation: fadein 2s;
          -moz-animation: fadein 2s;
          /* Firefox */
          -webkit-animation: fadein 2s;
          /* Safari and Chrome */
          -o-animation: fadein 2s;
          /* Opera */
        }
    
        @keyframes fadein {
          from {
            opacity: 0;
          }
          to {
            opacity: 1;
          }
        }
    
        @-moz-keyframes fadein {
          /* Firefox */
          from {
            opacity: 0;
          }
          to {
            opacity: 1;
          }
        }
    
        @-webkit-keyframes fadein {
          /* Safari and Chrome */
          from {
            opacity: 0;
          }
          to {
            opacity: 1;
          }
        }
    
        @-o-keyframes fadein {
          /* Opera */
          from {
            opacity: 0;
          }
          to {
            opacity: 1;
          }
        }
    
        [id^=interactive-graph-id0-shape-noanim] {
          animation: none !important;
          -moz-animation: none !important;
          /* Firefox */
          -webkit-animation: none !important;
          /* Safari and Chrome */
          -o-animation: none !important;
          /* Opera */
        }
    
        [id^=list] {
          transition: height 2s;
          -moz-transition: height 2s;
          /* Firefox 4 */
          -webkit-transition: height 2s;
          /* Safari and Chrome */
          -o-transition: height 2s;
          /* Opera */
        }
    
        body {
          text-align: center;
          font-family: Helvetica, Arial, sans-serif;
        }
      </style>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    
    <body>
      <div id='interactive'></div>
      <div style="min-height:430px;">
        <div id="interactive" class="chart-placeholder"></div>
        <div class="centered" id="list1">
          <div>
            <div><i class="fa fa-circle-o" id="action1-1"></i> <span>Hover over a bar to see the tooltip.</span></div>
            <div><i class="fa fa-circle-o" id="action1-2"></i> <span>Click on a legend item to toggle products.</span></div>
            <div class="hidden-prompt" id="prompt1-3"><i class="fa fa-circle-o" id="action1-3"></i> <span>Now, click on a bar segment.</span></div>
          </div>
        </div>
        <div id="list2">
          <div class="centered">
            <div id="info1"></div>
            <div><i class="fa fa-circle-o" id="action2-2"></i> <span>Click and drag to zoom, or use the zoom controls.</span></div>
            <div><i class="fa fa-circle-o" id="action2-1"></i> <span>Drag the scroll bar or preview handles.</span></div>
            <div class="hidden-prompt" id="prompt2-3"><i class="fa fa-circle-o" id="action2-3"></i> <span>Now, select a product's bar.</span></div>
          </div>
        </div>
        <div id="list3">
          <div class="centered">
            <div>This chart is showing a single product in two charts: one by revenue, one by number of transactions.
              <br/><i class="fa fa-circle-o" id="action3-1"></i> <span>Hover over a chart to see the shared crosshair of the other chart.</span></div>
            <div class="hidden-prompt" id="prompt3-2"><i class="fa fa-circle-o" id="action3-2"></i> <span>Now, click on a transaction to see sales by location.</span></div>
          </div>
        </div>
        <div id="list4">Thanks for taking a look at some of the interactive features ZingChart has to offer! <a href="#" id="restartBtn">Start over?</a></div>
      </div>
      </div>
    </body>
    
    </html>
    
          
    var oSavedChart2, oSavedChart3;
    var aLabels = [];
    var aBurgers = [396913, 389658.5, 372542.5, 416993.5, 415475.5, 491029, 380748.5, 432591.5, 408606, 496556.5, 439395, 421448.5, 472752.5, 390659.5, 481052, 368043.5, 388685, 421888.5, 335830, 404629.5, 430138.5, 380231.5, 476338.5, 445164.5, 400559.5, 381755, 361256.5, 336495.5, 417202.5, 417472, 421107.5, 345471.5, 420084.5, 403199.5, 349200.5, 430419];
    var aFries = [131305.5, 120313.5, 96967.5, 104880, 113172, 112639.5, 121602, 121084.5, 108736.5, 105789, 117139.5, 117682.5, 141787.5, 104947.5, 99141, 115342.5, 114259.5, 117624, 119613, 116079, 125955, 119406, 118629, 107458.5, 104362.5, 101518.5, 104380.5, 113367, 122548.5, 112105.5, 108640.5, 119797.5, 112216.5, 98821.5, 108972, 110578.5];
    var aShakes = [189745, 209532.5, 198027.5, 197210, 193497.5, 185797.5, 194602.5, 183852.5, 158705, 195552.5, 185767.5, 183040, 178495, 212522.5, 204565, 183115, 202615, 191275, 189595, 200705, 194557.5, 200637.5, 182547.5, 211557.5, 162640, 199110, 185422.5, 210700, 191800, 171335, 182220, 168185, 194437.5, 207652.5, 188045, 194057.5];
    var oDefaults = {
      "root": {
        "gui": {
          "context-menu": {
            "button": {
              "visible": false
            },
            "gear": {
              "visible": false
            }
          }
        }
      },
      "graph": {
        "tooltip": {
          "shadow": 0,
          "border-radius": 3
        },
        "crosshair-x": {
          "line-color": "white",
          "plot-label": {
            "border-radius": 3
          },
          "scale-label": {
            "visible": 0
          }
        },
        "background-color": "none",
        "border-color": "#eee",
        "border-radius": 3,
        "border-width": 1,
        "scale-x": {
          "guide": {
            "visible": 0
          },
          "alpha": 0.5,
          "line-color": "#5E5C5B",
          "item": {
            "color": "#5E5C5B"
          },
          "tick": {
            "line-color": "#5E5C5B",
            "alpha": 0.8
          },
          "items-overlap": true
        },
        "scale-y": {
          "guide": {
            "line-width": 1,
            "-line-style": "dashed"
          },
          "line-color": "none",
          "item": {
            "color": "#5E5C5B"
          },
          "tick": {
            "visible": false
          }
        },
        "legend": {
          "marker": {
            "type": "circle"
          },
          "layout": "h",
          "background-color": "none",
          "border-color": "none",
          "shadow": {
            "visible": 0
          },
          "marker": {
            "border-color": "white"
          },
          "item": {
            "color": "#5E5C5B"
          },
          "y": "8.5%"
        },
        "title": {
          "color": "#5E5C5B",
          "background-color": "none",
          "height": 24,
          "text-align": "left",
          "font-weight": "none"
        }
      }
    };
    var oChart = {
      "type": "bar",
      "utc": 1,
      "plot": {
        "stacked": 1,
        "tooltip": {
          "text": "%kt<br>%t: $%v",
          "decimals": 2,
          "thousands-separator": ","
        },
        "-animation": {
          "delay": 10,
          "effect": "1",
          "speed": "200",
          "method": "0",
          "sequence": "0",
          "attributes": {
    
          }
        }
      },
      "plotarea": {
        "margin-left": 70
      },
      "title": {
        "text": "Revenue by Month"
      },
      "legend": {
        "toggle-action": "remove"
      },
      "scale-y": {
        "format": "$%v",
        "thousands-separator": ","
      },
      "scale-x": {
        "values": ["Jan 2013", "Feb 2013", "Mar 2013", "Apr 2013", "May 2013", "Jun 2013", "Jul 2013", "Aug 2013", "Sep 2013", "Oct 2013", "Nov 2013", "Dec 2013", "Jan 2014", "Feb 2014", "Mar 2014", "Apr 2014", "May 2014", "Jun 2014", "Jul 2014", "Aug 2014", "Sep 2014", "Oct 2014", "Nov 2014", "Dec 2014", "Jan 2015", "Feb 2015", "Mar 2015", "Apr 2015", "May 2015", "Jun 2015", "Jul 2015", "Aug 2015", "Sep 2015", "Oct 2015", "Nov 2015", "Dec 2015"]
      },
      "series": [{
        "values": aBurgers,
        "text": "Burgers"
      }, {
        "values": aFries,
        "text": "Fries"
      }, {
        "values": aShakes,
        "text": "Shakes"
      }]
    };
    
    function level2(p, nDays) {
      var aBurgers = [],
        aFries = [],
        aShakes = [];
      aLabels = [];
      for (var n = 0; n < nDays; n++) {
        aBurgers.push((Math.random() * (500000 - 300000) + 300000) / nDays);
        aFries.push((Math.random() * (150000 - 100000) + 100000) / nDays);
        aShakes.push((Math.random() * (220000 - 160000) + 160000) / nDays);
        aLabels.push(p.scaletext.slice(0, 3) + " " + (n + 1) + ",<br>" + p.scaletext.slice(4, 8));
      }
      var oLevel2 = {
        "type": "bar",
        "plot": {
          "tooltip": {
            "text": "%t: $%v",
            "decimals": 2,
            "thousands-separator": ","
          }
        },
        "plotarea": {
          "margin-left": 70,
          "margin-bottom": 128
        },
        "title": {
          "text": "Revenue by Product by Day"
        },
        "legend": {
          "layout": "h"
        },
        "shapes": [{
            "type": "rectangle",
            "id": "up1",
            "z-index": 99,
            "width": 70,
            "height": 20,
            "border-width": 1,
            "border-color": "#5E5C5B",
            "border-radius": 8,
            "background-color": "white",
            "x": "90%",
            "y": 15,
            "cursor": "hand",
            "shadow": 1,
            "label": {
              "text": "Up A Level",
              "color": "#5E5C5B"
            }
          }, {
            "type": "rectangle",
            "id": "zoomout",
            "width": 40,
            "height": 20,
            "border-width": 1,
            "border-color": "#999",
            "border-radius-top-left": 8,
            "border-radius-bottom-left": 8,
            "background-color": "white",
            "x": "2.5%",
            "y": "10%",
            "cursor": "hand",
            "shadow": 1,
            "label": {
              "text": "-"
            }
          },
          {
            "type": "rectangle",
            "id": "zoomin",
            "width": 40,
            "height": 20,
            "border-width": 1,
            "border-color": "#999",
            "border-radius-top-right": 8,
            "border-radius-bottom-right": 8,
            "background-color": "white",
            "x": "6%",
            "y": "10%",
            "cursor": "hand",
            "shadow": 1,
            "label": {
              "text": "+"
            }
          }
        ],
        "scale-y": {
          "format": "$%v",
          "thousands-separator": ",",
          "max-value": 20000
        },
        "scale-x": {
          "values": aLabels,
          "zooming": 1
        },
        "scroll-x": {},
        "preview": {
          "margin-left": 70
        },
        "series": [{
          "values": aBurgers,
          "text": "Burgers"
        }, {
          "values": aFries,
          "text": "Fries"
        }, {
          "values": aShakes,
          "text": "Shakes"
        }]
      }
      return oLevel2;
    };
    
    function level3(p, aChartValues) {
      var aLabelsNew = [];
      for (var n = 0; n < aLabels.length; n++) {
        aLabelsNew.push(aLabels[n].replace(/(<br>)/, ' '));
      }
      var aSeries = [],
        aSeries2 = [],
        aChartValues2 = [],
        title = null;
      if (p.plotindex == 0) {
        title = "Burgers";
        aSeries = [{
          "values": aChartValues[0],
          "text": "Burgers"
        }];
        for (var n = 0; n < aChartValues[0].length; n++) {
          aChartValues2.push(Math.floor(aChartValues[0][n] / 5.5));
        }
        aSeries2 = [{
          "values": aChartValues2,
          "text": "Burgers"
        }];
      } else if (p.plotindex == 1) {
        title = "Fries";
        aSeries = [{
          "values": aChartValues[1],
          "text": "Fries",
          "palette": 1
        }];
        for (var n = 0; n < aChartValues[1].length; n++) {
          aChartValues2.push(Math.floor(aChartValues[1][n] / 1.5));
        }
        aSeries2 = [{
          "values": aChartValues2,
          "text": "Fries",
          "palette": 1
        }];
      } else {
        title = "Shakes";
        aSeries = [{
          "values": aChartValues[2],
          "text": "Shakes",
          "palette": 2
        }];
        for (var n = 0; n < aChartValues[2].length; n++) {
          aChartValues2.push(Math.floor(aChartValues[2][n] / 2.5));
        }
        aSeries2 = [{
          "values": aChartValues2,
          "text": "Shakes",
          "palette": 2
        }];
      }
    
      var oLevel3 = {
        "graphset": [{
          "type": "bar",
          "plot": {
            "tooltip": {
              "text": "%t: $%v",
              "decimals": 2,
              "thousands-separator": ",",
              "visible": 0
            }
          },
          "shapes": [{
            "type": "rectangle",
            "id": "up2",
            "z-index": 99,
            "width": 70,
            "height": 20,
            "border-width": 1,
            "border-color": "#5E5C5B",
            "border-radius": 8,
            "background-color": "white",
            "x": "90%",
            "y": 15,
            "cursor": "hand",
            "shadow": 1,
            "label": {
              "text": "Up A Level",
              "color": "#5E5C5B"
            }
          }],
          "plotarea": {
            "margin-bottom": "20%",
            "margin-top": "28%"
          },
          "title": {
            "text": "Revenue From " + title,
          },
          "legend": {
            "shared": 1,
            "y": "11%"
          },
          "scale-x": {
            "labels": aLabelsNew
          },
          "scale-y": {
            "format": "$%v"
          },
          "crosshair-x": {
            "shared": 1,
            "plot-label": {
              "text": "$%v",
              "thousands-separator": ",",
              "decimals": 2
            }
          },
          "series": aSeries
        }, {
          "type": "bar",
          "plot": {
            "tooltip": {
              "visible": 0
            }
          },
          "title": {
            "text": "Number of Transactions by Date Nationwide"
          },
          "plotarea": {
            "margin-bottom": "20%",
            "margin-top": "22%"
          },
          "legend": {
            "shared": 1,
            "visible": 0
          },
          "scale-x": {
            "labels": aLabelsNew
          },
          "crosshair-x": {
            "shared": 1,
            "plot-label": {
              "text": "%v %t Sold",
              "thousands-separator": ","
            }
          },
          "series": aSeries2
        }]
      };
      return oLevel3;
    };
    
    function level4() {
      var oLevel4 = {
        "title": {
          "text": "Big Kahuna Burger Sales by Location"
        },
        "plotarea": {
          "margin-top": "20%"
        },
        "background-color": "#E7EFF1",
        "shapes": [
          /*{
                         "type":"rectangle",
                         "id":"up3",
                         "z-index":99,
                         "width":70,
                         "height":20,
                         "border-width":1,
                         "border-color":"#666",
                         "border-radius":8,
                         "background-color":"#397CF8 #5F97FB",
                         "x":"90%",
                         "y":2,
                         "cursor":"hand",
                         "shadow":1,
                         "label":{
                             "text":"Up A Level",
                             "color":"white"
                         }
                     },*/
          {
            "type": "circle",
            "id": "noanim1",
            "size": 5,
            "label": {
              "text": "Low",
              "width": 30,
              "offset-x": 24,
              "text-align": "left",
              "color": "#5E5C5B"
            },
            "background-color": "#FFDBDB",
            "border-color": "black",
            "border-width": 1,
            "x": "2%",
            "y": 40
          },
          {
            "type": "circle",
            "id": "noanim2",
            "size": 5,
            "label": {
              "text": "Medium",
              "width": 30,
              "offset-x": 24,
              "text-align": "left",
              "color": "#5E5C5B"
            },
            "background-color": "#FFB8B8",
            "border-color": "black",
            "border-width": 1,
            "x": "2%",
            "y": 60
          },
          {
            "type": "circle",
            "id": "noanim3",
            "size": 5,
            "label": {
              "text": "High",
              "width": 30,
              "offset-x": 24,
              "text-align": "left",
              "color": "#5E5C5B"
            },
            "background-color": "#D95D5D",
            "border-color": "black",
            "border-width": 1,
            "x": "2%",
            "y": 80
          },
          {
            "type": "circle",
            "id": "noanim4",
            "size": 5,
            "label": {
              "text": "Very High",
              "width": 30,
              "color": "#5E5C5B",
              "offset-x": 24,
              "text-align": "left"
            },
            "background-color": "#B53333",
            "border-color": "black",
            "border-width": 1,
            "x": "2%",
            "y": 100
          },
          {
            "type": "zingchart.maps",
            "options": {
              "id": "map",
              "name": "usa",
              "scale": true,
              "y": 14,
              "style": {
                "background-color": "rgb(203,224,168)",
                "shadow": 0,
                "label": {
                  "visible": 0
                },
                "hover-state": {
                  "background-color": "#A3BE74"
                },
                "tooltip": {
                  "visible": 0
                }
              }
            }
          }
        ]
      };
      return oLevel4;
    };
    
    function daysInMonth(month, year) {
      return new Date(year, month, 0).getDate();
    }
    var bZoomBuff = 0,
      bAction1_1 = 0,
      bAction1_2 = 0,
      bAction2_1 = 0,
      bAction2_2 = 0,
      bAction3_1 = 0;
    zingchart.MODULESDIR = "http://cdn.zingchart.io/lib/zingchart/modules/";
    zingchart.loadModules('maps,maps-usa');
    zingchart.render({
      id: 'interactive',
      width: '100%',
      height: 320,
      data: oChart,
      defaults: oDefaults,
      theme: "light",
      events: {
        shape_click: function(p) {
          switch (p.shapeid) {
            case "zoomin":
              zingchart.exec('interactive', 'zoomin');
              break;
            case "zoomout":
              zingchart.exec('interactive', 'zoomout');
              break;
            case "up1":
              //Reset Flags
              resetAll();
              //Back to level 1
              zingchart.exec('interactive', 'setdata', {
                data: oChart
              });
              //Fade 2 to 1
              setTimeout(function() {
                $("#list2").fadeOut(400, function() {
                  $("#list1").fadeIn(400, function() {});
                });
              }, 200);
              break;
            case "up2":
              //reset flags
              resetAll();
              //back to level 2
              zingchart.exec('interactive', 'setdata', {
                data: oSavedChart2
              });
              //fade 3 to 2
              setTimeout(function() {
                $("#list3").fadeOut(400, function() {
                  $("#list2").fadeIn(400, function() {});
                });
              }, 200);
              break;
            case "up3":
              //flags
              resetAll();
              //back to level 3
              zingchart.exec('interactive', 'setdata', {
                data: oSavedChart3
              });
              //list 4 to 3
              setTimeout(function() {
                $("#list4").fadeOut(400, function() {
                  $("#list3").fadeIn(400, function() {});
                });
              }, 200);
              setTimeout(function() {
                zingchart.exec('interactive', 'removeobject', {
                  cls: 'marker'
                });
              }, 3000);
              break;
          }
        },
        node_mouseover: function(p) {
          $('#action1-1').removeClass('fa-circle-o');
          $('#action1-1').addClass('fa-check-circle-o ').next().replaceWith('<strike>Hover over a bar to see the tooltip.</strike>');
          bAction1_1 = 1;
          checkComplete();
        },
        legend_item_click: function(p) {
          $('#action1-2').removeClass('fa-circle-o');
          $('#action1-2').addClass('fa-check-circle-o ').next().replaceWith('<strike>Click on a legend item to toggle products.</strike>');
          bAction1_2 = 1;
          checkComplete();
        },
        legend_marker_click: function(p) {
          $('#action1-2').removeClass('fa-circle-o');
          $('#action1-2').addClass('fa-check-circle-o ').next().replaceWith('<strike>Click on a legend item to toggle products.</strike>');
          bAction1_2 = 1;
          checkComplete();
        },
        node_click: function(p) {
          if (bAction1_1 && bAction1_2) {
            $('#action1-3').removeClass('fa-circle-o');
            $('#action1-3').addClass('fa-check-circle-o ').next().replaceWith('<strike>Now, click on a bar segment.</strike>');
            var aIndexValues = [];
            for (var n = 0; n < 3; n++) {
              var iVal;
              iVal = zingchart.exec('interactive', 'getnodevalue', {
                plotindex: n,
                nodeindex: p.nodeindex
              });
              aIndexValues.push(iVal);
            }
            if (p.nodeindex < 12) {
              var iMonth = p.nodeindex + 1,
                iYear = 2013;
            } else if (p.nodeindex >= 12 && p.nodeindex < 24) {
              var iMonth = p.nodeindex - 11,
                iYear = 2014;
            } else {
              var iMonth = p.nodeindex - 23,
                iYear = 2015;
            }
            var nDays = daysInMonth(iMonth, iYear);
            zingchart.exec('interactive', 'setdata', {
              data: level2(p, nDays)
            });
            $('#info1').html('You are now viewing data for ' + p.scaletext + '.');
            setTimeout(function() {
              $("#list1").fadeOut(400, function() {
                $("#list2").fadeIn(400, function() {
                  // Animation complete.
                });
                oSavedChart2 = zingchart.exec('interactive', 'getdata');
              });
            }, 200);
            bAction1_1 = 0, bAction1_2 = 0;
          }
          if (bAction2_1 && bAction2_2) {
            var aChartValues = zingchart.exec('interactive', 'getseriesvalues');
            $('#action2-3').removeClass('fa-circle-o');
            $('#action2-3').addClass('fa-check-circle-o ').next().replaceWith("<strike>Now, select a product's bar.</strike>");
            zingchart.exec('interactive', 'setdata', {
              data: level3(p, aChartValues)
            });
            setTimeout(function() {
              $("#list2").fadeOut(400, function() {
                $("#list3").fadeIn(400, function() {
                  // Animation complete.
                });
                oSavedChart3 = zingchart.exec('interactive', 'getdata');
              });
            }, 200);
            bAction2_1 = 0, bAction2_2 = 0;
          }
          if (bAction3_1) {
            $('#action3-2').removeClass('fa-circle-o');
            $('#action3-2').addClass('fa-check-circle-o ').next().replaceWith('<strike>Now, click on a transaction to see sales by location.</strike>');
            zingchart.exec('interactive', 'setdata', {
              data: level4()
            });
            setTimeout(function() {
              $("#list3").fadeOut(400, function() {
                $("#list4").fadeIn(400, function() {});
              });
            }, 200);
            $('#list2').css('display', 'none');
            //LonLats for rando cities across the US
            var aLonLat = [
              [-118.385450, 34.053300],
              [-117.878705, 33.820872],
              [-117.164594, 32.748663],
              [-122.272206, 37.809039],
              [-121.503163, 38.586083],
              [-119.767324, 36.742530],
              [-115.131093, 36.177030],
              [-122.673207, 45.532628],
              [-122.321645, 47.587005],
              [-116.213246, 43.623464],
              [-112.071401, 33.453573],
              [-106.600209, 35.123630],
              [-95.350209, 29.768327],
              [-97.745229, 30.267741],
              [-90.823842, 29.792165],
              [-90.065786, 29.954117],
              [-81.364614, 28.516140],
              [-82.457753, 27.945053],
              [-80.189077, 25.769364],
              [-78.892690, 33.705278],
              [-80.848256, 35.226902],
              [-78.640004, 35.781405],
              [-76.288930, 36.834913],
              [-77.431508, 37.539474],
              [-77.036000, 38.911673],
              [-75.157338, 39.963768],
              [-73.876058, 40.748623],
              [-72.684041, 41.760365],
              [-71.167928, 42.367994],
              [-71.409627, 41.829986],
              [-77.605916, 43.142394],
              [-83.011190, 39.953241],
              [-86.526815, 39.157021],
              [-94.590779, 39.122936],
              [-97.337361, 37.685247],
              [-97.513143, 35.462139],
              [-95.991536, 36.157074],
              [-92.278157, 34.743094],
              [-90.190755, 32.297944],
              [-86.806966, 33.533740],
              [-84.488851, 33.771514],
              [-84.286977, 33.900414],
              [-86.791860, 36.149312],
              [-85.737172, 38.257931],
              [-81.639272, 38.350610],
              [-157.858382, 21.302330]
            ];
            var aXY = [];
            for (var n = 0; n < aLonLat.length; n++) {
              aXY.push(zingchart.maps.getXY("map", aLonLat[n]));
            }
            var aShapes = [];
            for (var n = 0; n < aXY.length; n++) {
              var sBg, iColorVal = Math.floor(Math.random() * (5 - 1)) + 1;
              switch (iColorVal) {
                case 1:
                  sBg = "#FFDBDB";
                  break;
                case 2:
                  sBg = "#FFB8B8";
                  break;
                case 3:
                  sBg = "#D95D5D";
                  break;
                case 4:
                  sBg = "#B53333";
                  break;
              }
              var oShape = {
                "type": "circle",
                "size": 3,
                "cls": "marker",
                "border-width": 1,
                "border-color": "black",
                "background-color": sBg,
                "x": aXY[n][0],
                "y": aXY[n][1]
              }
              aShapes.push(oShape);
            }
            //Draw shapes
            setTimeout(function() {
              zingchart.exec('interactive', 'addobject', {
                type: "shape",
                data: aShapes
              });
            }, 1000);
          }
        },
        zoom: function(p) {
          if (p.scroll || p.preview) {
            $('#action2-1').removeClass('fa-circle-o');
            $('#action2-1').addClass('fa-check-circle-o ').next().replaceWith('<strike>Drag the scroll bar or preview handles.</strike>');
            bAction2_1 = 1;
            checkComplete2();
          } else {
            $('#action2-2').removeClass('fa-circle-o');
            $('#action2-2').addClass('fa-check-circle-o ').next().replaceWith('<strike>Click and drag to zoom, or use the zoom controls.</strike>');
            bAction2_2 = 1;
            checkComplete2();
          }
        },
        guide_mousemove: function(p) {
          $('#action3-1').removeClass('fa-circle-o');
          $('#action3-1').addClass('fa-check-circle-o').next().replaceWith('<strike>Hover over a chart to see the shared crosshair of the other chart.</strike>');
          $('#prompt3-2').css('display', 'initial');
          bAction3_1 = 1;
        }
      }
    });
    
    function checkComplete() {
      if (bAction1_1 && bAction1_2) {
        $('#prompt1-3').css('display', 'initial');
      }
    };
    
    function checkComplete2() {
      if (bAction2_1 && bAction2_2) {
        $('#prompt2-3').css('display', 'initial');
      }
    };
    
    function checkComplete3() {
      if (bAction3_1) {
        $('#prompt3-2').css('display', 'initial');
      }
    };
    
    function resetAll() {
      //Reset progress flag
      bAction1_1 = 0, bAction1_2 = 0, bAction2_1 = 0, bAction2_2 = 0, bAction3_1 = 0;
      //Reset ticks and prompts
      $('[id^=action]').attr('class', 'fa fa-circle-o');
      $('[id^=prompt]').css('display', 'none');
      $('#action1-1').next().replaceWith('<span>Hover over a bar to see the tooltip.</span>');
      $('#action1-2').next().replaceWith('<span>Click on a legend item to toggle products.</span>');
      $('#action1-3').next().replaceWith('<span>Now, click on a bar segment.</span>');
      $('#action2-1').next().replaceWith('<span>Drag the scroll bar or preview handles.</span>');
      $('#action2-2').next().replaceWith('<span>Click and drag to zoom, or use the zoom controls.</span>');
      $('#action2-3').next().replaceWith("<span>Now, select a product's bar.</span>");
      $('#action3-1').next().replaceWith('<span>Hover over a chart to see the shared crosshair of the other chart.</span>');
      $('#action3-2').next().replaceWith('<span>Now, click on a transaction to see sales by location.</span>');
      //Remove markers
      setTimeout(function() {
        zingchart.exec('interactive', 'removeobject', {
          cls: 'marker'
        });
      }, 2000);
    };
    $('#restartBtn').click(function() {
      resetAll();
      zingchart.exec('interactive', 'setdata', {
        data: oChart
      });
      zingchart.exec('interactive', 'removeobject', {
        cls: 'marker'
      });
      setTimeout(function() {
        $("#list4").fadeOut(400, function() {
          $("#list1").fadeIn(400, function() {});
        });
      }, 200);
    });