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

Thread: Metric Dot Chart / Scatter Plot with boundaries

  1. #1
    Join Date
    Jan 2012

    Default Metric Dot Chart / Scatter Plot with boundaries


    We just started working with cde/cdf. we're working on a dashboard that shows the company structure in terms of salary/gender/age/seniority for each job/function in the company.

    so far i achieved the following chart:
    - multichart by function/job
    - age/salary on y/x
    - size by seniority
    Name:  scatter_v1.jpg
Views: 834
Size:  13.6 KB

    whats missing:
    - color by gender
    i know there is a colorrole attribute on cde. but this just seems to work with numeric data. i would like to do it with gender (m/f). any idea how to do this? m -> green, f -> blue for example.

    - salary boundaries
    each job/function has a salary boundary based on the age of a person (example: 80'000 - 100'000 if the person is between 20 and 30 years old).
    so we would like to display two additional lines on the chart, displaying the lower and upper boundary:
    Name:  scatter_v2.jpg
Views: 711
Size:  16.3 KB
    is this possible in any way? or just with a (custom) protovis component?

    Name:  cda.jpg
Views: 719
Size:  11.8 KB

    var render_test = {    type: "cccMetricDotChart",
        name: "render_test",
        priority: "5",
        chartDefinition: {
            dataAccessId: "SQL_AlterLohn",
    path: "/BI4HR/zDashboards/CDE/JahreslohnAlter.cda",
            width: 1000,
            height: 1000,
            extensionPoints: [],
            colors: [],
            animate: true,
            baseAxisDomainRoundMode: "tick",
            baseAxisDomainScope: "global",
            baseAxisGrid: true,
            baseAxisMinorTicks: true,
            baseAxisOffset: 0,
            baseAxisOverlappedLabelsMode: "hide",
            baseAxisTicks: true,
            baseAxisTitleFont: "12px sans-serif",
            baseAxisTitleMargins: "0",
            baseAxisVisible: true,
            baseAxisZeroLine: true,
            clearSelectionMode: "emptySpaceClick",
            clickable: false,
            color2AxisColors: [],
            color2AxisLegendClickMode: "toggleVisible",
            color2AxisLegendVisible: true,
            colorDomain: ["0","1"],
            colorMissing: "lightgray",
            colorRole: "a",
            colorScaleType: "linear",
            colorUseAbs: false,
            compatVersion: 2,
            contentMargins: "0",
            contentPaddings: "0",
            crosstabMode: false,
            ctrlSelectMode: true,
            dataIgnoreMetadataLabels: false,
            dataMeasuresInColumns: false,
            dataSeparator: "~",
            groupedLabelSep: " ~ ",
            hoverable: false,
            ignoreNulls: true,
            isMultiValued: false,
            leafContentOverflow: "auto",
            legend: false,
            legendClickMode: "toggleVisible",
            legendFont: "10px sans-serif",
            legendItemPadding: 2.5,
            legendMargins: "0",
            legendMarkerSize: 15,
            legendPaddings: "5",
            legendPosition: "bottom",
            legendTextMargin: 6,
            legendVisible: true,
            linesVisible: false,
            margins: "3",
            measuresIndexes: [],
            multiChartColumnsMax: 2,
            multiChartIndexes: ["0"],
            multiChartMax: 6,
            multiChartSingleColFillsHeight: true,
            multiChartSingleRowFillsHeight: true,
            nullShape: "cross",
            orientation: "vertical",
            orthoAxisDomainRoundMode: "tick",
            orthoAxisDomainScope: "global",
            orthoAxisGrid: true,
            orthoAxisMinorTicks: true,
            orthoAxisOffset: 0,
            orthoAxisOverlappedLabelsMode: "hide",
            orthoAxisTicks: true,
            orthoAxisTitleFont: "12px sans-serif",
            orthoAxisTitleMargins: "0",
            orthoAxisVisible: true,
            orthoAxisZeroLine: true,
            paddings: "0",
            plotFrameVisible: true,
            selectable: false,
            seriesInRows: true,
            sizeAxisUseAbs: true,
            smallContentMargins: "0",
            smallContentPaddings: "0",
            smallMargins: "2%",
            smallPaddings: "0",
            smallTitleFont: "14px sans-serif",
            smallTitleMargins: "0",
            smallTitlePaddings: "0",
            smallTitlePosition: "top",
            timeSeries: false,
            timeSeriesFormat: "%Y-%m-%d",
            titleFont: "14px sans-serif",
            titleMargins: "0",
            titlePaddings: "0",
            titlePosition: "top",
            tooltipEnabled: true,
            tooltipFade: true,
            tooltipFollowMouse: false,
            tooltipHtml: true,
            tooltipOpacity: 0.9,
            trendColorAxis: 2,
            trendDotsVisible: false,
            trendLinesVisible: true,
            trendShape: "circle",
            trendValuesAnchor: "right",
            trendValuesFont: "10px sans-serif",
            valuesFont: "10px sans-serif"
        parameters: [],
        executeAtStart: true,
        htmlObject: "JahreslohnAlter",
        listeners: []

    thanks for your assistance!


  2. #2
    Join Date
    Mar 2012


    Hi Philipp,

    You can color by a discrete dimension. You have two flavors:

    • Use the "color" role
      • By default, the color role is set to be bound to a numeric dimension
      • Have to change the corresponding default dimension's valueType to a discrete value type:

    dimensions: {
        color: {
            valueType: String

    • Use the "series" role
      • When the "color" role is not explicitly bound, it uses the dimensions bound to the "series" role. So, setting the "series" role impacts the color, by default.
      • Always discrete
      • Changes drawing order of bubbles:
        • At the bottom, all bubbles from first series,
        • Above, all bubbles from second series,
        • Above, ...

    Based on the data set you supplied, for using the "color" role explicitly, the following is one way:
    // Specify which dimensions are numeric (this might be inferred from the cdaData metadata, not sure, so maybe this isn't needed)
    // Anyway, you might want to specify different formatters, labels, etc., and this is the place to do so.
    dimensions: {
        age: { valueType: Number },
        salary: { valueType: Number },
        seniority: { valueType: Number },
        salaryMin: { valueType: Number },
        salaryMax: { valueType: Number }
    // Specify the virtual item mapping into dimension names:
    readers: [
       "gender, name, function, age, salary, seniority, salaryMin, salaryMax"  // a single reader definition that reads virtual item columns into the specified dimensions, in the given order
    // Map dimensions to visual roles
    visualRoles: {
       color: "gender",
       x: "salary",
       y: "age",
       size: "seniority"
    The dimensions that are not mapped into visual roles will appear in the tooltip anyway (unless marked with isHidden: true)

    One important note about the later mapping. As you are using crosstabMode = false, a relational data source format, the virtual item represents directly the data source columns.
    If you would use a data source in cross-tab format, like the following:
        |  COL
    then the virtual item is a relational view of it, in the following order:

    About the second question, if it is possible to draw another fixed line above the bubbles: it is, but not as directly/cleanly as desired.
    Currently there's no "plot2" support for the metric chart.
    Even if it existed, you'd have to supply the fixed data in the same data set, possibly wasting space.
    The metric charts already support a trend panel, so you can use a fake trend-line generator...
    Also, you could draw a line with protovis, by means of extension points.

    Any of the solutions requires some expertise. I'll try to find time to prepare one.
    Last edited by duarte.leao; 08-23-2013 at 02:37 PM.

  3. #3
    Join Date
    Jan 2012



    Thanks for your explanations!

    But it seems that i'm really missing a basic information... if i look at your ideas or the ccc2 examples on i see a lot of parameters, which i'm not able to find on CDE.
    for example i cant find a way to specify your "readers" or "dimensions".

    sorry for this beginner-questions. i find a lot of basic examples using cde... and i find a lot of cool examples using parameters/object like yours and ccc2 examples on but somehow... it looks like a real large footstep between those two types of examples :-/


  4. #4
    Join Date
    Mar 2012


    Hi PhilippR,

    not every CCC option is exposed as a CDE property. That's the case of "dimensions" and "readers" - usually complex-valued properties for which there was no time to create appropriate property-UIs...

    So, to specify these, you have to resort to one of the CDE components event properties, like "preExecution" or "postFetch". Using the later, you would write the following in the property's code window:
    function(cdaData) {
      var options = this.chartDefinition;
      options.dimensions = {
         color: {valueType: String}
      options.readers = [ ... ];
      return cdaData;

  5. #5
    Join Date
    Jan 2012


    ah that was the missing link! sometimes its so easy. thank your very much!

  6. #6

    Thumbs up

    Quote Originally Posted by PhilippR View Post
    ah that was the missing link! sometimes its so easy. thank your very much!

    Very useful information!!!! I have been looking for this answer as well for days and finally found one.

  7. #7
    Join Date
    Sep 2014


    Hi to everybody,
    I want to share my problem about "CCC metric line chart" and I hope someone can help me.

    The result of my query is a table with 4 dimensions [age, type, value, ID],
    something like this:

    age type value ID
    0.25 mean 2375
    0.25 median 2783.5
    0.25 899.4 4298
    0.25 1750.3 1132
    0.5 mean 2375
    0.5 median 282.6
    0.5 1940.5 928
    0.5 2260 3172

    As you can see "type" and "ID" are never joined.

    Now the issue:

    When I pass this query result to the CCC metric line chart, it sets "age" as x-axis and "value" as y-axis, but this is ok. The problem is that it shows every "type" and every "ID" in the legend in every kind of color.
    I jast want to show in the legend only the "type" with colors that I define. (e.g. mean --> 'red', median --> 'green'), but I even want to show every "ID" in the chart in black.

    I tried to figure out how to set up Dimensions and Readers but I failed.
    I'll appreciate any suggestion. Thank you in advance.


  8. #8
    Join Date
    Mar 2012


    Hi Ale,

    I've created a fiddle to test out your case:

    When the default data source mapping doesn't go "our way", the best is to just go explicit:
    1) declare the mapping of columns to dimensions using the readers option;
    2) declare the mapping from dimensions to visual roles using the visualRoles option;
    3) provide any non-inferred dimension configuration, like overriding the inferred valueType.

    To accomplish 1), first go to the log and check the virtual item array (or virtual row) that is shown there.
    Something like this:
    [pvc.MetricLineChart           ]: Relational data source translator 
    [pvc.MetricLineChart           ]: VIRTUAL ITEM ARRAY
    ║ Index │ Kind │ Type   │ Name  │ Label │ Dimension ║
    ║ 0     │ C    │ string │ Type  │       │ type      ║
    ║ 1     │ M    │ number │ Age   │       │ age       ║
    ║ 2     │ M    │ number │ Value │       │ value     ║
    ║ 3     │ M    │ number │ ID    │       │ ID        ║
    This already reflects the readers configuration, on the rightmost column. But initially, you'll look at the Type and Name column to see what the translator is placing in each position of the virtual row.
    Notice that this is a different layout from that of the source table, because the relational translator relocates all discrete columns to the left.

    Knowing the virtual row layout, we can confidently write:
    readers: ['type, age, value, ID']
    To accomplish 2), we map dimension names to visual roles:
    visualRoles: {
        x: 'age',    y: 'value',
        series: 'type',
        color:  'type'
    The ID dimension is not graphically represented. It will show up in the tooltip, though.
    This will result in the following being logged:
    [pvc.MetricLineChart           ]: VISUAL ROLES MAP SUMMARY
    ║ Visual Role    │ Source/From │ Bound to Dimension(s) ║
    ║ multiChart     │ -           │ -                     ║
    ║ dataPart       │ -           │ -                     ║
    ║ scatter.color  │ -           │ type ("Type")         ║
    ║ scatter.series │ -           │ type ("Type")         ║
    ║ scatter.x      │ -           │ age ("Age")           ║
    ║ scatter.y      │ -           │ value ("Value")       ║
    ║ scatter.size   │ -           │ -                     ║
    Item 3) is not needed, as all the inferred dimension valueType's , and their isDiscrete facet, were the ones desired.
    We can check this in the following, also logged:
    [pvc.MetricLineChart           ]: COMPLEX TYPE INFORMATION
    ║ Dimension │ Properties                              ║
    ║ type      │ "Type", Any                             ║
    ║ age       │ "Age", Number, comparable, continuous   ║
    ║ value     │ "Value", Number, comparable, continuous ║
    ║ ID        │ "ID", Any                               ║
    Was this what you wanted?

  9. #9
    Join Date
    Sep 2014

    Question Almost solved

    Yes, duarte.leao, this is exactly what I wanted. Even more
    Thank you very much for your superbly accurate answer.

    [edit1]Sorry duarte.leao, I just realised it's not exacty what I expected, but almost.
    The legend is ok, showing only "type", and the colors as well, but in the chart every "ID" is linked with another, even if they are different: this doesn't make sense to me.
    I mean, each "ID" should be linked to the same "ID" with different "value". For example in the fiddle you made, the "ID"s should be represented just with dots because they are all different.

    I tried to declare "ID" as a series, but probably I made some mistake or it's not the right way to solve it.

    I hope I was clear.
    Thaks for your time, I appreciate your help.[/edit1]


    I thought that a valid solution for me could be even hiding every black lines, showing only black dots as regurds the "ID" dimension.
    Is it possible in some way?

    Last edited by Ale87; 09-11-2014 at 03:16 AM. Reason: almost solved

  10. #10
    Join Date
    Mar 2012



    I created another version that, I think, does what you want:

    Like you said, we'd like each different "ID" to be a different series, but also that each different "type" is a different series.
    This is possible because we know that a row only has one or the other not null.
    So I created a calculated dimension, appropriately named "series", that has the value of the non-null of the ID and type dimensions.

    Then leaving the default series role binding to a dimension named "series", and leaving the colorRole bound to the type, accomplishes what we want.

    I hid the new series dimension from the user, cause it is artificial, and has no value to him.

    I also had to explicitly change the valueType of the "type" dimension, because, as now it is not bound to the series role anymore, it is becoming a continuous/numeric dimension by default. Changing to a discrete valueType, keeps our color scale discrete, and provides us with a discrete legend.

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.