Using charts and widgets in a same page

Question

Am new to fusion charts, I was using both chart and widget in same page. And am using Javascript charts not swf files. Since they both got same function name to generate chart but having different code in it, I was able to get any one of it regarding the selection of js file which i use.

Code:

var myChart1 = new FusionCharts( "Thermometer", "ChId2", "130", "280", "0", "1" );
myChart1.setDataURL("xml/thermo.xml");
myChart1.render("thermo");


var chart = new FusionCharts("Line", "ChartId", "300", "300", "0", "1");
chart.setDataURL("xml/line.xml");      
chart.render("chartdiv");

How can i use both in same page??

Answer 1

Please make sure you have kept "FusionCharts.HC.js", "jquery.min.js", " FusionCharts.HC.Charts.js " and " FusionCharts.HC.Widgets.js " in the same folder as "FusionCharts.js" while rendering the JavaScript version of Charts and Widgets in the same page.

You can use the common 3 files, "FusionCharts.js", "FusionCharts.HC.js" and "jquery.min.js" from the latest FusionCharts XT Service Release 4 pack.

Answer 2

Starting XT, FusionCharts has come up with a unified JavaScript framework to render charts, gauges and maps present in any of 4 core packs (FusionCharts XT, FusionWidgets XT, FusionMaps XT and PowerCharts XT) of FusionCharts Suite XT.

This unified framework is called FusionCharts JavaScript Class and the JavaScript modules are distributed into various files (some are common for all packs and some are pack specific) based on the pack as stated below:

A. : ：

1. FusionCharts.js
2. FusionCharts.HC.js
3. FusionCharts.HC.Charts.js
4. jquery.min.js

B. : ：

1. FusionCharts.js
2. FusionCharts.HC.js
3. FusionCharts.HC.Widgets.js
4. jquery.min.js

C. : ：

1. FusionCharts.js
2. FusionCharts.HC.js
3. FusionCharts.HC.PowerCharts.js
4. jquery.min.js

D. : ：

1. FusionCharts.js
2. FusionCharts.HC.js
3. FusionCharts.HC.Maps.js
4. jquery.min.js
5. and individual map definition JavaScript files, for exmaple, for World map the name of the file is FusionCharts.HC.world.js

i) As, you find from the above lists that FusionCharts.js , FusionCharts.HC.js (and jquery.min.js ) are common to all four packs, you can safely use these files from any of the four packs. However, FusionCharts Team advises to use the latest FusionCharts.js and FusionCharts.HC.js .

ii) To know which is the latest you can track the build number from the version string present at the top of each of these files. By build number, I am referring to the last part of the version string. For example, If you have a version string like @version fusioncharts/3.2.4-release.8565 , 8565 is the build number. The greater the build number, the more updated and latest it is.

iii) These 3 files are essential to render JavaScript charts/gauges/maps from any of the 4 core packs. You need to place these file in preferably a single folder.

iv) The pack specific file FusionCharts.HC.Charts.js is required to render JavaScript charts (like Column2D, Scatter, Pareto2D, Pie3D etc.) that are present in FusionCharts XT Pack. Hence, if you want to render a line chart (which is part of FusionCharts XT pack), you need to place this file too along with the above mentioned (in point iii) files.

v) The pack specific file FusionCharts.HC.Widgets.js is required to render JavaScript charts and gauges (like SparkLine, Thermometer, HBullet, Funnel etc.) that are present in FusionWidgets XT Pack. Hence, if you want to render a thermometer gauge (which is part of FusionWidgets XT pack), you need to place this file too along with the above mentioned (in point iii) files.

vi) The pack specific file FusionCharts.HC.PowerCharts.js is required to render JavaScript charts (like Spline, DragColumn, LogMSColumn2D, DragNode, SelectScatter etc.) that are present in PowerCharts XT Pack. Hence, if you want to render a Spline chart (which is part of PowerChats XT pack), you need to place this file too along with the above mentioned (in point iii) files.

vi) The pack specific file FusionCharts.HC.Maps.js is required to render JavaScript maps. If you want to render any map you need to place this file too along with the above mentioned (in point iii) files. Additionally, for each map (like World, USA, Europe, Texas etc.) there is an individual JavaScript file that contains the map regional definition data. You are also required to place these individual map definition files (like FusionCharts.HC.world.js or FusionCharts.HC.texas.js ) along with the above mentioned (in point iii) files.

---

So, the first thing is to place the files properly as per requirement.

Now, the other important thing:

You do not need to load all these JavaScript files in your HTML through the <script> tag. You need to load just FusionCharts.js in your HTML and the rest of the files will be automatically/dynamically loaded by FusionCharts.js as per the chart/map type you want to render.

However, I reiterate: all the JavaScript files should be physically present in the folder so that FusionCharts.js can dynamically access then and load them.

---

Once you are through these steps, you can use the same constructor function to render your chart or gauge or map. All you now need to take care is the chart/gauge/map type you are specifying and whether you are providing correct data to the chart/gauge/map.