\n\n## Table of Contents\n\n- [Getting Started](#getting-started)\n- [Requirements](#requirements)\n- [Installation](#installation)\n- [Quick Start](#quick-start-using-es-modules)\n- [Working with Events](#working-with-events)\n- [Working with APIs](#working-with-apis)\n- [FusionTime Integrations](#fusiontime-integration)\n- [Licensing](#licensing)\n\n## Getting Started\n\n### Requirements\n\n- **Node.js**, **NPM/Yarn** installed globally in your OS.\n- **FusionCharts** installed in your project, as detailed below:\n- jQuery (must be loaded before this plugin)\n- ⚠️ For legacy IE 6/7/8 support, use jQuery 1.x.\n\n### Installation\nInstall via npm:\n\n```\nnpm install jquery-fusioncharts --save\n```\n\n## Quick Start (Using ES Modules)\n\n```js\nimport $ from 'jquery';\nimport FusionCharts from 'fusioncharts';\n// Load charts module to render Column2D chart\nimport Charts from 'fusioncharts/fusioncharts.charts';\nimport FusionChartsJquery from 'jquery-fusioncharts';\n\n$('document').ready(function() {\n // Once the window with a document is ready, execute the Chart module\n // and pass FusionCharts as a dependency\n Charts(FusionCharts);\n FusionChartsJquery(FusionCharts)\n\n // Render the chart using `insertFusionCharts` method\n $('#chart-container').insertFusionCharts({\n type: 'column2d',\n width: '600',\n height: '400',\n dataFormat: 'json',\n dataSource: {\n chart: {\n caption: 'Countries With Most Oil Reserves [2017-18]',\n subCaption: 'In MMbbl = One Million barrels',\n xAxisName: 'Country',\n yAxisName: 'Reserves (MMbbl)',\n numberSuffix: 'K'\n },\n data: [ \n { label: 'Venezuela', value: '290' },\n { label: 'Saudi', value: '260' },\n { label: 'Canada', value: '180' },\n ]\n }\n });\n});\n```\n\n## Using CommonJS (Legacy / Node-based Bundlers)\nThe following examples assume you are using a module bundler (Webpack, Browserify, etc.). For direct browser usage, see the CDN section below.\n\n```js\nvar $ = require('jquery');\nvar FusionCharts = require('fusioncharts');\n// Load charts module to render Column2D chart\nvar Charts = require('fusioncharts/fusioncharts.charts');\nvar FusionTheme = require('fusioncharts/themes/fusioncharts.theme.fusion');\nvar jQueryFusionCharts = require('jquery-fusioncharts');\n\n$('document').ready(function() {\n // Once the window with a document is ready, execute the Chart module\n // and pass FusionCharts as a dependency\n Charts(FusionCharts);\n FusionTheme(FusionCharts);\n jQueryFusionCharts(FusionCharts);\n\n // Render the chart using `insertFusionCharts` method\n $('#chart-container').insertFusionCharts({\n type: 'column2d',\n width: '600',\n height: '400',\n dataFormat: 'json',\n dataSource: {\n chart: {\n caption: 'Countries With Most Oil Reserves [2017-18]',\n subCaption: 'In MMbbl = One Million barrels',\n xAxisName: 'Country',\n yAxisName: 'Reserves (MMbbl)',\n numberSuffix: 'K'\n },\n data: [ \n { label: 'Venezuela', value: '290' },\n { label: 'Saudi', value: '260' },\n { label: 'Canada', value: '180' },\n ]\n }\n });\n});\n```\n\n## Standalone (CDN) Usage\nInclude scripts in this order:\n\n```js\n\n\n\n\n```\n\nThen:\n\n```html\n\n\n\n```\n\n## Rendering Charts\n\njQuery Fusioncharts methods:\n- insertFusionCharts\n- appendFusionCharts\n- prependFusionCharts\n\n### insertFusionCharts\nReplaces selected element contents with the chart.\n\n```js\n$('#chart-container').insertFusionCharts({\n type: 'pie2d',\n width: '450',\n height: '300',\n dataFormat: 'json',\n dataSource: {\n chart: { caption: 'Sales Distribution' },\n data: [...]\n }\n});\n```\n\n### appendFusionCharts\nAppends a chart to the selected container without replacing existing content.\n\n```js\n$('#chart-container').insertFusionCharts({\n type: 'pie2d',\n width: '450',\n height: '300',\n dataFormat: 'json',\n dataSource: {\n \"chart\": {\n ...\n },\n \"data\": [...]\n }\n});\n\n$('#btnClone').click(function() {\n // Clone the chart to create a column chart representation of the same data\n $('#chart-container').cloneFusionCharts(function() {\n // Append the cloned chart to the same chart container\n $('#chart-container').appendFusionCharts(this[0]);\n }, {\n 'id': 'chart-clone',\n 'type': 'column2d'\n });\n});\n```\n\n### prependFusionCharts\n\nPrepends a chart to the selected container.\n\n```js\n$('#chart-container').insertFusionCharts({\n type: 'pie2d',\n width: '450',\n height: '300',\n dataFormat: 'json',\n dataSource: {\n \"chart\": {\n ...\n },\n \"data\": [\n ...\n ]\n }\n});\n\n$('#btnClone').click(function() {\n // Clone the chart to create a column chart representation of the same data\n $('#chart-container').cloneFusionCharts(function() {\n // Prepend the cloned chart to the same chart container\n $('#chart-container').prependFusionCharts(this[0]);\n }, {\n 'id': 'chart-clone',\n 'type': 'column2d'\n });\n});\n```\n\n## Working with Events\n\nTo attach events to FusionCharts element, you can use bind or on with jQuery selectors.\n\nThe event name string should be of the pattern 'fusioncharts[event name in lowercase]', eg. to attach an event listener to dataplotRollOver, the string will be 'fusionchartsdataplotrollover'.\n\n```javascript\n$(\"#chart-container\").on('fusioncharts[event name in lowercase]', function(eventObj, dataObj) {\n [code goes here]\n});\n```\n\n### Tracks Hover Events on a Data Plot\n\n```javascript\n\n\n \n jQuery FusionCharts Sample\n \n \n \n \n \n \n FusionCharts will render here...
\n Hover on the plot to see the value along with the label
\n \n \n\n```\n\n## Working with APIs\n\nTo interact with a rendered chart, you need access to its FusionCharts instance.\n\nUse the getFusionCharts() method on a jQuery selector to retrieve all chart instances inside the selected element. The method returns an array of chart objects.\n\nOnce retrieved, you can invoke any supported FusionCharts API on those instances.\n\n```js\nvar charts = $('#chart-container').getFusionCharts();\ncharts.forEach(function (chart) {\n chart.();\n});\n```\n\n### Example: Change Chart Type Dynamically\nThe example below renders a Column 2D chart and converts it to a Pie 2D chart after 5 seconds.\n\n```js\n\n\n \n FusionCharts jQuery API Example\n \n \n \n \n \n \n\n \n\n \n\n \n\n```\n\n## FusionTime Integration\nStarting from `fusioncharts@3.13.3-sr.1`, you can render time-series visualizations using FusionTime with the jQuery plugin.\nFusionTime enables advanced time-series capabilities such as:\n- Continuous time axes\n- Zoom and scroll\n- Large dataset handling\n- Multi-axis plots\n\nLearn more about FusionTime: \n\n### Example: Rendering a Time-Series Chart\n\nThe following example demonstrates how to render a FusionTime chart using npm-installed dependencies.\n\n```js\n// Required modules\nvar FusionCharts = require('fusioncharts');\nvar TimeSeries = require('fusioncharts/fusioncharts.timeseries');\nvar $ = require('jquery');\nvar jQueryFusionCharts = require('jquery-fusioncharts');\n\n// Register dependencies\nTimeSeries(FusionCharts);\njQueryFusionCharts(FusionCharts);\n\n// Fetch sample data and schema\nvar jsonify = res => res.json();\n\nvar dataFetch = fetch(\n 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/line-chart-with-time-axis-data.json'\n).then(jsonify);\n\nvar schemaFetch = fetch(\n 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/line-chart-with-time-axis-schema.json'\n).then(jsonify);\n\nPromise.all([dataFetch, schemaFetch]).then(function (res) {\n var data = res[0];\n var schema = res[1];\n\n // Create DataStore and DataTable\n var fusionDataStore = new FusionCharts.DataStore();\n var fusionTable = fusionDataStore.createDataTable(data, schema);\n\n $(function () {\n $('#chart-container').insertFusionCharts({\n type: 'timeseries',\n width: '600',\n height: '400',\n dataFormat: 'json',\n dataSource: {\n data: fusionTable,\n caption: { text: 'Sales Analysis' },\n subcaption: { text: 'Grocery' },\n yAxis: [{\n plot: {\n value: 'Grocery Sales Value',\n type: 'line'\n },\n format: { prefix: '$' },\n title: 'Sale Value'\n }]\n }\n });\n });\n});\n```\n\nNote:\nIf using a downloaded FusionCharts package instead of npm, reference the local files accordingly:\n\n```js\nvar FusionCharts = require('/path/to/fusioncharts/fusioncharts.js');\nvar TimeSeries = require('/path/to/fusioncharts/fusioncharts.timeseries.js');\n```\n\n## Need More Details?\nFor complete documentation on events, API methods, configuration options, and advanced examples, please refer to the official FusionCharts documentation: \n\n## Licensing\n\nThe FusionCharts JQuery integration component is open-source and distributed under the terms of the MIT/X11 License. However, you will need to download and include FusionCharts library in your page separately, which has a [separate license](https://www.fusioncharts.com/buy).\n","readmeFilename":"README.md"}