<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style></style>
</head>
<body>
<div id='myChart'></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var myConfig = {
type: "bubble",
backgroundColor: '#F7F7F7',
title: {
text: 'Points Along A Sin Wave'
},
plot: {
selectionMode: "none", // turn off normal selection
marker: {
size: 5,
borderWidth: 0,
alpha: .85,
},
selectedMarker: {
size: 8,
borderWidth: 1,
borderColor: '#000',
},
hoverMarker: {
size: 7
},
tooltip: {
backgroundColor: '#FFF',
fontColor: '#000',
fontSize: 14,
borderRadius: 4,
borderWidth: 1,
borderColor: '#000',
text: '%t: %v'
}
},
plotarea: {
margin: 'dynamic'
},
scaleX: {
visible: false,
},
scaleY: {
minValue: -2,
maxValue: 2,
step: 1,
guide: {
visible: false
},
lineColor: '#90CAF9',
lineWidth: 2,
refLine: {
lineColor: '#90CAF9',
lineWidth: 2
},
item: {
fontColor: '#90CAF9',
fontSize: 14
},
tick: {
lineColor: '#90CAF9'
}
},
// This styling will be pushed during the next build.
// You can style the mask background, border and line color
selectionTool: {
mask: {
borderWidth: 2,
borderColor: 'red',
backgroundColor: 'yellow',
alpha: .5
}
},
series: [{
// Lets create some random values that look cool
values: (function() {
var aV = [];
var len = 500;
var x = 0;
while (len--) {
x = (Math.random() * 10).toFixed(3) - 0;
aV.push([
x,
(Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
]);
}
return aV.sort();
})(),
backgroundColor: '#F48FB1',
text: 'Sin Wave One',
marker: {
backgroundColor: '#F48FB1'
}
},
{
// Lets create some random values that look cool
values: (function() {
var aV = [];
var len = 600;
var x = 0;
while (len--) {
x = (Math.random() * 10).toFixed(3) - 0;
aV.push([
x,
(Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
]);
}
return aV.sort();
})(),
backgroundColor: '#F48FB1',
text: 'Sin Wave Two',
marker: {
backgroundColor: '#CE93D8'
}
}
]
};
/* Lets create a place to store our function. Typically it is not recomended
* to modify the zingchart object. This is for advanced users. It is good
* practice to keep all your charting stuff together, in this case your
* custom functions within the zingchart object! This will also help with
* name collisions within the window object.
*
* BE WARNED: you can overwrite stuff in the zingchart object if you are
* not careful. This will mess stuff up.
*/
zingchart.insert_company_name_customFncs = {};
zingchart.insert_company_name_customFncs.clearSelection = function(e) {
zingchart.exec(e.id, 'clearselection');
}
// Load the selection-tool and render the chart once the module is loaded
zingchart.loadModules('selection-tool', function() {
zingchart.render({
id: 'myChart',
// defined data this way since context menu needs to be defined in root (above graphset)
data: {
gui: {
contextMenu: {
customItems: [{
text: 'Clear Selection',
function: 'zingchart.insert_company_name_customFncs.clearSelection()',
id: 'clearSelection'
}]
}
},
graphset: [myConfig]
},
height: 400,
width: '100%',
modules: 'selection-tool'
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id='myChart'></div>
</body>
</html>
var myConfig = {
type: "bubble",
backgroundColor: '#F7F7F7',
title: {
text: 'Points Along A Sin Wave'
},
plot: {
selectionMode: "none", // turn off normal selection
marker: {
size: 5,
borderWidth: 0,
alpha: .85,
},
selectedMarker: {
size: 8,
borderWidth: 1,
borderColor: '#000',
},
hoverMarker: {
size: 7
},
tooltip: {
backgroundColor: '#FFF',
fontColor: '#000',
fontSize: 14,
borderRadius: 4,
borderWidth: 1,
borderColor: '#000',
text: '%t: %v'
}
},
plotarea: {
margin: 'dynamic'
},
scaleX: {
visible: false,
},
scaleY: {
minValue: -2,
maxValue: 2,
step: 1,
guide: {
visible: false
},
lineColor: '#90CAF9',
lineWidth: 2,
refLine: {
lineColor: '#90CAF9',
lineWidth: 2
},
item: {
fontColor: '#90CAF9',
fontSize: 14
},
tick: {
lineColor: '#90CAF9'
}
},
// This styling will be pushed during the next build.
// You can style the mask background, border and line color
selectionTool: {
mask: {
borderWidth: 2,
borderColor: 'red',
backgroundColor: 'yellow',
alpha: .5
}
},
series: [{
// Lets create some random values that look cool
values: (function() {
var aV = [];
var len = 500;
var x = 0;
while (len--) {
x = (Math.random() * 10).toFixed(3) - 0;
aV.push([
x,
(Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
]);
}
return aV.sort();
})(),
backgroundColor: '#F48FB1',
text: 'Sin Wave One',
marker: {
backgroundColor: '#F48FB1'
}
},
{
// Lets create some random values that look cool
values: (function() {
var aV = [];
var len = 600;
var x = 0;
while (len--) {
x = (Math.random() * 10).toFixed(3) - 0;
aV.push([
x,
(Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
]);
}
return aV.sort();
})(),
backgroundColor: '#F48FB1',
text: 'Sin Wave Two',
marker: {
backgroundColor: '#CE93D8'
}
}
]
};
/* Lets create a place to store our function. Typically it is not recomended
* to modify the zingchart object. This is for advanced users. It is good
* practice to keep all your charting stuff together, in this case your
* custom functions within the zingchart object! This will also help with
* name collisions within the window object.
*
* BE WARNED: you can overwrite stuff in the zingchart object if you are
* not careful. This will mess stuff up.
*/
zingchart.insert_company_name_customFncs = {};
zingchart.insert_company_name_customFncs.clearSelection = function(e) {
zingchart.exec(e.id, 'clearselection');
}
// Load the selection-tool and render the chart once the module is loaded
zingchart.loadModules('selection-tool', function() {
zingchart.render({
id: 'myChart',
// defined data this way since context menu needs to be defined in root (above graphset)
data: {
gui: {
contextMenu: {
customItems: [{
text: 'Clear Selection',
function: 'zingchart.insert_company_name_customFncs.clearSelection()',
id: 'clearSelection'
}]
}
},
graphset: [myConfig]
},
height: 400,
width: '100%',
modules: 'selection-tool'
});
});