<!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>
.chart--container {
height: 100%;
width: 100%;
min-height: 530px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body>
<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"];
let chartConfig = {
type: 'scatter',
globals: {
fontFamily: 'Roboto'
},
backgroundColor: '#fff',
plot: {
tooltip: {
text: '<table style=\'width:140px;height:80px;border-collapse:collapse;\'> <tr> <td colspan=\'2\' style=\'font-size:18px !important;color:black;text-align:left;font-family:"Roboto";\'>%data-analystname <br><span style=\'font-family:"Roboto";font-size:14px !important;color:rgb(177,177,177);vertical-align:top;\'>%data-country</span></td> </tr> <tr> <td style=\'padding:3px !important;text-align:left;font-size:18px !important;font-weight:bold;font-family:"Roboto";\'>%data-current<br><span style=\'font-size:12px !important;color:rgb(177,177,177);vertical-align:top;font-weight:none;font-family:"Roboto";\'>Current</span></td> <td style=\'padding:3px !important;text-align:left;color:black;font-size:18px !important;font-weight:bold;font-family:"Roboto";\'>%data-previous<br><span style=\'font-size:12px !important;color:rgb(177,177,177);vertical-align:top;font-family:"Roboto";\'>Previous</span></td> </tr> <tr> <td style=\'padding:4px 2px 2px 2px !important;text-align:left;color:black;vertical-align:top;font-size:18px !important;font-family:"Roboto";\'>%data-posted</td> </tr> </table>',
padding: '5px 5px 0 10px',
alpha: 1,
backgroundColor: '#FFF',
borderColor: '#ccc',
borderRadius: '5px',
borderWidth: '1px',
callout: true,
calloutHeight: '6px',
calloutPosition: 'bottom',
calloutWidth: '16px',
color: '#000',
fontSize: '18px',
height: '130px',
htmlMode: true,
placement: 'horizontal',
shadow: false,
textAlign: 'left'
},
marker: {
type: 'circle',
backgroundColor: '#0094b3',
borderWidth: '0px',
shadow: false
}
},
plotarea: {
marginTop: '20px',
marginLeft: '90px'
},
scaleX: {
values: '0:200:10',
guide: {
lineColor: '#CCC',
lineStyle: 'solid',
lineWidth: '1px'
},
item: {
fontColor: '#757575',
fontSize: '12px'
},
label: {
text: 'Estimate Age (Days)',
padding: '10px 10px 10px 10px',
fontColor: '#757575',
fontSize: '16px'
},
lineColor: '#757575',
minorGuide: {
visible: false
},
minorTick: {
lineColor: '#757575',
lineWidth: '1px',
placement: 'outer',
size: '5px'
},
minorTicks: 5,
mirrored: true,
tick: {
lineColor: '#757575',
lineWidth: '1px',
size: '10px'
}
},
scaleY: {
values: '0:1:0.05',
guide: {
lineColor: '#CCC',
lineStyle: 'solid',
lineWidth: '1px'
},
item: {
fontColor: '#757575',
fontSize: '12px'
},
itemsOverlap: true,
label: {
text: 'Dividends Per Share',
padding: '10px 30px 10px 10px',
fontColor: '#757575',
fontSize: '16px'
},
lineColor: '#bbb',
markers: [{
type: 'line',
lineColor: '#0094b3',
lineWidth: '1px',
range: [0.29]
},
{
type: 'line',
lineColor: '#F2BFBF',
lineWidth: '1px',
range: [0.29]
}
],
maxItems: 20,
minorGuide: {
visible: false
},
minorTick: {
lineColor: '#757575',
lineWidth: '1px',
placement: 'outer',
size: '5px'
},
minorTicks: 5,
minValue: 'auto',
tick: {
lineColor: '#757575',
lineWidth: '1px',
size: '10px'
}
},
series: [{
text: 'Included Analysts',
values: [
[31, 0.03],
[16, 0.34],
[49, 0.9],
[193, 0.84],
[58, 0.19],
[58, 0.62],
[10, 0.32],
[11, 0.26],
[171, 0.11],
[7, 0.77],
[175, 0.97],
[109, 0.53],
[122, 0.65],
[25, 0.79],
[161, 0.45]
],
dataAnalystname: ['Olivia Bates', 'Cecilia Stevens', 'Aiden Wallace', 'Emily Dean', 'Josephine White', 'Gavin Curtis', 'Estelle Santos', 'Ruth Norton', 'Susan Allen', 'Keith Poole', 'Amanda Owens', 'Peter Adams', 'Jose Ray', 'Harriet Underwood', 'Jeremy Craig'],
dataCountry: ['Belgium', 'Wake Island', 'Montenegro', 'Kiribati', 'Chad', 'Ecuador', 'Marshall Islands', 'Papua New Guinea', 'Egypt', 'Western Sahara', 'Bermuda', 'Haiti', 'Comoros', 'Bhutan', 'Uruguay'],
dataCurrent: [0.96, 0.06, 0.86, 0.18, 0.97, 0.93, 0.46, 0.04, 0.84, 1, 0.23, 0.74, 0.82, 0.32, 0.28],
dataPosted: ['1.25.2015', '6.26.2015', '5.3.2015', '3.15.2015', '7.21.2015', '3.2.2015', '6.15.2015', '7.6.2015', '5.13.2015', '6.24.2015', '7.20.2015', '5.22.2015', '12.24.2015', '6.17.2015', '10.24.2015'],
dataPrevious: [0.67, 0.27, 0.64, 0.97, 0.08, 0.31, 0.65, 0.36, 0.71, 0.8, 0.93, 0.69, 0.95, 0.19, 0.11],
error: {
lineColor: '#7FC9D9',
lineWidth: '2px',
size: '8px'
},
errors: [
[0, null],
[0, null],
[0, null]
],
marker: {
type: 'circle',
backgroundColor: '#7FC9D9',
borderWidth: '0px',
shadow: false,
size: '10px'
},
palette: 0
},
{
values: [
[161, 0.14],
[45, 0.18],
[138, 1],
[115, 0.85],
[76, 0.76],
[139, 0.76],
[154, 0.7],
[187, 0.47],
[179, 0.81],
[75, 0.54],
[85, 0.23],
[162, 0.55],
[32, 0.96],
[159, 0.2],
[129, 0.87]
],
dataAnalystname: ['Beulah Ward', 'Emma Washington', 'Francis Schneider', 'Jeff Lamb', 'Jimmy Jacobs', 'Lou Richardson', 'Winnie Glover', 'Lucinda Page', 'Lois Bryan', 'Myrtle Robbins', 'Melvin Manning', 'Ophelia Chandler', 'Willie Griffith', 'Nancy Gregory', 'Ricky Walton'],
dataCountry: ['Ghana', 'Monaco', 'Puerto Rico', 'Lesotho', 'Estonia', 'Greece', 'Uruguay', 'Dominica', 'Nauru', 'Anguilla', 'Eritrea', 'Algeria', 'Bhutan', 'Anguilla', 'Samoa'],
dataCurrent: [0.22, 0.84, 0.42, 0.42, 0.43, 0.21, 0.02, 0.71, 0.13, 0.98, 0.04, 0.83, 1, 0.72, 0.32],
dataPosted: ['4.21.2015', '12.20.2015', '3.24.2015', '11.28.2015', '7.20.2015', '4.17.2015', '10.25.2015', '1.9.2015', '9.30.2015', '8.7.2015', '4.27.2015', '10.17.2015', '5.13.2015', '11.23.2015', '3.31.2015'],
dataPrevious: [0.19, 0.9, 0.9, 0.63, 0.38, 0.18, 0.97, 0.4, 0.93, 0.64, 0.69, 0.75, 0.77, 0.35, 0.51],
error: {
lineColor: '#D4D4D4',
lineWidth: '2px',
size: '8px'
},
errors: [
[0, null]
],
marker: {
type: 'circle',
backgroundColor: '#D4D4D4',
borderWidth: '0px',
shadow: false,
size: '10px'
}
}
]
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
let chartConfig = {
type: 'scatter',
globals: {
fontFamily: 'Roboto'
},
backgroundColor: '#fff',
plot: {
tooltip: {
text: '<table style=\'width:140px;height:80px;border-collapse:collapse;\'> <tr> <td colspan=\'2\' style=\'font-size:18px !important;color:black;text-align:left;font-family:"Roboto";\'>%data-analystname <br><span style=\'font-family:"Roboto";font-size:14px !important;color:rgb(177,177,177);vertical-align:top;\'>%data-country</span></td> </tr> <tr> <td style=\'padding:3px !important;text-align:left;font-size:18px !important;font-weight:bold;font-family:"Roboto";\'>%data-current<br><span style=\'font-size:12px !important;color:rgb(177,177,177);vertical-align:top;font-weight:none;font-family:"Roboto";\'>Current</span></td> <td style=\'padding:3px !important;text-align:left;color:black;font-size:18px !important;font-weight:bold;font-family:"Roboto";\'>%data-previous<br><span style=\'font-size:12px !important;color:rgb(177,177,177);vertical-align:top;font-family:"Roboto";\'>Previous</span></td> </tr> <tr> <td style=\'padding:4px 2px 2px 2px !important;text-align:left;color:black;vertical-align:top;font-size:18px !important;font-family:"Roboto";\'>%data-posted</td> </tr> </table>',
padding: '5px 5px 0 10px',
alpha: 1,
backgroundColor: '#FFF',
borderColor: '#ccc',
borderRadius: '5px',
borderWidth: '1px',
callout: true,
calloutHeight: '6px',
calloutPosition: 'bottom',
calloutWidth: '16px',
color: '#000',
fontSize: '18px',
height: '130px',
htmlMode: true,
placement: 'horizontal',
shadow: false,
textAlign: 'left'
},
marker: {
type: 'circle',
backgroundColor: '#0094b3',
borderWidth: '0px',
shadow: false
}
},
plotarea: {
marginTop: '20px',
marginLeft: '90px'
},
scaleX: {
values: '0:200:10',
guide: {
lineColor: '#CCC',
lineStyle: 'solid',
lineWidth: '1px'
},
item: {
fontColor: '#757575',
fontSize: '12px'
},
label: {
text: 'Estimate Age (Days)',
padding: '10px 10px 10px 10px',
fontColor: '#757575',
fontSize: '16px'
},
lineColor: '#757575',
minorGuide: {
visible: false
},
minorTick: {
lineColor: '#757575',
lineWidth: '1px',
placement: 'outer',
size: '5px'
},
minorTicks: 5,
mirrored: true,
tick: {
lineColor: '#757575',
lineWidth: '1px',
size: '10px'
}
},
scaleY: {
values: '0:1:0.05',
guide: {
lineColor: '#CCC',
lineStyle: 'solid',
lineWidth: '1px'
},
item: {
fontColor: '#757575',
fontSize: '12px'
},
itemsOverlap: true,
label: {
text: 'Dividends Per Share',
padding: '10px 30px 10px 10px',
fontColor: '#757575',
fontSize: '16px'
},
lineColor: '#bbb',
markers: [
{
type: 'line',
lineColor: '#0094b3',
lineWidth: '1px',
range: [0.29]
},
{
type: 'line',
lineColor: '#F2BFBF',
lineWidth: '1px',
range: [0.29]
}
],
maxItems: 20,
minorGuide: {
visible: false
},
minorTick: {
lineColor: '#757575',
lineWidth: '1px',
placement: 'outer',
size: '5px'
},
minorTicks: 5,
minValue: 'auto',
tick: {
lineColor: '#757575',
lineWidth: '1px',
size: '10px'
}
},
series: [
{
text: 'Included Analysts',
values: [[31, 0.03], [16, 0.34], [49, 0.9], [193, 0.84], [58, 0.19], [58, 0.62], [10, 0.32], [11, 0.26], [171, 0.11], [7, 0.77], [175, 0.97], [109, 0.53], [122, 0.65], [25, 0.79], [161, 0.45]],
dataAnalystname: ['Olivia Bates', 'Cecilia Stevens', 'Aiden Wallace', 'Emily Dean', 'Josephine White', 'Gavin Curtis', 'Estelle Santos', 'Ruth Norton', 'Susan Allen', 'Keith Poole', 'Amanda Owens', 'Peter Adams', 'Jose Ray', 'Harriet Underwood', 'Jeremy Craig'],
dataCountry: ['Belgium', 'Wake Island', 'Montenegro', 'Kiribati', 'Chad', 'Ecuador', 'Marshall Islands', 'Papua New Guinea', 'Egypt', 'Western Sahara', 'Bermuda', 'Haiti', 'Comoros', 'Bhutan', 'Uruguay'],
dataCurrent: [0.96, 0.06, 0.86, 0.18, 0.97, 0.93, 0.46, 0.04, 0.84, 1, 0.23, 0.74, 0.82, 0.32, 0.28],
dataPosted: ['1.25.2015', '6.26.2015', '5.3.2015', '3.15.2015', '7.21.2015', '3.2.2015', '6.15.2015', '7.6.2015', '5.13.2015', '6.24.2015', '7.20.2015', '5.22.2015', '12.24.2015', '6.17.2015', '10.24.2015'],
dataPrevious: [0.67, 0.27, 0.64, 0.97, 0.08, 0.31, 0.65, 0.36, 0.71, 0.8, 0.93, 0.69, 0.95, 0.19, 0.11],
error: {
lineColor: '#7FC9D9',
lineWidth: '2px',
size: '8px'
},
errors: [[0, null],
[0, null],
[0, null]],
marker: {
type: 'circle',
backgroundColor: '#7FC9D9',
borderWidth: '0px',
shadow: false,
size: '10px'
},
palette: 0
},
{
values: [[161, 0.14], [45, 0.18], [138, 1], [115, 0.85], [76, 0.76], [139, 0.76], [154, 0.7], [187, 0.47], [179, 0.81], [75, 0.54], [85, 0.23], [162, 0.55], [32, 0.96], [159, 0.2], [129, 0.87]],
dataAnalystname: ['Beulah Ward', 'Emma Washington', 'Francis Schneider', 'Jeff Lamb', 'Jimmy Jacobs', 'Lou Richardson', 'Winnie Glover', 'Lucinda Page', 'Lois Bryan', 'Myrtle Robbins', 'Melvin Manning', 'Ophelia Chandler', 'Willie Griffith', 'Nancy Gregory', 'Ricky Walton'],
dataCountry: ['Ghana', 'Monaco', 'Puerto Rico', 'Lesotho', 'Estonia', 'Greece', 'Uruguay', 'Dominica', 'Nauru', 'Anguilla', 'Eritrea', 'Algeria', 'Bhutan', 'Anguilla', 'Samoa'],
dataCurrent: [0.22, 0.84, 0.42, 0.42, 0.43, 0.21, 0.02, 0.71, 0.13, 0.98, 0.04, 0.83, 1, 0.72, 0.32],
dataPosted: ['4.21.2015', '12.20.2015', '3.24.2015', '11.28.2015', '7.20.2015', '4.17.2015', '10.25.2015', '1.9.2015', '9.30.2015', '8.7.2015', '4.27.2015', '10.17.2015', '5.13.2015', '11.23.2015', '3.31.2015'],
dataPrevious: [0.19, 0.9, 0.9, 0.63, 0.38, 0.18, 0.97, 0.4, 0.93, 0.64, 0.69, 0.75, 0.77, 0.35, 0.51],
error: {
lineColor: '#D4D4D4',
lineWidth: '2px',
size: '8px'
},
errors: [[0, null]],
marker: {
type: 'circle',
backgroundColor: '#D4D4D4',
borderWidth: '0px',
shadow: false,
size: '10px'
}
}
]
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
