highcharts - Rails and High Charts - can't render the maps at all -
i having problems getting off ground highcharts maps.
i followed rails installation.
gemfile
gem "highcharts-rails", "~> 3.0.0" application.js
//= require highcharts //= require highcharts/highcharts-more //= require highcharts/modules/data //= require highcharts/modules/map in page
<div id="container" style="height: 500px; min-width: 310px; max-width: 600px; margin: 0 auto"></div> <script> $(function () { // prepare demo data var data = [{ 'hc-key': 'us', value: 3 }, { 'hc-key': 'ca', value: 5 }, { 'hc-key': 'mx', value: 20 }]; // initiate chart $('#container').highcharts('map', { title: { text: 'showing non-null areas' }, subtitle: { text: 'the <em>allareas</em> option false' }, mapnavigation: { enabled: true, buttonoptions: { verticalalign: 'bottom' } }, coloraxis: { min: 0 }, series: [{ data: data, mapdata: highcharts.maps['custom/north-america-no-central'], joinby: 'hc-key', allareas: false, name: 'random data', states: { hover: { color: '#bada55' } }, datalabels: { enabled: true, format: '{point.name}' } }] }); }); </script> as can see screenshot, there no map rendered.
i have seen similar question here:
but have tried these permutations , combinations of placing links js files in application header without success. simple "your first chart" installation in docs works fine
http://www.highcharts.com/docs/getting-started/your-first-chart
.....as try maps, no joy.
edit
so,
if remove files application.js , add
<script src="http://code.highcharts.com/maps/highmaps.js"></script> <script src="http://code.highcharts.com/maps/modules/data.js"></script> <script src="http://code.highcharts.com/mapdata/custom/world.js"></script> to application header....the following works..
<div id="container" style="height: 500px; min-width: 310px; max-width: 600px; margin: 0 auto"></div> <script> $(function () { $.getjson('http://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function (data) { // add lower case codes data set inclusion in tooltip.pointformat $.each(data, function () { this.flag = this.code.replace('uk', 'gb').tolowercase(); }); // initiate chart $('#container').highcharts('map', { title: { text: 'fixed tooltip html' }, legend: { title: { text: 'population density per km²', style: { color: (highcharts.theme && highcharts.theme.textcolor) || 'black' } } }, mapnavigation: { enabled: true, buttonoptions: { verticalalign: 'bottom' } }, tooltip: { backgroundcolor: 'none', borderwidth: 0, shadow: false, usehtml: true, padding: 0, pointformat: '<span class="f32"><span class="flag {point.flag}"></span></span>' + ' {point.name}: <b>{point.value}</b>/km²', positioner: function () { return { x: 0, y: 250 }; } }, coloraxis: { min: 1, max: 1000, type: 'logarithmic' }, series : [{ data : data, mapdata: highcharts.maps['custom/world'], joinby: ['iso-a2', 'code'], name: 'population density', states: { hover: { color: '#bada55' } } }] }); }); }); </script> surely there has nice "rails" way working without explicitly calling files in header?
Comments
Post a Comment