Skip to content

Instantly share code, notes, and snippets.

@JulienSansot

JulienSansot/index.html

Last active July 1, 2016 07:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JulienSansot/3f07abf762f97c18abd43294cac70f42 to your computer and use it in GitHub Desktop.
Save JulienSansot/3f07abf762f97c18abd43294cac70f42 to your computer and use it in GitHub Desktop.
Download ZIP
scatter sequential
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8"><style>
body {
margin-top:100px;
}
</style>
<body>
<script src="https://code.jquery.com/jquery-3.0.0.slim.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script>
$(function () {
$('#container').highcharts({
credits: {
enabled: false
},
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: ' '
},
subtitle: {
text: ' '
},
xAxis: {
// categories: ['A', 'B', 'C', 'D'],
labels: {
formatter: function () {
// if(this.value == "1" || this.value == "2" || this.value == "3")
return this.value + 'h';
}
},
title: {
enabled: false,
text: ''
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: ''
}, categories: [
'Store A',
'Store B',
'Store C',
'Store D'
]
},
legend: {
enabled: false,
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '',
pointFormat: '{point.x}h'
}
}
},
series: [{
name: '',
// color: 'rgba(223, 83, 83, .5)',
color: 'rgba(51, 102, 204, .5)',
marker: { symbol: "circle"},
data: [[-2, 1], [-1, 2], [-0.5, 2],
[-1.25, 2], [-1.15, 2], [-1.2, 1],
[-2, 0], [-1, 0], [-0.5, 0],
[-1.25, 3], [-1.15, 3], [-1.2, 3]
]
},{
name: '',
// color: 'rgba(119, 152, 191, .5)',
color: 'rgba(255, 153, 0, .5)',
marker: { symbol: "circle", radius: 7},
data: [
[0.5, 2], [1, 2], [2, 1],
]
}]
});
});
</script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment