The Json file i have given to my Highmaps is not working i do not get tooltip or the hover feature

Question

I am creating a HighMap for the US. When I run my code, I do not get any output. Why is this?

$(function () {

        $.getJSON('http://localhost:52149/Scripts/BrokerInfo.json', function (data) {
         $('#container').highcharts('Map', {

        chart : {
            borderWidth : 1
        },

        title : {
            text : 'Broker Zonal Assignment'
        },
        mapNavigation: {
            enabled: true
        },

                series : [{
            animation: {
                duration: 1000
            },
            data : data,
            mapData: Highcharts.maps['countries/us/us-all'],
            joinBy: ['State', 'State'],
            dataLabels: {
                enabled: true,
                color: 'white',
                format: '{point.State}'
            },
            name: 'Vice President',
            tooltip: {
                pointFormat: '{point.state}: {point.VicePresident}'
            }
        }]
    });
});

Well did you include highcharts? What do the errors in the console say? — epascarello, Jan 29 '15 at 14:57
Yes I have included highcharts. there are null reference exceptions like JavaScript runtime error: Unable to set property 'countries/us/us-all' of undefined or null reference — user1696242, Jan 29 '15 at 15:13
Did you include all of the resource files like this demo: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/maps/demo/color-axis/ — epascarello, Jan 29 '15 at 15:18
Yes all the resources have been included. You can see this link . which has my code http://jsfiddle.net/pkb9ovLa/ — user1696242, Jan 29 '15 at 15:27

score 1 · Answer 1 · answered Jan 29 '15 at 15:29

1

Uncaught ReferenceError: Highcharts is not defined

The order is wrong, you can not load dependancies of highcharts before you load the main file.

<script type="text/javascript" src="http://code.highcharts.com/mapdata/countries/us/us-all-all.js"></script>

needs to come after the highmaps.js include

answered Jan 29 '15 at 15:29

epascarello

204,599
20
195
236

I have corrected the order now. – user1696242 Jan 30 '15 at 04:54
but still i did not get any output. – user1696242 Jan 30 '15 at 04:54
Thank you I was able to generate map. But the map appears 10 sec after the page load. Can anything be done to this – user1696242 Jan 30 '15 at 06:24
Well the fiddle would never work since the data source lives on your localhost. I do not know what the data is that you are loading and why it is taking so long. Is there tons of data? – epascarello Jan 30 '15 at 14:18
i got it working. other features like tooltip and hover is not showing up. – user1696242 Feb 02 '15 at 05:34

The Json file i have given to my Highmaps is not working i do not get tooltip or the hover feature

1 Answers1