JuanC

July 5, 2016

Other than passing the data, this code would generate the chart you are looking for

chart.getAxisX().getLabelsFormat().setFormat(cfx.AxisFormat.DateTime);

chart.getAxisX().getLabelsFormat().setCustomFormat("HH");

chart.getAxisX().setStaggered(true);

If you do not specify the Axis Format and we see a date time field we default to AxisFormat.Date, which has a "minimal" step of 1 day. Setting the format to DateTime should take care of this.

Please note that if you set the Axis step in a date time field, it will be specified in days

We recently fixed some issues with date time fields, if you notice any issues please try downloading our most recent pre-release version.

Regards,

JuanC

July 1, 2016

(1) In a pie chart we do not show the collection of series in the legend box, instead we show the points which are represented in the API using the X axis, please change line 2 of your code as follows

var ial = ia.getItemList(c0.getAxisX());

(2) This is not possible in the current build, we support templates in most elements (galleries, titles, etc.) so in our next build we will support templates for the markers in the legend box, note that the XML we use is based on XAML but I am afraid is not documented anywhere.

In future builds you would use something like this

ial.setMarkerShape(cfx.MarkerShape.Template);

ial.setMarkerTemplate('<DataTemplate xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:sys="clr-namespace:System;assembly=mscorlib">' +

'<DataTemplate.Resources>' +

'<sys:Double x:Key="cfxOSW">1</sys:Double>' +

'</DataTemplate.Resources>' +

'<Viewbox ViewWidth="25" ViewHeight="25">' +

'<Path Data="M12,0L24,24L0,24Z" Fill="{Binding Path=Fill}" Stroke="{Binding Path=Stroke}" />' +

'</Viewbox>' +

'</DataTemplate>');

(3) Same as 2, in future builds

ial.setMarkerShape(cfx.MarkerShape.Template);

ial.setMarkerTemplate('<DataTemplate>' +

'<Ellipse Fill="{Binding Path=Fill}"/>' +

'</DataTemplate>');

Regards, JuanC

June 30, 2016

Feel free to post the sample code in this forum.

You can also use http://www.jchartfx.com/libs/v7/current/js/jchartfx.full.jsif you prefer jsfiddle.

JuanC

June 29, 2016

I am not sure what you mean by "when I have combined chart series"

I tried this

chart1.setGallery(cfx.Gallery.Bar);

chart1.setDataSource([{"A":10, "B":14}, {"A":11, "B":9}, {"A": 13, "B":12}]);

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

chart1.getSeries().getItem(1).getPointLabels().setTextColor("#FF0000");

And in case you meant combining galleries, also tried this

chart1.setGallery(cfx.Gallery.Bar);

chart1.setDataSource([{"A":10, "B":14}, {"A":11, "B":9}, {"A": 13, "B":12}]);

chart1.getSeries().getItem(0).setGallery(cfx.Gallery.Lines);

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

chart1.getSeries().getItem(1).getPointLabels().setTextColor("#FF0000");

Can you post a small sample that shows the problem you are experiencing?

Are you using CSS? If so please note that jChartFX can operate in one of 2 modes

1) Without including any of the jChartFX CSS files (typically one "attribute" and one "palette")

In this mode you can change any colors/fonts using our API, e.g. this will generate red point labels for the second series

chart1.setGallery(cfx.Gallery.Bar);

chart1.setDataSource([{"A":10, "B":14}, {"A":11, "B":9}, {"A": 13, "B":12}]);

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

chart1.getSeries().getItem(1).getPointLabels().setTextColor("#FF0000");

In a similar way you could change the color for the bars as follows

chart1.getSeries().getItem(1).setColor("#FFFF00");

2) Including our CSS files

In this mode, the SVG generated by jChartFX will not have colors but instead will use classes. In this mode you should configure colors/fonts/etc by modifying the appropriate colors.

I noticed that when we generate Point Labels when using CSS, we only generate the labels with a class "PointLabel", we will fix in future builds by also including the series, e.g. "PointLabel PointLabel1" to make it easier to change colors on a per-series basis.

Regards,

JuanC

June 27, 2016

We just uploaded a new pre-release build that should fix the duplicate IDs issue.

Regards,

JuanC

June 27, 2016

Please try downloading our most recent pre-release version, we have fixed some issues with dates as well as some code that was incorrectly removed.

Regards,

JuanC

June 23, 2016

Our current internal build will not assign an ID to the first div (used for rendering). This should be part of the pre-release bits soon.

Also note that if you have 2 charts in a page, we will be changing the ID of the second (and so on) svgs. In reality we do not need that ID at all but we are afraid we might break somebody who is using getElementById to get to the svg element.

Regards,

JuanC

June 21, 2016

We do generate those 2 divs, one for measuring and the second one is the svg rendering of the chart.

We will research if we can rename the measuring one but you never specified which issue is caused in your app as maybe there is a workaround for it.

JuanC

April 28, 2016

This is a bug recently introduced as we constantly try to optimize our scripts to reduce size and memory footprint.

It has been fixed in build 5962 which can be downloaded as a pre-release build.

Regards,

JuanC

April 26, 2016

You can remove that space by adding the following code

var plotMargin = chart1.getPlotAreaMargin();

plotMargin.setLeft(1);

plotMargin.setTop(1);

plotMargin.setRight(1);

plotMargin.setBottom(1);

Note that 1 is the minimum value for the margins as 0 means to use our defaults.

Regards,

JuanC

April 9, 2016

This would be the smallest page using pictograph (a type of gauge, defined inside jchartx.gauge.js)

<!DOCTYPE html>

<html>

<head>

</script>

</script>

</script>

</script>

$(document).ready(function($) {

var pictograph = new cfx.gauge.PictoGraph();

pictograph.getMainMeasure().setValue(3.4);

pictograph.getTotal().setValue(10);

pictograph.create("myDiv");

});

</script>

</head>

<body>

</body>

</html>

If you need a pictobar (a bar chart using pictographs) you would instead do something like this

<!DOCTYPE html>

<html>

<head>

</script>

</script>

</script>

</script>

$(document).ready(function($) {

var chart1 = new cfx.Chart();

chart1.setDataSource([10,12,14,8]);

var pictobar = new cfx.pictograph.PictoBar();

chart1.setGalleryAttributes(pictobar);

chart1.create("myDiv");

});

</script>

</head>

<body>

</body>

</html>

Hope this helps.

JuanC

April 5, 2016

If you know you will only have 2 elements in your pie and do not care to color each slice indepently

chart1.setDataSource([8,20]);

chart1.setBorder(null);

chart1.setBackColor("#00FFFFFF");

chart1.setGallery(cfx.Gallery.Pie);

chart1.getLegendBox().setVisible(false);

chart1.getGalleryAttributes().setTemplate('<DataTemplate xmlns:x="a" xmlns:sys="b">' +

'<Path Data="{Binding Path=Geometry}" Stroke="#00FF00" StrokeThickness="{Binding Path=StrokeThickness}"/>' +

'</DataTemplate>');

If you do care about coloring each slice border with a different color

chart1.getGalleryAttributes().setTemplate('<DataTemplate xmlns:x="a" xmlns:sys="b">' +

'<Path Data="{Binding Path=Geometry}" Stroke="{Binding Path=Stroke}" StrokeThickness="{Binding Path=StrokeThickness}"/>' +

'</DataTemplate>');

var points = chart1.getPoints();

points.getItem(-1,0).getBorder().setColor("#000000");

points.getItem(-1,1).getBorder().setColor("#FFFFFF");

Hope this helps.

JuanC

March 31, 2016

We have to moderate the forum to avoid spam.

JuanC

March 31, 2016

1) To change the line color of a line chart

Please use the Series.Border, e.g.

chart1.setGallery(cfx.Gallery.Lines);

chart1.getGalleryAttributes().setTemplate("LineBasic");

chart1.setDataSource([{"A":10, "B":20},{"A":14, "B":18},{"A":13, "B":16}]);

chart1.getSeries().getItem(0).getBorder().setColor("#FF0000");

2) There are 2 elements that contribute to the background of a chart, the back color of the chart and the border (some borders will add some effects)

In our default border, the border paints some effects on top of the background including some gradients, if you want a solid border and control over the round corners you would need something like this

var borderTemplate = '<DataTemplate xmlns:x="a" xmlns:sys="b">' +

'<DataTemplate.Resources>' +

'<DataTemplate x:Key="internalRect">' +

'<Border Background="{Binding Path=Fill}" BorderBrush="{Binding Path=Stroke}" />' +

'</DataTemplate>' +

'<DataTemplate x:Key="internal">' +

'<Line Stroke="{Binding Path=Stroke}" X1="{Binding Path=X1}" X2="{Binding Path=X2}" Y1="{Binding Path=Y1}" Y2="{Binding Path=Y2}"/>' +

'</DataTemplate>' +

'</DataTemplate.Resources>' +

'<Border Background="{Binding Path=Fill}" BorderBrush="{Binding Path=Stroke}">' +

'</Border>' +

'</DataTemplate>';

chart1.getBorder().setTemplate(borderTemplate);

Unfortunately we did not expose this as a "prebuilt" template in the same way as "LineBasic", we will do so in future builds.

If you want some roundness to the border, you can add CornerRadius="8" to the last <Border> tag.

To change the background color and border color you would use

chart1.setBackColor("#E0E0E0");

chart1.getBorder().setColor("#FF0000");

Hope this helps.

JuanC

February 26, 2016

If using an OEM license and legend box is positioned at top, there will be extra space "stolen" from plot area at the bottom to make space for icon, even when icon is not visible.

JuanC

February 26, 2016

About the spacing between legend box, title and plot area

Sample Chart Code

chart1.setBorder(null);

chart1.setGallery(cfx.Gallery.Bar);

chart1.setDataSource([{"Male":9.2, "Female":8.4, "Year":"2007"},{"Male":3, "Female":4, "Year":"2008"},{"Male":4, "Female":4, "Year":"2009"}]);

var title = new cfx.TitleDockable();

title.setText("Birth Variation by Gender");

chart1.getTitles().add(title);

var legendBox = chart1.getLegendBox();

legendBox.setDock(cfx.DockArea.Top);

Sample Code to minimize empty space

var plotAreaMargin = chart1.getPlotAreaMargin();

// Measured in pixels, minimum space at top of plot area

// Might result in top axis label clipped if set to minimum value (1) and no title is present

plotAreaMargin.setTop(3);

// Measured in pixels, extra vertical space if legend is positioned at top/bottom

// this method is only exposed in build 5900 or later

legendBox.setExternalGap(0);

// Measured in pixels, if set to 0 legend marker might be slightly clipped

legendBox.setMarginY(2);

// Measured in percentage, defaults to 2

legendBox.setLineSpacing(1);

// Measured in pixels

title.setSeparation(0);

// Alignment center (default) might create some spacing between legend (top) and title

title.setLineAlignment(cfx.StringAlignment.Near);

Please note that setExternalGap is only available in build 5900 or later, all other methods should be available.

JuanC

February 25, 2016

We have uploaded a new pre-release build (7.5.5896) that should fix this issue.

JuanC

February 17, 2016

We try to use dates or strings using ISO 8601 format as dates, e.g. the following data will create a chart where we identify the field Date as holding dates, notice that we used lines as this gallery supports XY data so it is easier to see that the distance between the first 2 points is not the same as the last 2 points.

chart1.setDataSource([{"Value":12, "Date":"2016-02-15"}, {"Value":14, "Date":"2016-02-16"}, {"Value":11, "Date":"2016-02-18"}]);

chart1.setGallery(cfx.Gallery.Lines);

To workaround this you need to specify how each field will be used, e.g.

var fields = chart1.getDataSourceSettings().getFields();

var field;

field = new cfx.FieldMap();

field.setName("Value");

field.setUsage(cfx.FieldUsage.Value);

fields.add(field);

field = new cfx.FieldMap();

field.setName("Date");

field.setUsage(cfx.FieldUsage.Label);

fields.add(field);

Note that you have to assign the fields before using setDataSource, you will notice that the points in the line are equally spaced but there is a bug that will still format the dates on the user's culture. This will be fixed in our next build.

A workaround before this issue is fixed would be to add a character (e.g. a whitespace) in the first element's date to trick our detection code.

JuanC

February 16, 2016

Sorry for the typo, I think it was autocorrect gone wrong as it happened twice, I will be fixing the posts.

Note that we only declare one public global object (cfx) to avoid pollution.

JuanC

February 10, 2016

That is what we used to do but feedback from customers moved us to the current design.

Although I can understand your point of view that a bar with 0 should not be visible, specially now that we use a thicker border, the current approach has a certain consistency with connected galleries (line, area, curve) where a 0 will still connect the previous value with 0 while a "special" value (cfx.Chart.Hidden) breaks the line/area in 2 segments. Bars with a 0 value are drawn with just the border while bars with Hidden are completely invisible.

We will research adding a flag that would treat 0 as hidden for bars, whether we change that to be the default is trickier because we would be changing the behavior for all customers.

JuanC

PS: In the meantime you could quickly loop through your data before passing it to the chart replacing 0 with cfx.Chart.Hidden

February 8, 2016

I am afraid this is by design, You can change the 0 with cx.Chart.Hidden and the bar will not be displayed at all for that particular value. cfx.Chart.Hidden also has the behavior of breaking up a connected gallery (such as line or area) in 2 segments.

JuanC

February 1, 2016

Please try the following page, it does the minimum job required to have a bar chart and alert when you click one of them.

<!DOCTYPE html>

<html>

<head>

</script>

</script>

</script>

var chart1;

function onLoadDoc()

{

chart1 = new cfx.Chart();

chart1.setGallery(cfx.Gallery.Bar);

chart1.setDataSource([10,12,14,8]);

chart1.create("myDiv");

$("#myDiv").click(function (evt) {

if (evt.hitType == cfx.HitType.Point)

alert("Series " + evt.series + " Point " + evt.point);

});

}

$(document).ready(function($) {

onLoadDoc();

});

</script>

</head>

<body>

</body>

</html>

January 29, 2016

Make sure you attach your click handler after the chart.create call, that is the place where will attach our handler that will add the series, point and other properties to event parameter, and handlers run in the order they are attached.

Your code should be

chart1.create("myjChartFX");

...

$("#myjChartFX").click(function(evt) {

alert(evt.point);

});

I tested both orders and can confirm that it will NOT work if you attach the handler before the create call.

JuanC

January 27, 2016

It has been addressed, please download the pre-release build and let us know if it fixes this issue for you.

Regards,

JuanC

January 27, 2016

We have not tried to integrate jChartFX in a meteor application. We will try to do so and post here the results. I noticed the errors you posted relate to motif files. Can you try including the "minimum" number of jChartFX files to see if you still get errors.

You should try just including jchartfx.system.js and jchartfx.coreVector.js.

Regards,

JuanC

Sign In

JuanC

Posts

Joined

Last visited

Days Won

Content Type

Profiles

Forums

Events

Posts posted by JuanC

Hourly data, problem with X Axis rendering

LegendBox and MarkerStyle

point label color per series - bug

point label color per series - bug

BUG - 2 elements with identical ID

Line Chart X-Axis setStep Issue

BUG - 2 elements with identical ID

BUG - 2 elements with identical ID

AxisX and LabelAngle not working together

Get rid of marging

Problem with PictoGraph instantation

Styling issues

moderation approval

Styling issues

How could I remove OEM license icon? or how to expand chart area?

How could I remove OEM license icon? or how to expand chart area?

Set no format for x-axis labels

Set no format for x-axis labels

Zero value column in series still visible as tiny line !

Zero value column in series still visible as tiny line !

Zero value column in series still visible as tiny line !

evt.hitType not equals cfx.HitType.Point

evt.hitType not equals cfx.HitType.Point

Data Table Below Chart

Including JChartFX charts in a meteor.js application

Browse

Activity