![\"\"](\"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-content\/uploads\/sites\/31\/2020\/12\/SingleMap.jpg\")
<\/a><\/p>\nIn the Designer, we shall now add in our first button called \u2018Bar Chart\u2019 and position it near the Bar Chart and Time Series Chart as seen below.<\/p>\n
We shall now insert our second button called \u2018Time Series\u2019 and change its\u00a0position so that they are exactly on top of each other. This will enable the\u00a0‘Time Series\u2019 button to be displayed on start up.<\/p>\n As the \u2018Time Series\u2019 button is visible on start up then we would not like the\u00a0Time Series Chart to be visible on start up, but have the Bar Chart visible\u00a0on start up instead. Therefore we need to make sure that in the properties\u00a0of the Time Series Chart, \u2018Visible At Startup?\u2019 is unticked.<\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n Now we need to insert the javascript function for the buttons, this will\u00a0activate the custom javascript code.\u00a0Select the Time Series button, and go to the Links tab, in the URL box type\u00a0\u2018javascript:toggleTSandHideTSbutton\u2019.<\/p>\n Select the Bar Chart button, and go to the Links tab, in the URL box type\u00a0\u2018javascript:toggleTSandUnhideTSbutton\u2019.<\/p>\n The custom.js file is the file that you will insert your customisable code to\u00a0trigger the correct button to display and toggle the charts. This file will be\u00a0located in your report folder. In its unedited state it will look similar to the image below.<\/p>\n Copy and paste the following code between the curly brackets of the iaOnReportComplete = function(report) <\/em>function (Line 34):<\/p>\n The first part of this code, which is assigned to the Time Series button, states that when clicked it hides \u2018___user_extra_48\u2019 and toggles the Time Series Line Chart.<\/p>\n The second part of this code, which is assigned to the Bar Chart button, states that when clicked it shows \u2018___user_extra_48\u2019 and toggles the Time Series Line Chart.<\/p>\n \u2018___user_extra_48\u2019 is the ID of the \u2018Time Series\u2019 button and \u2018timeSeries\u2019 is the ID of the Time Series Line Chart.<\/p>\n The custom.js file with the new code should now look as follows.<\/p>\n You can apply this method to other components by changing the code in the custom.js file to pick up the different components of the dynamic report. To do this you will need to know the ID\u2019s of the different components. In the previous example these were \u2018___user_extra_45\u2019 which was the ID of the \u2018Time Series\u2019 button and \u2018barChart\u2019 which is the ID of the Bar\u00a0Chart. The ID\u2019s of the different components can be found in the config.xml\u00a0file opened in a text editor, for example \u2018id=\u201ddataExplorer\u201d\u2019 as seen below.<\/p>\n The ID\u2019s of your user added buttons will be found at the end of the config.xml file:<\/p>\n Replacing these ID\u2019s in the code from section ‘custom.js configuration\u2019 and modifying your functions will enable you to create dynamic buttons and toggle the visibility of other chart components.<\/p>\n","protected":false},"excerpt":{"rendered":" Introduction This article describes how to create dynamic buttons in HTML Edition Templates which will dynamically change to display different text after they have been clicked. This is particularly useful if you are maximising the space in your dynamic report by having one (or more) components on top of each other, therefore requiring a button … Continue reading Creating Dynamic Buttons in InstantAtlas HTML Reports<\/span><\/a><\/p>\n","protected":false},"author":22,"featured_media":0,"parent":27601,"menu_order":40,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-29601","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/pages\/29601","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/comments?post=29601"}],"version-history":[{"count":0,"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/pages\/29601\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/pages\/27601"}],"wp:attachment":[{"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/media?parent=29601"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<\/a><\/p>\n<\/a><\/p>\n<\/a><\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\nCustom.js configuration<\/b><\/h2>\n
<\/a><\/p>\ntoggleTSandHideTSbutton = function() {\r\ndocument.getElementById('ia-widget-___user_extra_48').style.visibility='hidden';\r\niaToggle('timeSeries');\r\n};\r\n\r\ntoggleTSandUnhideTSbutton = function() {\r\ndocument.getElementById('ia-widget-___user_extra_48').style.visibility='visible';\r\niaToggle('timeSeries');\r\n};\r\n<\/pre>\n\u00a0Please note that the button ID may be different in your report. \u00a0Right click on the button in the browser window and choose ‘inspect element’ to check on the ID.<\/p>\n<\/a><\/p>\nAdvanced<\/b><\/h2>\n
<\/a><\/p>\n<\/a><\/p>\n