<!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>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.chart--container {
min-height: 150px;
width: 100%;
height: 100%;
max-width: 1200px;
margin: auto;
}
.zc-ref {
display: none;
}
</style>
</head>
<body>
<!-- CHART CONTAINER -->
<div id="myChart" class="chart--container">
<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window:load event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
// Javascript code to execute after DOM content
// full ZingChart schema can be found here:
// https://www.zingchart.com/docs/api/json-configuration/
let chartConfig = {
type: 'mixed',
globals: {
fontSize: '18px'
},
title: {
text: 'Internet Explorer Usage vs Murder Rate',
fontSize: 36,
},
legend: {
marker: {
size: 12
},
item: {
padding: 10
},
marginTop: '80px',
marginRight: '90px',
toggleAction: 'hide'
},
plotarea: {
margin: '65 dynamic'
},
// plot represents general series, or plots, styling
plot: {
refAngle: -45,
valueBox: {
visible: false
},
// hoverstate
tooltip: {
// % symbol represents a token to insert a value. Full list here:
// https://www.zingchart.com/docs/tutorials/chart-elements/zingchart-tokens/
text: 'In %kl there were %data-murders murders<br> and %plot-text of %v%',
padding: '10px 15px',
borderRadius: '3px',
short: true,
},
// animation docs here:
// https://www.zingchart.com/docs/tutorials/design-and-styling/chart-animation/#animation__effect
animation: {
effect: 'ANIMATION_EXPAND_BOTTOM',
method: 'ANIMATION_STRONG_EASE_OUT',
sequence: 'ANIMATION_BY_PLOT',
speed: 875
},
hoverState: {
visible: false
}
},
scaleX: {
labels: ['2011', '2012', '2013', '2014', '2015', '2016'],
item: {
fontSize: '14px'
}
},
scaleY: {
minValue: 14000,
maxValue: 18000,
short: true,
label: {
text: 'Murders'
},
guide: {
visible: false
},
maxItems: 5,
item: {
fontSize: '14px'
}
},
scaleY2: {
values: [30, 45, 60, 75, 90],
maxItems: 5,
format: '%v%',
label: {
text: 'IE Browser Market Share'
},
item: {
fontSize: '14px'
}
},
series: [{
zIndex: 2,
type: 'line',
aspect: 'spline',
text: 'Murders in USA',
// plot values
values: [16900, 16700, 16400, 14900, 14700, 14600],
lineWidth: '6px',
lineColor: '#4caf50',
marker: {
size: '10px',
borderWidth: '3px',
borderColor: '#81c784',
backgroundColor: '#fff'
},
legendMarker: {
type: 'circle',
showLine: true,
},
animation: {
effect: 'ANIMATION_EXPAND_LEFT',
},
valueBox: {
visible: true,
placement: 'bottom',
short: true,
backgroundColor: '#fff',
offsetX: '-15px',
offsetY: '8px'
},
tooltip: {
visible: false
}
},
{
type: 'bar',
text: 'IE 11 Market Share',
dataMurders: [16900, 16700, 16400, 14900, 14700, 14600],
values: [78, 72, 68, 65, 60, 46],
// plot values
backgroundColor: '#0095d9',
scales: 'scale-x, scale-y-2',
valueBox: {
visible: true,
placement: 'top-out',
text: '%v%'
}
}
]
};
// render chart
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
});
</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>
<!-- CHART CONTAINER -->
<div id="myChart" class="chart--container">
<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
</div>
</body>
</html>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.chart--container {
min-height: 150px;
width: 100%;
height: 100%;
max-width: 1200px;
margin: auto;
}
.zc-ref {
display: none;
}
// window:load event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
// Javascript code to execute after DOM content
// full ZingChart schema can be found here:
// https://www.zingchart.com/docs/api/json-configuration/
let chartConfig = {
type: 'mixed',
globals: {
fontSize: '18px'
},
title: {
text: 'Internet Explorer Usage vs Murder Rate',
fontSize: 36,
},
legend: {
marker: {
size: 12
},
item: {
padding: 10
},
marginTop: '80px',
marginRight: '90px',
toggleAction: 'hide'
},
plotarea: {
margin: '65 dynamic'
},
// plot represents general series, or plots, styling
plot: {
refAngle: -45,
valueBox: {
visible: false
},
// hoverstate
tooltip: {
// % symbol represents a token to insert a value. Full list here:
// https://www.zingchart.com/docs/tutorials/chart-elements/zingchart-tokens/
text: 'In %kl there were %data-murders murders<br> and %plot-text of %v%',
padding: '10px 15px',
borderRadius: '3px',
short: true,
},
// animation docs here:
// https://www.zingchart.com/docs/tutorials/design-and-styling/chart-animation/#animation__effect
animation: {
effect: 'ANIMATION_EXPAND_BOTTOM',
method: 'ANIMATION_STRONG_EASE_OUT',
sequence: 'ANIMATION_BY_PLOT',
speed: 875
},
hoverState: {
visible: false
}
},
scaleX: {
labels: ['2011', '2012', '2013', '2014', '2015', '2016'],
item: {
fontSize: '14px'
}
},
scaleY: {
minValue: 14000,
maxValue: 18000,
short: true,
label: {
text: 'Murders'
},
guide: {
visible: false
},
maxItems: 5,
item: {
fontSize: '14px'
}
},
scaleY2: {
values: [30, 45, 60, 75, 90],
maxItems: 5,
format: '%v%',
label: {
text: 'IE Browser Market Share'
},
item: {
fontSize: '14px'
}
},
series: [{
zIndex: 2,
type: 'line',
aspect: 'spline',
text: 'Murders in USA',
// plot values
values: [16900, 16700, 16400, 14900, 14700, 14600],
lineWidth: '6px',
lineColor: '#4caf50',
marker: {
size: '10px',
borderWidth: '3px',
borderColor: '#81c784',
backgroundColor: '#fff'
},
legendMarker: {
type: 'circle',
showLine: true,
},
animation: {
effect: 'ANIMATION_EXPAND_LEFT',
},
valueBox: {
visible: true,
placement: 'bottom',
short: true,
backgroundColor: '#fff',
offsetX: '-15px',
offsetY: '8px'
},
tooltip: {
visible: false
}
},
{
type: 'bar',
text: 'IE 11 Market Share',
dataMurders: [16900, 16700, 16400, 14900, 14700, 14600],
values: [78, 72, 68, 65, 60, 46],
// plot values
backgroundColor: '#0095d9',
scales: 'scale-x, scale-y-2',
valueBox: {
visible: true,
placement: 'top-out',
text: '%v%'
}
}
]
};
// render chart
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
});