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?

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.

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 ...

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????

Mark Manigold wrote:

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????

Helloooooo!!!! Is this just going to be ignored? If there is no solution then fine. Then, at least respond and say so. Can an expert please respond???


Same issue here, anyone have an answer?

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>
"