I would like to scrape the data in this interactive graph:
The isolated address is here: https://s3-eu-west-1.amazonaws.com/cbhighcharts/Temperature+adjustments/raw+adjusted+temps.html
I could just copy all the values (they are displayed when hovering over them), but there must be a better way.
I realise it has been done using Highcharts, but the data is not embedded but comes from a protected google sheet:
data: {
googleSpreadsheetKey: '1Ni5_AvLB_6M3YMZBPp5WlQshIvLM-WwRaUMdT-p_agM',
startColumn: 0,
endColumn: 3,
complete: function(options) {
var series = options.series;
series[2].type = 'area';
series[2].lineWidth = 0;
series[2].zIndex = -1;
series[2].color = '#999999';
}
Any help how to get this into R?
Thanks!
Here the full html code:
<html>
<head>
<title>Graph: Surface and troposphere temps | Carbon Brief</title>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<style>
#container1 {max-width: 800px; height: 600px;}
#logocontainer{ max-width: 800px; height: 26px;}
#logo {position: absolute; right:10px;}
#media screen and (min-width: 830px) {
#logo {
left: 778px;
}
}
</style>
<body>
<!-- you can set minimum dimensions for the chart here -->
<!-- for example swap the <div below for this version -->
<!-- <div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div> -->
<div id="container1"></div>
<div id="logocontainer">
<img id="logo" src="https://s3-eu-west-1.amazonaws.com/cbhighcharts/CB-logo-for-highcharts.png">
</div>
<script type="text/javascript">
$(function() {
Highcharts.setOptions({
// here is the CB colour scheme
// dark blue - 0b4572
// yellow - EFC530
// light blue - 2f8fce
// red - C7432B
// light grey - 999999
// lilac - A14A7B
// orange - DF9239
// this line sets the colours
// the first colour is for bottom chunk of a stacked column (reversed: false)
// here I've used a gradient of 15 steps from CB dark blue to red, via grey
// you can make your own gradient custom here:
// http://www.strangeplanet.fr/work/gradient-generator/?c=9:FFFFFF:000000
lang: {
thousandsSep: ','
},
chart: {
// set the font family for the chart. PT Serif is CB default for body text.
style: {
fontFamily: 'PT Sans'
}
}
});
// Create the chart
// type: 'column'
// creates column chart. See www.highcharts.com/demo/ for more options
// zoomType: 'x,y'
// allows the user to zoom in to the chart on the x and y axis
// you can set to allow x zoom or y zoom only
$('#container1').highcharts({
colors: ['#C7432B', '#2f8fce', '#A14A7B', '#DF9239', '#C7432B', '#999999', '#A14A7B', '#EFC530', '#999999', '#999999' ],
chart: {
renderTo: 'container1',
backgroundColor: 'transparent',
type: 'line',
zoomType: 'x,y'
},
title: {
text: 'Raw and Adjusted Land Temperatures',
align: 'left'
},
navigation: {
buttonOptions: {
enabled: false
}
},
credits: {
enabled: false
},
plotOptions: {
line: {
lineWidth: 3,
symbol: 'circle',
marker: {
enabled: false,
radius: 3
}
},
column: {
groupPadding: 0
}
},
// options for the y axis
yAxis: {
reversedStacks: false,
min: -1,
max: 1.5,
labels: {
style: {
fontSize: '12px'
},
format: '{value:,.1f}C'
},
title: {
text: ''
},
},
xAxis: {
// type: 'category',
crosshair: {
// width: 40,
// pale grey #E5E5E5
// black #000000
color: '#E5E5E5'
},
labels: {
style: {
fontSize: '12px'
}
}
},
tooltip: {
valueSuffix: 'C',
pointFormat: '{series.name}: <br/> <b>{point.y}</b><br/>',
// crosshairs: 'true'
shared: false
},
legend: {
// turn the legend on or off
enabled: true,
padding: 20,
// set the layout of the legend
layout: 'horizontal',
floating: false,
verticalAlign: 'top',
y: 20,
//x: 15,
},
data: {
googleSpreadsheetKey: '1Ni5_AvLB_6M3YMZBPp5WlQshIvLM-WwRaUMdT-p_agM',
startColumn: 0,
endColumn: 3,
complete: function(options) {
var series = options.series;
series[2].type = 'area';
series[2].lineWidth = 0;
series[2].zIndex = -1;
series[2].color = '#999999';
}
}
},
function(chart) { // on complete
});
});
</script>
</body>
</html>
You can scrape the chart data by running the below JS code. Highcharts is a global variable.
Highcharts.charts[0].userOptions.series
API Reference: https://api.highcharts.com/class-reference/Highcharts#.charts
Related
I am trying to plot a multi series line graph with two y-Axis using highcharts. The data is being plotted from a CSV on a server. The problem i have is when it comes to plotting more than one series. I can succesfully load all the csv data into arrays. When i try plot the second axis nothing shows up. Am i missing something here?
Here is the html code
<script type="text/javascript">
$.get('employeeData.csv', function(data) {
var lines = data.split('\n');
console.log(lines);
var timeData=[];
$.each(lines, function(lineNo, lineContent){
if(lineNo > 0)
{
timeData[lineNo-1] = lineContent.split(',')[0];
}
});
var weightData=[];
$.each(lines, function(lineNo, lineContent){
if(lineNo > 0)
{
weightData[lineNo-1] = lineContent.split(',')[1];
}
});
var valueData=[];
$.each(lines, function(lineNo, lineContent){
if(lineNo > 0)
{
valueData[lineNo-1] = parseFloat(lineContent.substring(lineContent.lastIndexOf(",")+1) );
}
});
console.log(timeData);
console.log(weightData);
console.log(valueData);
Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: 'employee Data'
},
subtitle: {
text: 'firmA'
},
xAxis: {
categories: timeData,
crosshair: false
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}(g)',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Weight',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'secondary axis',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} zCount',
style: {
color: Highcharts.getOptions().colors[0]
}
},
////////Notice: importance option
opposite: true //This option will set position of this axis to the right sie
}],
tooltip: {
headerFormat: '<b>Time:</b> {point.x}<br/>',
pointFormat: '<b>{series.name}:</b> {point.y}<br/>'
},
plotOptions: {
column: {
pointPadding: 0.01,
borderWidth: 0
}
},
series: [{
name: 'Weight',
data: weightData
}, {
name: 'value',
data: valueData,
yAxis: 1
}]
});
});
</script>
<html>
<head>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 600px; margin: 0 auto"></div>
</body>
</html>
here is the csv
Time,Weight,value
2020/08/18 18h25,29719,59
2020/08/18 18h26,29720,62
2020/08/18 18h27,29759,62
2020/08/18 18h28,29790,63
2020/08/18 18h29,29720,64
2020/08/18 18h30,29721,65
2020/08/18 18h31,29760,70
2020/08/18 18h32,29791,89
So for anyone who has had a similar issue, my problem was that i was not parsing the value read from the CSV file to a float. the values were being read as text so to fix this i edited this and added parseFloat();
var weightData=[];
$.each(lines, function(lineNo, lineContent){
if(lineNo > 0)
{
weightData[lineNo-1] = parseFloat(lineContent.split(',')[1]);
}
});
I'm trying the below synchronous chart to have different Y-axis name for each chart.I searched a lot but didn't find any answers.
If any help with this will be appreciated.
/*
The purpose of this demo is to demonstrate how multiple charts on the same page
can be linked through DOM and Highcharts events and API methods. It takes a
standard Highcharts config with a small variation for each data set, and a
mouse/touch event handler to bind the charts together.
*/
/**
* In order to synchronize tooltips and crosshairs, override the
* built-in events with handlers defined on the parent element.
*/
$('#container').bind('mousemove touchmove touchstart', function (e) {
var chart,
point,
i,
event;
for (i = 0; i < Highcharts.charts.length; i = i + 1) {
chart = Highcharts.charts[i];
event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
point = chart.series[0].searchPoint(event, true); // Get the hovered point
if (point) {
point.highlight(e);
}
}
});
/**
* Override the reset function, we don't need to hide the tooltips and crosshairs.
*/
Highcharts.Pointer.prototype.reset = function () {
return undefined;
};
/**
* Highlight a point by showing tooltip, setting hover state and draw crosshair
*/
Highcharts.Point.prototype.highlight = function (event) {
this.onMouseOver(); // Show the hover marker
this.series.chart.tooltip.refresh(this); // Show the tooltip
this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
};
/**
* Synchronize zooming through the setExtremes event handler.
*/
function syncExtremes(e) {
var thisChart = this.chart;
if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
Highcharts.each(Highcharts.charts, function (chart) {
if (chart !== thisChart) {
if (chart.xAxis[0].setExtremes) { // It is null while updating
chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, { trigger: 'syncExtremes' });
}
}
});
}
}
// Get the data. The contents of the data file can be viewed at
// https://github.com/highcharts/highcharts/blob/master/samples/data/activity.json
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=activity.json&callback=?', function (activity) {
$.each(activity.datasets, function (i, dataset) {
// Add X values
dataset.data = Highcharts.map(dataset.data, function (val, j) {
return [activity.xData[j], val];
});
$('<div class="chart" style="width:200px;float:left;">')
.appendTo('#container')
.highcharts({
chart: {
marginLeft: 40, // Keep all charts left aligned
spacingTop: 20,
spacingBottom: 20
},
title: {
text: dataset.name,
align: 'left',
margin: 0,
x: 30
},
credits: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
crosshair: true,
events: {
setExtremes: syncExtremes
},
labels: {
format: '{value} km'
}
},
yAxis: {
title: {
text: null
}
},
tooltip: {
positioner: function () {
return {
x: this.chart.chartWidth - this.label.width, // right aligned
y: -1 // align to title
};
},
borderWidth: 0,
backgroundColor: 'none',
pointFormat: '{point.y}',
headerFormat: '',
shadow: false,
style: {
fontSize: '18px'
},
valueDecimals: dataset.valueDecimals
},
series: [{
data: dataset.data,
name: dataset.name,
type: dataset.type,
color: Highcharts.getOptions().colors[i],
fillOpacity: 0.3,
tooltip: {
valueSuffix: ' ' + dataset.unit
}
}]
});
});
});
.chart {
min-width: 320px;
max-width: 800px;
height: 200px;
margin: 0 auto;
}
#container {
min-width: 310px;
max-width: 400px;
margin: 0 auto
}
</style>
<!-- http://doc.jsfiddle.net/use/hacks.html#css-panel-hack -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
One possible way of doing this would be to do this, create an array of the yAxis titles:
var yAxisName = ['km/h', 'meters', 'bpm'];
Uncomment the indenting (or the axis title will not be shown:
chart: {
// marginLeft: 40,
...
}
And finally setting the actual title:
yAxis: {
title: {
text: yAxisName[i]
}
}
Working example: http://jsfiddle.net/ewolden/th26ay3m/
I am creating a column type graph. Is there a way in javascript to change the color(which I want to define) of a column IF Gait == Walk
Here is an example of the graph im working on
https://jsfiddle.net/NRKSensors/4t6q5z0j/3/
$(function() {
Highcharts.setOptions({
colors: ['#ffffff', '#000000', '#666666']
});
var chart, merge = Highcharts.merge;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
zoomType: 'x ',
marginTop: 20,
borderColor: null,
borderRadius: 20,
borderWidth: 2,
backgroundColor: null,
},
title: {
text: null
},
subtitle: {
text: null
},
data: {
csv: document.getElementById('csv').innerHTML,
seriesMapping: [{
x: 0, // Insert X values in minutes
y: 1, // Insert Y values (Frequency)
label: 2 // Insert Labels (Standing,Walk, Trot, Canter, Jump)
}]
},
tooltip: {
useHTML: true,
formatter: function() {
point = this.point;
html = '<table>';
html += point.label + '</h3></th></tr>';
html += '</table>';
return html;
},
followPointer: true,
hideDelay: 200
},
exporting: {
buttons: {
contextButton: {
enabled: false
}
}
}, // Gemmer Export Menu knappen. Den tror jeg ikke vi skal anvende.
credits: {
enabled: false
},
series: [{
type: 'column',
color: 'black'
}],
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<div id="container" style="width:100%; height:400px;"></div>
<pre id="csv" style="display:none">Touchdown,Frequency,Gait
22.414,100,"Walk"
22.42366667,100,"Walk"
22.43333333,103.4482759,Walk
22.44266667,96.77419355,Walk
22.45266667,96.77419355,Walk
24.69466667,136.3636364,Trot
24.70166667,125,Trot
24.70933333,136.3636364,Trot
24.71633333,120,Trot
24.72433333,130.4347826,Trot
25.11933333,68.18181818,Canter
25.13366667,88.23529412,Canter
25.14466667,85.71428571,Canter
25.156,88.23529412,Canter
</pre>
Do I need to prepare the data in the last column with qoutes?, so "Walk" instead of Walk?
Below is an example i made in Matlab. So I need to make it similar to this, but in highcharts
Matlab Column example
One way of doing this is to add a new column called color and set the value of this column based on the value of "Gait". This would be done in after highcharts have parsed the csv data like this:
data: {
csv: document.getElementById('csv').innerHTML, // Delete this line
seriesMapping: [{
x: 0, // Insert X values in minutes
y: 1, // Insert Y values (Frequency)
label: 2, // Insert Labels (Standing,Walk, Trot, Canter, Jump) NOT in quotes '' !!!
color: 3 //specify that column 3 is color
}],
parsed: function(columns) {
columns.push(['Color']) //Add a new column, color
for (var i = 0; i < columns[2].length; i++) {
if (columns[2][i] == 'Walk') {
columns[3].push('Red'); //Set color red for walk
} else if (columns[2][i] == 'Trot') {
columns[3].push('Blue');
} else if (columns[2][i] == 'Canter') {
columns[3].push('green');
} else { //Set grey for any gaits not found
columns[3].push('grey');
}
}
}
},
Working example: https://jsfiddle.net/ewolden/4t6q5z0j/40/
API on data.parsed: https://api.highcharts.com/highcharts/data.parsed
Trying to add a column chart with a tooltip to our mobile app (android and iOS) inside a WebView
Because the issue happens also on the highcharts sample found on - https://www.highcharts.com/demo/column-basic
I won't add my html here.
When I open the html on a desktop browser, the mouse hover works fine, when i enter/exit a column, the right tooltip.formatter is triggered
but when i do the same with a mobile browser(or inside a WebView within my app) the scrolling only works if I start it outside a column.
If my finger starts the scroll by touching a column, the tooltip and the selected bar are stuck (every time i cross to a different column, the tooltip.formatter is triggered with the initial column i touched).
tested on safari, chrome and native android browser.
can you say what am i doing wrong?
should i add something to my script?
*using a simple column chart sample from highcharts site produces the same behavior
*changing to an other chart type solves this issue(i tried area,line, areaspline, spline)
Highcharts.chart('container', {
chart: {
type: 'column',
animation: false,
panning: false,
pinchType: false,
},
title: {
text: ''
},
xAxis: {
categories: [
"24/10", "25/10", "26/10", "27/10", "28/10",
"29/10", "30/10", "31/10", "1/11", "2/11",
"3/11", "4/11", "5/11", "6/11", "7/11",
"8/11", "9/11", "10/11", "11/11", "12/11",
"13/11", "14/11", "15/11", "16/11", "17/11",
"18/11", "19/11", "20/11", "21/11", "22/11",
"23/11", "24/11", "25/11", "26/11", "27/11"
]
/*
labels: {
rotation: 290
},
//type: 'datetime',
}*/
},
yAxis: {
labels: {
formatter: function() {
return this.value.toLocaleString();
}
},
title: {
text: ''
}
},
credits: {
enabled: false,
href: null
},
exporting: {
enabled: false
},
legend: {
enabled: false,
},
tooltip: {
crosshairs: true,
shared: true,
enabled: true,
followTouchMove: true,
followPointer: false,
formatter: function() {
var date = Highcharts.dateFormat('%d/%m', new Date(this.points[0].key));
var d = new Date();
var x = 'x=';
var y = 'y=';
// d.setTime(this.points[0].key);
x = this.points[0].key;
//x = Highcharts.dateFormat('%d/%m', d); //
y = (this.points[0].y).toString();
document.getElementById('tooltip_date').innerHTML = '<span style="font-size: 125%;color:black;font-weight: regular">' + x + '</span>';
document.getElementById('tooltip_value').innerHTML = '<span style="font-size: 125%;color:black;font-weight: bold">' + y + ' impressions.</span>';
if(Math.floor(Math.random() * 100) % 2 == 0)
{
document.getElementById('tooltip_change').innerHTML = '<span style="font-size: 100%;color:green;font-weight: bold"> ▲ 27.5% (WoW)</span>';
}
else
{
document.getElementById('tooltip_change').innerHTML = '<span style="font-size: 100%;color:red;font-weight: bold"> ▼ 27.5% (WoW)</span>';
}
var lm = Math.floor(Math.random() * 1000);
var sheets = Math.floor(Math.random() * 100000);
var sqm = Math.floor(Math.random() * 5000);
document.getElementById('tooltip_desc').innerHTML = '<span style="font-size: 90%;color:black;font-weight: regular"> lm: '+lm +'; sheets: '+ sheets+'; sqm: '+sqm+'</span>';
return false;
}
},
plotOptions: {
series: {
pointPadding: 0,
groupPadding: 0,
//pointStart: Date.UTC(2017, 9, 24),
//pointInterval: 24 * 3600 * 1000, // one day
}
},
series: [{
name: 'print volume',
animation: false,
data: [200000, 203000, 30000, 125000, 100000, 232000, 123000, 340000, 90700, 195000, 92000, 223000, 130000, 75000, 165000, 108000, 130000, 237000, 165000, 148000, 228000, 163000, 210000, 127000, 125000, 109000, 143000, 127000, 15000, 105000],
}]
});
function randomWholeNum() {
// Only change code below this line.
return Math.random();
}
<html>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://highcharts.github.io/pattern-fill/pattern-fill.js"></script>
<style>
body {
-webkit-user-select: none; /* Chrome, Opera, Safari */
-moz-user-select: none; /* Firefox 2+ */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Standard syntax */
}
</style>
<body>
<div id="tooltip" style="min-width: 310px; height: 80px; margin: 0 auto">
<div id="tooltip_date">date</div>
<div>
<span id="tooltip_value">val </span> <span id="tooltip_change">change </span>
</div>
<div id="tooltip_desc">desc</div>
</div>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
I am having some issues with the combination of drilldown maps with funnell charts using highcharts . My requirement is : I need to display drilldown maps in one div and funnell charts in another div .
But only drill down maps rendering correctly on the page, but funnell chart not rendering.
Javascript used :
<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/maps/modules/drilldown.js"></script>
<script src="http://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
<script src="http://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/world.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/funnel.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/adapters/standalone-framework.js"></script>
HTML DIV section :
<div id="drilldownmap">
<div id="funnell">
Data :
$(function () {
var data = Highcharts.geojson(Highcharts.maps['countries/us/us-all']),
// Some responsiveness
small = $('#drilldownmap').width() < 400;
// Set drilldown pointers
$.each(data, function (i) {
this.drilldown = this.properties['hc-key'];
this.value = i; // Non-random bogus data
});
// Instanciate the map
$('#drilldownmap').highcharts('Map', {
chart : {
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
var chart = this,
mapKey = 'countries/us/' + e.point.drilldown + '-all',
// Handle error, the timeout is cleared on success
fail = setTimeout(function () {
if (!Highcharts.maps[mapKey]) {
chart.showLoading('<i class="icon-frown"></i> Failed loading ' + e.point.name);
fail = setTimeout(function () {
chart.hideLoading();
}, 1000);
}
}, 3000);
// Show the spinner
chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>'); // Font Awesome spinner
// Load the drilldown map
$.getScript('http://code.highcharts.com/mapdata/' + mapKey + '.js', function () {
data = Highcharts.geojson(Highcharts.maps[mapKey]);
// Set a non-random bogus value
$.each(data, function (i) {
this.value = i;
});
// Hide loading and add series
chart.hideLoading();
clearTimeout(fail);
chart.addSeriesAsDrilldown(e.point, {
name: e.point.name,
data: data,
dataLabels: {
enabled: true,
format: '{point.name}'
}
});
});
}
this.setTitle(null, { text: e.point.name });
},
drillup: function () {
this.setTitle(null, { text: 'USA' });
}
}
},
title : {
text : ''
},
subtitle: {
text: 'USA',
floating: true,
align: 'right',
y: 50,
style: {
fontSize: '16px'
}
},
legend: small ? {} : {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
colorAxis: {
min: 0,
minColor: '#E6E7E8',
maxColor: '#005645'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
plotOptions: {
map: {
states: {
hover: {
color: '#EEDD66'
}
}
}
},
series : [{
data : data,
name: 'USA',
dataLabels: {
enabled: true,
format: '{point.properties.postal-code}'
}
}],
drilldown: {
//series: drilldownSeries,
activeDataLabelStyle: {
color: 'white',
textDecoration: 'none'
},
drillUpButton: {
relativeTo: 'spacingBox',
position: {
x: 0,
y: 60
}
}
}
});
$('#funnell').highcharts({
chart: {
type: 'funnel',
marginRight: 100
},
title: {
text: 'Conversion funnel',
x: -50
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '<b>{point.name}</b> ({point.y:,.0f})',
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
softConnector: true
},
neckWidth: '30%',
neckHeight: '25%'
//-- Other available options
// height: pixels or percent
// width: pixels or percent
}
},
legend: {
enabled: true
},
series: [{
name: 'Unique users',
data: [
['Website visits', 15558],
['Carts', 2017],
['Checkouts', 608],
['Orders', 368]
]
}]
});
});
It would be great if someone could help me to resolve this issue??
Thanks.
I think highmaps.js is causing a conflict here. Use
<script src="http://github.highcharts.com/modules/map.src.js"></script>
instead of
<script src="http://code.highcharts.com/maps/highmaps.js"></script>
And place
<script src="http://code.highcharts.com/highcharts.js"></script>
before
<script src="http://github.highcharts.com/modules/map.src.js"></script>
The complete list of script refs in <head> tag should look like this:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://github.highcharts.com/modules/map.src.js"></script>
<script src="http://code.highcharts.com/maps/modules/data.js"></script>
<script src="http://code.highcharts.com/maps/modules/drilldown.js"></script>
<script src="http://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
<script src="http://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/world.js"></script>
<script src="http://code.highcharts.com/modules/funnel.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/adapters/standalone-framework.js"></script>
This should get the job done.