Solved

javascript, Highlight and USA vectormap jquery question

Posted on 2014-01-20
6
192 Views
Last Modified: 2016-06-08
I am trying to display an X-Y graph provided by Highcharts.js when I hover my mouse over a specific state in the USA vector map plugin. My problem is that the state title string pops up when I hover my mouse over a specific state in the USA vector map plugin. Instead, I would like to see an X-Y graph pop up whne I hover my mouse over a specific state in the USA vector map plugin. Thank you.


<!DOCTYPE html>
<html>
<head>
  <title>jVectorMap demo</title> 
  <link rel="stylesheet" href="jquery-jvectormap-1.1.1.css"
type="text/css" media="screen"/>
 <script src="jquery.js"></script>
 <script src="jquery-jvectormap-1.1.1.min.js"></script>
 <script src="us-aea-en.js"></script>
 <script src="highcharts.js"></script>
 <script type="text/javascript">

function sprintf( format )
{
  for( var i=1; i < arguments.length; i++ ) {
    format = format.replace( /%s/, arguments[i] );
  }
  return format;
}  
    

	
function saturday() {
    jQuery.get("coordinates.json", function (data) {
        // Using sprintf
var html2 = "{title: {text:'Monthly Average Temperature', x: -20},";
var html3 = "subtitle:{text:";
var html5 = "'Source:Climate.com',x:-20},xAxis:{categories:['J','F']";
var html10  = "plotLines:[value:0,width:1,color:'#808080'}],},tooltip:{valueSuffix:'C'},legend:{layout:'vertical',"; 
var html11 = "align:'right',verticalAlign:'middle',borderWidth:0},series:[{name:'Tokyo',data:";
var html12 = " [[%s,%s],[%s,%s] ]}] }); };";
var html15 = ",yAxis:{title:{text:'Temp(C)'},";
html2 = html2 + html3 + html5 + html15 + html10 + html11 + html12;
html2 = sprintf(html2, data[0].x, data[0].y,data[1].x, data[1].y);  
  $('#USA-map').highcharts(html2);
});
} 
  

		
</script>
</head>
<body>
  <div id="USA-map" style="width: 1200px; height: 800px"></div>
  <script language="javascript">
    function processOrder() {
 	 var pluginContainer = $("#USA-map");
        pluginContainer.vectorMap(
       {
           map: 'us_aea_en',
           onRegionOver: function(event, code){
               saturday();
           }
       }
     );
  }
   </script>
<script type="text/javascript" src="foo.js"></script>
<script src="highcharts.js"></script>

<script src="exporting.js">
</script>

</body>
</html>
-----------------------------------------------------------------------------------------------------------------------
-------------------------------------foo.js---------------------------------------------------------------------------
processOrder();
-----------------------------------------------------------------------------------------------------------------------

Open in new window

0
Comment
Question by:PhiladelphiaPike5
  • 2
  • 2
6 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39796128
I guess you will have to look at the vector map docs to see how you suppress or replace the tool tips

For example a google of replace jvectormap tooltip gives me

onMarkerLabelShow Function (Event e, Object label, String code) Will be called right before the marker label is going to be shown.
0
 

Author Comment

by:PhiladelphiaPike5
ID: 39798268
mplungjan, I just tried your suggestion to replace jvectomap tooltip. However, it does not solve my problem which is that the state title string pops up when I hover my mouse over a specific state in the USA vector map plugin.
                  Instead, I would like to see an X-Y graph pop up when I hover my mouse over a specific state in the USA vector map plugin. Please suggest another workaround. Thank you.
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 39798334
Something like this

 onMarkerLabelShow: function(event, label, code) {
     label.html('<div id="ht"></div>');
     $('#ht').highcharts(html2);                
 }
0
 

Author Comment

by:PhiladelphiaPike5
ID: 39807955
mplungjan,
              I tested your change for 2 days and i  just found that label does not support a html method which renders the javascript unable to be debugged in Internet Explorer. Thank you for your help.
From jvectormap API,
onMarkerLabelShow: function(event, label, index){},
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

As with any other System Center product, the installation for the Authoring Tool can be quite a pain sometimes. This article serves to help you avoid making these mistakes and hopefully save you a ton of time on troubleshooting :)  Step 1: Make sur…
Several part series to implement Internet Explorer 11 Enterprise Mode
Viewers will learn the different options available in the Backstage view in Excel 2013.
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

808 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question