JuanC
-
Posts
421 -
Joined
-
Last visited
-
Days Won
3
Content Type
Profiles
Forums
Events
Posts posted by JuanC
-
-
See this thread for an explanation on how to customize the tooltip
http://community.jchartfx.com/forums/t/258.aspx
JuanC
-
>> It is my understanding that the CSS is applied after the API, so that if we use CSS we can not override the values via the API.
What really happens is that when we see that you included the jChartFX CSS we do not generate visual attributes for most of the graphic objects, instead we assign one (or more) classes so that the CSS styles can be applied.
If you want to have for example a bar chart where bars bigger than a certain value are displayed differently you could use ConditionalAttributes as follows
chart1.setDataSource([30,40,35,50,55,48,32]);
chart1.setGallery(cfx.Gallery.Bar);
var condAttrs = chart1.getConditionalAttributes();
var conditional = new cfx.ConditionalAttributes();
var condition = conditional.getCondition();
condition.setFrom(49);
condition.setTo(80);
conditional.setTag("SpecialPoint");
condAttrs.add(conditional);
This will work as long you have a SpecialPoint class in CSS, e.g..jchartfx .SpecialPoint {
fill: #D0A000;
stroke: #806000;
}
Obviously another possibility would be to NOT include the CSS which will give you complete control over the colors/etc using the API.
JuanC
-
In the current build we do not generate CSS classes for pointLabels with specific series indexes, the only workaround would be to not include the jchartfx.css so that the API changes are used.
JuanC
-
Internally they are handled as real numbers but our default is to show no decimals, if you want to change how Y axis labels are displayed
chart1.getAxisY().getLabelsFormat().setDecimals(2);
If you only want to change how tooltips are displayed without affecting how labels are shown you can use getDataFormat() instead of getLabelsFormat()
JuanC
-
Are you connecting to the same server your client is connecting to? Did you check the version of jchartfx you are using?
JuanC
-
I copied your code in a sample (commenting the PopulateCarProduction call) and got the legendbox to appear. Is it possible another element of the HTML page is being drawn on top of the legend box? Or maybe there is a parent DIV that is clipping the chart's div?
JuanC
-
To avoid repeating the tooltip template for each series
chart1.getToolTips().setAllSeries(false);
JuanC
-
You should only include ONE of the Core.js, coreVector has more functionality (and a different default look) as it allows us to provide different styles for bars/areas/etc, it also allows us to support more complex tooltips.
CoreBasic should be used if you need to reduce script size to the minimum and do not care about extra functionality.
Regards,
JuanC
-
Are you using the jChartFX CSS? Does this happen with a particular version of IE?
JuanC
-
Note that in the modified code I am not setting the AxisY Min and Max, if you want to force a specific Min/Max for any of the 2 axes you can do so. The important part is to setup series 2 and 3 to use a different axis, ChartFX has a built-in AxisY2 property but if you needed more than 2 you can create additional AxisY objects.
var titles = chart1.getTitles();
var title = new cfx.TitleDockable();
title.setText("Title");
titles.add(title);
chart1.getData().setSeries(3);
chart1.getLegendBox().setDock(cfx.DockArea.Bottom);
var series1 = chart1.getSeries().getItem(0);
var series2 = chart1.getSeries().getItem(1);
var series3 = chart1.getSeries().getItem(2);
series1.setGallery(cfx.Gallery.Lines);
series2.setGallery(cfx.Gallery.Lines);
series3.setGallery(cfx.Gallery.Lines);
var alternateAxisY = chart1.getAxisY2();
series2.setAxisY(alternateAxisY);
series3.setAxisY(alternateAxisY);
// Hide gridlines to avoid confusion between different axis
chart1.getAxisY().getGrids().getMajor().setVisible(false);
alternateAxisY.getGrids().getMajor().setVisible(false);
var data = [
{ "Year": "1983", "SeriesA": 18, "SeriesB": 18450, "SeriesC": 17890 },
{ "Year": "1993", "SeriesA": 23, "SeriesB": 39971, "SeriesC": 13450 },
{ "Year": "2003", "SeriesA": 45, "SeriesB": 15572, "SeriesC": 27712 },
{ "Year": "2004", "SeriesA": 54, "SeriesB": 17737, "SeriesC": 31559 },
{ "Year": "2005", "SeriesA": 48, "SeriesB": 18765, "SeriesC": 25900 },
{ "Year": "2006", "SeriesA": 4, "SeriesB": 31368, "SeriesC": 28900 },
{ "Year": "2007", "SeriesA": 44, "SeriesB": 25184, "SeriesC": 28900 },
{ "Year": "2008", "SeriesA": 42, "SeriesB": 22869, "SeriesC": 28800 },
{ "Year": "2009", "SeriesA": 45, "SeriesB": 25074, "SeriesC": 23600 },
{ "Year": "2010", "SeriesA": 5, "SeriesB": 27459, "SeriesC": 26500 },
{ "Year": "2011", "SeriesA": 51, "SeriesB": 29687, "SeriesC": 31000 },
{ "Year": "2012", "SeriesA": 5, "SeriesB": 30057, "SeriesC": 30400 },
{ "Year": "2013", "SeriesA": 49, "SeriesB": 31427, "SeriesC": 35670 }
];
chart1.setDataSource(data);
JuanC
-
Even though we keep a reference to the objects in the JSON array (we keep this in order to be able to show other fields in the tooltips for example) at the moment we do not offer an API to get to these objects.
Because we already keep the objects alive, you could also keep a reference to the array passed to setDataSource, when you receive the Click event, use event.point as the index to access the JSON object the user clicked on. This will allow you to query other properties (e.g ID).
In future builds we will expose a property called targetObject in the evt object so that you do not have keep a reference to the array, we are also planning to add a GetDataField method in the chart class.
Regards,
JuanC
-
You can use the ToolTip Template API to customize the content of the tooltip as follows
var data = [{"Field1":10, "Field2":20, "Field3":12}, {"Field1":12, "Field2":18, "Field3":15}];
var fields = chart1.getDataSourceSettings().getFields();
var field1 = new cfx.FieldMap();
field1.setName("Field1");
field1.setUsage(cfx.FieldUsage.Value);
fields.add(field1);
chart1.setDataSource(data);
var tooltipTemplate = '<DataTemplate xmlns:x="a">' +
'<DockPanel Orientation="Vertical">' +
'<DockPanel Orientation="Horizontal" Margin="3,0,3,0">' +
'<TextBlock Text="Field1:" Foreground="{Binding Path=ItemFill}" Margin="0,0,4,0"/>' +
'<TextBlock Text="{Binding Path=DataField1}" FontWeight="Bold" HorizontalAlignment="Right"/>' +
'</DockPanel>' +
'<DockPanel Orientation="Horizontal" Margin="3,0,3,0">' +
'<TextBlock Text="Field2:" Foreground="{Binding Path=ItemFill}" Margin="0,0,4,0"/>' +
'<TextBlock Text="{Binding Path=DataField2}" FontWeight="Bold" HorizontalAlignment="Right"/>' +
'</DockPanel>' +
'<DockPanel Orientation="Horizontal" Margin="3,0,3,0">' +
'<TextBlock Text="Field3:" Foreground="{Binding Path=ItemFill}" Margin="0,0,4,0"/>' +
'<TextBlock Text="{Binding Path=DataField3}" FontWeight="Bold" HorizontalAlignment="Right"/>' +
'</DockPanel>' +
'</DockPanel>' +
'</DataTemplate>';
chart1.getToolTips().setContentTemplate(tooltipTemplate);
JuanC
-
We have not tested jChartFX with AMD.
In the current public build, jchartfx.system.js defines a "global" sfx object and jchartfx.coreBasic.js defines the cfx object from where all public classes are located.
In future builds both objects will be defined by jchartfx.system.js (in case this changes something you have to do in your end).
JuanC
-
1) Not in the current build, in future builds we will allow you to change the content of the legend so this will be possible.
2) Yes, you can use the Point Labels Format as follows
var pointLabels = chart1.getAllSeries().getPointLabels();
pointLabels.setVisible(true);
pointLabels.setFormat("%v");
JuanC -
Unfortunately we reserve some space for the labels if they have to be painted outside of the slices, if possible, please post a small sample code (including the size you are using for your div) if you are getting the slices to be too small.
JuanC
-
We attach code to the click event before it gets to you and add those properties to the event object. Did you try the suggested code? If it did not work for you please try posting a small sample.
JuanC
-
You have 2 options, this will give you users in the X axis, and 2 bars (per each game) for each user, each series will represent one of the games.
chart1.setGallery(cfx.Bar);
var data = [{"Name":"John", "Game1":50, "Game2":20}, {"Name":"Mark", "Game1":60, "Game2":10}];
chart1.setDataSource(data);
Or you can have games in the X axis each series representing a uservar data = [{"Game":"Game1", "John":50, "Mark":60}, {"Game":"Game2", "John":20, "Mark":10}];chart1.setDataSource(data);JuanC -
The tooltips are controlled by the AxisY
chart1.getAxisY().getDataFormat().setFormat(cfx.AxisFormat.Number);
JuanC
-
-
How you connect to the click event depens if you are using jquery or not.
Using jQuery
$("#myDiv").click(function(evt) {
onChartClick(evt);
});
Not using jQueryvar divHolder = document.getElementById('myDiv');divHolder.onclick = onChartClick;To get the info you inspect the hitType, series and point properties of the "evt" object passed to the handler, e.g.function onChartClick(evt){if (evt.hitType == cfx.HitType.Point) {var s = "Series " + evt.series + " Point " + evt.point;alert(s);}}JuanC -
You can use the Dock and ContentLayout properties as follows
var legendBox = chart1.getLegendBox();
legendBox.setDock(cfx.DockArea.Bottom);
legendBox.setContentLayout(cfx.ContentLayout.Center);
JuanC
-
If the variable for the chart you are creating is named chart, you need to change the setGallery and getAllSeries calls from chart1 to chart.
Also make sure the create call is the last call you make when creating the chart, to avoid painting the chart from than once.
For the chart to look the same as the jQueryUI counterpart you will have to add more api calls to configure the other settings you were changing using the json syntax.
JuanC
-
To create the chart you would do
var chart = new cfx.Chart();
// Configure chart here
chart.create("divname")
To configure the chart you have 2 choices, you can keep using json notation by using the setOptions method, e.g.
chart1.setOptions({ gallery: cfx.Gallery.Bar, ...
Or you can use our API, e.g.
chart1.setGallery(cfx.Gallery.Bar);
chart1.getAllSeries().getPointLabels().setVisible(true);
JuanC
-
I tried duplicating the bug with an empty array, an array with one element but no numeric properties and an array with 1 numeric property with value 0 and the funnel showed up fine.
Can you post a small hardcoded sample that shows the problem?
JuanC
can not show picture with AnnotationPicture
in General Questions
Posted
1) Because of how our code was originally written, you have to specify the original width and height of the image as part of the image URL as follows
annPic.setPicture("images/dx,24,48"); // 24 is the width, 48 is the height
2) To remove the border you can use
annPic.getBorder().setColor("#00FFFFFF");
3) The enumeration AnnImageMode did not get declared in the current build (we will fix this in future builds), for now you can use 0 for default, 1 for stretch and 2 for tile.
Regards,
JuanC