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