<!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 {
min-height: 530px;
width: 100%;
height: 100%;
}
.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 = {
backgroundColor: '#BBDEFB',
title: {
text: 'Giro d\'Italia',
align: 'left',
marginTop: '5px',
fontSize: '18px'
},
subtitle: {
text: 'Tour of Italy',
align: 'left',
fontSize: '12px'
},
shapes: [{
type: 'zingchart.maps',
options: {
name: 'ita',
style: {
tooltip: {
borderColor: '#000',
borderWidth: '1px',
fontSize: '18px'
},
controls: {
placement: 'tr'
},
hoverState: {
visible: false
},
items: {
AB: {
backgroundColor: '#FF7043'
},
AP: {
backgroundColor: '#AEEA00'
},
BA: {
backgroundColor: '#FFEE58'
},
CA: {
backgroundColor: '#FF7043'
},
CM: {
backgroundColor: '#9E9D24'
},
FI: {
backgroundColor: '#ccc'
},
LA: {
backgroundColor: '#F48FB1'
},
LI: {
backgroundColor: '#ccc'
},
MO: {
backgroundColor: '#00ACC1'
},
SA: {
backgroundColor: '#FFD54F'
},
SI: {
backgroundColor: '#F48FB1'
},
TO: {
backgroundColor: '#9E9D24'
},
UM: {
backgroundColor: '#FFEE58'
}
},
label: {
visible: false
}
}
}
}]
};
// example format of data for tour
let oCities = {
'Agrigento': {
type: 'square',
text: 'Spend 1 wonderful night in Agrigento',
active: false,
importance: 1,
incoming: ['Enna'],
latitude: 37.3111,
longitude: 13.5765,
nights: '1',
outgoing: ['Erice'],
x: '13.5765lon',
y: '37.3111lat'
},
'Enna': {
type: 'square',
text: 'Enna',
active: false,
color: '#000',
importance: 3,
incoming: ['Taormina'],
latitude: 37.5165,
longitude: 14.3792,
outgoing: ['Agrigento'],
x: '14.3792lon',
y: '37.5165lat'
},
'Erice': {
type: 'square',
text: 'Erice',
active: false,
color: '#000',
importance: 3,
incoming: ['Agrigento'],
latitude: 38.0381,
longitude: 12.5873,
outgoing: ['Palermo'],
x: '12.5873lon',
y: '38.0381lat'
},
'Monte Cassino': {
type: 'square',
text: 'Monte Cassino',
active: false,
color: '#000',
importance: 3,
incoming: ['Rome'],
latitude: 41.4916,
longitude: 13.8159,
outgoing: ['Pompeii'],
x: '13.8159lon',
y: '41.4916lat'
},
'Palermo': {
type: 'star5',
text: 'Palermo has a 1 night stay and is your final destination.',
active: false,
borderColor: '#ffffff',
borderWidth: '2px',
color: '#7B1FA2',
importance: 1,
incoming: ['Erice'],
latitude: 38.1157,
longitude: 13.3613,
nights: '1',
x: '13.3613lon',
y: '38.1157lat'
},
'Pompeii': {
type: 'square',
text: 'Pompeii',
active: false,
color: '#000',
importance: 3,
incoming: ['Monte Cassino'],
latitude: 40.7462,
longitude: 14.4989,
outgoing: ['Sorrento'],
x: '14.4989lon',
y: '40.7462lat'
},
'Rome': {
type: 'square',
text: 'Rome is the start of your tour!',
active: false,
borderColor: '#ffffff',
borderWidth: '2px',
color: '#4caf50',
fontColor: '#ffffff',
fontSize: '16px',
importance: 1,
latitude: 41.9028,
longitude: 12.4964,
nights: '1',
outgoing: ['Monte Cassino'],
x: '12.4964lon',
y: '41.9028lat'
},
'Sorrento': {
type: 'circle',
text: 'Spend 2 nights in Sorrento',
active: false,
importance: 1,
incoming: ['Pompeii'],
latitude: 40.6263,
longitude: 14.3758,
nights: '2',
outgoing: ['Taormina'],
x: '14.3758lon',
y: '40.6263lat'
},
'Taormina': {
type: 'circle',
text: 'Spend 3 lavish nights in Taormina',
active: false,
importance: 1,
incoming: ['Sorrento'],
latitude: 37.8516,
longitude: 15.2853,
nights: '3',
outgoing: ['Enna'],
x: '15.2853lon',
y: '37.8516lat'
}
};
/*
* A small example of how one might go about drawing a destination on maps.
* First we loop through and get the xy cordinates and draw the geometric shapes.
* 2nd we loop through the cities and draw the connecting lines.
*/
for (let city in oCities) {
chartConfig.shapes.push(drawCity(city));
chartConfig.shapes.push(drawPath(city));
}
function drawCity(city) {
return {
type: oCities[city].type,
id: city,
backgroundColor: (oCities[city].color) ? oCities[city].color : '#B71C1C',
borderColor: (oCities[city].borderColor) ? oCities[city].borderColor : 'none',
borderWidth: (oCities[city].borderWidth) ? oCities[city].borderWidth : 0,
size: (oCities[city].importance == 3) ? 6 : 10,
x: oCities[city].x,
y: oCities[city].y,
map: 'ita', // need map attribute for lon lat xy to work
zIndex: 99999,
label: {
text: oCities[city].nights,
fontColor: (oCities[city].fontColor) ? oCities[city].fontColor : '#ffffff',
fontSize: (oCities[city].fontSize) ? oCities[city].fontSize : 10
},
hoverState: {
size: (oCities[city].importance == 3) ? 8 : 12
},
tooltip: {
text: (oCities[city].text) ? oCities[city].text : '',
padding: '10px',
backgroundColor: (oCities[city].color) ? oCities[city].color : '#B71C1C',
borderRadius: '5px',
fontColor: '#FFF',
fontSize: '14px'
}
}
}
function drawPath(city) {
// only draw outgoing cities
if (oCities[city].outgoing && oCities[city].outgoing.length > 0) {
let outoingCity = oCities[city].outgoing[0];
return {
type: 'line',
id: city + '_to_' + outoingCity,
lineWidth: '1px',
lineColor: '#000',
map: 'ita', // need map attribute for lon lat xy to work
points: [
[oCities[city].x, oCities[city].y],
[oCities[outoingCity].x, oCities[outoingCity].y]
],
zIndex: 50
}
}
return {};
}
zingchart.loadModules('maps,maps-ita');
console.log(chartConfig)
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
let chartConfig = {
backgroundColor: '#BBDEFB',
title: {
text: 'Giro d\'Italia',
align: 'left',
marginTop: '5px',
fontSize: '18px'
},
subtitle: {
text: 'Tour of Italy',
align: 'left',
fontSize: '12px'
},
shapes: [
{
type: 'zingchart.maps',
options: {
name: 'ita',
style: {
tooltip: {
borderColor: '#000',
borderWidth: '1px',
fontSize: '18px'
},
controls: {
placement: 'tr'
},
hoverState: {
visible: false
},
items: {
AB: {
backgroundColor: '#FF7043'
},
AP: {
backgroundColor: '#AEEA00'
},
BA: {
backgroundColor: '#FFEE58'
},
CA: {
backgroundColor: '#FF7043'
},
CM: {
backgroundColor: '#9E9D24'
},
FI: {
backgroundColor: '#ccc'
},
LA: {
backgroundColor: '#F48FB1'
},
LI: {
backgroundColor: '#ccc'
},
MO: {
backgroundColor: '#00ACC1'
},
SA: {
backgroundColor: '#FFD54F'
},
SI: {
backgroundColor: '#F48FB1'
},
TO: {
backgroundColor: '#9E9D24'
},
UM: {
backgroundColor: '#FFEE58'
}
},
label: {
visible: false
}
}
}
}
]
};
// example format of data for tour
let oCities = {
'Agrigento': {
type: 'square',
text: 'Spend 1 wonderful night in Agrigento',
active: false,
importance: 1,
incoming: ['Enna'],
latitude: 37.3111,
longitude: 13.5765,
nights: '1',
outgoing: ['Erice'],
x: '13.5765lon',
y: '37.3111lat'
},
'Enna': {
type: 'square',
text: 'Enna',
active: false,
color: '#000',
importance: 3,
incoming: ['Taormina'],
latitude: 37.5165,
longitude: 14.3792,
outgoing: ['Agrigento'],
x: '14.3792lon',
y: '37.5165lat'
},
'Erice': {
type: 'square',
text: 'Erice',
active: false,
color: '#000',
importance: 3,
incoming: ['Agrigento'],
latitude: 38.0381,
longitude: 12.5873,
outgoing: ['Palermo'],
x: '12.5873lon',
y: '38.0381lat'
},
'Monte Cassino': {
type: 'square',
text: 'Monte Cassino',
active: false,
color: '#000',
importance: 3,
incoming: ['Rome'],
latitude: 41.4916,
longitude: 13.8159,
outgoing: ['Pompeii'],
x: '13.8159lon',
y: '41.4916lat'
},
'Palermo': {
type: 'star5',
text: 'Palermo has a 1 night stay and is your final destination.',
active: false,
borderColor: '#ffffff',
borderWidth: '2px',
color: '#7B1FA2',
importance: 1,
incoming: ['Erice'],
latitude: 38.1157,
longitude: 13.3613,
nights: '1',
x: '13.3613lon',
y: '38.1157lat'
},
'Pompeii': {
type: 'square',
text: 'Pompeii',
active: false,
color: '#000',
importance: 3,
incoming: ['Monte Cassino'],
latitude: 40.7462,
longitude: 14.4989,
outgoing: ['Sorrento'],
x: '14.4989lon',
y: '40.7462lat'
},
'Rome': {
type: 'square',
text: 'Rome is the start of your tour!',
active: false,
borderColor: '#ffffff',
borderWidth: '2px',
color: '#4caf50',
fontColor: '#ffffff',
fontSize: '16px',
importance: 1,
latitude: 41.9028,
longitude: 12.4964,
nights: '1',
outgoing: ['Monte Cassino'],
x: '12.4964lon',
y: '41.9028lat'
},
'Sorrento': {
type: 'circle',
text: 'Spend 2 nights in Sorrento',
active: false,
importance: 1,
incoming: ['Pompeii'],
latitude: 40.6263,
longitude: 14.3758,
nights: '2',
outgoing: ['Taormina'],
x: '14.3758lon',
y: '40.6263lat'
},
'Taormina': {
type: 'circle',
text: 'Spend 3 lavish nights in Taormina',
active: false,
importance: 1,
incoming: ['Sorrento'],
latitude: 37.8516,
longitude: 15.2853,
nights: '3',
outgoing: ['Enna'],
x: '15.2853lon',
y: '37.8516lat'
}
};
/*
* A small example of how one might go about drawing a destination on maps.
* First we loop through and get the xy cordinates and draw the geometric shapes.
* 2nd we loop through the cities and draw the connecting lines.
*/
for (let city in oCities) {
chartConfig.shapes.push(drawCity(city));
chartConfig.shapes.push(drawPath(city));
}
function drawCity(city) {
return {
type: oCities[city].type,
id: city,
backgroundColor: (oCities[city].color) ? oCities[city].color : '#B71C1C',
borderColor: (oCities[city].borderColor) ? oCities[city].borderColor : 'none',
borderWidth: (oCities[city].borderWidth) ? oCities[city].borderWidth : 0,
size: (oCities[city].importance == 3) ? 6 : 10,
x: oCities[city].x,
y: oCities[city].y,
map: 'ita', // need map attribute for lon lat xy to work
zIndex: 99999,
label: {
text: oCities[city].nights,
fontColor: (oCities[city].fontColor) ? oCities[city].fontColor : '#ffffff',
fontSize: (oCities[city].fontSize) ? oCities[city].fontSize : 10
},
hoverState: {
size: (oCities[city].importance == 3) ? 8 : 12
},
tooltip: {
text: (oCities[city].text) ? oCities[city].text : '',
padding: '10px',
backgroundColor: (oCities[city].color) ? oCities[city].color : '#B71C1C',
borderRadius: '5px',
fontColor: '#FFF',
fontSize: '14px'
}
}
}
function drawPath(city) {
// only draw outgoing cities
if (oCities[city].outgoing && oCities[city].outgoing.length > 0) {
let outoingCity = oCities[city].outgoing[0];
return {
type: 'line',
id: city + '_to_' + outoingCity,
lineWidth: '1px',
lineColor: '#000',
map: 'ita', // need map attribute for lon lat xy to work
points: [
[oCities[city].x, oCities[city].y],
[oCities[outoingCity].x, oCities[outoingCity].y]
],
zIndex: 50
}
}
return {};
}
zingchart.loadModules('maps,maps-ita');
console.log(chartConfig)
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
