Search the Community

I was wondering if there is an attribute of the Drag Node Chart that allows for automatic positioning and layout of the nodes? I do not see an attribute on the following link: https://www.fusioncharts.com/dev/chart-attributes/dragnode. We are trying to create a chart with dozens to hundreds of nodes but there is no predefined format since the dataset size is dynamic

Hello Together, The company I work for wants to buy the Enterprise version of FusionChart. Unfortunately we would be missing a chart. Is there a possibility that you can add a chart to your library? Or do you already have a solution? We would need a chart combination of donut and radial. The radial would show the overall progress. So the value would never go beyond 100 as a number (100%). The donut has three or five value categories. I've attached three screenshots. Sincerely, Matthias Heizmann

Hi, I'm trying to find a way so that when users click on the Export options in the upper right hand corner of a (say a pie) chart, I'd be able update and have a custom caption or subCaption for the exported file (and not exactly like captions of the rendered chart on the page) Is there a way to do this? I was thinking of perhaps changing caption / subCaption just before export, but i'm not sure how or which element to add a listener for that. Thank you

Hello. How can I set transparent background color for angular gauge chart ? I set containerBackgroundOpacity: "0", but it isn't work. I remove bgColor for chart, but that doesn't help either. type: "angulargauge", renderAt: "chart-container", width: "100%", height: "100%", containerBackgroundOpacity: "0", Background color always stay white color. How can I fix that ?

I'm using stacked area 2d, I've enabled drawcrossline. So far I've only two sets of data, so I've two stacked area graph. When I put plotToolText with Macros, it's showing two graphs of values without any issues. plotToolText: '$seriesName, $dataValue, $value' My tooltip will look something like this, I need to have the sum of the two stacked area graph values in the graph like below.? is it possible to do.? Thanks in advance.

I have noticed that the export functionality only exports what is visible on the screen (screen shot) as opposed to the entire chart. I first want to ask if there is an update to topics related to this that I have stumbled upon from many years prior - is there a method to allow you to export all data instead of what is visible within the predefined height and width? If not, I am attempting to bypass this by changing the width and height programmatically before and after the export. The problem I'm running into is that it resizes, but does not export the resized chart. It exports the chart as it was initially. My code is below. Any helps is appreciated. <button id="export_chart" class="form_btn" title="Click to export the chart to PDF">Export to PDF </button> <div id="chart-container">FusionCharts will render here</div> FusionCharts.ready(function () { var smoPlan = new FusionCharts({ type: 'gantt', renderAt: 'chart-container', width: '1500', height: '850', //'850' dataFormat: 'json', dataSource: { // Chart Configuration "chart": { "dateformat": "mm/dd/yyyy", "caption": "IMT Major Projects", "subcaption": title_subcaption, //"showTaskStartDate": 1, "legendCaption": "Project Status", "legendCaptionFontSize": "14", "legendCaptionBold": "1", "legendItemFontSize": "12", "legendIconScale": "1.5", "legendAllowDrag": "1", "legendBgColor": "#CCCCCC", "legendBgAlpha": "20", "legendBorderColor": "#666666", "legendBorderThickness": "1", "legendBorderAlpha": "40", "legendShadow": "1", "theme": "ocean", "canvasBorderAlpha": "40", "showBorder": "1", "gridbordercolor": "#666666", "gridborderalpha": "20", "exportEnabled": "1", "exportMode": "auto", "exportFileName": "TestExport" } }).render(); function export_chart() { smoPlan.resizeTo('1500', '2000'); smoPlan.exportChart({"exportFormat": "pdf"}); smoPlan.resizeTo('1500', '850'); } $("#export_chart").on('click', function () { export_chart(); }); });

I render charts in a div with a css transform scale applied to it, previously everything worked fine, however on the latest version (3.12.2), the chart renders in the correct position, but the mouse over (and clicks) are out of position - removing the css scale attribute does resolve this but I need to be able to render charts in a scaled div.

Hi all, i have try to implement a treemap chart but in fields value i have negative data. I have see in official documents that a negative value is use in a sValue field, is true? I can't use negative data in value field? Thank you all for your help. This is my json file: "data":[ [ { "label":"Macrocategoria", "fillcolor":"8c8c8c", "value":100, "data":[ { "label":"Azionario", "value":69, "data":[ { "label":"Titolo 5", "value":"40,0%", "sValue":"5,0%" }, { "label":"Titolo 6", "value":"18,0%", "sValue":"6,0%" }, { "label":"Titolo 7", "value":"-2,0%", "sValue":"7,0%" }, { "label":"Titolo 8", "value":"13,0%", "sValue":"8,0%" } ] }, { "label":"Obbligazionario", "value":31, "data":[ { "label":"Titolo 1", "value":"10,0%", "sValue":"1,0%" }, { "label":"Titolo 2", "value":"5,0%", "sValue":"2,0%" }, { "label":"Titolo 3", "value":"15,0%", "sValue":"3,0%" }, { "label":"Titolo 4", "value":"1,0%", "sValue":"4,0%" } ] } ] } ] ], "colorrange":{ "mapbypercent":"1", "gradient":"1", "minvalue":"1,0%", "code":"6da81e", "startlabel":"Decline", "endlabel":"Rise", "color":[ { "code":"ffffff", "maxvalue":4, "label":"Static" }, { "code":"e24b1a", "maxvalue":"8,0%", "label":"AVERAGE" } ] }

Chart image quality in version 3.12.1 has decreased significantly. Previously we were using 3.9.0 and the quality of the generated charts was good. After upgrade, we have noticed that charts quality went down significantly. Column bar edges, for example, is not sharp, but blurry. I have attached a screenshot with a Fiddle. The example is the one you have in your website. After a investigation we have found the cause to be the x and y values of the <rect /> that are not integers. When the numbers are integers, the edges look fine. See attached image. We have noticed that this happens on some resolutions only. From our experience, you will be able to reproduce the issue on 1920x1080 resolutions.

Hello, I'm looking to create a column chart that looks similar to what's shown in the attachment. Can you please provide some guidance on the steps I may be able to take to reproduce such a result? Thanks!

I am trying to pass an xml string into the datasource argument and I keep getting an invalid data message when I load the page. Any help would be appreciated. <head> <title>FusionCharts XT - Column 2D Chart - Data from a database</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> <!-- Include the `fusioncharts.js` file. This file is needed to render the chart. Ensure that the path to this JS file is correct. Otherwise, it may lead to JavaScript errors. --> <script src="fusioncharts/fusioncharts.js"></script> </head> <?php include("fusioncharts/fusioncharts.php"); $servername = "localhost"; $username = "*****"; $password = "****"; $dbname = "***"; // Create connection $dbhandle = new mysqli($servername, $username, $password, $dbname); // Check connection if ($dbhandle->connect_error) { die("Connection failed: " . $dbhandle->connect_error); } $dbhandle = new mysqli($servername, $username, $password, $dbname); // Render an error message, to avoid abrupt failure, if the database connection parameters are incorrect if ($dbhandle->connect_error) { exit("There was an error with your connection: ".$dbhandle->connect_error); } // Form the SQL query that returns the top 10 most populous countries $strQuery = "SELECT * FROM scores"; //$retval = mysql_query( $sql, $conn ); // Execute the query, or else return the error message. $result = $dbhandle->query($strQuery) or exit("Error code ({$dbhandle->errno}): {$dbhandle->error}"); //while($row = mysql_fetch_assoc($result)) { // echo "Category :{$row['category']} <br> ". // "score : {$row['score']} <br> ". // "--------------------------------<br>"; // } $strXML ="'<chart><categories>"; // If the query returns a valid response, prepare the XML string if ($result) { // The `$arrData` array holds the chart attributes and data //$arrData["data"] = array(); // Push the data into the array while($row = mysqli_fetch_array($result)) { $strQuery2 = "select * from desirescores where ID =" . $row['ID']; //echo $strQuery2; $result2 = mysqli_query($dbhandle, $strQuery2) or die(mysqli_error()); $ors2 = mysqli_fetch_array($result2); //Generate <set label='..' value='..'/> //free the resultset $strXML .= "<category label='" . $ors2['category'] . "' />"; mysqli_free_result($result2); } } $strXML .= "</categories><dataset seriesName='Athlete Scores'>"; $strXML .="<set value='35' /><set value='48' /><set value='31' /><set value='40' /><set value='36' /><set value='36' /><set value='36' /><set value='36' /></dataset></chart>'"; echo $strXML; $radarChart = new FusionCharts("radar", "myFirstChart" , 600, 300, "chart-1", "XML", $strXML); $radarChart->render(); $dbhandle->close(); ?> <div id="chart-1"><!-- Fusion Charts will render here--></div>

I have got a problem about using this plugin on 3.9 version. When I use the current version the error "Chart type not supported" appears in some graphics. However, when using version 3.3 the error does not occur. Follows the returned error when active debug: "[FusionCharts] fired "error" event. #11171116151 FusionChartsHC-interface~renderer.load Error >> Unable to load required modules and resources: charts". I'm using import fusioncharts.js and fusioncharts.jqueryplugin.js. The other libraries are in the same directory (fusioncharts.charts.js and fusioncharts.widgets.js). Help?

So, i have DB like these : +----------+------------+-------+ | Time | Date | A0 | +----------+------------+-------+ | 17:00:00 | 2015-06-23 | 100 | | 17:05:00 | 2015-06-23 | 120 | | 17:10:00 | 2015-06-23 | 200 | | 17:00:00 | 2015-06-24 | 200 | | 17:05:00 | 2015-06-24 | 190 | | 17:10:00 | 2015-06-24 | 200 | | 08:00:00 | 2015-06-25 | 90 | +----------+------------+-------+ and I use these code : <?php //We have included ../Includes/FusionCharts.php, which contains functions //to help us easily embed the charts. include("class/Includes/FusionCharts.php"); include("class/Includes/DBConn.php"); ?> <HTML> <HEAD> <TITLE> FusionCharts XT - </TITLE> <SCRIPT LANGUAGE="Javascript" SRC="fusioncharts/fusioncharts.js"></SCRIPT> <SCRIPT LANGUAGE="Javascript" SRC="fusioncharts/themes/fusioncharts.theme.fint.js"></SCRIPT> </HEAD> <BODY> <?php $link = connectToDB(); $strQueryCategories = "select distinct Time from input where Date between '2015-06-23' and '2015-06-27' order by Time"; $resultCategories = mysql_query($strQueryCategories) or die(mysql_error()); $strQueryData = "select * from input where Date between '2015-06-23' and '2015-06-27' "; $resultData = mysql_query($strQueryData) or die(mysql_error()); $strXML = "<chart legendPostion='' caption='Konsentrasi CO2' subCaption='By Quantity' xAxisName='Time' yAxisName='Concentration (ppm)' showValues='0' formatNumberScale='0' rotateValues='1' theme='fint'>"; $strXML .= buildCategories ($resultCategories, "Time"); $strXML .= buildDatasets ( $resultData, "A0", "Date"); $strXML .= "</chart>"; echo renderChart("MSLine", "", $strXML, "FactorySum", 600, 300, false, true); mysql_free_result($resultCategories); mysql_free_result($resultData); mysql_close($link); function buildCategories ( $result, $labelField ) { $strXML = ""; if ($result) { $strXML = "<categories>"; while($ors = mysql_fetch_array($result)) { $strXML .= "<category label='" . $ors[$labelField]. "'/>"; } $strXML .= "</categories>"; } return $strXML; } function buildDatasets ($result, $valueField, $controlBreak ) { $strXML = ""; if ($result) { $controlBreakValue =""; while( $ors = mysql_fetch_array($result) ) { echo" "; if( $controlBreakValue != $ors[$controlBreak] ) { $controlBreakValue = $ors[$controlBreak]; $strXML .= ( $strXML =="" ? "" : "</dataset>") . ( "<dataset seriesName='" . $controlBreakValue . "'>" ) ; } $strXML .= "<set value='" . $ors[$valueField] . "'/>"; } $strXML .= "</dataset>"; } return $strXML; } ?> </BODY> </HTML> But what I get is a chart with false value. the 1st value of A0 data at 2015-06-23 and 2015-06-24 are at 08:00:00 instead of 17:00:00, and so goes on for the other data. Please someone help me So the only data at 08:00:00 only 2015-06-25 data

Hi there, I love the product, but I've run into a configuration issue that I'm not sure there's a solution for. Currently, when I set up a multiseries chart each dataset is plotted as soon as the chart is loaded. You can then click on the label to check or uncheck a particular data series, which removes it from the chart. I'm trying to set up a chart that has a TON of datasets (think 50ish), and would like to either default it so that only one is displayed on chart load, with the user having the option to add others when they want. Alternatively, is there a "check all" or "uncheck all" option? If all of them get loaded at the same time it would be nice if to clear them all out at once, rather than having to click on each individually. If anyone has any advice on this I'd love to hear it! Thanks

Hello, Can you please let me know is there any possibility to show the table data dynamically in the chart as a detailed report. Here is the attached screenshot of the same which was generated using Jasper reports. Regards, Varma

I used to create this chart in Excel, and now I want to use FusionCharts to create it. The x-axis is date, while the y-axis is time. The grey area is the business hour of a room. (e.g. for 2014/04/01, the business hour is 08:00-16:00) The green/red areas mean the room is occupied by two parties. Just wondering if it is possible in FusionCharts. Thank you.

Hi, I am first trying this as a basic way following the chart example and tutorial but it's not working at all. Debug gives no good reason as well. <html> <head> <title>My first gauge using FusionWidgets XT</title> <script type="text/javascript" src="fusioncharts/js/fusioncharts.js"></script> <script type="text/javascript" src="fusioncharts/js/fusioncharts.widgets.js"></script> <script type="text/javascript" src="fusioncharts/js/themes/fusioncharts.theme.fint.js"></script> <script type="text/javascript"> FusionCharts.ready(function () { var csatGauge = new FusionCharts({ "type": "vled", "renderAt": "chart-container", "width": "400", "height": "250", "dataFormat": "json", "dataSource": { { "chart": { "upperlimit": "100", "lowerlimit": "0", "numbersuffix": "%", "majortmnumber": "11", "majortmcolor": "646F8F", "majortmheight": "9", "minortmnumber": "2", "minortmcolor": "646F8F", "minortmheight": "3", "majortmthickness": "1", "decimalprecision": "0", "ledgap": "0", "ledsize": "1", "ledborderthickness": "4" }, "colorrange": { "color": [ { "minvalue": "0", "maxvalue": "30", "code": "cf0000" }, { "minvalue": "30", "maxvalue": "60", "code": "ffcc33" }, { "minvalue": "60", "maxvalue": "100", "code": "99cc00" } ] }, "value": "95" } } }); csatGauge.render(); }); </script> </head> <body> <div id="chart-container">An angular guage will load here!</div> </body> </html>

Hi, I've been tasked with trying to replicate a chart with FusionCharts which is currently created with Microsoft Excel. The chart I am trying to replicate is attached. Is it possible to create a chart like this? I've been trying for a few days without success. Any help will be appreciated. Thanks Jason

Hi there, I have a page that dynamically loads between 4-6 Gannt Charts each in a separate DIV etc. This all seems to work as expected however now I'm trying to have a loading image turn on and off based on what the chart is doing. So after some googling around I found out about FC_Rendered(). This worked as expected for my quick demo application, however putting it into the dynamic JS code just does not seem to work at all. Breakdown of code: (Code triggered using on success of a POST (if that matters)) var sc = "uniqueDivID"; var jsonObject = "the data"; var chartWidth = "700"; var chartHeight = "200"; if ( FusionCharts( "myChartId_"+sc ) ) FusionCharts( "myChartId_"+sc ).dispose(); var myChart = new FusionCharts( { swfUrl: "charts-v3.2/Gantt.swf", id: "myChartId_"+sc, width: chartWidth, height: chartHeight, debugMode: "0", RegisterWithJS: "1"}); myChart.setJSONData(jsonObject); myChart.render( sc ); FusionCharts.addEventListener("dataloaded", function(eventObj, eventArgs) { console.log(eventObj.eventType + " was raised by the chart whose ID is " +eventObj.sender.id); }); function FC_Rendered(DOMId) { alert ( DOMId + " chart has been rendered." ); } I get neither an alert or a log in my console. I've also gone through a bunch of EventListeners to see would other ones work and the only one that seems to work for me it the "Initialized" event. I've done a bunch of Googling and have tried the following solutions: Enabling RegisterWithJS (Still turned on atm) Changing my Flash Security Settings Changing browser (chrome,firefox) It is running using Apache locally. Moving the FC_Rendered function all around the file. (yes I've resorted to pasting and praying) So I'm really at a loss on how to proceed, any potential "gotchas" I've missed?

Funnel chart doesn't render stages with zero amounts if there are no positive amounts at all. If there is at least one positive amount, stages with zero amounts will be rendered. Response for Does render.png: Response for Does not render.png:

Hi, I'm wondering it it is possible to render a stacked 3D bar chart with a thinner chart floor. Please see images attached. I'd like to render the chart with a thin floor (1, maybe 2 px) rather than the thick floor that renders by default. This: Instead of this: Thanks!

Dear who may it be concerned. I face with a problem and I need your help. Please guide me as soon as possible you can 1.How Can I draw a line in a middle of the Chart such as this chart How can I make my Max xAxis to double of data value? 2. I want to use persian font in outCnvBaseFont='b nazanin' and font='b nazanin' but it show only Arial font.

I was using a design with fluid width which mean the website width will auto resize when the browser resize and im currently tested FusionChart in my site, not problem during resizing browser, it work perfectly. But the problem only during when using native "Print", all the chart won't resize automatically and the width is over or shorter than container. Kindly advise a solution for this. code: var chart = new FusionCharts("js/fusionchart/MSCombi2D.swf", chartID, "100%", "200", "0", "0");

I'm using FusionCharts 3.2.1. Is there a way to use image as labels? For example I have a pie chart and in front of each label string I want to show a different image/icon.

Hello guys, How are you? I'm trying to plot a bar chart, and I need a particular color for the first bar, and a different color for the rest of the bars. Is that possible? And I want to do something similar with a double-bar chart. Thanks!!!