Back

NetChart on GeoChart

Display linked data on map. Fully functional, interactive Net Chart placed on map.

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