<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta charset="utf-8" />
<title>ZingSoft Demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/shepherd.js/10.0.0/css/shepherd.css" />
<script nonce="undefined" src="https://cdnjs.cloudflare.com/ajax/libs/shepherd.js/10.0.0/js/shepherd.min.js"></script>
<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;
}
@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="plots">Plots</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',
},
};
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',
},
},
plots: {
plot: {
lineColor: '#F00', // for line, area etc..
backgroundColor: '#F00', // for bars, pie, everything else
marker: {
backgroundColor: '#F00',
size: 10,
},
},
},
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',
},
},
};
const tour = new Shepherd.Tour({
defaultStepOptions: {
cancelIcon: {
enabled: true,
},
classes: 'class-1 class-2',
scrollTo: {
behavior: 'smooth',
block: 'center'
},
},
});
// Title;
tour.addStep({
title: '<strong>Title</strong>',
text: '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: {
element: '#myChart-graph-id0-title',
on: 'bottom',
},
buttons: [{
action() {
return this.back();
},
classes: 'shepherd-button-secondary',
text: 'Back',
},
{
action() {
return this.next();
},
text: 'Next',
},
],
id: 'title',
});
//subtitle
tour.addStep({
title: '<strong>Subtitle</strong>',
text: '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: {
element: '#myChart-graph-id0-subtitle',
on: 'bottom',
},
buttons: [{
text: 'Back',
classes: 'shepherd-button-secondary',
action: tour.back,
},
{
text: 'Next',
action: tour.next,
classes: 'shepherd-button-example-primary',
},
],
id: 'subtitle',
});
tour.addStep({
title: '<strong>Scale X</strong>',
text: '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: {
element: '#myChart-graph-id0-scale-x-path',
on: 'right',
},
buttons: [{
text: 'Back',
classes: 'shepherd-button-secondary',
action: tour.back,
},
{
text: 'Next',
action: tour.next,
classes: 'shepherd-button-example-primary',
},
],
id: 'scaleX',
});
tour.addStep({
title: '<strong>Scale Y</strong>',
text: '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: {
element: '#myChart-graph-id0-scale-y-path',
on: 'bottom',
},
buttons: [{
text: 'Back',
classes: 'shepherd-button-secondary',
action: tour.back,
},
{
text: 'Next',
action: tour.next,
classes: 'shepherd-button-example-primary',
},
],
id: 'scaleY',
});
tour.addStep({
title: '<strong>Plot Area</strong>',
text: '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: {
element: '#myChart-graph-id0-plotarea',
on: 'right',
},
buttons: [{
text: 'Back',
classes: 'shepherd-button-secondary',
action: tour.back,
},
{
text: 'Next',
action: tour.next,
classes: 'shepherd-button-example-primary',
},
],
id: 'plotarea',
});
tour.addStep({
title: '<strong>Plots</strong>',
text: 'This represent your data. Each object in the series array is called a plot. Learn more about plot styling <a href="//www.zingchart.com/docs/basic-elements/plot-series-styling/" target="_blank">here</a>.',
attachTo: {
element: '#myChart-graph-id0-plotset-plot-0-path',
on: 'right',
},
buttons: [{
text: 'Back',
classes: 'shepherd-button-secondary',
action: tour.back,
},
{
text: 'Next',
action: tour.next,
classes: 'shepherd-button-example-primary',
},
],
id: 'plots',
});
tour.addStep({
title: '<strong>Tooltips</strong>',
text: '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: {
element: '#myChart-graph-id0-plotset-plot-0-path',
on: 'right',
},
buttons: [{
text: 'Back',
classes: 'shepherd-button-secondary',
action: tour.back,
},
{
text: 'Next',
action: tour.next,
classes: 'shepherd-button-example-primary',
},
],
id: 'tooltips',
});
tour.addStep({
title: '<strong>Value Boxes</strong>',
text: '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: {
element: '#myChart-graph-id0-plotset-plot-0-path',
on: 'right',
},
buttons: [{
text: 'Back',
classes: 'shepherd-button-secondary',
action: tour.back,
},
{
text: 'Next',
action: tour.next,
classes: 'shepherd-button-example-primary',
},
],
id: 'valueboxes',
});
tour.addStep({
title: '<strong>Legend</strong>',
text: '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: {
element: '#myChart-legend',
on: 'bottom',
},
buttons: [{
text: 'Back',
classes: 'shepherd-button-secondary',
action: tour.back,
},
{
text: 'Next',
action: tour.next,
classes: 'shepherd-button-example-primary',
},
],
id: 'legend',
});
tour.addStep({
title: '<strong>Source</strong>',
text: '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: {
element: '#myChart-graph-id0-source',
on: 'top',
},
buttons: [{
text: 'Back',
classes: 'shepherd-button-secondary',
action: tour.back,
},
{
text: 'Exit',
action: tour.complete,
classes: 'shepherd-button-example-primary',
},
],
id: 'source',
});
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');
});
// tour.show('title');
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);
});
}
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: '90%',
});
</script>
</body>
</html>
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',
},
};
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',
},
},
plots: {
plot: {
lineColor: '#F00', // for line, area etc..
backgroundColor: '#F00', // for bars, pie, everything else
marker: {
backgroundColor: '#F00',
size: 10,
},
},
},
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',
},
},
};
const tour = new Shepherd.Tour({
defaultStepOptions: {
cancelIcon: {
enabled: true,
},
classes: 'class-1 class-2',
scrollTo: {
behavior: 'smooth',
block: 'center'
},
},
});
// Title;
tour.addStep({
title: '<strong>Title</strong>',
text: '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: {
element: '#myChart-graph-id0-title',
on: 'bottom',
},
buttons: [{
action() {
return this.back();
},
classes: 'shepherd-button-secondary',
text: 'Back',
},
{
action() {
return this.next();
},
text: 'Next',
},
],
id: 'title',
});
//subtitle
tour.addStep({
title: '<strong>Subtitle</strong>',
text: '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: {
element: '#myChart-graph-id0-subtitle',
on: 'bottom',
},
buttons: [{
text: 'Back',
classes: 'shepherd-button-secondary',
action: tour.back,
},
{
text: 'Next',
action: tour.next,
classes: 'shepherd-button-example-primary',
},
],
id: 'subtitle',
});
tour.addStep({
title: '<strong>Scale X</strong>',
text: '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: {
element: '#myChart-graph-id0-scale-x-path',
on: 'right',
},
buttons: [{
text: 'Back',
classes: 'shepherd-button-secondary',
action: tour.back,
},
{
text: 'Next',
action: tour.next,
classes: 'shepherd-button-example-primary',
},
],
id: 'scaleX',
});
tour.addStep({
title: '<strong>Scale Y</strong>',
text: '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: {
element: '#myChart-graph-id0-scale-y-path',
on: 'bottom',
},
buttons: [{
text: 'Back',
classes: 'shepherd-button-secondary',
action: tour.back,
},
{
text: 'Next',
action: tour.next,
classes: 'shepherd-button-example-primary',
},
],
id: 'scaleY',
});
tour.addStep({
title: '<strong>Plot Area</strong>',
text: '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: {
element: '#myChart-graph-id0-plotarea',
on: 'right',
},
buttons: [{
text: 'Back',
classes: 'shepherd-button-secondary',
action: tour.back,
},
{
text: 'Next',
action: tour.next,
classes: 'shepherd-button-example-primary',
},
],
id: 'plotarea',
});
tour.addStep({
title: '<strong>Plots</strong>',
text: 'This represent your data. Each object in the series array is called a plot. Learn more about plot styling <a href="//www.zingchart.com/docs/basic-elements/plot-series-styling/" target="_blank">here</a>.',
attachTo: {
element: '#myChart-graph-id0-plotset-plot-0-path',
on: 'right',
},
buttons: [{
text: 'Back',
classes: 'shepherd-button-secondary',
action: tour.back,
},
{
text: 'Next',
action: tour.next,
classes: 'shepherd-button-example-primary',
},
],
id: 'plots',
});
tour.addStep({
title: '<strong>Tooltips</strong>',
text: '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: {
element: '#myChart-graph-id0-plotset-plot-0-path',
on: 'right',
},
buttons: [{
text: 'Back',
classes: 'shepherd-button-secondary',
action: tour.back,
},
{
text: 'Next',
action: tour.next,
classes: 'shepherd-button-example-primary',
},
],
id: 'tooltips',
});
tour.addStep({
title: '<strong>Value Boxes</strong>',
text: '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: {
element: '#myChart-graph-id0-plotset-plot-0-path',
on: 'right',
},
buttons: [{
text: 'Back',
classes: 'shepherd-button-secondary',
action: tour.back,
},
{
text: 'Next',
action: tour.next,
classes: 'shepherd-button-example-primary',
},
],
id: 'valueboxes',
});
tour.addStep({
title: '<strong>Legend</strong>',
text: '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: {
element: '#myChart-legend',
on: 'bottom',
},
buttons: [{
text: 'Back',
classes: 'shepherd-button-secondary',
action: tour.back,
},
{
text: 'Next',
action: tour.next,
classes: 'shepherd-button-example-primary',
},
],
id: 'legend',
});
tour.addStep({
title: '<strong>Source</strong>',
text: '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: {
element: '#myChart-graph-id0-source',
on: 'top',
},
buttons: [{
text: 'Back',
classes: 'shepherd-button-secondary',
action: tour.back,
},
{
text: 'Exit',
action: tour.complete,
classes: 'shepherd-button-example-primary',
},
],
id: 'source',
});
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');
});
// tour.show('title');
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);
});
}
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: '90%',
});