<!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>Scale X</h1>
<ul id="controls">
<li data-step="scaletitle">Scale Title</li>
<li data-step="scaleitems">Scale Items</li>
<li data-step="axisline">Axis Line</li>
<li data-step="tickmarks">Tick Marks</li>
<li data-step="guides">Guides</li>
<li data-step="minortickmarks">Minor Tick Marks</li>
<li data-step="minorguides">Minor Guides</li>
<li data-step="linemarker">Line Marker</li>
<li data-step="areamarker">Area Marker</li>
</ul>
<div id='myChart'></div>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var myConfig = {
"type": "scatter",
"scale-x": {
"labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
"label": {
"text": "X-Axis Scale Title",
"font-size": 14,
"offset-y": 15
},
"item": {
"font-size": 10
},
"tick": {
},
"guide": {
"visible": true,
"line-width": 1,
"line-color": "gray",
"line-style": "solid",
"alpha": 1
},
"minor-ticks": 4,
"minor-tick": {
},
"minor-guide": {
"line-width": 1,
"line-color": "#cccccc",
"line-style": "solid",
"alpha": 1
},
"markers": [{
"type": "line",
"range": [-2, 17],
"value-range": true,
"line-color": "gray",
"line-width": 2,
"alpha": 1
},
{
"type": "area",
"range": [-5, -1, 12, 23],
"value-range": true,
"background-color": "gray",
"alpha": 0.3
}
]
},
"scale-y": {
"values": "0:200:50",
"label": {
"text": "Y-Axis Scale Title",
"font-size": 14,
"offset-x": -10
},
"item": {
"font-size": 10,
},
"tick": {
},
"guide": {
"line-width": 1,
"line-color": "gray",
"line-style": "solid",
"alpha": 1
},
"minor-ticks": 4,
"minor-tick": {
},
"minor-guide": {
"line-width": 1,
"line-color": "#cccccc",
"line-style": "solid",
"alpha": 1
}
},
"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]
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: "100%"
});
var chartStates = {
'scaletitle': {
"scale-x": {
"label": {
"font-color": "red",
"background-color": "#ffe6e6"
}
}
},
'scaleitems': {
"scale-x": {
"item": {
"font-color": "red",
"background-color": "#ffe6e6"
}
}
},
'axisline': {
"scale-x": {
"line-color": "red",
"line-width": 2
}
},
'tickmarks': {
"scale-x": {
"tick": {
"line-color": "red",
"line-width": 2,
"line-style": "solid"
}
}
},
'guides': {
"scale-x": {
"guide": {
"line-color": "red"
}
}
},
'minortickmarks': {
"scale-x": {
"minor-tick": {
"line-color": "red"
}
}
},
'minorguides': {
"scale-x": {
"minor-guide": {
"line-color": "red"
}
}
},
'linemarker': {
"scale-x": {
"markers": [{
"type": "line",
"range": [-2, 17],
"value-range": true,
"line-color": "red",
"line-width": 2,
"alpha": 1
},
{
"type": "area",
"range": [-5, -1, 12, 23],
"value-range": true,
"background-color": "gray",
"alpha": 0.3
}
]
}
},
'areamarker': {
"scale-x": {
"markers": [{
"type": "line",
"range": [-2, 17],
"value-range": true,
"line-color": "gray",
"line-width": 2,
"alpha": 1
},
{
"type": "area",
"range": [-5, -1, 12, 23],
"value-range": true,
"background-color": "red",
"alpha": 0.3
}
]
}
}
}
var tour = new Shepherd.Tour({
defaults: {
classes: 'shepherd-theme-arrows'
}
});
tour.addStep('scaletitle', {
text: [
'<strong>Scale Title</strong>',
'The scale title displays below the axis line. See the <a href="http://www.zingchart.com/docs/json-attributes-syntax/scale-objects/label/" target="_blank">Scale Title JSON page</a> for an attribute list.'
],
attachTo: '#myChart-graph-id0-scale-x-label right',
buttons: [{
text: 'Exit',
classes: 'shepherd-button-secondary',
action: tour.cancel
},
{
text: 'Next',
action: tour.next,
classes: 'shepherd-button-example-primary'
}
]
});
tour.addStep('scaleitems', {
text: [
'<strong>Scale Items</strong>',
'The scale items are the values or labels that appear below the axis line. See the <a href="http://www.zingchart.com/docs/json-attributes-syntax/scale-objects/item/" target="_blank">Scale Items JSON page</a> for a format/styling attribute list.'
],
attachTo: '#myChart-graph-id0-scale_x-item_11-path right',
buttons: [{
text: 'Back',
classes: 'shepherd-button-secondary',
action: tour.back
},
{
text: 'Next',
action: tour.next,
classes: 'shepherd-button-example-primary'
}
]
});
tour.addStep('axisline', {
text: [
'<strong>Axis Line</strong>',
'This is the scale-x axis line. You can style the line color, width, and style.'
],
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('tickmarks', {
text: [
'<strong>Tick Marks</strong>',
'The tick marks are drawn based on the scale step value. See the <a href="http://www.zingchart.com/docs/json-attributes-syntax/scale-objects/tick/" target="_blank">Tick Marks JSON page</a> for an attribute list.'
],
attachTo: '#myChart-graph-id0-scale-x-tick-11-path right',
buttons: [{
text: 'Back',
classes: 'shepherd-button-secondary',
action: tour.back
},
{
text: 'Next',
action: tour.next,
classes: 'shepherd-button-example-primary'
}
]
});
tour.addStep('guides', {
text: [
'<strong>Guides</strong>',
'The guides are drawn based on the number of tick marks. See the <a href="http://www.zingchart.com/docs/json-attributes-syntax/scale-objects/guide/" target="_blank">Guides JSON page</a> for an attribute list.'
],
attachTo: '#myChart-graph-id0-scale-x-guide-11-path right',
buttons: [{
text: 'Back',
classes: 'shepherd-button-secondary',
action: tour.back
},
{
text: 'Next',
action: tour.next,
classes: 'shepherd-button-example-primary'
}
]
});
tour.addStep('minortickmarks', {
text: [
'<strong>Minor Tick Marks</strong>',
'You can add minor tick marks, which appear between the major tick marks. See the <a href="http://www.zingchart.com/docs/json-attributes-syntax/scale-objects/minor-tick/" target="_blank">Minor Tick Marks JSON page</a> for an attribute list.'
],
attachTo: '#myChart-graph-id0-scale-x-minor-tick-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('minorguides', {
text: [
'<strong>Minor Guides</strong>',
'You can add minor guides, which are drawn based on the number of minor tick marks. See the <a href="http://www.zingchart.com/docs/json-attributes-syntax/scale-objects/minor-guide/" target="_blank">Minor Guides JSON page</a> for an attribute list.'
],
attachTo: '#myChart-graph-id0-scale-x-minor-guide-1-path right',
buttons: [{
text: 'Back',
classes: 'shepherd-button-secondary',
action: tour.back
},
{
text: 'Next',
action: tour.next,
classes: 'shepherd-button-example-primary'
}
]
});
tour.addStep('linemarker', {
text: [
'<strong>Line Marker</strong>',
'Scale markers allow you to draw lines to indicate a pattern or trend, such as this trend line. See the <a href="http://www.zingchart.com/docs/json-attributes-syntax/scale-objects/markers/" target="_blank">Scale Markers JSON page</a> for an attribute list.'
],
attachTo: '#myChart-graph-id0-scale-y-guide-4-path right',
buttons: [{
text: 'Back',
classes: 'shepherd-button-secondary',
action: tour.back
},
{
text: 'Next',
action: tour.next,
classes: 'shepherd-button-example-primary'
}
]
});
tour.addStep('areamarker', {
text: [
'<strong>Area Marker</strong>',
'You can also create area scale markers to emphasize a band or section of data. See the <a href="http://www.zingchart.com/docs/json-attributes-syntax/scale-objects/markers/" target="_blank">Scale Markers JSON page</a> for an attribute list.'
],
attachTo: '#myChart-graph-id0-scale-y-minor-guide-1-path right',
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>Scale X</h1>
<ul id="controls">
<li data-step="scaletitle">Scale Title</li>
<li data-step="scaleitems">Scale Items</li>
<li data-step="axisline">Axis Line</li>
<li data-step="tickmarks">Tick Marks</li>
<li data-step="guides">Guides</li>
<li data-step="minortickmarks">Minor Tick Marks</li>
<li data-step="minorguides">Minor Guides</li>
<li data-step="linemarker">Line Marker</li>
<li data-step="areamarker">Area Marker</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": "scatter",
"scale-x": {
"labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
"label": {
"text": "X-Axis Scale Title",
"font-size": 14,
"offset-y": 15
},
"item": {
"font-size": 10
},
"tick": {
},
"guide": {
"visible": true,
"line-width": 1,
"line-color": "gray",
"line-style": "solid",
"alpha": 1
},
"minor-ticks": 4,
"minor-tick": {
},
"minor-guide": {
"line-width": 1,
"line-color": "#cccccc",
"line-style": "solid",
"alpha": 1
},
"markers": [{
"type": "line",
"range": [-2, 17],
"value-range": true,
"line-color": "gray",
"line-width": 2,
"alpha": 1
},
{
"type": "area",
"range": [-5, -1, 12, 23],
"value-range": true,
"background-color": "gray",
"alpha": 0.3
}
]
},
"scale-y": {
"values": "0:200:50",
"label": {
"text": "Y-Axis Scale Title",
"font-size": 14,
"offset-x": -10
},
"item": {
"font-size": 10,
},
"tick": {
},
"guide": {
"line-width": 1,
"line-color": "gray",
"line-style": "solid",
"alpha": 1
},
"minor-ticks": 4,
"minor-tick": {
},
"minor-guide": {
"line-width": 1,
"line-color": "#cccccc",
"line-style": "solid",
"alpha": 1
}
},
"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]
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: "100%"
});
var chartStates = {
'scaletitle': {
"scale-x": {
"label": {
"font-color": "red",
"background-color": "#ffe6e6"
}
}
},
'scaleitems': {
"scale-x": {
"item": {
"font-color": "red",
"background-color": "#ffe6e6"
}
}
},
'axisline': {
"scale-x": {
"line-color": "red",
"line-width": 2
}
},
'tickmarks': {
"scale-x": {
"tick": {
"line-color": "red",
"line-width": 2,
"line-style": "solid"
}
}
},
'guides': {
"scale-x": {
"guide": {
"line-color": "red"
}
}
},
'minortickmarks': {
"scale-x": {
"minor-tick": {
"line-color": "red"
}
}
},
'minorguides': {
"scale-x": {
"minor-guide": {
"line-color": "red"
}
}
},
'linemarker': {
"scale-x": {
"markers": [{
"type": "line",
"range": [-2, 17],
"value-range": true,
"line-color": "red",
"line-width": 2,
"alpha": 1
},
{
"type": "area",
"range": [-5, -1, 12, 23],
"value-range": true,
"background-color": "gray",
"alpha": 0.3
}
]
}
},
'areamarker': {
"scale-x": {
"markers": [{
"type": "line",
"range": [-2, 17],
"value-range": true,
"line-color": "gray",
"line-width": 2,
"alpha": 1
},
{
"type": "area",
"range": [-5, -1, 12, 23],
"value-range": true,
"background-color": "red",
"alpha": 0.3
}
]
}
}
}
var tour = new Shepherd.Tour({
defaults: {
classes: 'shepherd-theme-arrows'
}
});
tour.addStep('scaletitle', {
text: [
'<strong>Scale Title</strong>',
'The scale title displays below the axis line. See the <a href="http://www.zingchart.com/docs/json-attributes-syntax/scale-objects/label/" target="_blank">Scale Title JSON page</a> for an attribute list.'
],
attachTo: '#myChart-graph-id0-scale-x-label right',
buttons: [{
text: 'Exit',
classes: 'shepherd-button-secondary',
action: tour.cancel
},
{
text: 'Next',
action: tour.next,
classes: 'shepherd-button-example-primary'
}
]
});
tour.addStep('scaleitems', {
text: [
'<strong>Scale Items</strong>',
'The scale items are the values or labels that appear below the axis line. See the <a href="http://www.zingchart.com/docs/json-attributes-syntax/scale-objects/item/" target="_blank">Scale Items JSON page</a> for a format/styling attribute list.'
],
attachTo: '#myChart-graph-id0-scale_x-item_11-path right',
buttons: [{
text: 'Back',
classes: 'shepherd-button-secondary',
action: tour.back
},
{
text: 'Next',
action: tour.next,
classes: 'shepherd-button-example-primary'
}
]
});
tour.addStep('axisline', {
text: [
'<strong>Axis Line</strong>',
'This is the scale-x axis line. You can style the line color, width, and style.'
],
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('tickmarks', {
text: [
'<strong>Tick Marks</strong>',
'The tick marks are drawn based on the scale step value. See the <a href="http://www.zingchart.com/docs/json-attributes-syntax/scale-objects/tick/" target="_blank">Tick Marks JSON page</a> for an attribute list.'
],
attachTo: '#myChart-graph-id0-scale-x-tick-11-path right',
buttons: [{
text: 'Back',
classes: 'shepherd-button-secondary',
action: tour.back
},
{
text: 'Next',
action: tour.next,
classes: 'shepherd-button-example-primary'
}
]
});
tour.addStep('guides', {
text: [
'<strong>Guides</strong>',
'The guides are drawn based on the number of tick marks. See the <a href="http://www.zingchart.com/docs/json-attributes-syntax/scale-objects/guide/" target="_blank">Guides JSON page</a> for an attribute list.'
],
attachTo: '#myChart-graph-id0-scale-x-guide-11-path right',
buttons: [{
text: 'Back',
classes: 'shepherd-button-secondary',
action: tour.back
},
{
text: 'Next',
action: tour.next,
classes: 'shepherd-button-example-primary'
}
]
});
tour.addStep('minortickmarks', {
text: [
'<strong>Minor Tick Marks</strong>',
'You can add minor tick marks, which appear between the major tick marks. See the <a href="http://www.zingchart.com/docs/json-attributes-syntax/scale-objects/minor-tick/" target="_blank">Minor Tick Marks JSON page</a> for an attribute list.'
],
attachTo: '#myChart-graph-id0-scale-x-minor-tick-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('minorguides', {
text: [
'<strong>Minor Guides</strong>',
'You can add minor guides, which are drawn based on the number of minor tick marks. See the <a href="http://www.zingchart.com/docs/json-attributes-syntax/scale-objects/minor-guide/" target="_blank">Minor Guides JSON page</a> for an attribute list.'
],
attachTo: '#myChart-graph-id0-scale-x-minor-guide-1-path right',
buttons: [{
text: 'Back',
classes: 'shepherd-button-secondary',
action: tour.back
},
{
text: 'Next',
action: tour.next,
classes: 'shepherd-button-example-primary'
}
]
});
tour.addStep('linemarker', {
text: [
'<strong>Line Marker</strong>',
'Scale markers allow you to draw lines to indicate a pattern or trend, such as this trend line. See the <a href="http://www.zingchart.com/docs/json-attributes-syntax/scale-objects/markers/" target="_blank">Scale Markers JSON page</a> for an attribute list.'
],
attachTo: '#myChart-graph-id0-scale-y-guide-4-path right',
buttons: [{
text: 'Back',
classes: 'shepherd-button-secondary',
action: tour.back
},
{
text: 'Next',
action: tour.next,
classes: 'shepherd-button-example-primary'
}
]
});
tour.addStep('areamarker', {
text: [
'<strong>Area Marker</strong>',
'You can also create area scale markers to emphasize a band or section of data. See the <a href="http://www.zingchart.com/docs/json-attributes-syntax/scale-objects/markers/" target="_blank">Scale Markers JSON page</a> for an attribute list.'
],
attachTo: '#myChart-graph-id0-scale-y-minor-guide-1-path right',
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);
});
}
};