Hitachi Vantara Pentaho Community Forums
Results 1 to 2 of 2

Thread: Getting Chart Color Data from OnClick Event

  1. #1
    Join Date
    Jan 2015
    Posts
    1

    Default Getting Chart Color Data from OnClick Event

    Hi all,

    So after struggling on and off for several weeks, I've decided to turn to the experts for some advice!

    I am trying to create a dashboard using Pentaho with CCC charts. The dashboard has a number of interactive charts, where changing a value on one changes the output of the others. To this end, I have managed to make most of the functionality work, but I am having one major problem.

    When I click on a data point on one chart, I need a second chart to create a plot that is the same color as the datapoint I clicked in the original chart. I have had some success with this by using "this.pvMark.fillStyle().color" in the clickAction, storing this color value in an array, and then plotting the new chart using this color data. My problem is, this only occasionally works, and I can't seem to figure out why it doesn't work in all cases. When the solution doesn't work, all of the plots come out as grey instead of the same color as the clicked data point (See the image below).

    Name:  DashExample.jpg
Views: 83
Size:  22.0 KB

    I haven't been able to find any useful documentation at all to help me even know what functions/properties these objects have. What I have found has just been tidbits of information left on forums here and there. If anyone could point me to some real, complete documentation that would be amazing, and if anyone knows how to deal with this problem specifically, I would really appreciate it!

    Here is my onClick function:

    Code:
    function (e){    if (e.vars.series.value != "DNI")
        {
            var dt = e.vars.category.value; // Parsing the datetime into a time string
            h = dt.getHours();
            m = dt.getMinutes();
            s = dt.getSeconds();
            if(h<10) h= '0'+h;
            if(m<10) m= '0'+m;
            if(s<10) s= '0'+s;
            
            t = h + ":" + m + ":" + s; // Building the time string
            
            var daqval = Dashboards.getParameterValue('aDaqid');
            var newData = e.vars.series.value;
            inArray = false;
            for (i=0; i < daqval.length; i++) // Loop to ensure curve isn't already in list
            {
                if (daqval[i] == newData)
                {
                    inArray = true;
                    break;
                }
            }
            if (!inArray)
            {
                var color = this.pvMark.fillStyle().color;
                console.log(this.pvMark.strokeStyle());
                var colorArray = Dashboards.getParameterValue('aColorArray');
                var newarray = [];
                var newcolorArray = [];
                daqval[daqval.length] = newData;
                colorArray[colorArray.length] = color;
                console.log(colorArray);
                
                for (i=0; i< daqval.length; i++)
                {
                    for (j=0; j < newarray.length; j++)
                    {
                        if (daqval[i] < newarray[j])
                        {
                            newarray.splice(j, 0, daqval[i]);
                            newcolorArray.splice(j, 0, colorArray[i]);
                            break;
                        }
                        
    
    
                    }
                    if ((newarray.length === 0) || (daqval[i] > newarray[newarray.length-1]))
                    {
                        newarray[newarray.length] = daqval[i];
                        newcolorArray[newcolorArray.length] = colorArray[i];
                    }
                }
                daqval = newarray;
                colorArray = newcolorArray;
                
                Dashboards.fireChange('aDaqid', daqval);
                Dashboards.fireChange('aColorArray', colorArray);
            }
            
            Dashboards.fireChange('aTime', t);
            Dashboards.update([render_IV_Chart]);
            Dashboards.update([render_Spectrum_Chart]);
            Dashboards.update([render_Weather_Table]);
    
    
        }
    }
    Thanks!

  2. #2
    Join Date
    Mar 2012
    Posts
    645

    Default

    Hi,

    the place that gathers most pointers to the existing CCC documentation is the FAQ.

    I'm not sure what's the reason of the "not working every time" you mention. It might be because the interactive state changes the current colors and you are reading the current fillStyle color.

    You can obtain the color as given by the color scale (without any effects processing over it) by using the Sign#scaleColor method:

    Code:
    function(scene) {
        var pvColor = this.sign.scaleColor(scene);
        alert(pvColor.color);
    }

Tags for this Thread

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.