setPicture

[shakil.sama]

I am trying to customise the marker points in jChartFX bubble chart. In javascript I know to put different shapes for different data points.

ex:- pnts.getItem(-1, 2).setMarkerShape(cfx.MarkerShape.Rect);

 

But I don't know how to set custom picture

chart1.getPoints().getItem(0, 1).setPicture(;

in above line what will replace the value of b??

[JuanC]

The following code would modify the markers in a line/scatter/curve chart to use an image, note that the URL includes the actual width/height of the image as we need that to properly generate the SVG. You can then control the size used to paint the markers using setMarkerSize.

 

var allSeries = chart1.getAllSeries();

allSeries.setPicture("Include/Images/MarkerTest.png,16,16");

allSeries.setMarkerShape(cfx.MarkerShape.Picture);

allSeries.setMarkerSize(10);

 

I noticed that in some builds (including the current one) we are drawing a rectangular border on top of the image, this will be fixed on our next build.

 

Please note that currently we do not support Picture or MarkerShapes in a bubble chart. We do support an XML template that would allow you to tweak how the bubbles look (vector based). We will research adding the functionality in future builds to allow you to use marker shapes or pictures in bubble.

 

JuanC

[shakil.sama]

Hello Juan, Thanks for the help.

 

One more issue I am facing is regarding shapes and tooltip's dependencies over the different js files.

If I am just including coreBasic.js then I will get different shapes in the chart but its tool tip is not looking good.

If I include coreVector.js also then the tooltip will look good but shapes disappears. what is the reason and what can I do??

Look at the attached images.

 

[JuanC]

1) In our next build, bubble will support using markers (or pictures) in coreVector using the following code

 

chart1.setGallery(cfx.Gallery.Bubble);

chart1.getGalleryAttributes().setUseMarkers(true);

 

2) I am not sure if it was just a demo but the screenshot you showed does not seem to change the size of the marker for any of the bubbles, if this is the case, you might be able to switch to using scatter with coreVector in the current builds in order to use markers/pictures.

 

3) We will fix some issues with tooltips in coreBasic in our next build, please let us know which version of jChartFX you are using, alert(cfx.Version) to see if we can offer a workaround to fix the tooltip appearance.

 

Note that coreVector and coreBasic are mutually exclusive, you should only use one of those.

 

JuanC

[shakil.sama]

Version of charts is :-  7.3.5529.24241

[shakil.sama]

I want to customize tool tip. I need to pass an array and based on the X-Y points it should display element from an array.

How could I work around for it?

[JuanC]

There is a new build that supports markers in bubble when using coreVector. To customize the tooltips, you could use the following approach

 

var data = [

{"X": 10, "Y": 20, "Sales":45, "UserName":"John"},

{"X": 14, "Y": 30, "Sales":25, "UserName":"Peter"},

{"X": 22, "Y": 20, "Sales":15, "UserName":"Michael"}

];

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

 

var field1 = new cfx.FieldMap();

field1.setName("X");

field1.setUsage(cfx.FieldUsage.XValue);

fields.add(field1);

 

var field2 = new cfx.FieldMap();

field2.setName("Y");

field2.setUsage(cfx.FieldUsage.Value);

fields.add(field2);

 

var field3 = new cfx.FieldMap();

field3.setName("X");

field3.setUsage(cfx.FieldUsage.Value);

fields.add(field3);

 

chart1.setDataSource(data);

chart1.setGallery(cfx.Gallery.Bubble);

 

chart1.getAxisX().setMax(30);

chart1.getAxisY().setMax(40);

 

var tipTemplate = '<DataTemplate xmlns:x="a">' +

'<Grid Margin="3,0,3,3">' +

'<Grid.ColumnDefinitions>' +

'<ColumnDefinition Width="Auto"/>' +

'<ColumnDefinition Width="Auto"/>' +

'</Grid.ColumnDefinitions>' +

'<Grid.RowDefinitions>' + 

'<RowDefinition Height="Auto"/>' +

'<RowDefinition Height="Auto"/>' +

'<RowDefinition Height="Auto"/>' +

'</Grid.RowDefinitions>' +

'<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Path=SeriesTX}" Foreground="{Binding Path=ItemFill}" Margin="0,2,12,1"/>' +

'<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Path=ValueX}" FontWeight="Bold" HorizontalAlignment="Right" Margin="0,2,0,1"/>' +

'<TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding Path=SeriesTY}" Foreground="{Binding Path=ItemFill}" Margin="0,2,12,1"/>' +

'<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=Value}" FontWeight="Bold" HorizontalAlignment="Right" Margin="0,2,0,1"/>' +

'<TextBlock Grid.Row="2" Grid.Column="0" Text="Name:" Foreground="{Binding Path=ItemFill}" Margin="0,2,12,1"/>' +

'<TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Path=DataUserName}" FontWeight="Bold" HorizontalAlignment="Right" Margin="0,2,0,1"/>' +

'</Grid>' +

'</DataTemplate>';

 

chart1.getToolTips().setContentTemplate(tipTemplate);

 

 

The important part of the template is the last 2 text blocks that show the extra information, if you need extra rows you also need to add Grid.RowDefinition to the list of rows.

 

There is another approach where we call a function to obtain extra strings (that you could use to get info from your array) but I would recommend if possible to have the data packaged in one JSON object.

 

JuanC