JuanC

getData().getX() will only return the numerical data for XY charts (i.e. charts like scatter where each point has a numerical X value). To get the strings used for the X axis labels in a bar chart you will want to use getAxisX().getLabels().getItem(i) where i is the 0 based index of the point you want the label for. JuanC

The axis class has a LabelsFormat property which allows you to control things such as number of decimals, formatting, etc. chart1.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Currency); JuanC

To make sure your chart only gets painted once, you should call chart1.create("ChartDiv") at the end of your block, if you modify the chart after the create call the chart will have to be repainted. To get "filled" markers please add the following line chart1.getAllSeries().setMarkerStyle(cfx.MarkerStyle.Filled); JuanC

I don't think we can easily show the labels in an XY bubble, I noticed your X goes 1, 2, 3, 4, if this means you really want your bubbles equally spaced you could this: var fields = chart1.getDataSourceSettings().getFields(); fields.clear(); var field; field = new cfx.FieldMap(); field.setName("Label"); field.setUsage(cfx.FieldUsage.Label); fields.add(field); field = new cfx.FieldMap(); field.setName("Y"); field.setUsage(cfx.FieldUsage.Value); fields.add(field); field = new cfx.FieldMap(); field.setName("Size"); field.setUsage(cfx.FieldUsage.Value); fields.add(field); chart1.setDataSource(data); chart1.setGallery(cfx.Gallery.Bubble); chart1.getAllSeries().setMultipleColors(true); JuanC

If you are passing data with json, the pie will show the first string field found in your json objects, e.g. var data = [{"Name":"Rolling Stones", "Sales":10},{"Name":"Pink Floyd", "Sales":8},{"Name":"Led Zeppelin", "Sales":7}]; chart1.setDataSource(data); chart1.setGallery(cfx.Gallery.Pie); The legend box (and tooltip for each pie) will show the band name. If you are passing data manually you can use axisX.getLabels() as follows but I would recommend the json approach. var data = chart1.getData(); data.setSeries(1); data.setPoints(3); data.setItem(0, 0, 20); data.setItem(0, 1, 14); data.setItem(0, 2, 17); chart1.setGallery(cfx.Gallery.Pie); var labels = chart1.getAxisX().getLabels(); labels.clear(); labels.setItem(0, "First Item"); labels.setItem(1, "Second Item"); labels.setItem(2, "Third Item"); Regards, JuanC

Use the annotation extension, handle the click event and create an annotation object (rectangle, circle, etc.) attached to the point that was clicked. JuanC

No need to apologize as your english is very good. Can you create a small sample that shows the problem and post it here? Do you get the error even if you do not attach an event handler to the click event? JuanC

Changing the color or any other properties independently for each element (bar/line) is not possible at this time when using Pareto. To be completely honest we have not made improvements to pareto for a long time, mainly because it is not used that often. We will see if we can squeeze some changes for future versions, if this is urgent you could try creating a chart with 2 series, set the gallery for the first one to be line and the second to be bar and calculate the accummulated percentage. Hopefully this code will get you on the right track. Note that because the chart has 2 series you have complete control over each series. var data = [{"Value":10},{"Value":13},{"Value":18},{"Value":24}]; // Add values var total = 0; for(var i = 0;i<data.length;i++) { total += data.Value; } // Add Property for accumulated percentage var accum = 0; for(var i = 0;i<data.length;i++) { accum += data.Value; data.Percentage = (accum / total); } // Use secondary Axis var axis2 = chart1.getAxisY2(); axis2.setMin(0); axis2.setMax(1); axis2.getLabelsFormat().setFormat(cfx.AxisFormat.Percentage); axis2.setVisible(true); var major = axis2.getGrids().getMajor(); major.setVisible(false); major.setTickMark(cfx.TickMark.None); // Make sure first series is percentage var fieldMap; var fields = chart1.getDataSourceSettings().getFields(); fieldMap = new cfx.FieldMap(); fieldMap.setName("Percentage"); fieldMap.setUsage(cfx.FieldUsage.Value); fields.add(fieldMap); fieldMap = new cfx.FieldMap(); fieldMap.setName("Value"); fieldMap.setUsage(cfx.FieldUsage.Value); fields.add(fieldMap); // Pass data chart1.setDataSource(data); // Customize series as needed chart1.getSeries().getItem(0).setGallery(cfx.Gallery.Lines); chart1.getSeries().getItem(0).setAxisY(axis2); chart1.getSeries().getItem(1).setGallery(cfx.Gallery.Bar); Regards, JuanC

I would recommend that you focus first on downloading the data every X seconds without any chart interaction (e.g. try dumping some of the data values into the console or in a div) to make sure the non-chart related issues are taken care of. If you are using jQuery you should probably look into jquery.ajax. Once you have this working, all you need to do would be to call setDataSource to repopulate your existing chart with the new data. JuanC

Can you post the client script that gets to the client, i.e. we would need to see what varOverhead is at the client. Is it possible the first number in the array is so big (3711095) than when compared with the other one is almost 100% of the total? Regards, JuanC

Unfortunately we do not have a property that allows you to change the scale used for the labels without affecting the tooltops, I would recommend you set your data with "real" numbers, e.g. 85762 (instead of 85.762) and handle the Y axis label event to format the labels, e.g chart1.getAxisY().setNotify(true); chart1.on("getaxislabel", onAxisYLabel); function onAxisYLabel(args) { var number = parseFloat(args.getText()); args.setText(number / 1000); } Regards, JuanC

Exporting is not supported. I apologize if the docs incorrecly stated otherwise (we share some of our docs with other platforms such as Windows Forms, Java, etc.) JuanC

Exporting to an image is currently not supported. JuanC

I am not entirely sure what you mean by "can I pass a variable into the array". If you are generating the json on the server, your php would connect to the db and generate the json using the values from the db. If you get the json from the server and want to tweak the data you can always modify the items objects before passing them to the chart, e.g. var first = items[0]; first["Value"] = aNumberVariable; Or you can create a new object and add it to the array, e.g. var elem = {}; elem["Country"] = "Venezuela"; elem["Value"] = 4000; items.push(elem) Regards, JuanC

I did a simple test as follows Initial Code: chart1 = new cfx.Chart(); chart1.create('myDiv'); $("#myDiv").click(function(evt) { doClickEvent(evt); }); function doClickEvent(evt) { $("#myDiv").empty(); chart1 = new cfx.Chart(); doRandom(1, 5, 20, 100, 20); chart1.create('myDiv'); } The code for doRandom is not important but it makes sure the chart is populated with random data so that we can see if the chart is changed, in theory (or at least what I can get from jQuery's documentation for empty) the event handlers should be removed but clicking in the "second" chart will in fact call doClickEvent again (so the chart changes with each click). I tried adding the following as the first line in doClickEvent $("#myDiv").off('click'); And it seemed to work, honestly my jQuery experience is limited so I am not sure if this is the best way to remove the event handler or if unbind should be called instead. Another possibility that could work depending on whether your drill down scenarios would be to use different divs for different drill down levels, and then hiding the divs as needed, this could also make it easier to provide a "back" functionality. Hope this helps. JuanC

The tooltips normally come from the data you pass to the chart, if you cannot modify your JSON objects you might want to change the series name as follows var items = [{"Month":"Jan", "Value":15},{"Month":"Feb", "Value":9},{"Month":"Mar", "Value":18}]; chart1.setDataSource(items); chart1.getSeries().getItem(0).setText("Valor"); JuanC

Unfortunately if the 2 data series are identical, a line chart will only show 1 of the series, you might want to consider other gallery types, such as bar, another possibility would be to have different line widths for each of the line to try to make the "bottom" line to be visible if the values coincide. JuanC

You need to include jchartfx.annotation.js JuanC

If you want to use annotations you must include jchartfx.annotation.js JuanC

jcharfxTooltip2, jchartfxTooltip2Hidden and jchartfxTooltip2Visible are used for the stylable (default in 7.1) tooltips. These are the tooltips that normally use the color of the series for the border and have a line separating the title from the content. You can style these tooltips to change the appearance. Note that these styles only have opacity and transition related attributes. jchartfxTooltip, jchartfxTooltipVisible and jchartfxToolTipHidden are used for the "old look" non-stylable tooltips. These are the tooltips used in jchartfx.corebasic.js or if you do not like the new tooltips you can switch back to using when using jchartfx.corevector.js with the following code chart1.getToolTips().setBorderTemplate(null); Regards, JuanC

For missing values you will need to use cfx.Chart.Hidden, see this thread for more details http://community.jchartfx.com/forums/t/197.aspx JuanC

Please make sure the object you are passing to setDataSource is an array of javascript objects. If you are getting a string in your ajax callback you might need to use eval. JuanC

You need to use the crosstab data provider, more about it here http://support.softwarefx.com/jChartFX/article/2501235#c0ddfac4-6679-e211-84a5-0019b9e6b500 JuanC

Please try setting the chart's data before the chart.create call. Regards, JuanC

The documentation is incorrect (it was probably copied/translated from our Java desktop docs). To set the offset you have to pass a string with the X and Y separated by a comma, e.g. chart1.getAllSeries().getPointLabels().setOffset("10,4"); JuanC