or Create a profile

Home → TileMill →

Highcharts in the full tooltip

Matthew Loveless's Avatar

Matthew Loveless

28 Oct, 2011 05:39 PM

I've been experimenting with adding highcharts to my map's interactivity, but I've run in to a problem that has me stumped. When I put the attached code in the full tooltip, the chart works fine in the preview, but it doesn't render when I click on an item in my interactivity layer, I just get a blank div. My best guess is that this has something to do with the difference between how a full page handles javascript and how it is handled (or isn't) when it is part of the tooltip. Do you think that including this chart in the full tooltip is possible, and if so, any ideas on what I'd need to do to get it working?
Thanks!
Matthew

  1. Support Staff 2 Posted by Will White on 31 Oct, 2011 02:35 AM

    Will White's Avatar

    Hi Matthew,
    Unfortunately, the attached code includes <script> tags, which we can't support in tooltips for security purposes. It won't possible to generate them dynamically inside the tooltip. This is why we generally recommend the Google Charts API for embedded graphs.

    You can use highcharts directly by setting up a map on your site with Wax and overriding the clickHandler function of the interaction control. The custom clickHandler function you provide can set up and render the chart any way you wish.

    Let me know if that helps!

    Will

  2. 3 Posted by Matthew Loveless on 31 Oct, 2011 02:32 PM

    Matthew Loveless's Avatar

    Will,
    Thanks, that makes sense. I've been using the Google charts API to create static charts, but I wanted to try adding some interactivity to the full tooltip. Based on your response, I assume that http://code.google.com/apis/chart/ wouldn't work, either, right?
    Do you know of any way, other than using a custom clickHandler, to add interactive charts to the full tooltip? Or is it possible to stick the custom clickHandler into a map's embed code?
    Thanks!
    Matthew

  3. Support Staff 4 Posted by Will White on 31 Oct, 2011 05:38 PM

    Will White's Avatar

    Hi Matthew,
    Right, only the Google Charts Image API will work because it doesn't require JavaScript and <script> tags. Unfortunately, there is no other way to embed JavaScript into MBTiles tooltips for security reasons. You must implement JavaScript behaviors on the application side.

    Will

  4. 5 Posted by Matthew Loveless on 31 Oct, 2011 10:16 PM

    Matthew Loveless's Avatar

    Makes sense, thanks!

  5. Matthew Loveless closed this discussion on 31 Oct, 2011 10:16 PM.

Comments are currently closed for this discussion. You can start a new one.

2 people watching.

  • New Issue

  • Conversation Started

  • The discussion is closed

    No more actions from MapBox or the discussion starter are required.

  • Re-open the discussion

Recent Discussions

21 May, 2013 03:30 AM External Marker Tooltip Example for v1.0.0
21 May, 2013 01:44 AM Minimun requirements (knowledge)
20 May, 2013 10:10 PM exporting/transferring maps between accounts
20 May, 2013 01:46 PM Layer switcher doesn't work after zoom
20 May, 2013 09:21 PM Using Mapnik plugin in TileMill

 

20 May, 2013 04:20 AM Tilemill installation error at npm stage