Solved

javascript, Highlight and USA vectormap jquery question

Posted on 2014-01-20
6
204 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

Back Up Your Microsoft Windows Server®

Back up all your Microsoft Windows Server – on-premises, in remote locations, in private and hybrid clouds. Your entire Windows Server will be backed up in one easy step with patented, block-level disk imaging. We achieve RTOs (recovery time objectives) as low as 15 seconds.

Question has a verified solution.

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

I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
This article offers some helpful and general tips for safe browsing and online shopping. It offers simple and manageable procedures that help to ensure the safety of one's personal information and the security of any devices.
Viewers will learn the different options available in the Backstage view in Excel 2013.
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.

751 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