341
Views
7
Comments
Chart click: extend DataPoint?
Question

I have a challenge with a BAR CHART ... I need a way to "extend" the DataPoint structure and effectively "add" a custom attribute such as "ProductId" or "OpportunityId" etc ...

Then, when a bar is clicked, I need the "ProductId" for the clicked bar - BUT - that ProductId can't be placed in the DataPoint structure since all the DataPoint attributes are already used (e.g. DataPoint: Label, Value, DataSeriesName, Tooltip, Color).

The UX that I want is this: when a given BAR is clicked, the user is taken to the detail for the given Product or Opportunity, etc ... It seems I need to somehow "extend" the DataPoint structure to include the additional ID data ... right?

Is there another way?

Rank: #55

You can try to get the id by label (Product Name or something like that), it is not the best way but it should work.

Rank: #1395

Yeah, the label (x-axis) won't work as the values (date) are not always unique ... maybe I could parse the Tool Tip out as I show the Product Name or Opportunity Name and map it back to the ID but as you can guess that is risky.

So, is there now way to extend the DataPoint or some other way to "pass" an ID from the chart item that was clicked into the OnClick event?

Gotta be a way ...

Rank: #31758

How come there is no answer to this. I have the same problem. My label is not the key to go to a detail page for the bar clicked. The label in and of itself is not enough to go search on to get the key. There must be a solution for this????

Rank: #4767

Same issue here, anyone have an answer?

Rank: #5123

Hi

i was able to apply workaround on the Column charts for that issue using javascript as the following and i think that solution can be applied to different charts if you were able to get the data series by className, so what happens is you add id for each slice of chart and an onclick fucntion that will be triggered before the OnClick function called by the outsystems chart and the below code will run.

SyntaxEditor Code Snippet

"<script>
function create()
{
    debugger;
    var survey= "+SurveyString+";
    var Chart = document.querySelectorAll('.highcharts-series rect');
    for(i=0;i<Chart.length;i++)
    {
        if(i==survey.length)
        break;
        Chart[i].setAttribute(""id"",survey[i].SurveyID);
        Chart[i].setAttribute(""onclick"", ""SurveyOnClick(id)"");
    }    
}

function SurveyOnClick(SurveyId)
    {
//SurevryID here is classname for hidden input field i've created,don't set display to false from instead add style Visibility:hidden in the extended property
       document.getElementsByClassName(""surveyID"")[0].value = SurveyId;
    }




$( document ).ready(function() {
    create();
});

</script>
"

Hi,

I'd settle for a data centered/non javascript approach. The input for your Graph is a datapoint list. Besides the Datapoint list I create a Datapoint extension list. Both lists are filled during the retrieval of data and have the same label column. When you click on list, you retrieve the label from the on click event. Filter the Datapoint extension list by this label and then you retrieve the other values.

Works like a charm for me,