Jump to content
JChartFX Community
  • 0

Question

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(B);

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

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

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
Link to comment
Share on other sites

  • 0

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.

 

post-47418-0-87468100-1433485539_thumb.pngpost-47418-0-07804900-1433485541_thumb.png

Link to comment
Share on other sites

  • 0

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
Link to comment
Share on other sites

  • 0

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
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...