• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="https://cdn.rawgit.com/HubSpot/tether/master/dist/js/tether.min.js"></script>
    8.   <script nonce="undefined" src="https://cdn.rawgit.com/HubSpot/shepherd/master/dist/js/shepherd.min.js"></script>
    9.   <link href="https://cdn.rawgit.com/HubSpot/shepherd/master/dist/css/shepherd-theme-arrows.css" rel="stylesheet">
    10.   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet">
    11.   <link href='https://fonts.googleapis.com/css?family=Roboto:300,700' rel='stylesheet' type='text/css'>
    12.  
    13.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    14.   <style>
    15.     body {
    16.       background: #FFF;
    17.       height: 100%;
    18.       width: 100%;
    19.     }
    20.  
    21.     #wrapper {
    22.       margin-top: 40px;
    23.     }
    24.  
    25.     .shepherd-step {
    26.       font-family: 'Roboto';
    27.     }
    28.  
    29.     .shepherd-step a {
    30.       color: #00BAF0;
    31.       text-decoration: none;
    32.     }
    33.  
    34.     .shepherd-text p {
    35.       margin-right: 0;
    36.       max-width: 400px;
    37.     }
    38.  
    39.     .shepherd-text strong {
    40.       font-weight: bold;
    41.     }
    42.  
    43.     h1 {
    44.       font-family: 'Roboto', Helvetica, Arial, sans-serif;
    45.       margin-bottom: 40px;
    46.       margin-left: 40px;
    47.     }
    48.  
    49.     #controls {
    50.       border-right: 1px solid #D9D9D9;
    51.       float: left;
    52.       font-family: 'Roboto';
    53.       font-size: 18px;
    54.       list-style-type: none;
    55.       margin: 20px 30px 0 0;
    56.     }
    57.  
    58.     #controls li {
    59.       padding: 5px 20px 5px 0;
    60.     }
    61.  
    62.     #controls li:not(.active):hover {
    63.       color: #900;
    64.     }
    65.  
    66.     #controls li:not(:first-of-type) {
    67.       border-top: 0;
    68.     }
    69.  
    70.     #controls .active {
    71.       color: #F00;
    72.       font-weight: bold;
    73.     }
    74.  
    75.     [data-step] {
    76.       cursor: pointer;
    77.     }
    78.  
    79.     #myChart {
    80.       float: left;
    81.     }
    82.  
    83.     @media (max-width: 800px) {
    84.       #controls {
    85.         border-right: none;
    86.         border-bottom: 1px solid #D9D9D9;
    87.         display: inline-block;
    88.         margin: 0px;
    89.       }
    90.  
    91.       #controls li {
    92.         padding: 5px 20px 5px 0;
    93.         display: inline-block;
    94.       }
    95.  
    96.       #myChart {
    97.         width: 100%;
    98.       }
    99.     }
    100.   </style>
    101. </head>
    102.  
    103. <body>
    104.   <div id="wrapper">
    105.     <h1>Scale X</h1>
    106.     <ul id="controls">
    107.       <li data-step="scaletitle">Scale Title</li>
    108.       <li data-step="scaleitems">Scale Items</li>
    109.       <li data-step="axisline">Axis Line</li>
    110.       <li data-step="tickmarks">Tick Marks</li>
    111.       <li data-step="guides">Guides</li>
    112.       <li data-step="minortickmarks">Minor Tick Marks</li>
    113.       <li data-step="minorguides">Minor Guides</li>
    114.       <li data-step="linemarker">Line Marker</li>
    115.       <li data-step="areamarker">Area Marker</li>
    116.     </ul>
    117.     <div id='myChart'></div>
    118.   </div>
    119.   <script>
    120.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    121.     var myConfig = {
    122.       "type": "scatter",
    123.       "scale-x": {
    124.         "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    125.         "label": {
    126.           "text": "X-Axis Scale Title",
    127.           "font-size": 14,
    128.           "offset-y": 15
    129.         },
    130.         "item": {
    131.           "font-size": 10
    132.         },
    133.         "tick": {
    134.  
    135.         },
    136.         "guide": {
    137.           "visible": true,
    138.           "line-width": 1,
    139.           "line-color": "gray",
    140.           "line-style": "solid",
    141.           "alpha": 1
    142.         },
    143.         "minor-ticks": 4,
    144.         "minor-tick": {
    145.  
    146.         },
    147.         "minor-guide": {
    148.           "line-width": 1,
    149.           "line-color": "#cccccc",
    150.           "line-style": "solid",
    151.           "alpha": 1
    152.         },
    153.         "markers": [{
    154.             "type": "line",
    155.             "range": [-2, 17],
    156.             "value-range": true,
    157.             "line-color": "gray",
    158.             "line-width": 2,
    159.             "alpha": 1
    160.           },
    161.           {
    162.             "type": "area",
    163.             "range": [-5, -1, 12, 23],
    164.             "value-range": true,
    165.             "background-color": "gray",
    166.             "alpha": 0.3
    167.           }
    168.         ]
    169.       },
    170.       "scale-y": {
    171.         "values": "0:200:50",
    172.         "label": {
    173.           "text": "Y-Axis Scale Title",
    174.           "font-size": 14,
    175.           "offset-x": -10
    176.         },
    177.         "item": {
    178.           "font-size": 10,
    179.         },
    180.         "tick": {
    181.  
    182.         },
    183.         "guide": {
    184.           "line-width": 1,
    185.           "line-color": "gray",
    186.           "line-style": "solid",
    187.           "alpha": 1
    188.         },
    189.         "minor-ticks": 4,
    190.         "minor-tick": {
    191.  
    192.         },
    193.         "minor-guide": {
    194.           "line-width": 1,
    195.           "line-color": "#cccccc",
    196.           "line-style": "solid",
    197.           "alpha": 1
    198.         }
    199.       },
    200.       "plotarea": {
    201.         "margin-left": "13%",
    202.         "margin-bottom": "18%"
    203.       },
    204.       "series": [{
    205.           "values": [30, 34, 59, 31, 64, 65, 81, 85, 101, 75, 159, 164]
    206.         },
    207.         {
    208.           "values": [64, 16, 29, 40, 35, 88, 49, 77, 121, 164, 112, 100]
    209.         }
    210.       ]
    211.     };
    212.  
    213.     zingchart.render({
    214.       id: 'myChart',
    215.       data: myConfig,
    216.       height: 400,
    217.       width: "100%"
    218.     });
    219.  
    220.     var chartStates = {
    221.       'scaletitle': {
    222.         "scale-x": {
    223.           "label": {
    224.             "font-color": "red",
    225.             "background-color": "#ffe6e6"
    226.           }
    227.         }
    228.       },
    229.       'scaleitems': {
    230.         "scale-x": {
    231.           "item": {
    232.             "font-color": "red",
    233.             "background-color": "#ffe6e6"
    234.           }
    235.         }
    236.       },
    237.       'axisline': {
    238.         "scale-x": {
    239.           "line-color": "red",
    240.           "line-width": 2
    241.         }
    242.       },
    243.       'tickmarks': {
    244.         "scale-x": {
    245.           "tick": {
    246.             "line-color": "red",
    247.             "line-width": 2,
    248.             "line-style": "solid"
    249.           }
    250.         }
    251.       },
    252.       'guides': {
    253.         "scale-x": {
    254.           "guide": {
    255.             "line-color": "red"
    256.           }
    257.         }
    258.       },
    259.       'minortickmarks': {
    260.         "scale-x": {
    261.           "minor-tick": {
    262.             "line-color": "red"
    263.           }
    264.         }
    265.       },
    266.       'minorguides': {
    267.         "scale-x": {
    268.           "minor-guide": {
    269.             "line-color": "red"
    270.           }
    271.         }
    272.       },
    273.       'linemarker': {
    274.         "scale-x": {
    275.           "markers": [{
    276.               "type": "line",
    277.               "range": [-2, 17],
    278.               "value-range": true,
    279.               "line-color": "red",
    280.               "line-width": 2,
    281.               "alpha": 1
    282.             },
    283.             {
    284.               "type": "area",
    285.               "range": [-5, -1, 12, 23],
    286.               "value-range": true,
    287.               "background-color": "gray",
    288.               "alpha": 0.3
    289.             }
    290.           ]
    291.         }
    292.       },
    293.       'areamarker': {
    294.         "scale-x": {
    295.           "markers": [{
    296.               "type": "line",
    297.               "range": [-2, 17],
    298.               "value-range": true,
    299.               "line-color": "gray",
    300.               "line-width": 2,
    301.               "alpha": 1
    302.             },
    303.             {
    304.               "type": "area",
    305.               "range": [-5, -1, 12, 23],
    306.               "value-range": true,
    307.               "background-color": "red",
    308.               "alpha": 0.3
    309.             }
    310.           ]
    311.         }
    312.       }
    313.     }
    314.  
    315.  
    316.     var tour = new Shepherd.Tour({
    317.       defaults: {
    318.         classes: 'shepherd-theme-arrows'
    319.       }
    320.     });
    321.  
    322.     tour.addStep('scaletitle', {
    323.       text: [
    324.         '<strong>Scale Title</strong>',
    325.         '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.'
    326.       ],
    327.       attachTo: '#myChart-graph-id0-scale-x-label right',
    328.       buttons: [{
    329.           text: 'Exit',
    330.           classes: 'shepherd-button-secondary',
    331.           action: tour.cancel
    332.         },
    333.         {
    334.           text: 'Next',
    335.           action: tour.next,
    336.           classes: 'shepherd-button-example-primary'
    337.         }
    338.       ]
    339.     });
    340.  
    341.     tour.addStep('scaleitems', {
    342.       text: [
    343.         '<strong>Scale Items</strong>',
    344.         '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.'
    345.       ],
    346.       attachTo: '#myChart-graph-id0-scale_x-item_11-path right',
    347.       buttons: [{
    348.           text: 'Back',
    349.           classes: 'shepherd-button-secondary',
    350.           action: tour.back
    351.         },
    352.         {
    353.           text: 'Next',
    354.           action: tour.next,
    355.           classes: 'shepherd-button-example-primary'
    356.         }
    357.       ]
    358.     });
    359.  
    360.     tour.addStep('axisline', {
    361.       text: [
    362.         '<strong>Axis Line</strong>',
    363.         'This is the scale-x axis line. You can style the line color, width, and style.'
    364.       ],
    365.       attachTo: '#myChart-graph-id0-scale-x-path right',
    366.       buttons: [{
    367.           text: 'Back',
    368.           classes: 'shepherd-button-secondary',
    369.           action: tour.back
    370.         },
    371.         {
    372.           text: 'Next',
    373.           action: tour.next,
    374.           classes: 'shepherd-button-example-primary'
    375.         }
    376.       ]
    377.     });
    378.  
    379.     tour.addStep('tickmarks', {
    380.       text: [
    381.         '<strong>Tick Marks</strong>',
    382.         '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.'
    383.       ],
    384.       attachTo: '#myChart-graph-id0-scale-x-tick-11-path right',
    385.       buttons: [{
    386.           text: 'Back',
    387.           classes: 'shepherd-button-secondary',
    388.           action: tour.back
    389.         },
    390.         {
    391.           text: 'Next',
    392.           action: tour.next,
    393.           classes: 'shepherd-button-example-primary'
    394.         }
    395.       ]
    396.     });
    397.  
    398.     tour.addStep('guides', {
    399.       text: [
    400.         '<strong>Guides</strong>',
    401.         '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.'
    402.       ],
    403.       attachTo: '#myChart-graph-id0-scale-x-guide-11-path right',
    404.       buttons: [{
    405.           text: 'Back',
    406.           classes: 'shepherd-button-secondary',
    407.           action: tour.back
    408.         },
    409.         {
    410.           text: 'Next',
    411.           action: tour.next,
    412.           classes: 'shepherd-button-example-primary'
    413.         }
    414.       ]
    415.     });
    416.  
    417.     tour.addStep('minortickmarks', {
    418.       text: [
    419.         '<strong>Minor Tick Marks</strong>',
    420.         '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.'
    421.       ],
    422.       attachTo: '#myChart-graph-id0-scale-x-minor-tick-0-path right',
    423.       buttons: [{
    424.           text: 'Back',
    425.           classes: 'shepherd-button-secondary',
    426.           action: tour.back
    427.         },
    428.         {
    429.           text: 'Next',
    430.           action: tour.next,
    431.           classes: 'shepherd-button-example-primary'
    432.         }
    433.       ]
    434.     });
    435.  
    436.     tour.addStep('minorguides', {
    437.       text: [
    438.         '<strong>Minor Guides</strong>',
    439.         '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.'
    440.       ],
    441.       attachTo: '#myChart-graph-id0-scale-x-minor-guide-1-path right',
    442.       buttons: [{
    443.           text: 'Back',
    444.           classes: 'shepherd-button-secondary',
    445.           action: tour.back
    446.         },
    447.         {
    448.           text: 'Next',
    449.           action: tour.next,
    450.           classes: 'shepherd-button-example-primary'
    451.         }
    452.       ]
    453.     });
    454.  
    455.     tour.addStep('linemarker', {
    456.       text: [
    457.         '<strong>Line Marker</strong>',
    458.         '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.'
    459.       ],
    460.       attachTo: '#myChart-graph-id0-scale-y-guide-4-path right',
    461.       buttons: [{
    462.           text: 'Back',
    463.           classes: 'shepherd-button-secondary',
    464.           action: tour.back
    465.         },
    466.         {
    467.           text: 'Next',
    468.           action: tour.next,
    469.           classes: 'shepherd-button-example-primary'
    470.         }
    471.       ]
    472.     });
    473.  
    474.     tour.addStep('areamarker', {
    475.       text: [
    476.         '<strong>Area Marker</strong>',
    477.         '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.'
    478.       ],
    479.       attachTo: '#myChart-graph-id0-scale-y-minor-guide-1-path right',
    480.       buttons: [{
    481.           text: 'Back',
    482.           classes: 'shepherd-button-secondary',
    483.           action: tour.back
    484.         },
    485.         {
    486.           text: 'Exit',
    487.           action: tour.complete,
    488.           classes: 'shepherd-button-example-primary'
    489.         }
    490.       ]
    491.     });
    492.  
    493.     var modified = false;
    494.     tour.on('show', function(event) {
    495.       var target = event.step.id;
    496.       if (document.querySelector('[data-step].active')) {
    497.         document.querySelector('[data-step].active').className = '';
    498.       }
    499.       document.querySelector('[data-step="' + target + '"]').className = 'active';
    500.  
    501.       if (modified) {
    502.         zingchart.exec('myChart', 'reload');
    503.       }
    504.  
    505.       if (chartStates[target]) {
    506.         zingchart.exec('myChart', 'modify', {
    507.           data: chartStates[target]
    508.         });
    509.       }
    510.  
    511.       modified = true;
    512.     });
    513.  
    514.     tour.on('complete', function(event) {
    515.       if (document.querySelector('[data-step].active')) {
    516.         document.querySelector('[data-step].active').className = '';
    517.       }
    518.       zingchart.exec('myChart', 'reload');
    519.     });
    520.  
    521.     tour.on('cancel', function(event) {
    522.       if (document.querySelector('[data-step].active')) {
    523.         document.querySelector('[data-step].active').className = '';
    524.       }
    525.       zingchart.exec('myChart', 'reload');
    526.     });
    527.  
    528.     zingchart.load = function() {
    529.       tour.start();
    530.  
    531.       var steps = document.querySelectorAll('[data-step]');
    532.       for (var i = 0; i < steps.length; i++) {
    533.         steps[i].addEventListener('click', function() {
    534.           var step = this.dataset.step;
    535.           tour.show(step);
    536.         });
    537.       }
    538.     };
    539.   </script>
    540. </body>
    541.  
    542. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://cdn.rawgit.com/HubSpot/tether/master/dist/js/tether.min.js"></script>
    8.   <script src="https://cdn.rawgit.com/HubSpot/shepherd/master/dist/js/shepherd.min.js"></script>
    9.   <link href="https://cdn.rawgit.com/HubSpot/shepherd/master/dist/css/shepherd-theme-arrows.css" rel="stylesheet">
    10.   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet">
    11.   <link href='https://fonts.googleapis.com/css?family=Roboto:300,700' rel='stylesheet' type='text/css'>
    12.  
    13.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    14. </head>
    15.  
    16. <body>
    17.   <div id="wrapper">
    18.     <h1>Scale X</h1>
    19.     <ul id="controls">
    20.       <li data-step="scaletitle">Scale Title</li>
    21.       <li data-step="scaleitems">Scale Items</li>
    22.       <li data-step="axisline">Axis Line</li>
    23.       <li data-step="tickmarks">Tick Marks</li>
    24.       <li data-step="guides">Guides</li>
    25.       <li data-step="minortickmarks">Minor Tick Marks</li>
    26.       <li data-step="minorguides">Minor Guides</li>
    27.       <li data-step="linemarker">Line Marker</li>
    28.       <li data-step="areamarker">Area Marker</li>
    29.     </ul>
    30.     <div id='myChart'></div>
    31.   </div>
    32. </body>
    33.  
    34. </html>
    1. body {
    2.   background: #FFF;
    3.   height: 100%;
    4.   width: 100%;
    5. }
    6.  
    7. #wrapper {
    8.   margin-top: 40px;
    9. }
    10.  
    11. .shepherd-step {
    12.   font-family: 'Roboto';
    13. }
    14.  
    15. .shepherd-step a {
    16.   color: #00BAF0;
    17.   text-decoration: none;
    18. }
    19.  
    20. .shepherd-text p {
    21.   margin-right: 0;
    22.   max-width: 400px;
    23. }
    24.  
    25. .shepherd-text strong {
    26.   font-weight: bold;
    27. }
    28.  
    29. h1 {
    30.   font-family: 'Roboto', Helvetica, Arial, sans-serif;
    31.   margin-bottom: 40px;
    32.   margin-left: 40px;
    33. }
    34.  
    35. #controls {
    36.   border-right: 1px solid #D9D9D9;
    37.   float: left;
    38.   font-family: 'Roboto';
    39.   font-size: 18px;
    40.   list-style-type: none;
    41.   margin: 20px 30px 0 0;
    42. }
    43.  
    44. #controls li {
    45.   padding: 5px 20px 5px 0;
    46. }
    47.  
    48. #controls li:not(.active):hover {
    49.   color: #900;
    50. }
    51.  
    52. #controls li:not(:first-of-type) {
    53.   border-top: 0;
    54. }
    55.  
    56. #controls .active {
    57.   color: #F00;
    58.   font-weight: bold;
    59. }
    60.  
    61. [data-step] {
    62.   cursor: pointer;
    63. }
    64.  
    65. #myChart {
    66.   float: left;
    67. }
    68.  
    69. @media (max-width: 800px) {
    70.   #controls {
    71.     border-right: none;
    72.     border-bottom: 1px solid #D9D9D9;
    73.     display: inline-block;
    74.     margin: 0px;
    75.   }
    76.  
    77.   #controls li {
    78.     padding: 5px 20px 5px 0;
    79.     display: inline-block;
    80.   }
    81.  
    82.   #myChart {
    83.     width: 100%;
    84.   }
    85. }
    1. var myConfig = {
    2.   "type": "scatter",
    3.   "scale-x": {
    4.     "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    5.     "label": {
    6.       "text": "X-Axis Scale Title",
    7.       "font-size": 14,
    8.       "offset-y": 15
    9.     },
    10.     "item": {
    11.       "font-size": 10
    12.     },
    13.     "tick": {
    14.  
    15.     },
    16.     "guide": {
    17.       "visible": true,
    18.       "line-width": 1,
    19.       "line-color": "gray",
    20.       "line-style": "solid",
    21.       "alpha": 1
    22.     },
    23.     "minor-ticks": 4,
    24.     "minor-tick": {
    25.  
    26.     },
    27.     "minor-guide": {
    28.       "line-width": 1,
    29.       "line-color": "#cccccc",
    30.       "line-style": "solid",
    31.       "alpha": 1
    32.     },
    33.     "markers": [{
    34.         "type": "line",
    35.         "range": [-2, 17],
    36.         "value-range": true,
    37.         "line-color": "gray",
    38.         "line-width": 2,
    39.         "alpha": 1
    40.       },
    41.       {
    42.         "type": "area",
    43.         "range": [-5, -1, 12, 23],
    44.         "value-range": true,
    45.         "background-color": "gray",
    46.         "alpha": 0.3
    47.       }
    48.     ]
    49.   },
    50.   "scale-y": {
    51.     "values": "0:200:50",
    52.     "label": {
    53.       "text": "Y-Axis Scale Title",
    54.       "font-size": 14,
    55.       "offset-x": -10
    56.     },
    57.     "item": {
    58.       "font-size": 10,
    59.     },
    60.     "tick": {
    61.  
    62.     },
    63.     "guide": {
    64.       "line-width": 1,
    65.       "line-color": "gray",
    66.       "line-style": "solid",
    67.       "alpha": 1
    68.     },
    69.     "minor-ticks": 4,
    70.     "minor-tick": {
    71.  
    72.     },
    73.     "minor-guide": {
    74.       "line-width": 1,
    75.       "line-color": "#cccccc",
    76.       "line-style": "solid",
    77.       "alpha": 1
    78.     }
    79.   },
    80.   "plotarea": {
    81.     "margin-left": "13%",
    82.     "margin-bottom": "18%"
    83.   },
    84.   "series": [{
    85.       "values": [30, 34, 59, 31, 64, 65, 81, 85, 101, 75, 159, 164]
    86.     },
    87.     {
    88.       "values": [64, 16, 29, 40, 35, 88, 49, 77, 121, 164, 112, 100]
    89.     }
    90.   ]
    91. };
    92.  
    93. zingchart.render({
    94.   id: 'myChart',
    95.   data: myConfig,
    96.   height: 400,
    97.   width: "100%"
    98. });
    99.  
    100. var chartStates = {
    101.   'scaletitle': {
    102.     "scale-x": {
    103.       "label": {
    104.         "font-color": "red",
    105.         "background-color": "#ffe6e6"
    106.       }
    107.     }
    108.   },
    109.   'scaleitems': {
    110.     "scale-x": {
    111.       "item": {
    112.         "font-color": "red",
    113.         "background-color": "#ffe6e6"
    114.       }
    115.     }
    116.   },
    117.   'axisline': {
    118.     "scale-x": {
    119.       "line-color": "red",
    120.       "line-width": 2
    121.     }
    122.   },
    123.   'tickmarks': {
    124.     "scale-x": {
    125.       "tick": {
    126.         "line-color": "red",
    127.         "line-width": 2,
    128.         "line-style": "solid"
    129.       }
    130.     }
    131.   },
    132.   'guides': {
    133.     "scale-x": {
    134.       "guide": {
    135.         "line-color": "red"
    136.       }
    137.     }
    138.   },
    139.   'minortickmarks': {
    140.     "scale-x": {
    141.       "minor-tick": {
    142.         "line-color": "red"
    143.       }
    144.     }
    145.   },
    146.   'minorguides': {
    147.     "scale-x": {
    148.       "minor-guide": {
    149.         "line-color": "red"
    150.       }
    151.     }
    152.   },
    153.   'linemarker': {
    154.     "scale-x": {
    155.       "markers": [{
    156.           "type": "line",
    157.           "range": [-2, 17],
    158.           "value-range": true,
    159.           "line-color": "red",
    160.           "line-width": 2,
    161.           "alpha": 1
    162.         },
    163.         {
    164.           "type": "area",
    165.           "range": [-5, -1, 12, 23],
    166.           "value-range": true,
    167.           "background-color": "gray",
    168.           "alpha": 0.3
    169.         }
    170.       ]
    171.     }
    172.   },
    173.   'areamarker': {
    174.     "scale-x": {
    175.       "markers": [{
    176.           "type": "line",
    177.           "range": [-2, 17],
    178.           "value-range": true,
    179.           "line-color": "gray",
    180.           "line-width": 2,
    181.           "alpha": 1
    182.         },
    183.         {
    184.           "type": "area",
    185.           "range": [-5, -1, 12, 23],
    186.           "value-range": true,
    187.           "background-color": "red",
    188.           "alpha": 0.3
    189.         }
    190.       ]
    191.     }
    192.   }
    193. }
    194.  
    195.  
    196. var tour = new Shepherd.Tour({
    197.   defaults: {
    198.     classes: 'shepherd-theme-arrows'
    199.   }
    200. });
    201.  
    202. tour.addStep('scaletitle', {
    203.   text: [
    204.     '<strong>Scale Title</strong>',
    205.     '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.'
    206.   ],
    207.   attachTo: '#myChart-graph-id0-scale-x-label right',
    208.   buttons: [{
    209.       text: 'Exit',
    210.       classes: 'shepherd-button-secondary',
    211.       action: tour.cancel
    212.     },
    213.     {
    214.       text: 'Next',
    215.       action: tour.next,
    216.       classes: 'shepherd-button-example-primary'
    217.     }
    218.   ]
    219. });
    220.  
    221. tour.addStep('scaleitems', {
    222.   text: [
    223.     '<strong>Scale Items</strong>',
    224.     '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.'
    225.   ],
    226.   attachTo: '#myChart-graph-id0-scale_x-item_11-path right',
    227.   buttons: [{
    228.       text: 'Back',
    229.       classes: 'shepherd-button-secondary',
    230.       action: tour.back
    231.     },
    232.     {
    233.       text: 'Next',
    234.       action: tour.next,
    235.       classes: 'shepherd-button-example-primary'
    236.     }
    237.   ]
    238. });
    239.  
    240. tour.addStep('axisline', {
    241.   text: [
    242.     '<strong>Axis Line</strong>',
    243.     'This is the scale-x axis line. You can style the line color, width, and style.'
    244.   ],
    245.   attachTo: '#myChart-graph-id0-scale-x-path right',
    246.   buttons: [{
    247.       text: 'Back',
    248.       classes: 'shepherd-button-secondary',
    249.       action: tour.back
    250.     },
    251.     {
    252.       text: 'Next',
    253.       action: tour.next,
    254.       classes: 'shepherd-button-example-primary'
    255.     }
    256.   ]
    257. });
    258.  
    259. tour.addStep('tickmarks', {
    260.   text: [
    261.     '<strong>Tick Marks</strong>',
    262.     '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.'
    263.   ],
    264.   attachTo: '#myChart-graph-id0-scale-x-tick-11-path right',
    265.   buttons: [{
    266.       text: 'Back',
    267.       classes: 'shepherd-button-secondary',
    268.       action: tour.back
    269.     },
    270.     {
    271.       text: 'Next',
    272.       action: tour.next,
    273.       classes: 'shepherd-button-example-primary'
    274.     }
    275.   ]
    276. });
    277.  
    278. tour.addStep('guides', {
    279.   text: [
    280.     '<strong>Guides</strong>',
    281.     '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.'
    282.   ],
    283.   attachTo: '#myChart-graph-id0-scale-x-guide-11-path right',
    284.   buttons: [{
    285.       text: 'Back',
    286.       classes: 'shepherd-button-secondary',
    287.       action: tour.back
    288.     },
    289.     {
    290.       text: 'Next',
    291.       action: tour.next,
    292.       classes: 'shepherd-button-example-primary'
    293.     }
    294.   ]
    295. });
    296.  
    297. tour.addStep('minortickmarks', {
    298.   text: [
    299.     '<strong>Minor Tick Marks</strong>',
    300.     '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.'
    301.   ],
    302.   attachTo: '#myChart-graph-id0-scale-x-minor-tick-0-path right',
    303.   buttons: [{
    304.       text: 'Back',
    305.       classes: 'shepherd-button-secondary',
    306.       action: tour.back
    307.     },
    308.     {
    309.       text: 'Next',
    310.       action: tour.next,
    311.       classes: 'shepherd-button-example-primary'
    312.     }
    313.   ]
    314. });
    315.  
    316. tour.addStep('minorguides', {
    317.   text: [
    318.     '<strong>Minor Guides</strong>',
    319.     '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.'
    320.   ],
    321.   attachTo: '#myChart-graph-id0-scale-x-minor-guide-1-path right',
    322.   buttons: [{
    323.       text: 'Back',
    324.       classes: 'shepherd-button-secondary',
    325.       action: tour.back
    326.     },
    327.     {
    328.       text: 'Next',
    329.       action: tour.next,
    330.       classes: 'shepherd-button-example-primary'
    331.     }
    332.   ]
    333. });
    334.  
    335. tour.addStep('linemarker', {
    336.   text: [
    337.     '<strong>Line Marker</strong>',
    338.     '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.'
    339.   ],
    340.   attachTo: '#myChart-graph-id0-scale-y-guide-4-path right',
    341.   buttons: [{
    342.       text: 'Back',
    343.       classes: 'shepherd-button-secondary',
    344.       action: tour.back
    345.     },
    346.     {
    347.       text: 'Next',
    348.       action: tour.next,
    349.       classes: 'shepherd-button-example-primary'
    350.     }
    351.   ]
    352. });
    353.  
    354. tour.addStep('areamarker', {
    355.   text: [
    356.     '<strong>Area Marker</strong>',
    357.     '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.'
    358.   ],
    359.   attachTo: '#myChart-graph-id0-scale-y-minor-guide-1-path right',
    360.   buttons: [{
    361.       text: 'Back',
    362.       classes: 'shepherd-button-secondary',
    363.       action: tour.back
    364.     },
    365.     {
    366.       text: 'Exit',
    367.       action: tour.complete,
    368.       classes: 'shepherd-button-example-primary'
    369.     }
    370.   ]
    371. });
    372.  
    373. var modified = false;
    374. tour.on('show', function(event) {
    375.   var target = event.step.id;
    376.   if (document.querySelector('[data-step].active')) {
    377.     document.querySelector('[data-step].active').className = '';
    378.   }
    379.   document.querySelector('[data-step="' + target + '"]').className = 'active';
    380.  
    381.   if (modified) {
    382.     zingchart.exec('myChart', 'reload');
    383.   }
    384.  
    385.   if (chartStates[target]) {
    386.     zingchart.exec('myChart', 'modify', {
    387.       data: chartStates[target]
    388.     });
    389.   }
    390.  
    391.   modified = true;
    392. });
    393.  
    394. tour.on('complete', function(event) {
    395.   if (document.querySelector('[data-step].active')) {
    396.     document.querySelector('[data-step].active').className = '';
    397.   }
    398.   zingchart.exec('myChart', 'reload');
    399. });
    400.  
    401. tour.on('cancel', function(event) {
    402.   if (document.querySelector('[data-step].active')) {
    403.     document.querySelector('[data-step].active').className = '';
    404.   }
    405.   zingchart.exec('myChart', 'reload');
    406. });
    407.  
    408. zingchart.load = function() {
    409.   tour.start();
    410.  
    411.   var steps = document.querySelectorAll('[data-step]');
    412.   for (var i = 0; i < steps.length; i++) {
    413.     steps[i].addEventListener('click', function() {
    414.       var step = this.dataset.step;
    415.       tour.show(step);
    416.     });
    417.   }
    418. };