• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <meta charset="utf-8" />
    7.   <title>ZingSoft Demo</title>
    8.   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/shepherd.js/10.0.0/css/shepherd.css" />
    9.   <script nonce="undefined" src="https://cdnjs.cloudflare.com/ajax/libs/shepherd.js/10.0.0/js/shepherd.min.js"></script>
    10.   <link href="https://fonts.googleapis.com/css?family=Roboto:300,700" rel="stylesheet" type="text/css" />
    11.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    12.   <style>
    13.     body {
    14.       background: #fff;
    15.       height: 100%;
    16.       width: 100%;
    17.     }
    18.  
    19.     #wrapper {
    20.       margin-top: 40px;
    21.     }
    22.  
    23.     .shepherd-step {
    24.       font-family: 'Roboto';
    25.     }
    26.  
    27.     .shepherd-step a {
    28.       color: #00baf0;
    29.       text-decoration: none;
    30.     }
    31.  
    32.     .shepherd-text p {
    33.       margin-right: 0;
    34.       max-width: 400px;
    35.     }
    36.  
    37.     .shepherd-text strong {
    38.       font-weight: bold;
    39.     }
    40.  
    41.     h1 {
    42.       font-family: 'Roboto', Helvetica, Arial, sans-serif;
    43.       margin-bottom: 40px;
    44.       margin-left: 40px;
    45.     }
    46.  
    47.     #controls {
    48.       border-right: 1px solid #d9d9d9;
    49.       float: left;
    50.       font-family: 'Roboto';
    51.       font-size: 18px;
    52.       list-style-type: none;
    53.       margin: 20px 30px 0 0;
    54.     }
    55.  
    56.     #controls li {
    57.       padding: 5px 20px 5px 0;
    58.     }
    59.  
    60.     #controls li:not(.active):hover {
    61.       color: #900;
    62.     }
    63.  
    64.     #controls li:not(:first-of-type) {
    65.       border-top: 0;
    66.     }
    67.  
    68.     #controls .active {
    69.       color: #f00;
    70.       font-weight: bold;
    71.     }
    72.  
    73.     [data-step] {
    74.       cursor: pointer;
    75.     }
    76.  
    77.     @media (max-width: 800px) {
    78.       #controls {
    79.         border-right: none;
    80.         border-bottom: 1px solid #d9d9d9;
    81.         display: inline-block;
    82.         margin: 0px;
    83.       }
    84.  
    85.       #controls li {
    86.         padding: 5px 20px 5px 0;
    87.         display: inline-block;
    88.       }
    89.  
    90.       #myChart {
    91.         width: 100%;
    92.       }
    93.     }
    94.   </style>
    95. </head>
    96.  
    97. <body>
    98.   <div id="wrapper">
    99.     <h1>A Tour of ZingChart</h1>
    100.     <ul id="controls">
    101.       <li data-step="title">Title</li>
    102.       <li data-step="subtitle">Subtitle</li>
    103.       <li data-step="scaleX">Scale X</li>
    104.       <li data-step="scaleY">Scale Y</li>
    105.       <li data-step="plotarea">Plot Area</li>
    106.       <li data-step="plots">Plots</li>
    107.       <li data-step="tooltips">Tooltips</li>
    108.       <li data-step="valueboxes">Value Boxes</li>
    109.       <li data-step="legend">Legend</li>
    110.       <li data-step="source">Source</li>
    111.     </ul>
    112.     <div id="myChart"></div>
    113.   </div>
    114.   <script>
    115.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    116.     var myConfig = {
    117.       type: 'line',
    118.       title: {
    119.         //Chart Title
    120.         text: 'Chart Title',
    121.       },
    122.       subtitle: {
    123.         //Chart Subtitle
    124.         text: 'Chart Subtitle',
    125.       },
    126.       legend: {
    127.         //Legend
    128.         borderWidth: 2,
    129.         header: {
    130.           text: 'Legend',
    131.         },
    132.         item: {},
    133.         marker: {
    134.           type: 'circle',
    135.         },
    136.       },
    137.       plot: {
    138.         //Pertaining to Nodes
    139.         tooltip: {
    140.           //Tooltips (hover labels -- an interactive alternative is crosshairs)
    141.           shadow: false,
    142.         },
    143.         valueBox: {
    144.           //Value Boxes (fixed labels)
    145.           shadow: false,
    146.         },
    147.       },
    148.       plotarea: {
    149.         marginLeft: '13%',
    150.         marginBottom: '18%',
    151.       },
    152.       scaleX: {
    153.         //X-Axis
    154.         labels: [
    155.           'Jan',
    156.           'Feb',
    157.           'Mar',
    158.           'Apr',
    159.           'May',
    160.           'Jun',
    161.           'Jul',
    162.           'Aug',
    163.           'Sep',
    164.           'Oct',
    165.           'Nov',
    166.           'Dec',
    167.         ],
    168.         label: {
    169.           //Scale Title
    170.           text: 'X-Axis Scale Title',
    171.           fontSize: '14px',
    172.           offsetY: '15px',
    173.         },
    174.         item: {
    175.           //Scale Items (scale values or labels)
    176.           fontSize: '10px',
    177.         },
    178.         tick: {
    179.           //Tick Marks
    180.         },
    181.         guide: {
    182.           //Guides
    183.           visible: true,
    184.           lineStyle: 'solid',
    185.           alpha: 1,
    186.         },
    187.       },
    188.       scaleY: {
    189.         //Y-Axis
    190.         values: '0:200:50',
    191.         label: {
    192.           //Scale Title
    193.           text: 'Y-Axis Scale Title',
    194.           fontSize: '14px',
    195.           offsetX: '-10px',
    196.         },
    197.         item: {
    198.           fontSize: '10px',
    199.         },
    200.         tick: {
    201.           //Tick Marks
    202.         },
    203.         guide: {
    204.           //Guides
    205.           lineStyle: 'solid',
    206.           alpha: 1,
    207.         },
    208.       },
    209.       series: [{
    210.           values: [30, 34, 59, 31, 64, 65, 81, 85, 101, 75, 159, 164],
    211.         },
    212.         {
    213.           values: [64, 16, 29, 40, 35, 88, 49, 77, 121, 164, 112, 100],
    214.         },
    215.       ],
    216.       source: {
    217.         text: 'Source: Data Source',
    218.       },
    219.     };
    220.     var chartStates = {
    221.       title: {
    222.         title: {
    223.           color: '#F00',
    224.           backgroundColor: '#FDD',
    225.         },
    226.       },
    227.       subtitle: {
    228.         subtitle: {
    229.           color: '#F00',
    230.           backgroundColor: '#FDD',
    231.         },
    232.       },
    233.       scaleX: {
    234.         scaleX: {
    235.           lineWidth: 2,
    236.           lineColor: '#F00',
    237.           tick: {
    238.             lineWidth: 2,
    239.             lineColor: '#F00',
    240.           },
    241.           item: {
    242.             color: '#F00',
    243.           },
    244.           label: {
    245.             color: '#F00',
    246.           },
    247.           guide: {
    248.             lineColor: '#F00',
    249.           },
    250.         },
    251.       },
    252.       scaleY: {
    253.         scaleY: {
    254.           lineWidth: 2,
    255.           lineColor: '#F00',
    256.           tick: {
    257.             lineWidth: 2,
    258.             lineColor: '#F00',
    259.           },
    260.           item: {
    261.             color: '#F00',
    262.           },
    263.           label: {
    264.             color: '#F00',
    265.           },
    266.           guide: {
    267.             lineColor: '#F00',
    268.           },
    269.         },
    270.       },
    271.       plotarea: {
    272.         plotarea: {
    273.           backgroundColor: '#FDD',
    274.         },
    275.       },
    276.       plots: {
    277.         plot: {
    278.           lineColor: '#F00',
    279.           backgroundColor: '#F00',
    280.           marker: {
    281.             backgroundColor: '#F00',
    282.             size: 10,
    283.           },
    284.         },
    285.       },
    286.       tooltips: {
    287.         plot: {
    288.           tooltip: {
    289.             color: '#F00',
    290.             backgroundColor: '#FDD',
    291.           },
    292.         },
    293.       },
    294.       valueboxes: {
    295.         plot: {
    296.           valueBox: {
    297.             color: '#F00',
    298.             backgroundColor: '#FDD',
    299.           },
    300.         },
    301.       },
    302.       legend: {
    303.         legend: {
    304.           header: {
    305.             color: '#F00',
    306.           },
    307.           backgroundColor: '#FDD',
    308.           borderColor: '#F00',
    309.           item: {
    310.             color: '#F00',
    311.           },
    312.         },
    313.       },
    314.       source: {
    315.         source: {
    316.           backgroundColor: '#FDD',
    317.           color: '#F00',
    318.         },
    319.       },
    320.     };
    321.     const tour = new Shepherd.Tour({
    322.       defaultStepOptions: {
    323.         cancelIcon: {
    324.           enabled: true,
    325.         },
    326.         classes: 'class-1 class-2',
    327.         scrollTo: {
    328.           behavior: 'smooth',
    329.           block: 'center'
    330.         },
    331.       },
    332.     });
    333.     // Title;
    334.     tour.addStep({
    335.       title: '<strong>Title</strong>',
    336.       text: 'The title displays across the top of your chart. Learn more about how to customize and style it <a href="https://docs.zingchart.com/chart-elements/chart-components/titles/#title" target="_blank">here</a>.',
    337.       attachTo: {
    338.         element: '#myChart-graph-id0-title',
    339.         on: 'bottom',
    340.       },
    341.       buttons: [{
    342.           action() {
    343.             return this.back();
    344.           },
    345.           classes: 'shepherd-button-secondary',
    346.           text: 'Back',
    347.         },
    348.         {
    349.           action() {
    350.             return this.next();
    351.           },
    352.           text: 'Next',
    353.         },
    354.       ],
    355.       id: 'title',
    356.     });
    357.     //subtitle
    358.     tour.addStep({
    359.       title: '<strong>Subtitle</strong>',
    360.       text: 'You can add a subtitle to display below the chart title. Learn more about it <a href="https://docs.zingchart.com/chart-elements/chart-components/titles/#subtitle" target="_blank">here</a>.',
    361.       attachTo: {
    362.         element: '#myChart-graph-id0-subtitle',
    363.         on: 'bottom',
    364.       },
    365.       buttons: [{
    366.           text: 'Back',
    367.           classes: 'shepherd-button-secondary',
    368.           action: tour.back,
    369.         },
    370.         {
    371.           text: 'Next',
    372.           action: tour.next,
    373.           classes: 'shepherd-button-example-primary',
    374.         },
    375.       ],
    376.       id: 'subtitle',
    377.     });
    378.     tour.addStep({
    379.       title: '<strong>Scale X</strong>',
    380.       text: 'This represents everything tied to the x-axis (scale line, title, items, tick marks, guides). Learn more about our scales <a href="https://docs.zingchart.com/chart-elements/chart-components/scales/" target="_blank">here</a>.',
    381.       attachTo: {
    382.         element: '#myChart-graph-id0-scale-x-path',
    383.         on: 'right',
    384.       },
    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.       id: 'scaleX',
    397.     });
    398.     tour.addStep({
    399.       title: '<strong>Scale Y</strong>',
    400.       text: 'This represents everything tied to the y-axis (scale line, title, items, tick marks, guides). Learn more about our scales <a href="https://docs.zingchart.com/chart-elements/chart-components/scales/" target="_blank">here</a>.',
    401.       attachTo: {
    402.         element: '#myChart-graph-id0-scale-y-path',
    403.         on: 'bottom',
    404.       },
    405.       buttons: [{
    406.           text: 'Back',
    407.           classes: 'shepherd-button-secondary',
    408.           action: tour.back,
    409.         },
    410.         {
    411.           text: 'Next',
    412.           action: tour.next,
    413.           classes: 'shepherd-button-example-primary',
    414.         },
    415.       ],
    416.       id: 'scaleY',
    417.     });
    418.     tour.addStep({
    419.       title: '<strong>Plot Area</strong>',
    420.       text: 'This is the area where the data is plotted onto the chart. Learn more about the plot area <a href="https://docs.zingchart.com/api/json-configuration/graphset/plotarea/" target="_blank">here</a>.',
    421.       attachTo: {
    422.         element: '#myChart-graph-id0-plotarea',
    423.         on: 'right',
    424.       },
    425.       buttons: [{
    426.           text: 'Back',
    427.           classes: 'shepherd-button-secondary',
    428.           action: tour.back,
    429.         },
    430.         {
    431.           text: 'Next',
    432.           action: tour.next,
    433.           classes: 'shepherd-button-example-primary',
    434.         },
    435.       ],
    436.       id: 'plotarea',
    437.     });
    438.     tour.addStep({
    439.       title: '<strong>Plots</strong>',
    440.       text: 'This represent your data. Each object in the series array is called a plot. Learn more about plot styling <a href="https://docs.zingchart.com/api/json-configuration/graphset/plot/" target="_blank">here</a>.',
    441.       attachTo: {
    442.         element: '#myChart-graph-id0-plotset-plot-0-path',
    443.         on: 'right',
    444.       },
    445.       buttons: [{
    446.           text: 'Back',
    447.           classes: 'shepherd-button-secondary',
    448.           action: tour.back,
    449.         },
    450.         {
    451.           text: 'Next',
    452.           action: tour.next,
    453.           classes: 'shepherd-button-example-primary',
    454.         },
    455.       ],
    456.       id: 'plots',
    457.     });
    458.     tour.addStep({
    459.       title: '<strong>Tooltips</strong>',
    460.       text: 'The tooltips are labels that appear when you hover over the nodes. Hover to see them, and learn more about them <a href="https://docs.zingchart.com/chart-elements/chart-components/tooltips/" target="_blank">here</a>.',
    461.       attachTo: {
    462.         element: '#myChart-graph-id0-plotset-plot-0-path',
    463.         on: 'right',
    464.       },
    465.       buttons: [{
    466.           text: 'Back',
    467.           classes: 'shepherd-button-secondary',
    468.           action: tour.back,
    469.         },
    470.         {
    471.           text: 'Next',
    472.           action: tour.next,
    473.           classes: 'shepherd-button-example-primary',
    474.         },
    475.       ],
    476.       id: 'tooltips',
    477.     });
    478.     tour.addStep({
    479.       title: '<strong>Value Boxes</strong>',
    480.       text: 'The value boxes are fixed labels that appear adjacent to the nodes. Learn more about them <a href="https://docs.zingchart.com/chart-elements/chart-styling/value-boxes/" target="_blank">here</a>.',
    481.       attachTo: {
    482.         element: '#myChart-graph-id0-plotset-plot-0-path',
    483.         on: 'right',
    484.       },
    485.       buttons: [{
    486.           text: 'Back',
    487.           classes: 'shepherd-button-secondary',
    488.           action: tour.back,
    489.         },
    490.         {
    491.           text: 'Next',
    492.           action: tour.next,
    493.           classes: 'shepherd-button-example-primary',
    494.         },
    495.       ],
    496.       id: 'valueboxes',
    497.     });
    498.     tour.addStep({
    499.       title: '<strong>Legend</strong>',
    500.       text: 'The legend is useful on charts with multiple data sets (series). Learn more about the legend <a href="https://docs.zingchart.com/chart-elements/chart-components/legend/" target="_blank">here</a>.',
    501.       attachTo: {
    502.         element: '#myChart-legend',
    503.         on: 'bottom',
    504.       },
    505.       buttons: [{
    506.           text: 'Back',
    507.           classes: 'shepherd-button-secondary',
    508.           action: tour.back,
    509.         },
    510.         {
    511.           text: 'Next',
    512.           action: tour.next,
    513.           classes: 'shepherd-button-example-primary',
    514.         },
    515.       ],
    516.       id: 'legend',
    517.     });
    518.     tour.addStep({
    519.       title: '<strong>Source</strong>',
    520.       text: 'You can add a source for your data. Learn more about it <a href="https://docs.zingchart.com/chart-elements/chart-components/titles/#source" target="_blank">here</a>.',
    521.       attachTo: {
    522.         element: '#myChart-graph-id0-source',
    523.         on: 'top',
    524.       },
    525.       buttons: [{
    526.           text: 'Back',
    527.           classes: 'shepherd-button-secondary',
    528.           action: tour.back,
    529.         },
    530.         {
    531.           text: 'Exit',
    532.           action: tour.complete,
    533.           classes: 'shepherd-button-example-primary',
    534.         },
    535.       ],
    536.       id: 'source',
    537.     });
    538.     var modified = false;
    539.     tour.on('show', function(event) {
    540.       var target = event.step.id;
    541.       if (document.querySelector('[data-step].active')) {
    542.         document.querySelector('[data-step].active').className = '';
    543.       }
    544.       document.querySelector('[data-step="' + target + '"]').className =
    545.         'active';
    546.       if (modified) {
    547.         zingchart.exec('myChart', 'reload');
    548.       }
    549.       if (chartStates[target]) {
    550.         zingchart.exec('myChart', 'modify', {
    551.           data: chartStates[target],
    552.         });
    553.       }
    554.       modified = true;
    555.     });
    556.     tour.on('complete', function(event) {
    557.       if (document.querySelector('[data-step].active')) {
    558.         document.querySelector('[data-step].active').className = '';
    559.       }
    560.       zingchart.exec('myChart', 'reload');
    561.     });
    562.     tour.on('cancel', function(event) {
    563.       if (document.querySelector('[data-step].active')) {
    564.         document.querySelector('[data-step].active').className = '';
    565.       }
    566.       zingchart.exec('myChart', 'reload');
    567.     });
    568.     // tour.show('title');
    569.     zingchart.load = function() {
    570.       tour.start();
    571.       var steps = document.querySelectorAll('[data-step]');
    572.       for (var i = 0; i < steps.length; i++) {
    573.         steps[i].addEventListener('click', function() {
    574.           var step = this.dataset.step;
    575.           tour.show(step);
    576.         });
    577.       }
    578.     };
    579.     zingchart.render({
    580.       id: 'myChart',
    581.       data: myConfig,
    582.       height: 400,
    583.       width: '90%',
    584.     });
    585.   </script>
    586. </body>
    587.  
    588. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <meta charset="utf-8" />
    7.   <title>ZingSoft Demo</title>
    8.   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/shepherd.js/10.0.0/css/shepherd.css" />
    9.   <script src="https://cdnjs.cloudflare.com/ajax/libs/shepherd.js/10.0.0/js/shepherd.min.js"></script>
    10.   <link href="https://fonts.googleapis.com/css?family=Roboto:300,700" rel="stylesheet" type="text/css" />
    11.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    12. </head>
    13.  
    14. <body>
    15.   <div id="wrapper">
    16.     <h1>A Tour of ZingChart</h1>
    17.     <ul id="controls">
    18.       <li data-step="title">Title</li>
    19.       <li data-step="subtitle">Subtitle</li>
    20.       <li data-step="scaleX">Scale X</li>
    21.       <li data-step="scaleY">Scale Y</li>
    22.       <li data-step="plotarea">Plot Area</li>
    23.       <li data-step="plots">Plots</li>
    24.       <li data-step="tooltips">Tooltips</li>
    25.       <li data-step="valueboxes">Value Boxes</li>
    26.       <li data-step="legend">Legend</li>
    27.       <li data-step="source">Source</li>
    28.     </ul>
    29.     <div id="myChart"></div>
    30.   </div>
    31. </body>
    32.  
    33. </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.       @media (max-width: 800px) {
    66.         #controls {
    67.           border-right: none;
    68.           border-bottom: 1px solid #d9d9d9;
    69.           display: inline-block;
    70.           margin: 0px;
    71.         }
    72.  
    73.         #controls li {
    74.           padding: 5px 20px 5px 0;
    75.           display: inline-block;
    76.         }
    77.  
    78.         #myChart {
    79.           width: 100%;
    80.         }
    81.       }
    1. var myConfig = {
    2.   type: 'line',
    3.   title: {
    4.     //Chart Title
    5.     text: 'Chart Title',
    6.   },
    7.   subtitle: {
    8.     //Chart Subtitle
    9.     text: 'Chart Subtitle',
    10.   },
    11.   legend: {
    12.     //Legend
    13.     borderWidth: 2,
    14.     header: {
    15.       text: 'Legend',
    16.     },
    17.     item: {},
    18.     marker: {
    19.       type: 'circle',
    20.     },
    21.   },
    22.   plot: {
    23.     //Pertaining to Nodes
    24.     tooltip: {
    25.       //Tooltips (hover labels -- an interactive alternative is crosshairs)
    26.       shadow: false,
    27.     },
    28.     valueBox: {
    29.       //Value Boxes (fixed labels)
    30.       shadow: false,
    31.     },
    32.   },
    33.   plotarea: {
    34.     marginLeft: '13%',
    35.     marginBottom: '18%',
    36.   },
    37.   scaleX: {
    38.     //X-Axis
    39.     labels: [
    40.       'Jan',
    41.       'Feb',
    42.       'Mar',
    43.       'Apr',
    44.       'May',
    45.       'Jun',
    46.       'Jul',
    47.       'Aug',
    48.       'Sep',
    49.       'Oct',
    50.       'Nov',
    51.       'Dec',
    52.     ],
    53.     label: {
    54.       //Scale Title
    55.       text: 'X-Axis Scale Title',
    56.       fontSize: '14px',
    57.       offsetY: '15px',
    58.     },
    59.     item: {
    60.       //Scale Items (scale values or labels)
    61.       fontSize: '10px',
    62.     },
    63.     tick: {
    64.       //Tick Marks
    65.     },
    66.     guide: {
    67.       //Guides
    68.       visible: true,
    69.       lineStyle: 'solid',
    70.       alpha: 1,
    71.     },
    72.   },
    73.   scaleY: {
    74.     //Y-Axis
    75.     values: '0:200:50',
    76.     label: {
    77.       //Scale Title
    78.       text: 'Y-Axis Scale Title',
    79.       fontSize: '14px',
    80.       offsetX: '-10px',
    81.     },
    82.     item: {
    83.       fontSize: '10px',
    84.     },
    85.     tick: {
    86.       //Tick Marks
    87.     },
    88.     guide: {
    89.       //Guides
    90.       lineStyle: 'solid',
    91.       alpha: 1,
    92.     },
    93.   },
    94.   series: [{
    95.       values: [30, 34, 59, 31, 64, 65, 81, 85, 101, 75, 159, 164],
    96.     },
    97.     {
    98.       values: [64, 16, 29, 40, 35, 88, 49, 77, 121, 164, 112, 100],
    99.     },
    100.   ],
    101.   source: {
    102.     text: 'Source: Data Source',
    103.   },
    104. };
    105. var chartStates = {
    106.   title: {
    107.     title: {
    108.       color: '#F00',
    109.       backgroundColor: '#FDD',
    110.     },
    111.   },
    112.   subtitle: {
    113.     subtitle: {
    114.       color: '#F00',
    115.       backgroundColor: '#FDD',
    116.     },
    117.   },
    118.   scaleX: {
    119.     scaleX: {
    120.       lineWidth: 2,
    121.       lineColor: '#F00',
    122.       tick: {
    123.         lineWidth: 2,
    124.         lineColor: '#F00',
    125.       },
    126.       item: {
    127.         color: '#F00',
    128.       },
    129.       label: {
    130.         color: '#F00',
    131.       },
    132.       guide: {
    133.         lineColor: '#F00',
    134.       },
    135.     },
    136.   },
    137.   scaleY: {
    138.     scaleY: {
    139.       lineWidth: 2,
    140.       lineColor: '#F00',
    141.       tick: {
    142.         lineWidth: 2,
    143.         lineColor: '#F00',
    144.       },
    145.       item: {
    146.         color: '#F00',
    147.       },
    148.       label: {
    149.         color: '#F00',
    150.       },
    151.       guide: {
    152.         lineColor: '#F00',
    153.       },
    154.     },
    155.   },
    156.   plotarea: {
    157.     plotarea: {
    158.       backgroundColor: '#FDD',
    159.     },
    160.   },
    161.   plots: {
    162.     plot: {
    163.       lineColor: '#F00',
    164.       backgroundColor: '#F00',
    165.       marker: {
    166.         backgroundColor: '#F00',
    167.         size: 10,
    168.       },
    169.     },
    170.   },
    171.   tooltips: {
    172.     plot: {
    173.       tooltip: {
    174.         color: '#F00',
    175.         backgroundColor: '#FDD',
    176.       },
    177.     },
    178.   },
    179.   valueboxes: {
    180.     plot: {
    181.       valueBox: {
    182.         color: '#F00',
    183.         backgroundColor: '#FDD',
    184.       },
    185.     },
    186.   },
    187.   legend: {
    188.     legend: {
    189.       header: {
    190.         color: '#F00',
    191.       },
    192.       backgroundColor: '#FDD',
    193.       borderColor: '#F00',
    194.       item: {
    195.         color: '#F00',
    196.       },
    197.     },
    198.   },
    199.   source: {
    200.     source: {
    201.       backgroundColor: '#FDD',
    202.       color: '#F00',
    203.     },
    204.   },
    205. };
    206. const tour = new Shepherd.Tour({
    207.   defaultStepOptions: {
    208.     cancelIcon: {
    209.       enabled: true,
    210.     },
    211.     classes: 'class-1 class-2',
    212.     scrollTo: {
    213.       behavior: 'smooth',
    214.       block: 'center'
    215.     },
    216.   },
    217. });
    218. // Title;
    219. tour.addStep({
    220.   title: '<strong>Title</strong>',
    221.   text: 'The title displays across the top of your chart. Learn more about how to customize and style it <a href="https://docs.zingchart.com/chart-elements/chart-components/titles/#title" target="_blank">here</a>.',
    222.   attachTo: {
    223.     element: '#myChart-graph-id0-title',
    224.     on: 'bottom',
    225.   },
    226.   buttons: [{
    227.       action() {
    228.         return this.back();
    229.       },
    230.       classes: 'shepherd-button-secondary',
    231.       text: 'Back',
    232.     },
    233.     {
    234.       action() {
    235.         return this.next();
    236.       },
    237.       text: 'Next',
    238.     },
    239.   ],
    240.   id: 'title',
    241. });
    242. //subtitle
    243. tour.addStep({
    244.   title: '<strong>Subtitle</strong>',
    245.   text: 'You can add a subtitle to display below the chart title. Learn more about it <a href="https://docs.zingchart.com/chart-elements/chart-components/titles/#subtitle" target="_blank">here</a>.',
    246.   attachTo: {
    247.     element: '#myChart-graph-id0-subtitle',
    248.     on: 'bottom',
    249.   },
    250.   buttons: [{
    251.       text: 'Back',
    252.       classes: 'shepherd-button-secondary',
    253.       action: tour.back,
    254.     },
    255.     {
    256.       text: 'Next',
    257.       action: tour.next,
    258.       classes: 'shepherd-button-example-primary',
    259.     },
    260.   ],
    261.   id: 'subtitle',
    262. });
    263. tour.addStep({
    264.   title: '<strong>Scale X</strong>',
    265.   text: 'This represents everything tied to the x-axis (scale line, title, items, tick marks, guides). Learn more about our scales <a href="https://docs.zingchart.com/chart-elements/chart-components/scales/" target="_blank">here</a>.',
    266.   attachTo: {
    267.     element: '#myChart-graph-id0-scale-x-path',
    268.     on: 'right',
    269.   },
    270.   buttons: [{
    271.       text: 'Back',
    272.       classes: 'shepherd-button-secondary',
    273.       action: tour.back,
    274.     },
    275.     {
    276.       text: 'Next',
    277.       action: tour.next,
    278.       classes: 'shepherd-button-example-primary',
    279.     },
    280.   ],
    281.   id: 'scaleX',
    282. });
    283. tour.addStep({
    284.   title: '<strong>Scale Y</strong>',
    285.   text: 'This represents everything tied to the y-axis (scale line, title, items, tick marks, guides). Learn more about our scales <a href="https://docs.zingchart.com/chart-elements/chart-components/scales/" target="_blank">here</a>.',
    286.   attachTo: {
    287.     element: '#myChart-graph-id0-scale-y-path',
    288.     on: 'bottom',
    289.   },
    290.   buttons: [{
    291.       text: 'Back',
    292.       classes: 'shepherd-button-secondary',
    293.       action: tour.back,
    294.     },
    295.     {
    296.       text: 'Next',
    297.       action: tour.next,
    298.       classes: 'shepherd-button-example-primary',
    299.     },
    300.   ],
    301.   id: 'scaleY',
    302. });
    303. tour.addStep({
    304.   title: '<strong>Plot Area</strong>',
    305.   text: 'This is the area where the data is plotted onto the chart. Learn more about the plot area <a href="https://docs.zingchart.com/api/json-configuration/graphset/plotarea/" target="_blank">here</a>.',
    306.   attachTo: {
    307.     element: '#myChart-graph-id0-plotarea',
    308.     on: 'right',
    309.   },
    310.   buttons: [{
    311.       text: 'Back',
    312.       classes: 'shepherd-button-secondary',
    313.       action: tour.back,
    314.     },
    315.     {
    316.       text: 'Next',
    317.       action: tour.next,
    318.       classes: 'shepherd-button-example-primary',
    319.     },
    320.   ],
    321.   id: 'plotarea',
    322. });
    323. tour.addStep({
    324.   title: '<strong>Plots</strong>',
    325.   text: 'This represent your data. Each object in the series array is called a plot. Learn more about plot styling <a href="https://docs.zingchart.com/api/json-configuration/graphset/plot/" target="_blank">here</a>.',
    326.   attachTo: {
    327.     element: '#myChart-graph-id0-plotset-plot-0-path',
    328.     on: 'right',
    329.   },
    330.   buttons: [{
    331.       text: 'Back',
    332.       classes: 'shepherd-button-secondary',
    333.       action: tour.back,
    334.     },
    335.     {
    336.       text: 'Next',
    337.       action: tour.next,
    338.       classes: 'shepherd-button-example-primary',
    339.     },
    340.   ],
    341.   id: 'plots',
    342. });
    343. tour.addStep({
    344.   title: '<strong>Tooltips</strong>',
    345.   text: 'The tooltips are labels that appear when you hover over the nodes. Hover to see them, and learn more about them <a href="https://docs.zingchart.com/chart-elements/chart-components/tooltips/" target="_blank">here</a>.',
    346.   attachTo: {
    347.     element: '#myChart-graph-id0-plotset-plot-0-path',
    348.     on: 'right',
    349.   },
    350.   buttons: [{
    351.       text: 'Back',
    352.       classes: 'shepherd-button-secondary',
    353.       action: tour.back,
    354.     },
    355.     {
    356.       text: 'Next',
    357.       action: tour.next,
    358.       classes: 'shepherd-button-example-primary',
    359.     },
    360.   ],
    361.   id: 'tooltips',
    362. });
    363. tour.addStep({
    364.   title: '<strong>Value Boxes</strong>',
    365.   text: 'The value boxes are fixed labels that appear adjacent to the nodes. Learn more about them <a href="https://docs.zingchart.com/chart-elements/chart-styling/value-boxes/" target="_blank">here</a>.',
    366.   attachTo: {
    367.     element: '#myChart-graph-id0-plotset-plot-0-path',
    368.     on: 'right',
    369.   },
    370.   buttons: [{
    371.       text: 'Back',
    372.       classes: 'shepherd-button-secondary',
    373.       action: tour.back,
    374.     },
    375.     {
    376.       text: 'Next',
    377.       action: tour.next,
    378.       classes: 'shepherd-button-example-primary',
    379.     },
    380.   ],
    381.   id: 'valueboxes',
    382. });
    383. tour.addStep({
    384.   title: '<strong>Legend</strong>',
    385.   text: 'The legend is useful on charts with multiple data sets (series). Learn more about the legend <a href="https://docs.zingchart.com/chart-elements/chart-components/legend/" target="_blank">here</a>.',
    386.   attachTo: {
    387.     element: '#myChart-legend',
    388.     on: 'bottom',
    389.   },
    390.   buttons: [{
    391.       text: 'Back',
    392.       classes: 'shepherd-button-secondary',
    393.       action: tour.back,
    394.     },
    395.     {
    396.       text: 'Next',
    397.       action: tour.next,
    398.       classes: 'shepherd-button-example-primary',
    399.     },
    400.   ],
    401.   id: 'legend',
    402. });
    403. tour.addStep({
    404.   title: '<strong>Source</strong>',
    405.   text: 'You can add a source for your data. Learn more about it <a href="https://docs.zingchart.com/chart-elements/chart-components/titles/#source" target="_blank">here</a>.',
    406.   attachTo: {
    407.     element: '#myChart-graph-id0-source',
    408.     on: 'top',
    409.   },
    410.   buttons: [{
    411.       text: 'Back',
    412.       classes: 'shepherd-button-secondary',
    413.       action: tour.back,
    414.     },
    415.     {
    416.       text: 'Exit',
    417.       action: tour.complete,
    418.       classes: 'shepherd-button-example-primary',
    419.     },
    420.   ],
    421.   id: 'source',
    422. });
    423. var modified = false;
    424. tour.on('show', function(event) {
    425.   var target = event.step.id;
    426.   if (document.querySelector('[data-step].active')) {
    427.     document.querySelector('[data-step].active').className = '';
    428.   }
    429.   document.querySelector('[data-step="' + target + '"]').className =
    430.     'active';
    431.   if (modified) {
    432.     zingchart.exec('myChart', 'reload');
    433.   }
    434.   if (chartStates[target]) {
    435.     zingchart.exec('myChart', 'modify', {
    436.       data: chartStates[target],
    437.     });
    438.   }
    439.   modified = true;
    440. });
    441. tour.on('complete', function(event) {
    442.   if (document.querySelector('[data-step].active')) {
    443.     document.querySelector('[data-step].active').className = '';
    444.   }
    445.   zingchart.exec('myChart', 'reload');
    446. });
    447. tour.on('cancel', function(event) {
    448.   if (document.querySelector('[data-step].active')) {
    449.     document.querySelector('[data-step].active').className = '';
    450.   }
    451.   zingchart.exec('myChart', 'reload');
    452. });
    453. // tour.show('title');
    454. zingchart.load = function() {
    455.   tour.start();
    456.   var steps = document.querySelectorAll('[data-step]');
    457.   for (var i = 0; i < steps.length; i++) {
    458.     steps[i].addEventListener('click', function() {
    459.       var step = this.dataset.step;
    460.       tour.show(step);
    461.     });
    462.   }
    463. };
    464. zingchart.render({
    465.   id: 'myChart',
    466.   data: myConfig,
    467.   height: 400,
    468.   width: '90%',
    469. });