• 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>Scale X</h1>
        <ul id="controls">
          <li data-step="scaletitle">Scale Title</li>
          <li data-step="scaleitems">Scale Items</li>
          <li data-step="axisline">Axis Line</li>
          <li data-step="tickmarks">Tick Marks</li>
          <li data-step="guides">Guides</li>
          <li data-step="minortickmarks">Minor Tick Marks</li>
          <li data-step="minorguides">Minor Guides</li>
          <li data-step="linemarker">Line Marker</li>
          <li data-step="areamarker">Area Marker</li>
        </ul>
        <div id='myChart'></div>
      </div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var myConfig = {
          "type": "scatter",
          "scale-x": {
            "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
            "label": {
              "text": "X-Axis Scale Title",
              "font-size": 14,
              "offset-y": 15
            },
            "item": {
              "font-size": 10
            },
            "tick": {
    
            },
            "guide": {
              "visible": true,
              "line-width": 1,
              "line-color": "gray",
              "line-style": "solid",
              "alpha": 1
            },
            "minor-ticks": 4,
            "minor-tick": {
    
            },
            "minor-guide": {
              "line-width": 1,
              "line-color": "#cccccc",
              "line-style": "solid",
              "alpha": 1
            },
            "markers": [{
                "type": "line",
                "range": [-2, 17],
                "value-range": true,
                "line-color": "gray",
                "line-width": 2,
                "alpha": 1
              },
              {
                "type": "area",
                "range": [-5, -1, 12, 23],
                "value-range": true,
                "background-color": "gray",
                "alpha": 0.3
              }
            ]
          },
          "scale-y": {
            "values": "0:200:50",
            "label": {
              "text": "Y-Axis Scale Title",
              "font-size": 14,
              "offset-x": -10
            },
            "item": {
              "font-size": 10,
            },
            "tick": {
    
            },
            "guide": {
              "line-width": 1,
              "line-color": "gray",
              "line-style": "solid",
              "alpha": 1
            },
            "minor-ticks": 4,
            "minor-tick": {
    
            },
            "minor-guide": {
              "line-width": 1,
              "line-color": "#cccccc",
              "line-style": "solid",
              "alpha": 1
            }
          },
          "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]
            }
          ]
        };
    
        zingchart.render({
          id: 'myChart',
          data: myConfig,
          height: 400,
          width: "100%"
        });
    
        var chartStates = {
          'scaletitle': {
            "scale-x": {
              "label": {
                "font-color": "red",
                "background-color": "#ffe6e6"
              }
            }
          },
          'scaleitems': {
            "scale-x": {
              "item": {
                "font-color": "red",
                "background-color": "#ffe6e6"
              }
            }
          },
          'axisline': {
            "scale-x": {
              "line-color": "red",
              "line-width": 2
            }
          },
          'tickmarks': {
            "scale-x": {
              "tick": {
                "line-color": "red",
                "line-width": 2,
                "line-style": "solid"
              }
            }
          },
          'guides': {
            "scale-x": {
              "guide": {
                "line-color": "red"
              }
            }
          },
          'minortickmarks': {
            "scale-x": {
              "minor-tick": {
                "line-color": "red"
              }
            }
          },
          'minorguides': {
            "scale-x": {
              "minor-guide": {
                "line-color": "red"
              }
            }
          },
          'linemarker': {
            "scale-x": {
              "markers": [{
                  "type": "line",
                  "range": [-2, 17],
                  "value-range": true,
                  "line-color": "red",
                  "line-width": 2,
                  "alpha": 1
                },
                {
                  "type": "area",
                  "range": [-5, -1, 12, 23],
                  "value-range": true,
                  "background-color": "gray",
                  "alpha": 0.3
                }
              ]
            }
          },
          'areamarker': {
            "scale-x": {
              "markers": [{
                  "type": "line",
                  "range": [-2, 17],
                  "value-range": true,
                  "line-color": "gray",
                  "line-width": 2,
                  "alpha": 1
                },
                {
                  "type": "area",
                  "range": [-5, -1, 12, 23],
                  "value-range": true,
                  "background-color": "red",
                  "alpha": 0.3
                }
              ]
            }
          }
        }
    
    
        var tour = new Shepherd.Tour({
          defaults: {
            classes: 'shepherd-theme-arrows'
          }
        });
    
        tour.addStep('scaletitle', {
          text: [
            '<strong>Scale Title</strong>',
            'The scale title displays below the axis line. See the <a href="http://www.zingchart.com/docs/json-attributes-syntax/scale-objects/label/" target="_blank">Scale Title JSON page</a> for an attribute list.'
          ],
          attachTo: '#myChart-graph-id0-scale-x-label right',
          buttons: [{
              text: 'Exit',
              classes: 'shepherd-button-secondary',
              action: tour.cancel
            },
            {
              text: 'Next',
              action: tour.next,
              classes: 'shepherd-button-example-primary'
            }
          ]
        });
    
        tour.addStep('scaleitems', {
          text: [
            '<strong>Scale Items</strong>',
            'The scale items are the values or labels that appear below the axis line. See the <a href="http://www.zingchart.com/docs/json-attributes-syntax/scale-objects/item/" target="_blank">Scale Items JSON page</a> for a format/styling attribute list.'
          ],
          attachTo: '#myChart-graph-id0-scale_x-item_11-path right',
          buttons: [{
              text: 'Back',
              classes: 'shepherd-button-secondary',
              action: tour.back
            },
            {
              text: 'Next',
              action: tour.next,
              classes: 'shepherd-button-example-primary'
            }
          ]
        });
    
        tour.addStep('axisline', {
          text: [
            '<strong>Axis Line</strong>',
            'This is the scale-x axis line. You can style the line color, width, and style.'
          ],
          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('tickmarks', {
          text: [
            '<strong>Tick Marks</strong>',
            'The tick marks are drawn based on the scale step value. See the <a href="http://www.zingchart.com/docs/json-attributes-syntax/scale-objects/tick/" target="_blank">Tick Marks JSON page</a> for an attribute list.'
          ],
          attachTo: '#myChart-graph-id0-scale-x-tick-11-path right',
          buttons: [{
              text: 'Back',
              classes: 'shepherd-button-secondary',
              action: tour.back
            },
            {
              text: 'Next',
              action: tour.next,
              classes: 'shepherd-button-example-primary'
            }
          ]
        });
    
        tour.addStep('guides', {
          text: [
            '<strong>Guides</strong>',
            'The guides are drawn based on the number of tick marks. See the <a href="http://www.zingchart.com/docs/json-attributes-syntax/scale-objects/guide/" target="_blank">Guides JSON page</a> for an attribute list.'
          ],
          attachTo: '#myChart-graph-id0-scale-x-guide-11-path right',
          buttons: [{
              text: 'Back',
              classes: 'shepherd-button-secondary',
              action: tour.back
            },
            {
              text: 'Next',
              action: tour.next,
              classes: 'shepherd-button-example-primary'
            }
          ]
        });
    
        tour.addStep('minortickmarks', {
          text: [
            '<strong>Minor Tick Marks</strong>',
            'You can add minor tick marks, which appear between the major tick marks. See the <a href="http://www.zingchart.com/docs/json-attributes-syntax/scale-objects/minor-tick/" target="_blank">Minor Tick Marks JSON page</a> for an attribute list.'
          ],
          attachTo: '#myChart-graph-id0-scale-x-minor-tick-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('minorguides', {
          text: [
            '<strong>Minor Guides</strong>',
            'You can add minor guides, which are drawn based on the number of minor tick marks. See the <a href="http://www.zingchart.com/docs/json-attributes-syntax/scale-objects/minor-guide/" target="_blank">Minor Guides JSON page</a> for an attribute list.'
          ],
          attachTo: '#myChart-graph-id0-scale-x-minor-guide-1-path right',
          buttons: [{
              text: 'Back',
              classes: 'shepherd-button-secondary',
              action: tour.back
            },
            {
              text: 'Next',
              action: tour.next,
              classes: 'shepherd-button-example-primary'
            }
          ]
        });
    
        tour.addStep('linemarker', {
          text: [
            '<strong>Line Marker</strong>',
            'Scale markers allow you to draw lines to indicate a pattern or trend, such as this trend line. See the <a href="http://www.zingchart.com/docs/json-attributes-syntax/scale-objects/markers/" target="_blank">Scale Markers JSON page</a> for an attribute list.'
          ],
          attachTo: '#myChart-graph-id0-scale-y-guide-4-path right',
          buttons: [{
              text: 'Back',
              classes: 'shepherd-button-secondary',
              action: tour.back
            },
            {
              text: 'Next',
              action: tour.next,
              classes: 'shepherd-button-example-primary'
            }
          ]
        });
    
        tour.addStep('areamarker', {
          text: [
            '<strong>Area Marker</strong>',
            'You can also create area scale markers to emphasize a band or section of data. See the <a href="http://www.zingchart.com/docs/json-attributes-syntax/scale-objects/markers/" target="_blank">Scale Markers JSON page</a> for an attribute list.'
          ],
          attachTo: '#myChart-graph-id0-scale-y-minor-guide-1-path right',
          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>Scale X</h1>
        <ul id="controls">
          <li data-step="scaletitle">Scale Title</li>
          <li data-step="scaleitems">Scale Items</li>
          <li data-step="axisline">Axis Line</li>
          <li data-step="tickmarks">Tick Marks</li>
          <li data-step="guides">Guides</li>
          <li data-step="minortickmarks">Minor Tick Marks</li>
          <li data-step="minorguides">Minor Guides</li>
          <li data-step="linemarker">Line Marker</li>
          <li data-step="areamarker">Area Marker</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": "scatter",
      "scale-x": {
        "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        "label": {
          "text": "X-Axis Scale Title",
          "font-size": 14,
          "offset-y": 15
        },
        "item": {
          "font-size": 10
        },
        "tick": {
    
        },
        "guide": {
          "visible": true,
          "line-width": 1,
          "line-color": "gray",
          "line-style": "solid",
          "alpha": 1
        },
        "minor-ticks": 4,
        "minor-tick": {
    
        },
        "minor-guide": {
          "line-width": 1,
          "line-color": "#cccccc",
          "line-style": "solid",
          "alpha": 1
        },
        "markers": [{
            "type": "line",
            "range": [-2, 17],
            "value-range": true,
            "line-color": "gray",
            "line-width": 2,
            "alpha": 1
          },
          {
            "type": "area",
            "range": [-5, -1, 12, 23],
            "value-range": true,
            "background-color": "gray",
            "alpha": 0.3
          }
        ]
      },
      "scale-y": {
        "values": "0:200:50",
        "label": {
          "text": "Y-Axis Scale Title",
          "font-size": 14,
          "offset-x": -10
        },
        "item": {
          "font-size": 10,
        },
        "tick": {
    
        },
        "guide": {
          "line-width": 1,
          "line-color": "gray",
          "line-style": "solid",
          "alpha": 1
        },
        "minor-ticks": 4,
        "minor-tick": {
    
        },
        "minor-guide": {
          "line-width": 1,
          "line-color": "#cccccc",
          "line-style": "solid",
          "alpha": 1
        }
      },
      "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]
        }
      ]
    };
    
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 400,
      width: "100%"
    });
    
    var chartStates = {
      'scaletitle': {
        "scale-x": {
          "label": {
            "font-color": "red",
            "background-color": "#ffe6e6"
          }
        }
      },
      'scaleitems': {
        "scale-x": {
          "item": {
            "font-color": "red",
            "background-color": "#ffe6e6"
          }
        }
      },
      'axisline': {
        "scale-x": {
          "line-color": "red",
          "line-width": 2
        }
      },
      'tickmarks': {
        "scale-x": {
          "tick": {
            "line-color": "red",
            "line-width": 2,
            "line-style": "solid"
          }
        }
      },
      'guides': {
        "scale-x": {
          "guide": {
            "line-color": "red"
          }
        }
      },
      'minortickmarks': {
        "scale-x": {
          "minor-tick": {
            "line-color": "red"
          }
        }
      },
      'minorguides': {
        "scale-x": {
          "minor-guide": {
            "line-color": "red"
          }
        }
      },
      'linemarker': {
        "scale-x": {
          "markers": [{
              "type": "line",
              "range": [-2, 17],
              "value-range": true,
              "line-color": "red",
              "line-width": 2,
              "alpha": 1
            },
            {
              "type": "area",
              "range": [-5, -1, 12, 23],
              "value-range": true,
              "background-color": "gray",
              "alpha": 0.3
            }
          ]
        }
      },
      'areamarker': {
        "scale-x": {
          "markers": [{
              "type": "line",
              "range": [-2, 17],
              "value-range": true,
              "line-color": "gray",
              "line-width": 2,
              "alpha": 1
            },
            {
              "type": "area",
              "range": [-5, -1, 12, 23],
              "value-range": true,
              "background-color": "red",
              "alpha": 0.3
            }
          ]
        }
      }
    }
    
    
    var tour = new Shepherd.Tour({
      defaults: {
        classes: 'shepherd-theme-arrows'
      }
    });
    
    tour.addStep('scaletitle', {
      text: [
        '<strong>Scale Title</strong>',
        'The scale title displays below the axis line. See the <a href="http://www.zingchart.com/docs/json-attributes-syntax/scale-objects/label/" target="_blank">Scale Title JSON page</a> for an attribute list.'
      ],
      attachTo: '#myChart-graph-id0-scale-x-label right',
      buttons: [{
          text: 'Exit',
          classes: 'shepherd-button-secondary',
          action: tour.cancel
        },
        {
          text: 'Next',
          action: tour.next,
          classes: 'shepherd-button-example-primary'
        }
      ]
    });
    
    tour.addStep('scaleitems', {
      text: [
        '<strong>Scale Items</strong>',
        'The scale items are the values or labels that appear below the axis line. See the <a href="http://www.zingchart.com/docs/json-attributes-syntax/scale-objects/item/" target="_blank">Scale Items JSON page</a> for a format/styling attribute list.'
      ],
      attachTo: '#myChart-graph-id0-scale_x-item_11-path right',
      buttons: [{
          text: 'Back',
          classes: 'shepherd-button-secondary',
          action: tour.back
        },
        {
          text: 'Next',
          action: tour.next,
          classes: 'shepherd-button-example-primary'
        }
      ]
    });
    
    tour.addStep('axisline', {
      text: [
        '<strong>Axis Line</strong>',
        'This is the scale-x axis line. You can style the line color, width, and style.'
      ],
      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('tickmarks', {
      text: [
        '<strong>Tick Marks</strong>',
        'The tick marks are drawn based on the scale step value. See the <a href="http://www.zingchart.com/docs/json-attributes-syntax/scale-objects/tick/" target="_blank">Tick Marks JSON page</a> for an attribute list.'
      ],
      attachTo: '#myChart-graph-id0-scale-x-tick-11-path right',
      buttons: [{
          text: 'Back',
          classes: 'shepherd-button-secondary',
          action: tour.back
        },
        {
          text: 'Next',
          action: tour.next,
          classes: 'shepherd-button-example-primary'
        }
      ]
    });
    
    tour.addStep('guides', {
      text: [
        '<strong>Guides</strong>',
        'The guides are drawn based on the number of tick marks. See the <a href="http://www.zingchart.com/docs/json-attributes-syntax/scale-objects/guide/" target="_blank">Guides JSON page</a> for an attribute list.'
      ],
      attachTo: '#myChart-graph-id0-scale-x-guide-11-path right',
      buttons: [{
          text: 'Back',
          classes: 'shepherd-button-secondary',
          action: tour.back
        },
        {
          text: 'Next',
          action: tour.next,
          classes: 'shepherd-button-example-primary'
        }
      ]
    });
    
    tour.addStep('minortickmarks', {
      text: [
        '<strong>Minor Tick Marks</strong>',
        'You can add minor tick marks, which appear between the major tick marks. See the <a href="http://www.zingchart.com/docs/json-attributes-syntax/scale-objects/minor-tick/" target="_blank">Minor Tick Marks JSON page</a> for an attribute list.'
      ],
      attachTo: '#myChart-graph-id0-scale-x-minor-tick-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('minorguides', {
      text: [
        '<strong>Minor Guides</strong>',
        'You can add minor guides, which are drawn based on the number of minor tick marks. See the <a href="http://www.zingchart.com/docs/json-attributes-syntax/scale-objects/minor-guide/" target="_blank">Minor Guides JSON page</a> for an attribute list.'
      ],
      attachTo: '#myChart-graph-id0-scale-x-minor-guide-1-path right',
      buttons: [{
          text: 'Back',
          classes: 'shepherd-button-secondary',
          action: tour.back
        },
        {
          text: 'Next',
          action: tour.next,
          classes: 'shepherd-button-example-primary'
        }
      ]
    });
    
    tour.addStep('linemarker', {
      text: [
        '<strong>Line Marker</strong>',
        'Scale markers allow you to draw lines to indicate a pattern or trend, such as this trend line. See the <a href="http://www.zingchart.com/docs/json-attributes-syntax/scale-objects/markers/" target="_blank">Scale Markers JSON page</a> for an attribute list.'
      ],
      attachTo: '#myChart-graph-id0-scale-y-guide-4-path right',
      buttons: [{
          text: 'Back',
          classes: 'shepherd-button-secondary',
          action: tour.back
        },
        {
          text: 'Next',
          action: tour.next,
          classes: 'shepherd-button-example-primary'
        }
      ]
    });
    
    tour.addStep('areamarker', {
      text: [
        '<strong>Area Marker</strong>',
        'You can also create area scale markers to emphasize a band or section of data. See the <a href="http://www.zingchart.com/docs/json-attributes-syntax/scale-objects/markers/" target="_blank">Scale Markers JSON page</a> for an attribute list.'
      ],
      attachTo: '#myChart-graph-id0-scale-y-minor-guide-1-path right',
      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);
        });
      }
    };