Back

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.

Documentation Open in JSFiddle
Start Free Trial Purchase

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