How do I interface with Amcharts from outside chart creation functions?

Question

If I create an amchart, and in creation I set the hidden value of one of the data sets to true:

function loadChart(container, chartstodisplay) {

    AmCharts.ready(function () {
        //Do all my regular chart creation here

        //but make sure hidechart shows up hidden
        if(key == 'hidechart'){
            graphs[key].hidden = true;
        }                           

        //now write the chart
        chart.write(container);
    });
}

Now here I am later in my page, and I have some html that is associated with the chart etc. For example, I have a link that if you hover over, I want "hidechart" to now be visible, please realize this functionality is completely separate from the legend blocks that AMcharts creates that you can click to hide/unhide, this is separate on page html.

$(document).ready(function(){

    $('#some_parent').on('click','span.unhide',function(){
        //now go back to the hidden chart element from above and change
        graph['hidechart'].hidden = false;
        //obviously that doesn't work
     })

})

So is there any context in which I can reach and influence the charts and graphs? How do I have to approach this?

Answer 1

You don't really provide enough code to work with, for instance how you're adding the graphs but I think I can help if I make some assumptions.

I assume you have an array of graphs that you're adding to the chart, first make sure the graphs array and chart object are global, so outside the functions (i.e. before loadChart) declare them:

var chart;
var graphs;

Then follow the advice from the documentation on hidden:

Specifies whether the graph is hidden. Do not use this to show/hide the graph, use hideGraph(graph) and showGraph(graph) methods instead.

The documenation for showGraph and hideGraph is here.

So you need to update your hide routine to be (after you've added the graph):

 //but make sure hidechart shows up hidden
     if (key == 'hidechart'){
     chart.hideGraph(graphs[key]);
 }           

Finally you can show that by accessing the two global objects:

 $('#some_parent').on('click','span.unhide',function(){
     //now go back to the hidden chart element from above and change
     chart.showGraph(graphs['hidechart']);
     //should work now
 })

I've tested that locally and it works, if that doesn't help consider posting a little more code or creating a jsFiddle as an example. Also check out this answer from the forums.