### Live Demo Initialization Source: https://github.com/zoomcharts/javascript-charts-library/blob/master/examples/geochart.html This script initializes a GeoChart for a live demo, similar to the main initialization example but using a different container ID. ```javascript var gc = new GeoChart({ container: document.getElementById("demo"), 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" } ] }); ``` -------------------------------- ### Live Demo Initialization Source: https://github.com/zoomcharts/javascript-charts-library/blob/master/examples/timechart.html This code snippet is used in the live demo to initialize the TimeChart with preloaded data. It's similar to the main initialization example. ```javascript var t = new TimeChart({ container: document.getElementById("demo"), area: { height: 350 }, data: { preloaded: { values: [ ["2017-01-09 00:00:00", 100], ["2017-01-20", 200], [1485907200, 300], ["2017-02-05 15:20:00", 400], ["2017-02-15 22:59:59", 500] ], dataLimitFrom: "2017-01-09 00:00:00", dataLimitTo: "2017-02-15 22:59:59", unit: 's' } } }); ``` -------------------------------- ### Live Demo NetChart Initialization Source: https://github.com/zoomcharts/javascript-charts-library/blob/master/examples/netchart.html This JavaScript code initializes a NetChart for a live demo, using the same configuration as the integration example but targeting a different container ID. ```javascript var t = new NetChart({ container: document.getElementById("demo"), area: { height: 350 }, data: { preloaded: { nodes: [ { id: "foo" }, { id: "bar" }, { id: "baz" } ], links: [ { id: "foo-bar", from: "foo", to: "bar" }, { id: "bar-baz", from: "bar", to: "baz" }, { id: "baz-foo", from: "baz", to: "foo" } ] } }, interaction: { selection: { lockNodesOnMove: false } } }); ``` -------------------------------- ### Initialize PieChart with Preloaded Data Source: https://github.com/zoomcharts/javascript-charts-library/blob/master/examples/piechart.html Initialize the PieChart by providing the container element and preloaded data. This example demonstrates a basic pie chart structure with subvalues. ```javascript var t = new PieChart({ container: document.getElementById("chart"), area: { height: 350 }, data: { preloaded: { subvalues: [ { id: "foo", value: 100, subvalues: [ { id: "foo-1", value: 50, style: { expandable: false } }, { id: "foo-2", value: 50, style: { expandable: false } } ] }, { id: "bar", value: 50, style: { expandable: false } }, { id: "baz", value: 30, style: { expandable: false } } ] } } }); ``` -------------------------------- ### Initialize FacetChart with Preloaded Data Source: https://github.com/zoomcharts/javascript-charts-library/blob/master/examples/facetchart.html Initialize a FacetChart instance with preloaded data and define series configurations. This example uses a nested data structure for subvalues. ```javascript var t = new FacetChart({ container: document.getElementById("demo"), area: { height: 350 }, data: { preloaded: { subvalues: [ { id: "foo", value: 100, value2: 50, subvalues: [ { id: "foo-1", value: 50, value2: 10 }, { id: "foo-2", value: 50, value2: 5 } ] }, { id: "bar", value: 50, value2: 100 }, { id: "baz", value: 30, value2: 15 } ] } }, series: [ { name: "Foo", data: { field: "value" } }, { name: "Bar", data: { field: "value2" } } ] }); ``` -------------------------------- ### Initialize NetChart with Preloaded Data Source: https://github.com/zoomcharts/javascript-charts-library/blob/master/examples/netchart.html Initialize the NetChart instance with preloaded node and link data. This snippet configures the chart container, dimensions, data source, and basic interaction. ```javascript var t = new NetChart({ container: document.getElementById("chart"), area: { height: 350 }, data: { preloaded: { nodes: [ { id: "foo" }, { id: "bar" }, { id: "baz" } ], links: [ { id: "foo-bar", from: "foo", to: "bar" }, { id: "bar-baz", from: "bar", to: "baz" }, { id: "baz-foo", from: "baz", to: "foo" } ] } }, interaction: { selection: { lockNodesOnMove: false } } }); ``` -------------------------------- ### Live Demo PieChart Initialization Source: https://github.com/zoomcharts/javascript-charts-library/blob/master/examples/piechart.html This is the JavaScript code used in the live demo to initialize the PieChart. It is functionally identical to the initialization code for the 'chart' container. ```javascript var t = new PieChart({ container: document.getElementById("demo"), area: { height: 350 }, data: { preloaded: { subvalues: [ { id: "foo", value: 100, subvalues: [ { id: "foo-1", value: 50, style: { expandable: false } }, { id: "foo-2", value: 50, style: { expandable: false } } ] }, { id: "bar", value: 50, style: { expandable: false } }, { id: "baz", value: 30, style: { expandable: false } } ] } } }); ``` -------------------------------- ### Initialize TimeChart with Preloaded Data Source: https://github.com/zoomcharts/javascript-charts-library/blob/master/examples/timechart.html Initialize a new TimeChart instance with preloaded data. The data includes timestamps and values, with specified data limits and unit. ```javascript var t = new TimeChart({ container: document.getElementById("chart"), area: { height: 350 }, data: { preloaded: { values: [ ["2017-01-09 00:00:00", 100], ["2017-01-20", 200], [1485907200, 300], ["2017-02-05 15:20:00", 400], ["2017-02-15 22:59:59", 500] ], dataLimitFrom: "2017-01-09 00:00:00", dataLimitTo: "2017-02-15 22:59:59", unit: 's' } } }); ``` -------------------------------- ### Include FacetChart Library Source: https://github.com/zoomcharts/javascript-charts-library/blob/master/examples/facetchart.html Include the FacetChart library using a script tag. You can either use a local path or a CDN. ```html ``` ```html ``` -------------------------------- ### Initialize GeoChart Source: https://github.com/zoomcharts/javascript-charts-library/blob/master/examples/geochart.html Initialize the GeoChart with configuration options including container, area dimensions, data, navigation settings, and layers. The data includes nodes with coordinates and links between them. ```javascript 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" } ] }); ``` -------------------------------- ### Include NetChart Library via Local Path Source: https://github.com/zoomcharts/javascript-charts-library/blob/master/examples/netchart.html Include the NetChart JavaScript library by referencing its local path in your HTML file. Ensure the 'zoomcharts' folder is correctly placed. ```html ``` -------------------------------- ### Include NetChart Library via CDN Source: https://github.com/zoomcharts/javascript-charts-library/blob/master/examples/netchart.html Alternatively, include the NetChart JavaScript library using a Content Delivery Network (CDN) link for easier integration. ```html ``` -------------------------------- ### Add Chart Container Source: https://github.com/zoomcharts/javascript-charts-library/blob/master/examples/facetchart.html Add a container element in your HTML where the chart will be rendered. ```html
``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.