Reference Chart ID in javascript

[rgiljohann]

Good morning,

 

I have a chart deployed with the javascript that works in it's underlying function. You can click on one of the bars and it will go to the new datapage and passes the parameter in the URL allowing me to do a drilldown from the chart.

Here is my URL - The chart with the code in the header is the third line down (4th overall chart) called Top 10 IP Referral Sources

My problem is that I deployed it on a page with multiple datapages, and it is not referencing the correct chart. It is referencing the chart at the bottom of the page instead of the one with the code.

I tried putting Highcharts.charts['4'] but it does not work, as my page constantly changes the chart ID's. I am not sure why they keep changing. Is there another way to reference a specific chart besides the ID as it changes everytime I refresh the page?

 

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
 var chart = Highcharts.charts['0'];
 console.log(chart);
 chart.update(
 {
  plotOptions: {
        series: {
            pointWidth: 50,
            cursor: 'pointer',
            point: {
                events: {
                    click: function () {
                        location.href = 'https://hhaclaims.weebly.com/inpatient-referral-sources.html?HHAIPName=' + this.name;
                    }
                }
            }
        }
    },
  }
 );
});
</script>

 

[Hastur]

Hello @rgiljohann

Can you specify which chart do you want to use with the code?
Looking forward to your reply.

[rgiljohann]

Hello @Andrew, it is the chart titled: Top 10 IP Referral Sources. I have a screenshot of it attached. 

I received the response below from Caspio about the ID's changing when you refresh the page. They said the Chart ID is dynamic, so I would have to select it by class and an array type, but I am not sure how to do that. Thanks.

 

 

Quote

04:49:48 PM [Nheil John] Upon further checking Robert, it seems that the Chart ID really changes time to time once you refreshes the Page. Because that ID is not Static. You may use other JavaScript selector for it. You may select it by Class instead and you use array type of selector to access your chart.

 

[Hastur]

@rgiljohann

The issue is not related to the "id"
You need to choose the appropriate chart from the "Charts" variable.
Try to use this code:

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
 var chart = Highcharts.charts[6];
 chart.update(
 {
  plotOptions: {
        series: {
            pointWidth: 50,
            cursor: 'pointer',
            point: {
                events: {
                    click: function () {
                        location.href = 'https://hhaclaims.weebly.com/inpatient-referral-sources.html?HHAIPName=' + this.name;
                    }
                }
            }
        }
    },
  }
 );
});
</script>

 

[Hastur]

Also, you can check this article - https://howto.caspio.com/release-notes/caspio-bridge-13-0/13-0-impacted-areas/
It has some interesting info related to the dispatching of events when some particular datapage is ready.

Here is the example from the article.

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
       if (event.detail.appKey == 'MY_DATAPAGE_APPKEY') {
              //do something 
       } else if (event.detail.appKey == 'MY_WEB_FORM_APPKEY')    {
              //do something
    }
});
</script>

Maybe it will be helpful in future.

[rgiljohann]

So I tried your code (chart 6), but that does not necessarily work. The charts change numbers, so it might work once in a while, but they change which was my initial issue. If you refresh the page, the chart variables change for some reason, and I am not sure why, which is why Caspio Support told me I had to use something else.

[rgiljohann]

Right now, the JS has your exact code, and it worked once, but when refreshing the page, it does not work again as they keep switching.

[Hastur]

@rgiljohann

You may use the iframe deployment to make sure that you choose appropriate chart.
Use this code with the Iframe deployment:

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
 console.log(event.detail.appKey);
 var chart = Highcharts.charts[0];
 console.log(chart);
 chart.update(
 {
  plotOptions: {
        series: {
            pointWidth: 20,
            cursor: 'pointer',
            point: {
                events: {
                    click: function () {
                        window.parent.location.href = 'https://hhaclaims.weebly.com/inpatient-referral-sources.html?HHAIPName=' + this.name;
                    }
                }
            }
        }
    },
  }
 );
});
</script>

 

[rgiljohann]

Thanks @Andrew. I will give this a try as it might work for this situation. I generally try to stay away from Iframe, because even this function is sending a parameter through a URL string. Is there anyway to find the ID on load? I tried the script below but could not figure out the correct syntax for finding the ID.

 

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
var charted = document.getElementsByClassName("container")[0].id; 
var chart = Highcharts.charts(charted);
 console.log(chart);
 chart.update(
 {
  plotOptions: {
        series: {
            pointWidth: 50,
            cursor: 'pointer',
            point: {
                events: {
                    click: function () {
                        location.href = 'https://hhaclaims.weebly.com/inpatient-referral-sources.html?HHAIPName=' + this.name;
                    }
                }
            }
        }
    },
  }
 );
});
</script>

 

[carlJS]

On 10/4/2019 at 4:31 AM, rgiljohann said:

Thanks @Andrew. I will give this a try as it might work for this situation. I generally try to stay away from Iframe, because even this function is sending a parameter through a URL string. Is there anyway to find the ID on load? I tried the script below but could not figure out the correct syntax for finding the ID.

 

Hello guys,

 

Try using this line of code.

var chart = Highcharts.charts[+document.querySelector('[action*="[@cbAppKey]"] .highcharts-container').id.replace('highcharts-', '')]

 

Works on my end. Hope this works on yours too.

 

[src="carl.js"]