Jump to content

Reference Chart ID in javascript


Recommended Posts

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>

 

HighChartsID.PNG

Link to comment
Share on other sites

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.

 

ChartID.PNG

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...