Solved

javascript, Highlight and USA vectormap jquery question

Posted on 2014-01-20
6
215 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Enroll in July's Course of the Month

July's Course of the Month is now available! Enroll to learn HTML5 and prepare for certification. It's free for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

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

#Citrix #Internet Explorer #Enterprise Mode #IE 11 #IE 8
Ever visit a website where you spotted a really cool looking Font, yet couldn't figure out which font family it belonged to, or how to get a copy of it for your own use? This article explains the process of doing exactly that, as well as showing how…
The view will learn how to download and install SIMTOOLS and FORMLIST into Excel, how to use SIMTOOLS to generate a Monte Carlo simulation of 30 sales calls, and how to calculate the conditional probability based on the results of the Monte Carlo …
The viewer will learn how to use the =DISCRINV command to create a discrete random variable, use this command to model a set of probabilities and outcomes in a Monte Carlo simulation, and learn how to find the standard deviation of a set of probabil…

624 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