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

html, javascript, jquery

Solution

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.

Problem

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?

Original source