NetChart on GeoChart
Map chart with a network chart on top. In 'data', the node coordinates are provided in the 'nodes' array, but link relationships ('from' and 'to' node IDs) and label text are contained within the 'links' array. 'Layer' references ZoomCharts NetChart.
HTML
HTML
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>
<div id="demo"></div>
CSS
CSS
//No CSS for this example
JavaScript
JavaScript
var options = {
area: { height: null },
container: "demo",
data: {
preloaded: {
nodes: [
{ id: "Squaw Valley", coordinates: [-119.181449, 36.707146] }, // long, lat
{ id: "Atlanta", coordinates: [-84.388846, 33.752504] },
{ id: "New York", coordinates: [-73.996705, 40.74838] },
{ id: "Lake Placid", coordinates: [-81.364918, 27.294474] }
],
links: [
{ from: "New York", to: "Atlanta", drivingTime: "13 hours 3 mins" },
{ from: "New York", to: "Squaw Valley", drivingTime: "1 day 18 hours" },
{ from: "New York", to: "Lake Placid", drivingTime: "17 hours 33 mins" },
{ from: "Lake Placid", to: "Squaw Valley", drivingTime: "1 day 15 hours" },
{ from: "Atlanta", to: "Squaw Valley", drivingTime: "1 day 10 hours" }
]
}
},
events: {
onClick: function (event, args) {
if (args.clickNode) alert("You clicked on " + args.clickNode.data.id + ".");
if (args.clickLink) alert("You clicked on a link.");
}
},
layers: [
{
name: "Points",
type: "items",
style: {
nodeStyleFunction: function (node) {
node.label = node.data.id;
},
linkStyleFunction: function (link) {
link.label = link.data.drivingTime;
},
node: {
fillColor: "#09c",
lineColor: "#07a",
lineWidth: 2
},
nodeLabel: {
backgroundStyle: { fillColor: "black" },
textStyle: { fillColor: "white" }
},
linkLabel: {
backgroundStyle: { fillColor: "rgba(0, 0, 0, 0.6)" },
textStyle: { fillColor: "white" }
}
}
}
],
navigation: {
initialLat: 35.04409,
initialLng: -90.246213,
initialZoom: 4,
minZoom: 4
},
advanced: { pointer: { noClickOnDoubleClick: false } }
};
chart = new GeoChart(options);
Data
Data
//No separate data for this example