[IE support]

jChartFX should work with IE9. Please post a small complete sample (HTML, CSS, etc.) that exhibits the problem on IE9.

JuanC

[giving margin between bars]

It should be supported in Gantt. Can you post a small sample that duplicates this issue?

Regards,

JuanC

[Click column in Gantt chart]

Are you using jQuery? Note that for our data (hitType, series, etc.) to be attached correctly to the event data you need to connect to the click event slightly different whether you are using jQuery or not.

If the problem persists, please try posting a small sample that duplicates your issue, also letting us know the browsers you are using (and jQuery version if using jQuery).

JuanC

[Click column in Gantt chart]

If you are using jQuery you could use something like this

        $("#myDiv").click(function(evt) {
             if ((evt.hitType == cfx.HitType.Point) || (evt.hitType == cfx.HitType.Between)) {
                 var s = "Series " + evt.series + " Point " + evt.point;
                 if (evt.hitType == cfx.HitType.Between)
                    s += " Between";
                 alert(s);
             }
        });
 

If you are not using jQuery

var divHolder = document.getElementById('myDiv');
chart1.create(divHolder);
divHolder.onclick = doClick;

function doClick(evt)
{
    if (evt.hitType == cfx.HitType.Point)
        alert("Series " + evt.series + " Point " + evt.point);
}

Regards,

JuanC 

HighlightSample.zip

[Regarding transparent background.]

There are several elements in the chart so we include a css (jchartfx.css) that you can just include in your page and customize to your needs. To create a transparent chart you would need to modify the fill property for Border class.

 .jchartfx .Border {
    fill: #F5F5EE;
    stroke: #DBDBD9;
    stroke-width: 1;
}

All charts are generated with a jchartfx class but if you have multiple charts in a page you can control this class passing an extra string to the create call when you create the chart, e.g.

In this case you will probably want to start by duplicating the jchartfx.css with the new class name.

var chart2 = new cfx.Chart();
 chart2.create('myDiv2',"jchartfx2"); 

JuanC

[giving margin between bars]

To increase the space between series you would use the IntraSeriesGap property as follows

chart1.setGallery(cfx.Gallery.Bar);
chart1.getGalleryAttributes().setIntraSeriesGap(20);

Please note that this space is in pixels, because it is a float we will consider adding a feature in future builds to supply it as a percentage.

Also note that the space shared by all the series in a point results after the Series.Volume property is used so if you see to much space between different points you can decrease that space by increasing the Volume as follows

chart1.getAllSeries().setVolume(85);

In this case volume is a percentage of the total space.

Regards,

JuanC

Attachments.zip

[giving margin between bars]

You can increase the space between X axis points by setting the AllSeries.Volume property, e.g.

chart1.getAllSeries().setVolume(50);

JuanC

[manage autosize when reload data]

We were not aware of this bug, can you post a small self containing sample (including HTML page, etc.) that duplicates this issue?

JuanC

[Need custom X and Y Axis on Line Chart]

To change the Y axis labels you have two options

1) Handle an event to change the axis label

var axisY = chart1.getAxisY();
axisY.setNotify(true);
chart1.on("getaxislabel", onAxisLabel);

function onAxisLabel(args)
{
    args.setText("$" + args.getText());
}

2) If the Y axis labels are "finite" you can set the labels and step as follows

    var items = [{"Month":"Jan", "Value":1},{"Month":"Feb", "Value":2},{"Month":"Mar", "Value":3},{"Month":"Apr", "Value":2}];
    chart1.setDataSource(items);
    var axisy = chart1.getAxisY();
    axisy.setStep(1);
    axisy.setLabelValue(1);
    var labels = axisy.getLabels();
    labels.setItem(0, "Bad");
    labels.setItem(1, "Low");
    labels.setItem(2, "Med");
    labels.setItem(3, "Avg");
 

JuanC 

[change area background]

In an area chart there are 3 colors you could change

1) Chart Background
2) PlotArea Background
3) Area itself

If you are including our jchartfx.css you would change the following classes

1) .jChartFX .Border
2) .jChartFX .PlotArea
3) .jChartFX .Attribute0

If you do NOT include our css, you can change the following properties

1) chart1.setBackColor("#FF0000");
2) chart1.setPlotAreaColor("#0000FF");
3) chart1.getSeries().getItem(0).setColor("#404000");

Hope this helps.

JuanC

 

[Adding a table inside the LegendBox]

 I am afraid you will not be able to place a table inside the legend box, one possibility would be to remove the chart border and place the chart control along with an independent HTML table, if these 2 elements are inside a div you could even get them to look like a single element.

Another possibility would be to include jchartfx.advanced.js and set the DataGrid to be visible.

JuanC

[jchartx supports mobile app development]

jChartFX is a javascript control that currently generates SVG, most mobile browsers should support this.

JuanC 

[Setting the color and alignment of a custom grid line]

jChartFX has 2 "modes" of work. If you include jchartfx.css we will pick up most (if not all) the colors from this file. In the case of a custom grid line we will generate an object that looks like this

 class="CustomGridLine AxisY_CustomGridLine AxisY0_CustomGridLine0"

Which means you can set the color for all custom grid lines, for all the custom gridlines in the Y axis or for a specific custom grid line by editing the CSS. e.g.

.jchartfx .CustomGridLine {
 stroke: #00F035;
}

.jchartfx .CustomGridLineLabel {
 fill: #660066;
}
 

If you DO NOT include jChartFX.css you can control the colors using our API (I am guessing this is what you are trying already but because you are including the CSS it takes priority over the API calls)

To control the label alignment in a CustomGridLine you should use setAlignment and/or setLineAlignment as follows

customGridLine.setAlignment(cfx.StringAlignment.Center);

The other possible alignments are Near and Far. About the documentation, our control was first developed as a .NET control so I am afraid some of the documentation has not been properly changed. The current build also has an issue aligning text to the top so LineAlignment.Far will not work as expected, we should be fixing this in a future build.

Regards,

JuanC

[Label on Pyramid Chart]

Unfortunately the annotation attach functionality is only supported in "Cartesian-axes" charts, i.e. Bar, Line, Area, Curve, CurveArea, Step, HighLowClose, OpenHighLowClose or any combination of these.

It is NOT supported on Pie, Doughnut, Pyramid, Radar or any of the other galleries.

In the case of radar it is clear we could use polar coordinates but in the others it is not clear how would you describe the position of an object.

Have you checked our point labels? If the position of the point labels is near where you would want them, it is possible to turn on a point label for a specific serie/point combination using the Chart.getPoints() collection.

Regards,

JuanC

[getDirty()]

We have no getDirty() method since we have no UI to change/update the chart.

Regards,

JuanC

[Pareto chart]

You should be able to change properties on a per-series basis

chart1.getSeries().getItem(1).getPointLabels().setVisible(true);

Pareto is a special case since with only 1 series, two "galleries" are painted, I will check if we can add a property in pareto to control the label visibility in the second series.

JuanC

[Strange y-axis labeling]

I was not able to duplicate this issue with our most recent bits so maybe it is something we already fixed and will be included in a future build.

In the meantime can you try the following

chart1.getAxisY().setMin(1);
chart1.getAxisY().setMax(39);
chart1.getAxisY().setInverted(true); 

JuanC

[DataGrid - Scrolling]

Scrolling is currently not supported on the data grid, obviously the scrollbar should not have appeared.

We should rectify this in our next build, if we cannot get scrolling working we will then hide the scrollbar until this functionality is implemented.

Regards,

JuanC

Muster_Graph.pdf

[jChartFX in the Java code]

jChartFX is a javascript component that generates charts using HTML5 (SVG).

 As far as I know you cannot use it in a java app (swing based or not). The only way to use it would be if you are using a java framework (or library) that allows you to host javascript components. I am not aware of such a framework.

JuanC

[Chart updated from table]

It would be something like this (using jQuery), it would obviously need code to handle an invalid number entry, in this sample I am hardcoding a table with 3 numbers, on a real page this table would be generated dynamically to control number of items.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="Include/jchartfx.css" />
    <script type="text/javascript" src="Include/jquery.js">
    </script>
    <script type="text/javascript" src="jchartfx.system.js">
    </script>
    <script type="text/javascript" src="jchartfx.coreVector.js">
    </script>
</head>
<body>
Handle Data Change
<br/>

<div id="myDiv" style="width:600px;height:400px;display:inline-block"></div>

<br/>

<form>
  <input class="target" type="text" data-row="0" value="10.5" />
  <input class="target" type="text" data-row="1" value="14.5" />
  <input class="target" type="text" data-row="2" value="8.5" />
</form>
   
<script language="javascript">
    var chart1;
   
    $(document).ready(function($) {
        chart1 = new cfx.Chart();
        var data = chart1.getData();
        data.setSeries(1);
        data.setPoints(3);
        data.setItem(0, 0, 10.5);
        data.setItem(0, 1, 14.5);
        data.setItem(0, 2, 8.5);
        chart1.setGallery(cfx.Gallery.Bar);
                     
        var divHolder = document.getElementById('myDiv');
        chart1.create(divHolder);
                     
        $('.target').change(function() {
            var row = $(this).data("row");
            var value = $(this).attr("value");
            data.setItem(0, row, value);
        });
    });
</script>

</body>
</html>
 

Hope this helps.

JuanC

[Chart updated from table]

It is possible to have a chart that reflects changes in a table. At this moment I do no think we have a sample, as soon as we have one we will post a link here.

Basically the sample has to detect changes on a table, figure out the row/column and use chart.getData().setItem(series, point) to change the appropriate value in the chart.

JuanC

[can we use animation in jchart?]

Unfortunately animations are not supported at this time.

Regards,

JuanC

[Axis Section for X-Axis]

The problem is that AxisSection setFrom and setTo are currently not prepared to handle a string representation of a date.

In the next version (which should be released in a couple of days) there will be a new Chart method called dateToDouble that translates a JavaScript date object (not a string) into a numeric value so that you can pass it to AxisSection.setFrom and setTo.

In future builds we will try to do this translation automatically but for the short term the dateToDouble helper method should do the trick.

JuanC

[How can I remove the KeyLabels from the legend box?]

This issue has been fixed and new bits should be released in a couple of days

Regards,

JuanC

[Legend Box with center vertical alignment]

You must set the ContentLayout property as follows

 chart1.getLegendBox().setContentLayout(cfx.ContentLayout.Center);

JuanC