Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

javascript, Highlight and USA vectormap jquery question

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

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

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…
SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
The viewer will learn how to use a discrete random variable to simulate the return on an investment over a period of years, create a Monte Carlo simulation using the discrete random variable, and create a graph to represent the possible returns over…
This Micro Tutorial hows how you can integrate  Mac OSX to a Windows Active Directory Domain. Apple has made it easy to allow users to bind their macs to a windows domain with relative ease. The following video show how to bind OSX Mavericks to …

963 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