?
Solved

javascript, Highlight and USA vectormap jquery question

Posted on 2014-01-20
6
Medium Priority
?
240 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
4 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 2000 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

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Question has a verified solution.

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

Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
Is your phone running out of space to hold pictures?  This article will show you quick tips on how to solve this problem.
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…
If you’ve ever visited a web page and noticed a cool font that you really liked the look of, but couldn’t figure out which font it was so that you could use it for your own work, then this video is for you! In this Micro Tutorial, you'll learn yo…

578 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