ZoomCharts
Back to overview

GeoChart integration example

To integrate GeoChart into your web application, follow these steps:
  1. Extract the library under your web application root folder (e.g. where your index.html is)
  2. Add following code snippet in your html file
    <script src="zoomcharts/zoomcharts.js"></script>
    (where zoomcharts is the name of the folder where you extracted the library)
  3. Alternatively you can include the script from the CDN
    <script src="//cdn.zoomcharts-cloud.com/1/latest/zoomcharts.js"></script>
  4. Add container element in which the chart will be added
    <div id="chart"></div>
  5. Initialize chart:
        <script>
            var gc = new GeoChart({
                container: document.getElementById("chart"),
                area: { height: 500 },
                data: {
                    preloaded: {
                        nodes: [
                            {
                                id: "Squaw Valley",
                                coordinates: [-119.181449, 36.707146]
                            },
                            {
                                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" }
                        ]
                    }
                },
                navigation: {
                    initialLat: 35.04409,
                    initialLng: -90.246213,
                    initialZoom: 4,
                    minZoom: 4
                },
                layers: [
                    {
                        name: "Points",
                        type: "items"
                    }
                ]
            });
        </script>
    
  6. Follow the instructions on the ZoomCharts dashboard to include the license key in your application.
  7. Congratulations. You have now successfully integrated ZoomCharts into your web application if you can see the same chart as below in the live demo.

Live Demo

Try it on jsFiddle

More Information: