Hitachi Vantara Pentaho Community Forums
Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Edit Tooltip in CDE dashboard

  1. #1

    Default Edit Tooltip in CDE dashboard

    Dear all,
    The default Tooltip in pie chart of dashboard is like this:
    Series:fuel
    Category : A
    Value: 15
    How can I edit the Series,Category,Value to different title ?
    thankyou very much
    Last edited by sacpv04; 04-26-2013 at 10:00 PM.

  2. #2
    Join Date
    Mar 2012
    Posts
    645

    Default

    Hi,
    the labels that show in the tooltip by each value are the labels of the corresponding dimensions.

    If you want to show a radically different tooltip, you have to specify the option tooltipFormat.

    If you just want to change the labels that show up, then only the labels of the dimensions need to be changed.

    Because dimensions can be defined with arbitrary names (even though the default names are well known) there are no fixed CDE properties.
    The names must be changed in JS code.


    Changing the label of default dimensions

    Add the following code to the CDE chart component's postFetch handler:

    Code:
    function f(data) {
        // Change the labels of the default dimensions
        // See http://www.webdetails.pt/charts/jsdoc/symbols/pvc.options.charts.Chart.html#dimensions
        this.chartDefinition.dimensions = {
            series:     {label: "Product Family"},
            category: {label: "Period"},
            value:      {label: "Sales" }
        };
    
        return data;
    }

    Changing the names and labels of dimensions

    It is also possible to change the names of dimensions to match the names of corresponding business concepts:

    Code:
    function f(data) {
        var options = this.chartDefinition;
        
        // It is not necessary to explicitly define dimensions
        // They are created automatically, with appropriate default properties, 
        // when referring to their names in certain other properties.
    
        // But we can define them anyway, if we want to change the default labels.
        // Default labels are taken from the data source, when possible,
        // or derived from the dimensions' names.
        // See http://www.webdetails.pt/charts/jsdo...tml#dimensions
        this.chartDefinition.dimensions = {
            productFamily: {label: "Product Family"},
            period: {label: "Period"},
            sales:  {label: "Sales" }
        };
        
        // MAP columns in the data source to corresponding dimensions
        // See http://www.webdetails.pt/charts/jsdo...t.html#readers
        options.readers = [{names: "productFamily, period, sales"}];
    
        // MAP dimensions to the chart's Visual Roles
        // See http://www.webdetails.pt/charts/jsdo...ml#visualRoles
        // The following can also be set as CDE properties.
    
        // The "series" role receives the data of the "productFamily" dimension
        // See http://www.webdetails.pt/charts/jsdo...tml#seriesRole
        options.seriesRole = "productFamily";
        
        // The "category" role receives the data of the "period" dimension
        // See http://www.webdetails.pt/charts/jsdo...l#categoryRole
        options.categoryRole = "period";
    
        // The "value" role receives the data of the "sales" dimension
        // See http://www.webdetails.pt/charts/jsdo...html#valueRole
        options.valueRole = "sales";
    
        return data;
    }

  3. #3

    Default

    Dear duarte.leao
    I try to show 2 value on tooltip and I try like that
    function f(data) {
    var options = this.chartDefinition;
    this.chartDefinition.dimensions = {
    productFamily: {label: "Product Family"},
    period: {label: "Period"},
    sales: {label: "Sales" }
    };
    options.readers = [{names: "productFamily, period, sales"}];
    options.seriesRole.display = "none";
    options.categoryRole = "period";
    options.valueRole = "sales";
    return data;
    }
    javascript in pentaho I can not use display none property, in this way how can I do to remove one value in tooltip ?

  4. #4
    Join Date
    Jan 2013
    Posts
    135

    Default

    Hi duarte.leao,
    as you described in Changing the label of default dimensions it works perfect. But tooltip in piechart has not the same format as barchart and linechart. There is 1 line with "#:number" ... can you help please how it can be changed with Tooltipformat?

    I tried it but find out, that piechart in CCC2 is not working with series, category, value as there comes undefined as result.
    One of functions I tried:
    function(s, c, v){
    var val = this.chart.options.valueFormat(v);
    var pct = this.chart.options.percentValueFormat(v / this.sum * 100);
    return c + ": " + val + " (" + pct + ")";
    }

    Thanks a lot,
    best regards,
    timfu83

  5. #5
    Join Date
    Mar 2012
    Posts
    645

    Default

    Hi sacpv04,

    the default tooltip does not show visual roles: it shows all of the defined dimensions, that are not hidden.

    To hide a dimension from the tooltip, you hide it, generally.
    To do so, set the "isHidden" property to false in the dimension definition:
    Code:
    this.chartDefinitions.dimensions = {
        productFamily: {isHidden: true}
    };

  6. #6
    Join Date
    Mar 2012
    Posts
    645

    Default

    Hi timfu83,

    here's an example of what you describe:
    Name:  DataGroupingAndAutoTooltip.png
Views: 2029
Size:  16.3 KB

    The Pie chart, as well as all the Categorical charts (Bar, Line, Area, HeatGrid, ...), group data by series and then by category. Metric charts don't.

    When the data source and/or visual role mapping are such that there is more than one datum for a given series and category, they are all shown in the same scene/visual element (in your case, a pie slice).
    When a measure is bound to a visual property of the single visual element, the value that is used is the sum of the values of that measure for all the datums in the scene.

    The way that automatic tooltips make evidence of the occurring aggregation is:
    • Categorical dimensions whose value is shared by all the datums present in the scene are placed above the top line
    • The "#: number" text indicates the number of datums present in the scene
    • Measure dimensions are shown like, for example: "∑ Sales: 300.34"


    Summing up, there are two reasons for this to happen:
    • When the data source has more than one row having equal values in the categorical columns.


    • When not all of the categorical columns, and then dimensions, are mapped to the categorical visual roles (this can only happen if you map the dimensions into visual roles explicitly, and leave out some of the dimensions). The categorical visual roles depend on he chart type, but they can be: category, series, multiChart and dataPart


    To solve this, you can:


    • change the data source so that the data is already summarized (does not need to be summarized by the chart)
    • map all categorical dimensions to the categorical visual roles (if you made an explicit mapping)
    • keep the chart summarizing feature, but hide it from the user by formatting the tooltip in a custom way. See this example on how to do this: http://jsfiddle.net/duarteleao/2xk4q/

  7. #7
    Join Date
    Jan 2013
    Posts
    135

    Default

    Duarte.leao, many many thanks for help! It works!

  8. #8
    Join Date
    Jul 2010
    Posts
    4

    Default

    Hi all,
    I have a problem with the tooltip in CCC barChart.
    In the component's postFetch handler have this function:
    function f(data) {

    this.chartDefinition.dimensions = {
    series: {isHidden:true},
    category: {label: "MDC"},
    value: {label: "Kostendifferenz Ist - Soll" }
    };

    return data;
    }

    Name:  Pentaho Dashboard Tooltip Screenshot 2013-11-14.png
Views: 1929
Size:  17.4 KB

    What I intended was lines like this:
    MDC: J - Haut, Unterhaut und Mama
    Kostendifferenz Ist - Soll: € 236

    All other things should not appear in the tooltips.

    How can I manage this ?

    Thanks in advance

  9. #9
    Join Date
    Mar 2012
    Posts
    645

    Default

    Hi,

    I cannot give you a definite answer without looking at the data you are providing the chart with.

    You're data is definitely not being correctly mapped into CCC.

    You might be able to solve this yourself:

    1. add &debug=true&debugLevel=5 to the url (CDE editor/viewer)
    2. look at the browser's console
    3. find "[pvc.XYZChart ]: NEW CHART"
    4. open the log group "[pvChart]: CCC RENDER"
    5. check the sections:
      1. DATA SOURCE SUMMARY
      2. VIRTUAL ITEM ARRAY
      3. VISUAL ROLES MAP SUMMARY
      4. DATA SUMMARY

    6. try to understand how you're data is being mapped


    As quick fixes: try changing the "crosstabMode" property, to the negated value of what it is now.

  10. #10

    Default

    nice thanks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Privacy Policy | Legal Notices | Safe Harbor Privacy Policy

Copyright © 2005 - 2019 Hitachi Vantara Corporation. All Rights Reserved.