Jump to content
JChartFX Community
  • 0

formatting default tooltip


Question

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, 

Link to post
Share on other sites

8 answers to this question

Recommended Posts

  • 0

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

 

Link to post
Share on other sites
  • 0

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 

Link to post
Share on other sites
  • 0

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

Link to post
Share on other sites
  • 0

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 

Link to post
Share on other sites
  • 0

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

 

Link to post
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...
×
×
  • Create New...