#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2011
    Posts
    58
    Rep Power
    3

    Toggle CF Chart Legend


    Please consider the image I have attached. I want the following toggle functionality:

    When a user clicks on the legend of SecondConn , the line chart should disappear and when a user
    clicks it again, it should come back. Could anyone please tell me how can I proceed in thsi case?

    The sample code of my graph is as follows:

    <cfset detail1 = queryNew("")>
    <cfset queryAddColumn(detail1, "FIRSTCONN", "date", listToArray("2013-07-31,2013-08-15,2013-08-17"))>
    <cfset queryAddColumn(detail1, "FIRSTOccurances", listToArray("3,5,6"))>
    Code:
    <cfset detail2 = queryNew("")>
    <cfset queryAddColumn(detail2, "SECONDCONN", "date", listToArray("2013-08-10,2013-08-18,2013-08-20"))>
    <cfset queryAddColumn(detail2, "SECONDOccurances", listToArray("4,10,8"))>
    <cfchart format="flash"  xAxisTitle="Dates" yaxistitle="Number of Connections" showlegend="yes">
           <cfchartseries  query="detail1" type="line" itemColumn="FIRSTCONN" valueColumn="FIRSTOccurances" /> 
           <cfchartseries  query="detail2" type="line" itemColumn="SECONDCONN" valueColumn="SECONDOccurances" /> 
    </cfchart>
    Here is the link for the image:

    https://www.dropbox.com/s/wozl4g1ktt6wgy2/11.jpg
  2. #2
  3. No Profile Picture
    Moderator

    Join Date
    Jun 2002
    Location
    Raleigh, NC
    Posts
    5,263
    Rep Power
    968
    I really have no idea if this is possible with the Flash-based charts. In HTML, you should be able to add a click handler to anything and modify the DOM accordingly. But in Flash, your only real option is probably trying to inject ActionScript into the Flash object, and as I said I'm not even sure this is possible if you're not writing the Flash source code yourself.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2011
    Posts
    58
    Rep Power
    3
    Originally Posted by kiteless
    I really have no idea if this is possible with the Flash-based charts. In HTML, you should be able to add a click handler to anything and modify the DOM accordingly. But in Flash, your only real option is probably trying to inject ActionScript into the Flash object, and as I said I'm not even sure this is possible if you're not writing the Flash source code yourself.

    I'm not using Flash anymore

    Could you explain a bit more about HTML related approach?
  6. #4
  7. No Profile Picture
    Moderator

    Join Date
    Jun 2002
    Location
    Raleigh, NC
    Posts
    5,263
    Rep Power
    968
    OK, but unless you've changed it on your side, you've still got format="flash" in your code.

    In HTML, you'd add a click handler on the legend to toggle the visibility of the parts of the graph you're interested in. You could do this is your own JavaScript, but I would use something like jQuery.

    Really, the best option would be to use a different charting library. The built-in charting features in CF are meant for very simple, basic, quick-and-dirty output. If you want to start customizing things, you probably want a different library.
    Last edited by kiteless; July 30th, 2013 at 05:20 PM.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2011
    Posts
    58
    Rep Power
    3
    Originally Posted by kiteless
    OK, but unless you've changed it on your side, you've still got format="flash" in your code.

    In HTML, you'd add a click handler on the legend to toggle the visibility of the parts of the graph you're interested in. You could do this is your own JavaScript, but I would use something like jQuery.

    Really, the best option would be to use a different charting library. The built-in charting features in CF are meant for very simple, basic, quick-and-dirty output. If you want to start customizing things, you probably want a different library.
    It can't be done using CF Chart basically. I shifted to another charting engine.

IMN logo majestic logo threadwatch logo seochat tools logo