angelr

Please send us an email to productsonline@softwarefx.com (remove online) with the product serial number.

2. Complementing JuanC answer, please check the releasenotes.txt file included in the downloadable jchartfx.7.3.5518.zip file. Also, if you visit jChartFX Programmer's Guide: http://support.softwarefx.com/jChartFX/PG, you will see articles tagged by version number. Please see attached image. We will add a kb article listing all new features grouped by version. This should be finished soon and then added to the programmer's guide.

I just downloaded the sample and it seems to be working fine on IE11. Can you confirm if it is working at your end?

We were able to reproduce this issue. We already fixed the docs site and we will be releasing a HotFix addressing this issue in the next few days.

We ran a few tests at our end, trying to replicate the behavior you reported, and this is what we found: We used 3 different tests on 3 different browsers: Test 1: An HTML webpage rendering (12) basic charts with some minor customization like series gallery types. Test 2: An HTML webpage rendering (12) charts with some data being passed to the charts. Test 3: An HTML webpage rendering (12) charts with custom visual attributes, like enabling animations, adding titles, changing labels, modifying the series fill mode and also passing data to the chart. and these are the results we got: Using a Timer Browser Basic +Data +Visual Attributes Firefox 1.75s 1.90s 6.10s Chrome 1.65s 2.30s 3.61s IE 1.58s 1.83s 4.23s Using the browser Profiler with Cache Browser Basic +Data +Visual Attributes Firefox 0.08s 0.08s 0.10s Chrome 2.01s 1.91s 3.60 Using the browser Profiler without Cache Browser Basic +Data +Visual Attributes Firefox 5.09s 4.06s 11.3s Chrome 2.26s 2.30s 2.21s Test 1 - Basic. chart1.getData().setSeries(5); chart1.getSeries().getItem(0).setGallery(cfx.Gallery.Bar); chart1.getSeries().getItem(1).setGallery(cfx.Gallery.Bar); chart1.getSeries().getItem(2).setGallery(cfx.Gallery.Lines); chart1.getSeries().getItem(2).setStacked(false); chart1.getSeries().getItem(3).setGallery(cfx.Gallery.Lines); chart1.getSeries().getItem(3).setStacked(false); Test 2 - Passing Data chart1.getData().setSeries(5); chart1.getSeries().getItem(0).setGallery(cfx.Gallery.Bar); chart1.getSeries().getItem(1).setGallery(cfx.Gallery.Bar); chart1.getSeries().getItem(2).setGallery(cfx.Gallery.Lines); chart1.getSeries().getItem(2).setStacked(false); chart1.getSeries().getItem(3).setGallery(cfx.Gallery.Lines); chart1.getSeries().getItem(3).setStacked(false); for (var i = 0; i < 10; i++) { chart1.getData().setItem(0, i, Math.floor(Math.random() * (100))); chart1.getData().setItem(1, i, Math.floor(Math.random() * (100))); chart1.getData().setItem(2, i, Math.floor(Math.random() * (100))); chart1.getData().setItem(3, i, Math.floor(Math.random() * (100))); } Test 3 - Visual Attributes + Passing Data chart1.getData().setSeries(5); chart1.getSeries().getItem(0).setGallery(cfx.Gallery.Bar); chart1.getSeries().getItem(1).setGallery(cfx.Gallery.Bar); chart1.getSeries().getItem(2).setGallery(cfx.Gallery.Lines); chart1.getSeries().getItem(2).setStacked(false); chart1.getSeries().getItem(3).setGallery(cfx.Gallery.Lines); chart1.getSeries().getItem(3).setStacked(false); chart1.getAnimations().getLoad().setEnabled(true);// # animates drawing of graph var titles = chart1.getTitles(); var title = new cfx.TitleDockable(); title.setText("Expected vs Worked/Flexed Hours"); titles.add(title); chart1.getLegendBox().setDock(cfx.DockArea.Bottom); chart1.getAxisX().setStep(2); chart1.getAxisX().setLabelAngle(45); chart1.getAxisY().getTitle().setText("Hours"); chart1.getAllSeries().setBarShape(cfx.BarShape.Cylinder); chart1.getAllSeries().setStackedStyle(cfx.Stacked.Normal); chart1.getAllSeries().setFillMode(cfx.FillMode.Pattern); chart1.getAllSeries().setVolume(75); chart1.getAllSeries().setStackedStyle(cfx.Stacked.Normal); for (var i = 0; i < 10; i++) { chart1.getData().setItem(0, i, Math.floor(Math.random() * (100))); chart1.getData().setItem(1, i, Math.floor(Math.random() * (100))); chart1.getData().setItem(2, i, Math.floor(Math.random() * (100))); chart1.getData().setItem(3, i, Math.floor(Math.random() * (100))); } As you can see there are different variables that might affect the chart rendering times like: the amount and location of the data being passed to the chart, the customized chart visual attributes, whether the page is cached or not, the browser type and version rendering the chart, location of jChartFX (plus other frameworks) libraries, among many others. Attached you'll find the code and the screenshots of the samples we used for our tests, so you can use them as a base to troubleshoot the slowness issue you are reporting. TestCharts - Basic.zip TestCharts - Data.zip TestCharts - VisualAttributes.zip

You have a reference in your code to jChartFX version 7.0.4728.16930/jchartfx.full.js, but the Animations feature was release on JChartFX version 7.1 The order importing JChartFX libraries is important. We use jchartfx.full.js to ease the deployment process but it is always recommended to upload JChartFX libraries on demand as needed. I tried your code using this reference: <script type="text/javascript" src="'>http://www.jchartfx.com/libs/v7/current/js/jchartfx.full.js"></script> and it worked as expected. Attachments.zip

To set the AxisX label font size in code using the API, please use: var axisX = chart1.getAxisX(); axisX.setFont("14px Arial"); To set the AxisX label font size using css styles: .jchartfx .AxisX_Text { font-family: Arial; font-size: 12pt; } I just tested adding the font style in a local copy of a jchartfx.css file and it worked as expected.

Following is a sample code to resemble your chart using JChartFX: <!DOCTYPE html> <html> <head> <title>Multi-Stacked Series</title> <script type="text/javascript" src="Scripts/jchartfx.system.js"></script> <script type="text/javascript" src="Scripts/jchartfx.coreVector.js"></script> <script type="text/javascript" src="Scripts/jchartfx.advanced.js"></script> <script type="text/javascript" src="Scripts/jchartfx.vectorTemplates.js"></script> </head> <body> <div id="ChartDiv1" style="width: 600px; height: 400px; display: inline-block"></div> <script type="text/javascript"> window.onload = function () { onLoadDoc(); }; var chart1; function onLoadDoc() { chart1 = new cfx.Chart(); var items = [ { "Product A": 110, "Product B": 80, "Service A": 100, "Service B": 50, "Service C": 45, "Date": "2001-01-01T24:00:00.000Z" }, { "Product A": 100, "Product B": 100, "Service A": 95, "Service B": 40, "Service C": 50, "Date": "2002-01-01T24:00:00.000Z" }, { "Product A": 105, "Product B": 130, "Service A": 100, "Service B": 50, "Service C": 50, "Date": "2003-01-01T24:00:00.000Z" }, { "Product A": 115, "Product B": 150, "Service A": 95, "Service B": 50, "Service C": 50, "Date": "2004-01-01T24:00:00.000Z" }, { "Product A": 120, "Product B": 100, "Service A": 45, "Service B": 35, "Service C": 45, "Date": "2005-01-01T24:00:00.000Z" } ]; chart1.setDataSource(items); chart1.setGallery(cfx.Gallery.Bar); var bar = chart1.getGalleryAttributes(); bar.setTemplate("BarSpotlight"); var title = new cfx.TitleDockable(); title.setText("Year"); var axisX = chart1.getAxisX(); axisX.setTitle(title); chart1.getSeries().getItem(0).setStacked(true); chart1.getSeries().getItem(1).setStacked(true); chart1.getSeries().getItem(3).setStacked(true); chart1.getSeries().getItem(4).setStacked(true); chart1.getLegendBox().setDock(cfx.DockArea.Bottom); var chartDiv = document.getElementById('ChartDiv1'); chart1.create(chartDiv); }; </script> </body> </html>

Thank you for your feedback. We will update the documentation. In the meantime, here is a working sample showing real-time capabilities: http://jsfiddle.net/softwarefx/esVgj/

Here is a fiddle using JChartFX + jQuery 1.8.2: http://jsfiddle.net/softwarefx/nm87U/

Here is sample showing how to highlight points that fall within different ranges in a bar chart: <!DOCTYPE html> <html> <head> <title></title> <script type='text/javascript'> window.onload = function () { onLoadDoc(); } var chart1; function onLoadDoc() { chart1 = new cfx.Chart(); chart1.setGallery(cfx.Gallery.Bar); var axis1 = chart1.getAxisY(); axis1 = chart1.getAxisY(); axis1.setMin(0); axis1.setMax(100); var conditional1 = new cfx.ConditionalAttributes(); var condition1 = conditional1.getCondition(); condition1.setFrom(80); condition1.setTo(100); conditional1.setText(">80%"); conditional1.setTag("GreenCondition"); var conditional2 = new cfx.ConditionalAttributes(); var condition2 = conditional2.getCondition(); condition2.setFrom(61); condition2.setTo(79); conditional2.setText("80%-60%"); conditional2.setTag("YellowCondition"); var conditional3 = new cfx.ConditionalAttributes(); var condition3 = conditional3.getCondition(); condition3.setFrom(0); condition3.setTo(60); conditional3.setText("<60%"); conditional3.setTag("redCondition"); chart1.getConditionalAttributes().add(conditional1); chart1.getConditionalAttributes().add(conditional2); chart1.getConditionalAttributes().add(conditional3); var items = [{ "Value": 9 }, { "Value": 15 }, { "Value": 21 }, { "Value": 26 }, { "Value": 35 }, { "Value": 43 }, { "Value": 41 }, { "Value": 44 }, { "Value": 70 }, { "Value": 74 }, { "Value": 75 }, { "Value": 80 }, { "Value": 82 }, { "Value": 85 }]; chart1.setDataSource(items); //To hide the default legendBox item - Optional var lia; lia = new cfx.LegendItemAttributes(); chart1.getLegendBox().getItemAttributes().setItem((chart1.getSeries()), 0, lia); lia.setVisible(false); var chartDiv = document.getElementById('ChartDiv1'); chart1.create(chartDiv); } </script> <link type="text/css" href="http://www.jchartfx.com/libs/v7/current/styles/jchartfx.css" rel="Stylesheet" /> <script type="text/javascript" src="'>http://www.jchartfx.com/libs/v7/current/js/jchartfx.system.js"></script> <script type="text/javascript" src="'>http://www.jchartfx.com/libs/v7/current/js/jchartfx.coreVector.js"></script> <script type="text/javascript" src="'>http://www.jchartfx.com/libs/v7/current/js/jchartfx.advanced.js"></script> <style type="text/css"> #chart .GreenCondition { stroke: #00AF33; fill: #00AF33; } #chart .YellowCondition { stroke: #EEEE00; fill: #EEEE00; } #chart .redCondition { stroke: #FF0000; fill: #FF0000; } </style> </head> <body> <br /> <div id="ChartDiv1" style="width: 600px; height: 400px; display: inline-block"> </div> </body> </html> You can also check the jsfiddle for this sample: http://jsfiddle.net/softwarefx/MK5j6/

Are you asking about forecasting or showing trends in charts? If that is what you are looking for, unfortunately adding prediction analysis or regression analysis to render a trendline is currently not supported in jChartFX.

Make sure you are adding the required JavaScript Libraries. The only two files required in any scenario are: - jchartfx.coreVector.js or jchartfx.coreBasic.js (depending on whether you want to use Vector based rendering or not) - jchartfx.system.js Beyond those two, you can add or remove references as needed based on the functionality you want to make available on the chart. Are you calling a specific method when received this error?

Here is a small sample showing a Pareto Chart: <!DOCTYPE html> <html> <head> <title></title> <script type='text/javascript'> window.onload = function () { onLoadDoc(); } var chart1; var items = [{ "Country": "China", "Population": 1357379000 }, { "Country": "India", "Population": 1256994000 }, { "Country": "United States", "Population": 316244000 }, { "Country": "Indonesia", "Population": 248731000 }, { "Country": "Brazil", "Population": 193946886 }]; function onLoadDoc() { chart1 = new cfx.Chart(); chart1.setDataSource(items); chart1.setGallery(cfx.Gallery.Pareto); var titles = chart1.getTitles(); var title = new cfx.TitleDockable(); title.setText("Countries by Population"); titles.add(title); var axis1 = chart1.getAxisY(); axis1.getLabelsFormat().setFormat(cfx.AxisFormat.Number); var chartDiv = document.getElementById('ChartDiv1'); chart1.create(chartDiv); } </script> <script type="text/javascript" src="'>http://www.jchartfx.com/jChartFX/jchartfx.system.js"></script> <script type="text/javascript" src="'>http://www.jchartfx.com/jChartFX/jchartfx.coreVector.js"></script> <script type="text/javascript" src="'>http://www.jchartfx.com/jChartFX/jchartfx.pareto.js"></script> </head> <body> <br /> <div id="ChartDiv1" style="width: 600px; height: 400px; display: inline-block"> </div> </body> </html> This is the chart image:

We tried a Cordova example dispatched in PhoneGap latest version. The Eclipse Android\cordova project comes with an html webpage (index.html) that we edited to include JChartFX libraries and to create a Bar Chart in code. We set a simple Bar Chart with no additional interactivity. The chart image rendered as expected within the app in the AVD/emulator and also, when exported as an Android App(.apk) to a real Android Tablet (Motorola Xoom Android 4.1.2). Here is the html we used and the resulting chart image: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> <link rel="stylesheet" type="text/css" href="css/index.css" /> <title>Test PhoneGap & jChartFX</title> </head> <body> <div class="app"> <h1>jChartFX</h1> </div> <script type="text/javascript" src="'>http://www.jchartfx.com/jChartFX/jchartfx.system.js"></script> <script type="text/javascript" src="'>http://www.jchartfx.com/jChartFX/jchartfx.coreVector.js"></script> <script type="text/javascript" src="cordova-2.5.0.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript"> app.initialize(); </script> <div id="ChartDiv1" style="width:700px;height:400px;display:inline-block"></div> <script language="javascript" type="text/javascript"> window.onload = function () { onLoadDoc(); }; var chart1; function onLoadDoc() { chart1 = new cfx.Chart(); chart1.setGallery(cfx.Gallery.Bar); chart1.getLegendBox().setDock(cfx.DockArea.Bottom); var chartDiv = document.getElementById('ChartDiv1'); chart1.create(chartDiv); } </script> </body> </html>