<!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',
},
legend: {
//Legend
borderWidth: 2,
header: {
text: 'Legend',
},
item: {},
marker: {
type: 'circle',
},
},
plot: {
//Pertaining to Nodes
tooltip: {
//Tooltips (hover labels -- an interactive alternative is crosshairs)
shadow: false,
},
valueBox: {
//Value Boxes (fixed labels)
shadow: false,
},
},
plotarea: {
marginLeft: '13%',
marginBottom: '18%',
},
scaleX: {
//X-Axis
labels: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
],
label: {
//Scale Title
text: 'X-Axis Scale Title',
fontSize: '14px',
offsetY: '15px',
},
item: {
//Scale Items (scale values or labels)
fontSize: '10px',
},
tick: {
//Tick Marks
},
guide: {
//Guides
visible: true,
lineStyle: 'solid',
alpha: 1,
},
},
scaleY: {
//Y-Axis
values: '0:200:50',
label: {
//Scale Title
text: 'Y-Axis Scale Title',
fontSize: '14px',
offsetX: '-10px',
},
item: {
fontSize: '10px',
},
tick: {
//Tick Marks
},
guide: {
//Guides
lineStyle: 'solid',
alpha: 1,
},
},
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',
backgroundColor: '#F00',
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="https://docs.zingchart.com/chart-elements/chart-components/titles/#title" 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="https://docs.zingchart.com/chart-elements/chart-components/titles/#subtitle" 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="https://docs.zingchart.com/chart-elements/chart-components/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="https://docs.zingchart.com/chart-elements/chart-components/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="https://docs.zingchart.com/api/json-configuration/graphset/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="https://docs.zingchart.com/api/json-configuration/graphset/plot/" 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="https://docs.zingchart.com/chart-elements/chart-components/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="https://docs.zingchart.com/chart-elements/chart-styling/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="https://docs.zingchart.com/chart-elements/chart-components/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="https://docs.zingchart.com/chart-elements/chart-components/titles/#source" 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',
},
legend: {
//Legend
borderWidth: 2,
header: {
text: 'Legend',
},
item: {},
marker: {
type: 'circle',
},
},
plot: {
//Pertaining to Nodes
tooltip: {
//Tooltips (hover labels -- an interactive alternative is crosshairs)
shadow: false,
},
valueBox: {
//Value Boxes (fixed labels)
shadow: false,
},
},
plotarea: {
marginLeft: '13%',
marginBottom: '18%',
},
scaleX: {
//X-Axis
labels: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
],
label: {
//Scale Title
text: 'X-Axis Scale Title',
fontSize: '14px',
offsetY: '15px',
},
item: {
//Scale Items (scale values or labels)
fontSize: '10px',
},
tick: {
//Tick Marks
},
guide: {
//Guides
visible: true,
lineStyle: 'solid',
alpha: 1,
},
},
scaleY: {
//Y-Axis
values: '0:200:50',
label: {
//Scale Title
text: 'Y-Axis Scale Title',
fontSize: '14px',
offsetX: '-10px',
},
item: {
fontSize: '10px',
},
tick: {
//Tick Marks
},
guide: {
//Guides
lineStyle: 'solid',
alpha: 1,
},
},
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',
backgroundColor: '#F00',
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="https://docs.zingchart.com/chart-elements/chart-components/titles/#title" 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="https://docs.zingchart.com/chart-elements/chart-components/titles/#subtitle" 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="https://docs.zingchart.com/chart-elements/chart-components/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="https://docs.zingchart.com/chart-elements/chart-components/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="https://docs.zingchart.com/api/json-configuration/graphset/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="https://docs.zingchart.com/api/json-configuration/graphset/plot/" 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="https://docs.zingchart.com/chart-elements/chart-components/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="https://docs.zingchart.com/chart-elements/chart-styling/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="https://docs.zingchart.com/chart-elements/chart-components/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="https://docs.zingchart.com/chart-elements/chart-components/titles/#source" 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%',
});