• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <script src="https://cdn.rawgit.com/HubSpot/tether/master/dist/js/tether.min.js"></script>
      <script src="https://cdn.rawgit.com/HubSpot/shepherd/master/dist/js/shepherd.min.js"></script>
      <link href="https://cdn.rawgit.com/HubSpot/shepherd/master/dist/css/shepherd-theme-arrows.css" rel="stylesheet">
      <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet">
      <link href='https://fonts.googleapis.com/css?family=Roboto:300,700' rel='stylesheet' type='text/css'>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style>
        body {
          background: #FFF;
          height: 100%;
          width: 100%;
        }
    
        #wrapper {
          margin-top: 40px;
        }
    
        .shepherd-step {
          font-family: 'Roboto';
        }
    
        .shepherd-step a {
          color: #00BAF0;
          text-decoration: none;
        }
    
        .shepherd-text p {
          margin-right: 0;
          max-width: 400px;
        }
    
        .shepherd-text strong {
          font-weight: bold;
        }
    
        h1 {
          font-family: 'Roboto', Helvetica, Arial, sans-serif;
          margin-bottom: 40px;
          margin-left: 40px;
        }
    
        #controls {
          border-right: 1px solid #D9D9D9;
          float: left;
          font-family: 'Roboto';
          font-size: 18px;
          list-style-type: none;
          margin: 20px 30px 0 0;
        }
    
        #controls li {
          padding: 5px 20px 5px 0;
        }
    
        #controls li:not(.active):hover {
          color: #900;
        }
    
        #controls li:not(:first-of-type) {
          border-top: 0;
        }
    
        #controls .active {
          color: #F00;
          font-weight: bold;
        }
    
        [data-step] {
          cursor: pointer;
        }
    
        #myChart {
          float: left;
        }
    
        @media (max-width: 800px) {
          #controls {
            border-right: none;
            border-bottom: 1px solid #D9D9D9;
            display: inline-block;
            margin: 0px;
          }
          #controls li {
            padding: 5px 20px 5px 0;
            display: inline-block;
          }
          #myChart {
            width: 100%;
          }
        }
      </style>
    </head>
    
    <body>
      <div id="wrapper">
        <h1>A Tour of ZingChart</h1>
        <ul id="controls">
          <li data-step="title">Title</li>
          <li data-step="subtitle">Subtitle</li>
          <li data-step="scaleX">Scale X</li>
          <li data-step="scaleY">Scale Y</li>
          <li data-step="plotarea">Plot Area</li>
          <li data-step="nodes">Nodes</li>
          <li data-step="tooltips">Tooltips</li>
          <li data-step="valueboxes">Value Boxes</li>
          <li data-step="legend">Legend</li>
          <li data-step="source">Source</li>
        </ul>
        <div id='myChart'></div>
      </div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var myConfig = {
          "type": "line",
          "title": { //Chart Title
            "text": "Chart Title"
          },
          "subtitle": { //Chart Subtitle
            "text": "Chart Subtitle"
          },
          "scale-x": { //X-Axis
            "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
            "label": { //Scale Title
              "text": "X-Axis Scale Title",
              "font-size": 14,
              "offset-y": 15
            },
            "item": { //Scale Items (scale values or labels)
              "font-size": 10
            },
            "tick": { //Tick Marks
    
            },
            "guide": { //Guides
              "visible": true,
              "line-style": "solid", //"solid", "dotted", "dashed", "dashdot"
              "alpha": 1
            }
          },
          "scale-y": { //Y-Axis
            "values": "0:200:50",
            "label": { //Scale Title
              "text": "Y-Axis Scale Title",
              "font-size": 14,
              "offset-x": -10
            },
            "item": {
              "font-size": 10
            },
            "tick": { //Tick Marks
            },
            "guide": { //Guides
              "line-style": "solid", //"solid", "dotted", "dashed", "dashdot"
              "alpha": 1,
            }
          },
          "plot": { //Pertaining to Nodes
            "tooltip": { //Tooltips (hover labels -- an interactive alternative is crosshairs)
              "shadow": false
            },
            "value-box": { //Value Boxes (fixed labels)
              "shadow": false
            }
          },
          "legend": { //Legend
            "border-width": 2,
            "header": {
              "text": "Legend",
            },
            "item": {},
            "marker": {
              "type": "circle"
            }
          },
          "plotarea": {
            "margin-left": "13%",
            "margin-bottom": "18%",
          },
          "series": [{
              "values": [30, 34, 59, 31, 64, 65, 81, 85, 101, 75, 159, 164]
            },
            {
              "values": [64, 16, 29, 40, 35, 88, 49, 77, 121, 164, 112, 100]
            }
          ],
          "source": {
            "text": "Source: Data Source"
          }
        };
    
        zingchart.render({
          id: 'myChart',
          data: myConfig,
          height: 400,
          width: "100%"
        });
    
        var chartStates = {
          'title': {
            title: {
              color: '#F00',
              backgroundColor: '#FDD',
            }
          },
          'subtitle': {
            subtitle: {
              color: '#F00',
              backgroundColor: '#FDD'
            }
          },
          'scaleX': {
            scaleX: {
              lineWidth: 2,
              lineColor: '#F00',
              tick: {
                lineWidth: 2,
                lineColor: '#F00'
              },
              item: {
                color: '#F00'
              },
              label: {
                color: '#F00'
              },
              guide: {
                lineColor: '#F00'
              }
            }
          },
          'scaleY': {
            scaleY: {
              lineWidth: 2,
              lineColor: '#F00',
              tick: {
                lineWidth: 2,
                lineColor: '#F00'
              },
              item: {
                color: '#F00'
              },
              label: {
                color: '#F00'
              },
              guide: {
                lineColor: '#F00'
              }
            }
          },
          'plotarea': {
            plotarea: {
              backgroundColor: '#FDD'
            }
          },
          'nodes': {
            plot: {
              backgroundColor: '#F00',
              lineColor: '#F00',
              marker: {
                backgroundColor: '#F00'
              }
            }
          },
          'tooltips': {
            plot: {
              tooltip: {
                color: '#F00',
                backgroundColor: '#FDD',
              }
            }
          },
          'valueboxes': {
            plot: {
              valueBox: {
                color: '#F00',
                backgroundColor: '#FDD',
              }
            }
          },
          'legend': {
            legend: {
              header: {
                color: '#F00'
              },
              backgroundColor: '#FDD',
              borderColor: '#F00',
              item: {
                color: '#F00'
              }
            }
          },
          'source': {
            source: {
              backgroundColor: '#FDD',
              color: '#F00'
            }
          }
        }
    
        var tour = new Shepherd.Tour({
          defaults: {
            classes: 'shepherd-theme-arrows'
          }
        });
    
        // Title
        tour.addStep('title', {
          text: [
            '<strong>Title</strong>',
            'The title displays across the top of your chart. Learn more about how to customize and style it <a href="//www.zingchart.com/docs/basic-elements/custom-chart-titles/" target="_blank">here</a>.'
          ],
          attachTo: '#myChart-graph-id0-title bottom',
          buttons: [{
              text: 'Exit',
              classes: 'shepherd-button-secondary',
              action: tour.cancel
            },
            {
              text: 'Next',
              action: tour.next,
              classes: 'shepherd-button-example-primary'
            }
          ]
        });
    
        tour.addStep('subtitle', {
          text: [
            '<strong>Subtitle</strong>',
            'You can add a subtitle to display below the chart title. Learn more about it <a href="//www.zingchart.com/docs/basic-elements/custom-chart-titles/" target="_blank">here</a>.'
          ],
          attachTo: '#myChart-graph-id0-subtitle bottom',
          buttons: [{
              text: 'Back',
              classes: 'shepherd-button-secondary',
              action: tour.back
            },
            {
              text: 'Next',
              action: tour.next,
              classes: 'shepherd-button-example-primary'
            }
          ]
        });
    
        tour.addStep('scaleX', {
          text: [
            '<strong>Scale X</strong>',
            'This represents everything tied to the x-axis (scale line, title, items, tick marks, guides). Learn more about our scales <a href="//www.zingchart.com/docs/basic-elements/configure-chart-scales/" target="_blank">here</a>.'
          ],
          attachTo: '#myChart-graph-id0-scale-x-path right',
          buttons: [{
              text: 'Back',
              classes: 'shepherd-button-secondary',
              action: tour.back
            },
            {
              text: 'Next',
              action: tour.next,
              classes: 'shepherd-button-example-primary'
            }
          ]
        });
    
        tour.addStep('scaleY', {
          text: [
            '<strong>Scale Y</strong>',
            'This represents everything tied to the y-axis (scale line, title, items, tick marks, guides). Learn more about our scales <a href="//www.zingchart.com/docs/basic-elements/configure-chart-scales/" target="_blank">here</a>.'
          ],
          attachTo: '#myChart-graph-id0-scale-y-path bottom',
          buttons: [{
              text: 'Back',
              classes: 'shepherd-button-secondary',
              action: tour.back
            },
            {
              text: 'Next',
              action: tour.next,
              classes: 'shepherd-button-example-primary'
            }
          ]
        });
    
        tour.addStep('plotarea', {
          text: [
            '<strong>Plot Area</strong>',
            'This is the area where the data is plotted onto the chart. Learn more about the plot area <a href="//www.zingchart.com/docs/json-attributes-syntax/graph-objects/plotarea/" target="_blank">here</a>.'
          ],
          attachTo: '#myChart-graph-id0-plotarea right',
          buttons: [{
              text: 'Back',
              classes: 'shepherd-button-secondary',
              action: tour.back
            },
            {
              text: 'Next',
              action: tour.next,
              classes: 'shepherd-button-example-primary'
            }
          ]
        });
    
        tour.addStep('nodes', {
          text: [
            '<strong>Nodes</strong>',
            'The nodes represent your data. Each data set is called a series. Learn more about node styling <a href="//www.zingchart.com/docs/basic-elements/plot-series-styling/" target="_blank">here</a>.'
          ],
          attachTo: '#myChart-graph-id0-plotset-plot-0-path right',
          buttons: [{
              text: 'Back',
              classes: 'shepherd-button-secondary',
              action: tour.back
            },
            {
              text: 'Next',
              action: tour.next,
              classes: 'shepherd-button-example-primary'
            }
          ]
        });
    
        tour.addStep('tooltips', {
          text: [
            '<strong>Tooltips</strong>',
            'The tooltips are labels that appear when you hover over the nodes. Hover to see them, and learn more about them <a href="//www.zingchart.com/docs/basic-elements/tooltips/" target="_blank">here</a>.'
          ],
          attachTo: '#myChart-graph-id0-plotset-plot-0-path right',
          buttons: [{
              text: 'Back',
              classes: 'shepherd-button-secondary',
              action: tour.back
            },
            {
              text: 'Next',
              action: tour.next,
              classes: 'shepherd-button-example-primary'
            }
          ]
        });
    
        tour.addStep('valueboxes', {
          text: [
            '<strong>Value Boxes</strong>',
            'The value boxes are fixed labels that appear adjacent to the nodes. Learn more about them <a href="//www.zingchart.com/docs/basic-elements/value-boxes/" target="_blank">here</a>.'
          ],
          attachTo: '#myChart-graph-id0-plotset-plot-0-path right',
          buttons: [{
              text: 'Back',
              classes: 'shepherd-button-secondary',
              action: tour.back
            },
            {
              text: 'Next',
              action: tour.next,
              classes: 'shepherd-button-example-primary'
            }
          ]
        });
    
        tour.addStep('legend', {
          text: [
            '<strong>Legend</strong>',
            'The legend is useful on charts with multiple data sets (series). Learn more about the legend <a href="//www.zingchart.com/docs/basic-elements/interactive-chart-legend/" target="_blank">here</a>.'
          ],
          attachTo: '#myChart-legend bottom',
          buttons: [{
              text: 'Back',
              classes: 'shepherd-button-secondary',
              action: tour.back
            },
            {
              text: 'Next',
              action: tour.next,
              classes: 'shepherd-button-example-primary'
            }
          ]
        });
    
        tour.addStep('source', {
          text: [
            '<strong>Source</strong>',
            'You can add a source for your data. Learn more about it <a href="//www.zingchart.com/docs/basic-elements/custom-chart-titles/" target="_blank">here</a>.'
          ],
          attachTo: '#myChart-graph-id0-source top',
          buttons: [{
              text: 'Back',
              classes: 'shepherd-button-secondary',
              action: tour.back
            },
            {
              text: 'Exit',
              action: tour.complete,
              classes: 'shepherd-button-example-primary'
            }
          ]
        });
    
        var modified = false;
        tour.on('show', function(event) {
          var target = event.step.id;
          if (document.querySelector('[data-step].active')) {
            document.querySelector('[data-step].active').className = '';
          }
          document.querySelector('[data-step="' + target + '"]').className = 'active';
    
          if (modified) {
            zingchart.exec('myChart', 'reload');
          }
    
          if (chartStates[target]) {
            zingchart.exec('myChart', 'modify', {
              data: chartStates[target]
            });
          }
    
          modified = true;
        });
    
        tour.on('complete', function(event) {
          if (document.querySelector('[data-step].active')) {
            document.querySelector('[data-step].active').className = '';
          }
          zingchart.exec('myChart', 'reload');
        });
    
        tour.on('cancel', function(event) {
          if (document.querySelector('[data-step].active')) {
            document.querySelector('[data-step].active').className = '';
          }
          zingchart.exec('myChart', 'reload');
        });
    
        zingchart.load = function() {
          tour.start();
    
          var steps = document.querySelectorAll('[data-step]');
          for (var i = 0; i < steps.length; i++) {
            steps[i].addEventListener('click', function() {
              var step = this.dataset.step;
              tour.show(step);
            });
          }
        };
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <script src="https://cdn.rawgit.com/HubSpot/tether/master/dist/js/tether.min.js"></script>
      <script src="https://cdn.rawgit.com/HubSpot/shepherd/master/dist/js/shepherd.min.js"></script>
      <link href="https://cdn.rawgit.com/HubSpot/shepherd/master/dist/css/shepherd-theme-arrows.css" rel="stylesheet">
      <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet">
      <link href='https://fonts.googleapis.com/css?family=Roboto:300,700' rel='stylesheet' type='text/css'>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    
    <body>
      <div id="wrapper">
        <h1>A Tour of ZingChart</h1>
        <ul id="controls">
          <li data-step="title">Title</li>
          <li data-step="subtitle">Subtitle</li>
          <li data-step="scaleX">Scale X</li>
          <li data-step="scaleY">Scale Y</li>
          <li data-step="plotarea">Plot Area</li>
          <li data-step="nodes">Nodes</li>
          <li data-step="tooltips">Tooltips</li>
          <li data-step="valueboxes">Value Boxes</li>
          <li data-step="legend">Legend</li>
          <li data-step="source">Source</li>
        </ul>
        <div id='myChart'></div>
      </div>
    </body>
    
    </html>
    body {
      background: #FFF;
      height: 100%;
      width: 100%;
    }
    
    #wrapper {
      margin-top: 40px;
    }
    
    .shepherd-step {
      font-family: 'Roboto';
    }
    
    .shepherd-step a {
      color: #00BAF0;
      text-decoration: none;
    }
    
    .shepherd-text p {
      margin-right: 0;
      max-width: 400px;
    }
    
    .shepherd-text strong {
      font-weight: bold;
    }
    
    h1 {
      font-family: 'Roboto', Helvetica, Arial, sans-serif;
      margin-bottom: 40px;
      margin-left: 40px;
    }
    
    #controls {
      border-right: 1px solid #D9D9D9;
      float: left;
      font-family: 'Roboto';
      font-size: 18px;
      list-style-type: none;
      margin: 20px 30px 0 0;
    }
    
    #controls li {
      padding: 5px 20px 5px 0;
    }
    
    #controls li:not(.active):hover {
      color: #900;
    }
    
    #controls li:not(:first-of-type) {
      border-top: 0;
    }
    
    #controls .active {
      color: #F00;
      font-weight: bold;
    }
    
    [data-step] {
      cursor: pointer;
    }
    
    #myChart {
      float: left;
    }
    
    @media (max-width: 800px) {
      #controls {
        border-right: none;
        border-bottom: 1px solid #D9D9D9;
        display: inline-block;
        margin: 0px;
      }
      #controls li {
        padding: 5px 20px 5px 0;
        display: inline-block;
      }
      #myChart {
        width: 100%;
      }
    }
    var myConfig = {
      "type": "line",
      "title": { //Chart Title
        "text": "Chart Title"
      },
      "subtitle": { //Chart Subtitle
        "text": "Chart Subtitle"
      },
      "scale-x": { //X-Axis
        "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        "label": { //Scale Title
          "text": "X-Axis Scale Title",
          "font-size": 14,
          "offset-y": 15
        },
        "item": { //Scale Items (scale values or labels)
          "font-size": 10
        },
        "tick": { //Tick Marks
    
        },
        "guide": { //Guides
          "visible": true,
          "line-style": "solid", //"solid", "dotted", "dashed", "dashdot"
          "alpha": 1
        }
      },
      "scale-y": { //Y-Axis
        "values": "0:200:50",
        "label": { //Scale Title
          "text": "Y-Axis Scale Title",
          "font-size": 14,
          "offset-x": -10
        },
        "item": {
          "font-size": 10
        },
        "tick": { //Tick Marks
        },
        "guide": { //Guides
          "line-style": "solid", //"solid", "dotted", "dashed", "dashdot"
          "alpha": 1,
        }
      },
      "plot": { //Pertaining to Nodes
        "tooltip": { //Tooltips (hover labels -- an interactive alternative is crosshairs)
          "shadow": false
        },
        "value-box": { //Value Boxes (fixed labels)
          "shadow": false
        }
      },
      "legend": { //Legend
        "border-width": 2,
        "header": {
          "text": "Legend",
        },
        "item": {},
        "marker": {
          "type": "circle"
        }
      },
      "plotarea": {
        "margin-left": "13%",
        "margin-bottom": "18%",
      },
      "series": [{
          "values": [30, 34, 59, 31, 64, 65, 81, 85, 101, 75, 159, 164]
        },
        {
          "values": [64, 16, 29, 40, 35, 88, 49, 77, 121, 164, 112, 100]
        }
      ],
      "source": {
        "text": "Source: Data Source"
      }
    };
    
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 400,
      width: "100%"
    });
    
    var chartStates = {
      'title': {
        title: {
          color: '#F00',
          backgroundColor: '#FDD',
        }
      },
      'subtitle': {
        subtitle: {
          color: '#F00',
          backgroundColor: '#FDD'
        }
      },
      'scaleX': {
        scaleX: {
          lineWidth: 2,
          lineColor: '#F00',
          tick: {
            lineWidth: 2,
            lineColor: '#F00'
          },
          item: {
            color: '#F00'
          },
          label: {
            color: '#F00'
          },
          guide: {
            lineColor: '#F00'
          }
        }
      },
      'scaleY': {
        scaleY: {
          lineWidth: 2,
          lineColor: '#F00',
          tick: {
            lineWidth: 2,
            lineColor: '#F00'
          },
          item: {
            color: '#F00'
          },
          label: {
            color: '#F00'
          },
          guide: {
            lineColor: '#F00'
          }
        }
      },
      'plotarea': {
        plotarea: {
          backgroundColor: '#FDD'
        }
      },
      'nodes': {
        plot: {
          backgroundColor: '#F00',
          lineColor: '#F00',
          marker: {
            backgroundColor: '#F00'
          }
        }
      },
      'tooltips': {
        plot: {
          tooltip: {
            color: '#F00',
            backgroundColor: '#FDD',
          }
        }
      },
      'valueboxes': {
        plot: {
          valueBox: {
            color: '#F00',
            backgroundColor: '#FDD',
          }
        }
      },
      'legend': {
        legend: {
          header: {
            color: '#F00'
          },
          backgroundColor: '#FDD',
          borderColor: '#F00',
          item: {
            color: '#F00'
          }
        }
      },
      'source': {
        source: {
          backgroundColor: '#FDD',
          color: '#F00'
        }
      }
    }
    
    var tour = new Shepherd.Tour({
      defaults: {
        classes: 'shepherd-theme-arrows'
      }
    });
    
    // Title
    tour.addStep('title', {
      text: [
        '<strong>Title</strong>',
        'The title displays across the top of your chart. Learn more about how to customize and style it <a href="//www.zingchart.com/docs/basic-elements/custom-chart-titles/" target="_blank">here</a>.'
      ],
      attachTo: '#myChart-graph-id0-title bottom',
      buttons: [{
          text: 'Exit',
          classes: 'shepherd-button-secondary',
          action: tour.cancel
        },
        {
          text: 'Next',
          action: tour.next,
          classes: 'shepherd-button-example-primary'
        }
      ]
    });
    
    tour.addStep('subtitle', {
      text: [
        '<strong>Subtitle</strong>',
        'You can add a subtitle to display below the chart title. Learn more about it <a href="//www.zingchart.com/docs/basic-elements/custom-chart-titles/" target="_blank">here</a>.'
      ],
      attachTo: '#myChart-graph-id0-subtitle bottom',
      buttons: [{
          text: 'Back',
          classes: 'shepherd-button-secondary',
          action: tour.back
        },
        {
          text: 'Next',
          action: tour.next,
          classes: 'shepherd-button-example-primary'
        }
      ]
    });
    
    tour.addStep('scaleX', {
      text: [
        '<strong>Scale X</strong>',
        'This represents everything tied to the x-axis (scale line, title, items, tick marks, guides). Learn more about our scales <a href="//www.zingchart.com/docs/basic-elements/configure-chart-scales/" target="_blank">here</a>.'
      ],
      attachTo: '#myChart-graph-id0-scale-x-path right',
      buttons: [{
          text: 'Back',
          classes: 'shepherd-button-secondary',
          action: tour.back
        },
        {
          text: 'Next',
          action: tour.next,
          classes: 'shepherd-button-example-primary'
        }
      ]
    });
    
    tour.addStep('scaleY', {
      text: [
        '<strong>Scale Y</strong>',
        'This represents everything tied to the y-axis (scale line, title, items, tick marks, guides). Learn more about our scales <a href="//www.zingchart.com/docs/basic-elements/configure-chart-scales/" target="_blank">here</a>.'
      ],
      attachTo: '#myChart-graph-id0-scale-y-path bottom',
      buttons: [{
          text: 'Back',
          classes: 'shepherd-button-secondary',
          action: tour.back
        },
        {
          text: 'Next',
          action: tour.next,
          classes: 'shepherd-button-example-primary'
        }
      ]
    });
    
    tour.addStep('plotarea', {
      text: [
        '<strong>Plot Area</strong>',
        'This is the area where the data is plotted onto the chart. Learn more about the plot area <a href="//www.zingchart.com/docs/json-attributes-syntax/graph-objects/plotarea/" target="_blank">here</a>.'
      ],
      attachTo: '#myChart-graph-id0-plotarea right',
      buttons: [{
          text: 'Back',
          classes: 'shepherd-button-secondary',
          action: tour.back
        },
        {
          text: 'Next',
          action: tour.next,
          classes: 'shepherd-button-example-primary'
        }
      ]
    });
    
    tour.addStep('nodes', {
      text: [
        '<strong>Nodes</strong>',
        'The nodes represent your data. Each data set is called a series. Learn more about node styling <a href="//www.zingchart.com/docs/basic-elements/plot-series-styling/" target="_blank">here</a>.'
      ],
      attachTo: '#myChart-graph-id0-plotset-plot-0-path right',
      buttons: [{
          text: 'Back',
          classes: 'shepherd-button-secondary',
          action: tour.back
        },
        {
          text: 'Next',
          action: tour.next,
          classes: 'shepherd-button-example-primary'
        }
      ]
    });
    
    tour.addStep('tooltips', {
      text: [
        '<strong>Tooltips</strong>',
        'The tooltips are labels that appear when you hover over the nodes. Hover to see them, and learn more about them <a href="//www.zingchart.com/docs/basic-elements/tooltips/" target="_blank">here</a>.'
      ],
      attachTo: '#myChart-graph-id0-plotset-plot-0-path right',
      buttons: [{
          text: 'Back',
          classes: 'shepherd-button-secondary',
          action: tour.back
        },
        {
          text: 'Next',
          action: tour.next,
          classes: 'shepherd-button-example-primary'
        }
      ]
    });
    
    tour.addStep('valueboxes', {
      text: [
        '<strong>Value Boxes</strong>',
        'The value boxes are fixed labels that appear adjacent to the nodes. Learn more about them <a href="//www.zingchart.com/docs/basic-elements/value-boxes/" target="_blank">here</a>.'
      ],
      attachTo: '#myChart-graph-id0-plotset-plot-0-path right',
      buttons: [{
          text: 'Back',
          classes: 'shepherd-button-secondary',
          action: tour.back
        },
        {
          text: 'Next',
          action: tour.next,
          classes: 'shepherd-button-example-primary'
        }
      ]
    });
    
    tour.addStep('legend', {
      text: [
        '<strong>Legend</strong>',
        'The legend is useful on charts with multiple data sets (series). Learn more about the legend <a href="//www.zingchart.com/docs/basic-elements/interactive-chart-legend/" target="_blank">here</a>.'
      ],
      attachTo: '#myChart-legend bottom',
      buttons: [{
          text: 'Back',
          classes: 'shepherd-button-secondary',
          action: tour.back
        },
        {
          text: 'Next',
          action: tour.next,
          classes: 'shepherd-button-example-primary'
        }
      ]
    });
    
    tour.addStep('source', {
      text: [
        '<strong>Source</strong>',
        'You can add a source for your data. Learn more about it <a href="//www.zingchart.com/docs/basic-elements/custom-chart-titles/" target="_blank">here</a>.'
      ],
      attachTo: '#myChart-graph-id0-source top',
      buttons: [{
          text: 'Back',
          classes: 'shepherd-button-secondary',
          action: tour.back
        },
        {
          text: 'Exit',
          action: tour.complete,
          classes: 'shepherd-button-example-primary'
        }
      ]
    });
    
    var modified = false;
    tour.on('show', function(event) {
      var target = event.step.id;
      if (document.querySelector('[data-step].active')) {
        document.querySelector('[data-step].active').className = '';
      }
      document.querySelector('[data-step="' + target + '"]').className = 'active';
    
      if (modified) {
        zingchart.exec('myChart', 'reload');
      }
    
      if (chartStates[target]) {
        zingchart.exec('myChart', 'modify', {
          data: chartStates[target]
        });
      }
    
      modified = true;
    });
    
    tour.on('complete', function(event) {
      if (document.querySelector('[data-step].active')) {
        document.querySelector('[data-step].active').className = '';
      }
      zingchart.exec('myChart', 'reload');
    });
    
    tour.on('cancel', function(event) {
      if (document.querySelector('[data-step].active')) {
        document.querySelector('[data-step].active').className = '';
      }
      zingchart.exec('myChart', 'reload');
    });
    
    zingchart.load = function() {
      tour.start();
    
      var steps = document.querySelectorAll('[data-step]');
      for (var i = 0; i < steps.length; i++) {
        steps[i].addEventListener('click', function() {
          var step = this.dataset.step;
          tour.show(step);
        });
      }
    };