formatting default tooltip

[tuot]

Hello,

 

Can anyone show me how to format default tooltip?  For example, for a bar chart, I would like to display the '$' sign for the value ($2500).  Also for the pie chart, i like to display the value for the tooltip instead of the default percent.

 I tried a number of things as suggested in the documentation such as:

chart1 = new cfx.Chart(); 

chart1.setToolTipFormat("This the point %N of series %S"); 

But it did not work at all. 

 

Thank you, 

[Groover]

Hi,

 

did you manage to get this working? 

I would also like to format the tooltip.

 

Thanks! 

[Telesto]

Indeed, I try  chart1.setToolTipFormat() and it doesnt recongize it as a function at all...

My code is quite simple as well

 

        var chart1;

        chart1 = new cfx.Chart();

        chart1.setGallery(cfx.Gallery.Bar);

        var divHolder = document.getElementById('ChartDiv');

        chart1.create(divHolder);

        var maskString = "I'm series: " + "%S " + " my value is: " + "%v";

        chart1.setToolTipFormat(maskString);

 

 I've imported literally every .js in the latest available edition (7.1.4982)except those that introduce new galleries...

 

    <script type="text/javascript" src="jchartfx.7.1.4982/js/jchartfx.system.js"></script>

    <script type="text/javascript" src="jchartfx.7.1.4982/js/jchartfx.coreVector.js"></script>

    <script type="text/javascript" src="jchartfx.7.1.4982/js/jchartfx.advanced.js"></script>

    <script type="text/javascript" src="jchartfx.7.1.4982/js/jchartfx.annotation.js"></script>

    <script type="text/javascript" src="jchartfx.7.1.4982/js/jchartfx.coreVector3d.js"></script>

    <script type="text/javascript" src="jchartfx.7.1.4982/js/jchartfx.data.js"></script>

    <script type="text/javascript" src="jchartfx.7.1.4982/js/jchartfx.ui.js"></script>

    <script type="text/javascript" src="jchartfx.7.1.4982/js/jchartfx.vector.js"></script> 

Are we missing something here? Because this is in the documentation as well yet....

 

Thanks in Advance

 

[JuanC]

If you are plotting currency, you probably want to change the axis so that not only the tooltips but the axis itself will show the currency symbol.

     chart1.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Currency);

In 7.1 we allow users to completely customize the tooltips, unfortunately some of the docs are out of date, also we are currently not honoring the format property as we should so you will need the following.

    chart1.getToolTips().setContentTemplate('<DataTemplate><TextBlock Text="{Binding Path=MacroValue is %v}"/></DataTemplate>');

    chart1.getToolTips().setAllSeries(false); 

The string that follows Macro will be parsed in the same way as we used to support the ToolTipFormat, note that with the new approach you can place multiple texts with different font attributes if needed. We will simplify this in future builds if you want to use a single string by supporting the format property on this object.

Regards,

JuanC 

[Telesto]

Thank you for your reply JuanC, it was really helpful and it solved my problem indeed!

Got one last question on the matter though.. My XValues are dates in ISO format such as "2012-09-21T23:00:00.000Z"
But if I use the %x symbol I get only the date part of the value and not the time part. So I get something like "09/21/2012" instead of "09/21/2012 23:00 GMT+03:00" or something like that.

Is there a work-around on this? Because I see that all the charts dont show the time at all and they only keep the date part of the ISO formated date that I provide.

Thanks in advance

[Signatur]

 Your answer was very helpful to me too. I want to know how can I make a new line in that string.

 Regards,

Wojtek

[Signatur]

Is it possible to set different texts depending on %N? Something like enum. I've got a producttion line speed chart. Operator name is in database for every point. I want to show it in a tooltip.

Regards

Wojtek 

[JuanC]

Hopefully this sample helps both the operator name question and the new line question

    var items = [

        { "FullName": "John Smith", "Sales": 10, "NickName": "JohnS" },

        { "FullName": "Mark Twain", "Sales": 12, "NickName": "MarkT" },

        { "FullName": "Peter Collins", "Sales": 8, "NickName": "PeterC" },

    ];

    

    var field1 = new cfx.FieldMap();

    field1.setName("Sales");

    field1.setUsage(cfx.FieldUsage.Value);

    chart1.getDataSourceSettings().getFields().add(field1);

    var field2 = new cfx.FieldMap();

    field2.setName("NickName");

    field2.setUsage(cfx.FieldUsage.Label);

    chart1.getDataSourceSettings().getFields().add(field2);

    

    chart1.setDataSource(items);

    

    var contentTemplate = '<DataTemplate>' +

                          '<DockPanel Orientation="Vertical">' +

                            '<DockPanel Orientation="Horizontal" Margin="3,0,3,0">' +

                              '<TextBlock Text="{Binding Path=SeriesT}" Margin="0,0,4,0"/>' +

                              '<TextBlock Text="{Binding Path=Value}" FontWeight="Bold" HorizontalAlignment="Right"/>' +

                            '</DockPanel>' +

                            '<DockPanel Orientation="Horizontal" Margin="3,0,3,0">' +

                              '<TextBlock Text="Full Name:" Margin="0,0,4,0"/>' +

                              '<TextBlock Text="{Binding Path=DataFullName}" FontWeight="Bold" HorizontalAlignment="Right"/>' +

                            '</DockPanel>' +

                          '</DockPanel>' +

                        '</DataTemplate>';

    

    chart1.getToolTips().setContentTemplate(contentTemplate);

 

Note that we have not documented the XML language we interpret (heavily inspired by XAML) but the next build will also support a Grid layout.

JuanC 

[JuanC]

We have uploaded a new build (7.1.5021) that changes how we handle tooltips in XY charts or charts where you use dates in the X axis. If you are using dates and need the full date/time info in the tooltip you should change the Format property of the AxisX DataFormat object as follows

 chart1.getAxisX().getDataFormat().setFormat(cfx.AxisFormat.DateTime);

Regards,

JuanC