<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.zc-body {
background-color: #fff;
}
.zc-grid {
margin: 0 auto;
padding: 1rem;
width: 100%;
max-width: 1400px;
box-sizing: border-box;
background: #fff;
}
.zc-chart {
min-height: 500px;
}
.zc-ref {
display: none;
}
/* TABLET: PORTRAIT+ */
@media screen and (min-width:768px) {
.zc-grid {
display: grid;
grid-template-columns: 500px 1fr;
grid-column-gap: 2rem;
}
}
</style>
</head>
<body class="zc-body">
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/airports.js'></script>
<div class="zc-grid">
<div id="zcmap" class="zc-chart">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
<div id="zcline" class="zc-chart"></div>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
// INIT
// -----------------------------
// Define Module Location
zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
// Load Maps
zingchart.loadModules('maps, maps-fraL2', render);
// DEFINE CHART LOCATIONS (IDS)
// -----------------------------
// Main chart render location(s)
var line = 'zcline';
var map = 'zcmap';
// VARS
// -----------------------------
var iMaxAltitude = 0,
aValues = [],
aDataInfo = [],
aDataSize = [],
i;
// MAP CHART CONFIG
// -----------------------------
var gmap = {
type: 'null',
x: 10,
y: 0,
width: '100%',
height: '100%',
legend: {
layout: '1x',
margin: 'auto auto 10 10',
'toggle-action': 'none',
'border-width': 0,
header: {
text: 'Airports in France',
align: 'left',
'font-size': 11
}
},
series: [{
'legend-marker': {
type: 'circle',
size: 3,
'background-color': '#467686'
},
text: 'Small Airport'
},
{
'legend-marker': {
type: 'circle',
size: 5,
'background-color': '#022733'
},
text: 'Medium Airport'
},
{
'legend-marker': {
type: 'circle',
size: 8,
'background-color': '#26596A'
},
text: 'Large Airport'
}
],
tooltip: {
align: 'left',
callout: true,
'callout-width': 16,
'callout-height': 8,
'border-radius': 3,
padding: '10 20',
shadow: true,
'shadow-color': '#333',
'shadow-alpha': 0.7,
'font-size': 13,
'font-weight': 'bold',
'shadow-distance': 2
},
shapes: [{
type: 'zingchart.maps',
options: {
name: 'fraL2',
scale: true,
style: {
'border-alpha': 0.1,
'border-color': '#666',
label: {
visible: false
},
'hover-state': {
'background-color': 'none',
'shadow-alpha': 0.1,
'shadow-distance': 0,
shadow: true,
'shadow-color': '#369'
}
}
}
}]
};
// CHART DATA
// -----------------------------
// Setup Airports
for (var i = 0; i < AIRPORTS.length; i++) {
// Some alt missing or negative
if (typeof(AIRPORTS[i][6]) === 'undefined') {
AIRPORTS[i][6] = 0;
}
AIRPORTS[i][6] = Math.max(0, AIRPORTS[i][6]);
}
// Sort
AIRPORTS.sort(function(a, b) {
return parseInt(a[6], 10) - parseInt(b[6], 10);
});
// Add data
for (var i = 0; i < AIRPORTS.length; i++) {
iMaxAltitude = Math.max(iMaxAltitude, Math.round(AIRPORTS[i][6] * 0.3048));
var size = 2,
color = '#467686';
if (AIRPORTS[i][2] === 'medium_airport') {
size = 5;
color = '#022733';
}
if (AIRPORTS[i][2] === 'large_airport') {
size = 8;
color = '#26596A';
}
aValues.push(Math.max(0, Math.round(AIRPORTS[i][6] * 0.3048)));
aDataInfo.push('<span style="font-size:15px">' + AIRPORTS[i][1] + '</span><br>' + AIRPORTS[i][3]);
aDataSize.push(size);
gmap.shapes.push({
id: 'airport' + i,
type: 'circle',
size: size,
'background-color': color,
y: AIRPORTS[i][4] + 'lat',
x: AIRPORTS[i][5] + 'lon',
map: 'fraL2',
'hover-state': {
size: size + 4,
'background-color': 'none',
'border-width': 2,
'border-color': color
},
tooltip: {
text: '<span style="font-size:15px">' + AIRPORTS[i][1] + '</span><br>' + AIRPORTS[i][3]
}
});
}
// LINE CHART CONFIG
// -----------------------------
var gline = {
x: 0,
y: 0,
width: '100%',
height: '100%',
type: 'line',
plotarea: {
margin: '10 20 25 40'
},
tooltip: {
visible: false
},
title: {
text: 'Airports sorted by altitude',
padding: '15 10 10 45',
align: 'left',
'font-size': 11
},
'scale-x': {
zooming: true,
visible: false
},
'scroll-x': {},
'scale-y': {
'offset-start': 10,
minValue: 0,
maxValue: iMaxAltitude,
short: true,
format: '%vm',
item: {
'font-size': 10
}
},
'crosshair-x': {
'plot-label': {
text: '%data-info<br>%node-value m',
align: 'left',
'border-radius': 3,
padding: '10 20',
'border-width': 1,
shadow: true,
'shadow-color': '#333',
'shadow-alpha': 0.7,
'font-size': 13,
'font-weight': 'bold',
'shadow-distance': 2
}
},
series: [{
'line-width': 1,
'line-color': '#467686',
'max-nodes': 99999,
values: aValues,
'data-info': aDataInfo,
'data-size': aDataSize,
marker: {
'border-width': 0,
type: 'circle',
size: 2,
'background-color': '#467686',
rules: [{
rule: '%data-size === 5',
size: 5,
'background-color': '#022733'
},
{
rule: '%data-size === 8',
size: 8,
'background-color': '#26596A'
}
]
}
}]
};
// ADD CHART INTERACTION
// -----------------------------
// Mouseout
zingchart.bind(line, 'guide_mouseout', function(p) {
zingchart.exec(map, 'removeobject', {
type: 'shape',
dynamic: true,
id: 'marker'
});
});
// Mousemove
zingchart.bind(line, 'guide_mousemove', function(p) {
var idx = p.items[0].nodeindex;
var size = 2;
if (AIRPORTS[idx][2] === 'medium_airport') {
size = 5;
}
if (AIRPORTS[idx][2] === 'large_airport') {
size = 8;
}
zingchart.exec(map, 'addobject', {
type: 'shape',
dynamic: true,
data: {
flat: true,
id: 'marker',
type: 'circle',
'border-width': 2,
'background-color': 'none',
'border-color': '#900',
size: size + 4,
y: AIRPORTS[idx][4] + 'lat',
x: AIRPORTS[idx][5] + 'lon',
map: 'fraL2'
}
});
});
// RENDER CHARTS
// -----------------------------
zingchart.SYNTAX = 'dashed';
zingchart.DEV.RESOURCES = false;
// Render charts after the maps module has loaded
// See `zingchart.loadModules()` above
function render() {
zingchart.render({
id: map,
width: '100%',
height: '100%',
output: 'svg',
data: gmap
});
zingchart.render({
id: line,
width: '100%',
height: '100%',
output: 'svg',
data: gline
});
}
</script>
</body>
</html>
// INIT
// -----------------------------
// Define Module Location
zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
// Load Maps
zingchart.loadModules('maps, maps-fraL2', render);
// DEFINE CHART LOCATIONS (IDS)
// -----------------------------
// Main chart render location(s)
var line = 'zcline';
var map = 'zcmap';
// VARS
// -----------------------------
var iMaxAltitude = 0, aValues = [], aDataInfo = [], aDataSize = [], i;
// MAP CHART CONFIG
// -----------------------------
var gmap = {
type : 'null',
x : 10,
y : 0,
width : '100%',
height : '100%',
legend : {
layout : '1x',
margin : 'auto auto 10 10',
'toggle-action' : 'none',
'border-width' : 0,
header : {
text : 'Airports in France',
align : 'left',
'font-size' : 11
}
},
series : [
{
'legend-marker' : {
type : 'circle',
size : 3,
'background-color' : '#467686'
},
text : 'Small Airport'
},
{
'legend-marker' : {
type : 'circle',
size : 5,
'background-color' : '#022733'
},
text : 'Medium Airport'
},
{
'legend-marker' : {
type : 'circle',
size : 8,
'background-color' : '#26596A'
},
text : 'Large Airport'
}
],
tooltip : {
align : 'left',
callout : true,
'callout-width' : 16,
'callout-height' : 8,
'border-radius' : 3,
padding : '10 20',
shadow : true,
'shadow-color' : '#333',
'shadow-alpha' : 0.7,
'font-size' : 13,
'font-weight' : 'bold',
'shadow-distance' : 2
},
shapes : [
{
type : 'zingchart.maps',
options : {
name : 'fraL2',
scale : true,
style : {
'border-alpha' : 0.1,
'border-color' : '#666',
label : {
visible : false
},
'hover-state' : {
'background-color':'none',
'shadow-alpha' : 0.1,
'shadow-distance' : 0,
shadow : true,
'shadow-color' : '#369'
}
}
}
}
]
};
// CHART DATA
// -----------------------------
// Setup Airports
for (var i=0;i<AIRPORTS.length;i++) {
// Some alt missing or negative
if (typeof(AIRPORTS[i][6]) === 'undefined') {
AIRPORTS[i][6] = 0;
}
AIRPORTS[i][6] = Math.max(0, AIRPORTS[i][6]);
}
// Sort
AIRPORTS.sort(function(a, b) {
return parseInt(a[6], 10) - parseInt(b[6], 10);
});
// Add data
for (var i=0;i<AIRPORTS.length;i++) {
iMaxAltitude = Math.max(iMaxAltitude, Math.round(AIRPORTS[i][6]*0.3048));
var size = 2, color = '#467686';
if (AIRPORTS[i][2] === 'medium_airport') {
size = 5;
color = '#022733';
}
if (AIRPORTS[i][2] === 'large_airport') {
size = 8;
color = '#26596A';
}
aValues.push(Math.max(0, Math.round(AIRPORTS[i][6]*0.3048)));
aDataInfo.push('<span style="font-size:15px">' + AIRPORTS[i][1] + '</span><br>' + AIRPORTS[i][3]);
aDataSize.push(size);
gmap.shapes.push({
id : 'airport'+i,
type : 'circle',
size : size,
'background-color' : color,
y : AIRPORTS[i][4] + 'lat',
x : AIRPORTS[i][5] + 'lon',
map : 'fraL2',
'hover-state' : {
size : size + 4,
'background-color' : 'none',
'border-width' : 2,
'border-color' : color
},
tooltip : {
text : '<span style="font-size:15px">' + AIRPORTS[i][1] + '</span><br>' + AIRPORTS[i][3]
}
});
}
// LINE CHART CONFIG
// -----------------------------
var gline = {
x : 0,
y : 0,
width : '100%',
height : '100%',
type : 'line',
plotarea : {
margin : '10 20 25 40'
},
tooltip : {
visible : false
},
title : {
text : 'Airports sorted by altitude',
padding : '15 10 10 45',
align : 'left',
'font-size' : 11
},
'scale-x' : {
zooming : true,
visible : false
},
'scroll-x' : {
},
'scale-y' : {
'offset-start' : 10,
minValue : 0,
maxValue : iMaxAltitude,
short : true,
format : '%vm',
item : {
'font-size':10
}
},
'crosshair-x' : {
'plot-label' : {
text : '%data-info<br>%node-value m',
align : 'left',
'border-radius' : 3,
padding : '10 20',
'border-width' : 1,
shadow : true,
'shadow-color' : '#333',
'shadow-alpha' : 0.7,
'font-size' : 13,
'font-weight' : 'bold',
'shadow-distance' : 2
}
},
series : [
{
'line-width' : 1,
'line-color' : '#467686',
'max-nodes' : 99999,
values : aValues,
'data-info' : aDataInfo,
'data-size' : aDataSize,
marker : {
'border-width' : 0,
type : 'circle',
size : 2,
'background-color' : '#467686',
rules : [
{
rule : '%data-size === 5',
size : 5,
'background-color' : '#022733'
},
{
rule : '%data-size === 8',
size : 8,
'background-color' : '#26596A'
}
]
}
}
]
};
// ADD CHART INTERACTION
// -----------------------------
// Mouseout
zingchart.bind(line, 'guide_mouseout', function(p) {
zingchart.exec(map, 'removeobject', {
type : 'shape',
dynamic : true,
id : 'marker'
});
});
// Mousemove
zingchart.bind(line, 'guide_mousemove', function(p) {
var idx = p.items[0].nodeindex;
var size = 2;
if (AIRPORTS[idx][2] === 'medium_airport') {
size = 5;
}
if (AIRPORTS[idx][2] === 'large_airport') {
size = 8;
}
zingchart.exec(map, 'addobject', {
type : 'shape',
dynamic : true,
data : {
flat : true,
id : 'marker',
type : 'circle',
'border-width' : 2,
'background-color' : 'none',
'border-color' : '#900',
size : size + 4,
y : AIRPORTS[idx][4] + 'lat',
x : AIRPORTS[idx][5] + 'lon',
map : 'fraL2'
}
});
});
// RENDER CHARTS
// -----------------------------
zingchart.SYNTAX = 'dashed';
zingchart.DEV.RESOURCES = false;
// Render charts after the maps module has loaded
// See `zingchart.loadModules()` above
function render() {
zingchart.render({
id : map,
width : '100%',
height : '100%',
output : 'svg',
data : gmap
});
zingchart.render({
id : line,
width : '100%',
height : '100%',
output : 'svg',
data : gline
});
}