highcharts, four aeraranges with linear gradients - css

I'm trying to create chart in Highcharts with four arearanges and one line. I'm doing my best to get something like on image:
arearanges
I'v managed to do something like this:
$(function () {
var rangesHI = [
[1246406400000, 90, 75],
[1248998400000, 90, 75]
],
rangesME = [
[1246406400000, 75, 60],
[1248998400000, 75, 60]
],
rangesNO = [
[1246406400000, 60, 35],
[1248998400000, 60, 35]
],
rangesLO = [
[1246406400000, 35, 15],
[1248998400000, 35, 15]
],
averages = [
[1246406400000, 31.5],
[1246492800000, 32.1],
[1246579200000, 33],
[1246665600000, 33.8],
[1246752000000, 31.4],
[1246838400000, 31.3],
[1246924800000, 38.3],
[1247011200000, 35.4],
[1247097600000, 36.4],
[1247184000000, 47.7],
[1247270400000, 47.5],
[1247356800000, 37.6],
[1247443200000, 47.7],
[1247529600000, 46.8],
[1247616000000, 47.7],
[1247702400000, 46.3],
[1247788800000, 47.8],
[1247875200000, 48.1],
[1247961600000, 57.2],
[1248048000000, 54.4],
[1248134400000, 53.7],
[1248220800000, 55.7],
[1248307200000, 54.6],
[1248393600000, 55.3],
[1248480000000, 45.3],
[1248566400000, 55.8],
[1248652800000, 65.2],
[1248739200000, 74.8],
[1248825600000, 44.4],
[1248912000000, 55],
[1248998400000, 43.6]
];
$('#container').highcharts({
title: {
text: null
},
xAxis: {
type: 'datetime'
},
yAxis: {
max:90,
min:20,
title: {
text: null
}
},
series: [{
name: 'RH',
data: averages,
zIndex: 1
}, {
data: rangesHI,
type: 'arearange',
lineWidth: 0,
fillColor: {
linearGradient: [0, 0, 0, 300],
stops: [
[0, 'rgba(255,0,0, 0.2)'],
[1, 'rgba(255,0,0, 1)']
]
},
zIndex: 0
}, {
data: rangesME,
type: 'arearange',
lineWidth: 0,
fillColor: {
linearGradient: [300, 0, 300, 400],
stops: [
[0, 'rgba(237,230,126, 0.2)'],
[1, 'rgba(237,230,126, 1)']
]
},
zIndex: 0
}, {
data: rangesNO,
type: 'arearange',
lineWidth: 0,
fillColor: {
linearGradient: [500, 0, 500, 600],
stops: [
[0, 'rgba(104,217,91, 0.2)'],
[1, 'rgba(104,217,91, 0.7)']
]
},
zIndex: 0
}, {
data: rangesLO,
type: 'arearange',
lineWidth: 0,
fillColor: {
linearGradient: [0, 0, 0, 220],
stops: [
[0, 'rgba(91,187,217, 0.2)'],
[1, 'rgba(91,187,217, 0.7)']
]
},
zIndex: 0
}]
}, function (chart) {
chart.renderer.text('EKSTREMALNA', 80, 95).css({
fontSize: '16pt',
color: 'rgba(255,0,0, 1)'
}).add();
chart.renderer.text('WYSOKA', 80, 145).css({
fontSize: '16pt',
color: 'rgba(237,230,126, 1)'
}).add();
chart.renderer.text('KOMFORTOWA', 80, 225).css({
fontSize: '16pt',
color: 'rgba(104,217,91, 01)'
}).add();
chart.renderer.text('NISKA', 80, 305).css({
fontSize: '16pt',
color: 'rgba(91,187,217, 1)'
}).add();
});
http://jsfiddle.net/qazopap4/1/ but this is far from what I'v expected.
I can't make linear gradient for each arearange separately.

You can use plotBands which allows you to apply gradients.
yAxis: {
plotBands: [{
from: 60,
to: 90,
color: {
linearGradient: [0, 0, 0, 300],
stops: [
[0, 'rgba(255,0,0, 0.2)'],
[1, 'rgba(255,0,0, 1)']
]
}
}],
max: 90,
min: 20,
title: {
text: null
}
},
Example: http://jsfiddle.net/pag5qgsm

Related

Particle.js Radial Gradient background to particles

i would like to use gradient backgrounds in particles, that is to say, I want the particles to each have a gradient of different colours with some shadows for depth and if at all its possible, i would like to animate the gradeients as well.
I am new to this library and am not sure if this is possible, Thanks!
i have made a simple canvas with circles bouncing around, thats all i have been able to achieve
{
"autoPlay": true,
"background": {
"color": {
"value": "#000"
},
"image": "",
"position": "",
"repeat": "",
"size": "",
"opacity": 1
},
"backgroundMask": {
"composite": "destination-out",
"cover": {
"color": {
"value": "#fff"
},
"opacity": 1
},
"enable": false
},
"defaultThemes": {},
"delay": 0,
"fullScreen": {
"enable": true,
"zIndex": -1
},
"detectRetina": true,
"duration": 0,
"fpsLimit": 120,
"interactivity": {
"detectsOn": "window",
"events": {
"onClick": {
"enable": false,
"mode": []
},
"onDiv": {
"selectors": [],
"enable": false,
"mode": [],
"type": "circle"
},
"onHover": {
"enable": false,
"mode": [],
"parallax": {
"enable": false,
"force": 2,
"smooth": 10
}
},
"resize": {
"delay": 0.5,
"enable": true
}
},
"modes": {
"attract": {
"distance": 200,
"duration": 0.4,
"easing": "ease-out-quad",
"factor": 1,
"maxSpeed": 50,
"speed": 1
},
"bounce": {
"distance": 200
},
"bubble": {
"distance": 200,
"duration": 0.4,
"mix": false,
"divs": {
"distance": 200,
"duration": 0.4,
"mix": false,
"selectors": []
}
},
"connect": {
"distance": 80,
"links": {
"opacity": 0.5
},
"radius": 60
},
"grab": {
"distance": 100,
"links": {
"blink": false,
"consent": false,
"opacity": 1
}
},
"push": {
"default": true,
"groups": [],
"quantity": 4
},
"remove": {
"quantity": 2
},
"repulse": {
"distance": 200,
"duration": 0.4,
"factor": 100,
"speed": 1,
"maxSpeed": 50,
"easing": "ease-out-quad",
"divs": {
"distance": 200,
"duration": 0.4,
"factor": 100,
"speed": 1,
"maxSpeed": 50,
"easing": "ease-out-quad",
"selectors": []
}
},
"slow": {
"factor": 3,
"radius": 200
},
"trail": {
"delay": 1,
"pauseOnStop": false,
"quantity": 1
},
"light": {
"area": {
"gradient": {
"start": {
"value": "#ffffff"
},
"stop": {
"value": "#000000"
}
},
"radius": 1000
},
"shadow": {
"color": {
"value": "#000000"
},
"length": 2000
}
}
}
},
"manualParticles": [],
"particles": {
"bounce": {
"horizontal": {
"random": {
"enable": false,
"minimumValue": 0.1
},
"value": 1
},
"vertical": {
"random": {
"enable": false,
"minimumValue": 0.1
},
"value": 1
}
},
"collisions": {
"absorb": {
"speed": 2
},
"bounce": {
"horizontal": {
"random": {
"enable": false,
"minimumValue": 1
},
"value": {
"min": 0.1,
"max": 10
}
},
"vertical": {
"random": {
"enable": false,
"minimumValue": 0.1
},
"value": {
"min": 0.1,
"max": 10
}
}
},
"enable": true,
"mode": "bounce",
"overlap": {
"enable": false,
"retries": 0
}
},
"color": {
"value": "#ff0000",
"animation": {
"h": {
"count": 0,
"enable": false,
"offset": 0,
"speed": 1,
"decay": 0,
"sync": true
},
"s": {
"count": 0,
"enable": false,
"offset": 0,
"speed": 1,
"decay": 0,
"sync": true
},
"l": {
"count": 0,
"enable": false,
"offset": 0,
"speed": 1,
"decay": 0,
"sync": true
}
}
},
"groups": {},
"move": {
"angle": {
"offset": 0,
"value": 90
},
"attract": {
"distance": 200,
"enable": false,
"rotate": {
"x": 3000,
"y": 3000
}
},
"center": {
"x": 50,
"y": 50,
"mode": "percent",
"radius": 0
},
"decay": 0,
"distance": {},
"direction": "none",
"drift": 0,
"enable": true,
"gravity": {
"acceleration": 9.81,
"enable": false,
"inverse": false,
"maxSpeed": 50
},
"path": {
"clamp": true,
"delay": {
"random": {
"enable": false,
"minimumValue": 0
},
"value": 0
},
"enable": false,
"options": {}
},
"outModes": {
"default": "bounce",
"bottom": "bounce",
"left": "bounce",
"right": "bounce",
"top": "bounce"
},
"random": true,
"size": true,
"speed": 8,
"spin": {
"acceleration": 0,
"enable": false
},
"straight": false,
"trail": {
"enable": true,
"length": 3,
"fillColor": {
"value": "#000000"
}
},
"vibrate": false,
"warp": false
},
"number": {
"density": {
"enable": false,
"area": 800,
"factor": 1000
},
"limit": 0,
"value": 14
},
"opacity": {
"random": {
"enable": false,
"minimumValue": 0.1
},
"value": 1,
"animation": {
"count": 0,
"enable": false,
"speed": 0.25,
"decay": 0,
"sync": false,
"destroy": "none",
"startValue": "random"
}
},
"reduceDuplicates": false,
"shadow": {
"blur": 4,
"color": {
"value": "#000"
},
"enable": true,
"offset": {
"x": 0,
"y": 0
}
},
"shape": {
"options": {},
"type": "circle"
},
"size": {
"random": {
"enable": false,
"minimumValue": 1
},
"value": 41,
"animation": {
"count": 0,
"enable": false,
"speed": 5,
"decay": 0,
"sync": false,
"destroy": "none",
"startValue": "random"
}
},
"stroke": {
"width": 0,
"color": {
"value": "#004cff",
"animation": {
"h": {
"count": 0,
"enable": false,
"offset": 0,
"speed": 1,
"decay": 0,
"sync": true
},
"s": {
"count": 0,
"enable": false,
"offset": 0,
"speed": 1,
"decay": 0,
"sync": true
},
"l": {
"count": 0,
"enable": false,
"offset": 0,
"speed": 1,
"decay": 0,
"sync": true
}
}
}
},
"zIndex": {
"random": {
"enable": false,
"minimumValue": 0
},
"value": 0,
"opacityRate": 1,
"sizeRate": 1,
"velocityRate": 1
},
"life": {
"count": 0,
"delay": {
"random": {
"enable": false,
"minimumValue": 0
},
"value": 0,
"sync": false
},
"duration": {
"random": {
"enable": false,
"minimumValue": 0.0001
},
"value": 0,
"sync": false
}
},
"rotate": {
"random": {
"enable": false,
"minimumValue": 0
},
"value": 0,
"animation": {
"enable": false,
"speed": 0,
"decay": 0,
"sync": false
},
"direction": "clockwise",
"path": false
},
"destroy": {
"bounds": {},
"mode": "none",
"split": {
"count": 1,
"factor": {
"random": {
"enable": false,
"minimumValue": 0
},
"value": 3
},
"rate": {
"random": {
"enable": false,
"minimumValue": 0
},
"value": {
"min": 4,
"max": 9
}
},
"sizeOffset": true,
"particles": {}
}
},
"roll": {
"darken": {
"enable": false,
"value": 0
},
"enable": false,
"enlighten": {
"enable": false,
"value": 0
},
"mode": "vertical",
"speed": 25
},
"tilt": {
"random": {
"enable": false,
"minimumValue": 0
},
"value": 0,
"animation": {
"enable": false,
"speed": 0,
"decay": 0,
"sync": false
},
"direction": "clockwise",
"enable": false
},
"twinkle": {
"lines": {
"enable": false,
"frequency": 0.05,
"opacity": 1
},
"particles": {
"enable": false,
"frequency": 0.05,
"opacity": 1
}
},
"wobble": {
"distance": 5,
"enable": false,
"speed": {
"angle": 50,
"move": 10
}
},
"orbit": {
"animation": {
"count": 0,
"enable": false,
"speed": 1,
"decay": 0,
"sync": false
},
"enable": false,
"opacity": 1,
"rotation": {
"random": {
"enable": false,
"minimumValue": 0
},
"value": 45
},
"width": 1
},
"links": {
"blink": false,
"color": {
"value": "#fff"
},
"consent": false,
"distance": 100,
"enable": false,
"frequency": 1,
"opacity": 1,
"shadow": {
"blur": 5,
"color": {
"value": "#000"
},
"enable": false
},
"triangles": {
"enable": false,
"frequency": 1
},
"width": 1,
"warp": false
},
"repulse": {
"random": {
"enable": false,
"minimumValue": 0
},
"value": 0,
"enabled": false,
"distance": 1,
"duration": 1,
"factor": 1,
"speed": 1
}
},
"pauseOnBlur": true,
"pauseOnOutsideViewport": true,
"responsive": [],
"smooth": false,
"style": {},
"themes": [],
"zLayers": 100,
"emitters": []
}

Stacked horizontal chart. How to trigger individual hover in the stacked element?

I am trying to show different tooltips for the data stacked in the horizontal bar.
Code from: https://thewebdev.info/2020/08/18/chart-js%E2%80%8A-%E2%80%8Astacked-bar-chart-and-radial-chart/
var ctx = document.getElementById('myChart').getContext('2d');
var stackedBar = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
],
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
}
}
});
When we hover on the bar, it shows the tooltip data of all stacks at once wherever we hover. But instead, I want a different tooltip on each element of the stack element. I shall really appreciate your help.
You can use the tooltipmode point for this.
Example:
var options = {
type: 'horizontalBar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'red'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
backgroundColor: 'blue'
}
]
},
options: {
tooltips: {
mode: 'point'
},
scales: {
yAxes: [{
stacked: true
}],
xAxes: [{
stacked: true
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>

Writing Box Packing Solution to txt or csv - R

I am using the BoxPacking package in R from here
Although I have manipulated it in many ways, the base is that I cannot export the solution to txt or preferably csv. I've tried converting to data frame or writing lines for txt as suggested here, but keep getting errors:
Error in as.data.frame.default(x[[i]], optional = TRUE) :
cannot coerce class "structure("Container", package = "BoxPacking")" to a data.frame
Is anyone familiar enough with this package to assist please?
Thanks
CSV seems like a bad choice for this since it's a nested structure. JSON wld be far more appropriate.
First, define some json serializers for the custom objects:
library(jsonlite)
setMethod(jsonlite:::asJSON, "Box", function(x, ...) {
jsonlite:::asJSON(
list(
Box =
list(
origin = x#origin,
length = unbox(x#length),
height = unbox(x#height),
width = unbox(x#width)
)
),
...
)
})
setMethod(jsonlite:::asJSON, "EMS", function(x, ...) {
jsonlite:::asJSON(
list(
EMS = list(
origin = x#origin,
length = unbox(x#length),
height = unbox(x#height),
width = unbox(x#width)
)
),
...
)
})
setMethod(jsonlite:::asJSON, "Container", function(x, ...) {
jsonlite:::asJSON(
list(
Container =
list(
origin = x#origin,
length = unbox(x#length),
height = unbox(x#height),
width = unbox(x#width),
ems = x#ems
)
),
...
)
})
then, just call jsonlite::toJSON() on the object:
[
[
{
"Container": {
"origin": [0, 0, 0],
"length": 2,
"height": 2,
"width": 2,
"ems": [
{
"EMS": {
"origin": [0, 0, 0],
"length": 2,
"height": 2,
"width": 2
}
}
]
}
}
],
[
{
"Container": {
"origin": [0, 0, 0],
"length": 2,
"height": 2,
"width": 2,
"ems": [
{
"EMS": {
"origin": [0, 0, 0],
"length": 2,
"height": 2,
"width": 2
}
}
]
}
}
],
[
{
"Container": {
"origin": [0, 0, 0],
"length": 2,
"height": 2,
"width": 2,
"ems": [
{
"EMS": {
"origin": [0, 0, 0],
"length": 2,
"height": 2,
"width": 2
}
}
]
}
}
],
[
{
"Container": {
"origin": [0, 0, 0],
"length": 2,
"height": 2,
"width": 2,
"ems": [
{
"EMS": {
"origin": [0, 1.9, 0],
"length": 2,
"height": 0.1,
"width": 2
}
},
{
"EMS": {
"origin": [0, 0, 1.9],
"length": 2,
"height": 2,
"width": 0.1
}
},
{
"EMS": {
"origin": [1.4, 0.9, 0],
"length": 0.6,
"height": 1.1,
"width": 0.4
}
},
{
"EMS": {
"origin": [0.4, 0.9, 0.4],
"length": 0.1,
"height": 0.5,
"width": 1.6
}
},
{
"EMS": {
"origin": [0, 1.8, 0],
"length": 0.4,
"height": 0.2,
"width": 0.4
}
},
{
"EMS": {
"origin": [0, 1.4, 1.5],
"length": 2,
"height": 0.6,
"width": 0.5
}
},
{
"EMS": {
"origin": [0, 1, 1.4],
"length": 0.4,
"height": 1,
"width": 0.6
}
},
{
"EMS": {
"origin": [0, 1, 1.5],
"length": 0.5,
"height": 1,
"width": 0.5
}
},
{
"EMS": {
"origin": [0, 1, 1.4],
"length": 0.5,
"height": 0.4,
"width": 0.6
}
},
{
"EMS": {
"origin": [0.9, 1.4, 0],
"length": 1.1,
"height": 0.6,
"width": 0.5
}
},
{
"EMS": {
"origin": [1.4, 1.4, 0],
"length": 0.6,
"height": 0.6,
"width": 2
}
},
{
"EMS": {
"origin": [1.5, 1.3, 0],
"length": 0.5,
"height": 0.7,
"width": 2
}
},
{
"EMS": {
"origin": [1, 1.3, 1.5],
"length": 1,
"height": 0.7,
"width": 0.5
}
},
{
"EMS": {
"origin": [1, 0, 1.4],
"length": 1,
"height": 0.9,
"width": 0.6
}
},
{
"EMS": {
"origin": [1.4, 1.3, 0.9],
"length": 0.6,
"height": 0.7,
"width": 1.1
}
},
{
"EMS": {
"origin": [1, 1.3, 0.9],
"length": 1,
"height": 0.1,
"width": 1.1
}
},
{
"EMS": {
"origin": [1.4, 0, 0.8],
"length": 0.6,
"height": 0.4,
"width": 0.1
}
},
{
"EMS": {
"origin": [1.5, 0, 0],
"length": 0.5,
"height": 2,
"width": 0.4
}
},
{
"EMS": {
"origin": [1.8, 0, 0],
"length": 0.2,
"height": 2,
"width": 0.9
}
},
{
"EMS": {
"origin": [1.5, 0, 0.8],
"length": 0.5,
"height": 2,
"width": 0.1
}
},
{
"EMS": {
"origin": [1.5, 0.4, 0],
"length": 0.5,
"height": 1.6,
"width": 0.9
}
},
{
"EMS": {
"origin": [1.8, 0, 0],
"length": 0.2,
"height": 0.5,
"width": 2
}
},
{
"EMS": {
"origin": [1.5, 0, 0.8],
"length": 0.5,
"height": 0.5,
"width": 1.2
}
},
{
"EMS": {
"origin": [1.5, 0.4, 0],
"length": 0.5,
"height": 0.1,
"width": 2
}
},
{
"EMS": {
"origin": [0.8, 0, 1.4],
"length": 1.2,
"height": 0.4,
"width": 0.6
}
},
{
"EMS": {
"origin": [0.4, 0, 1.8],
"length": 1.6,
"height": 0.4,
"width": 0.2
}
},
{
"EMS": {
"origin": [0.4, 0, 1.8],
"length": 0.1,
"height": 2,
"width": 0.2
}
},
{
"EMS": {
"origin": [0.4, 0.4, 1.5],
"length": 0.1,
"height": 1.6,
"width": 0.5
}
},
{
"EMS": {
"origin": [0.4, 0.4, 1.4],
"length": 0.1,
"height": 1,
"width": 0.6
}
}
]
}
},
{
"Box": {
"origin": [0, 0, 0],
"length": 1,
"height": 1,
"width": 0.4
}
},
{
"Box": {
"origin": [0, 0, 0.4],
"length": 1,
"height": 0.4,
"width": 1
}
},
{
"Box": {
"origin": [0, 0.4, 0.4],
"length": 0.5,
"height": 0.5,
"width": 1
}
},
{
"Box": {
"origin": [0.5, 0.4, 0.4],
"length": 1,
"height": 1,
"width": 0.5
}
},
{
"Box": {
"origin": [0, 0.9, 0.4],
"length": 0.4,
"height": 1,
"width": 1
}
},
{
"Box": {
"origin": [0.5, 0.4, 0.9],
"length": 0.5,
"height": 1,
"width": 1
}
},
{
"Box": {
"origin": [1, 0, 0],
"length": 0.5,
"height": 0.4,
"width": 0.4
}
},
{
"Box": {
"origin": [1, 0, 0.9],
"length": 0.5,
"height": 0.5,
"width": 0.5
}
},
{
"Box": {
"origin": [0, 1, 0],
"length": 1,
"height": 0.4,
"width": 0.4
}
},
{
"Box": {
"origin": [1, 0.4, 0],
"length": 0.5,
"height": 0.5,
"width": 0.4
}
},
{
"Box": {
"origin": [1, 0, 0.4],
"length": 0.4,
"height": 0.4,
"width": 0.5
}
},
{
"Box": {
"origin": [0, 0, 1.4],
"length": 0.4,
"height": 1,
"width": 0.5
}
},
{
"Box": {
"origin": [1, 0.9, 0],
"length": 0.4,
"height": 0.5,
"width": 0.4
}
},
{
"Box": {
"origin": [1, 0.5, 0.9],
"length": 1,
"height": 0.4,
"width": 0.5
}
},
{
"Box": {
"origin": [0, 1.4, 0],
"length": 0.4,
"height": 0.4,
"width": 0.4
}
},
{
"Box": {
"origin": [0.4, 1.4, 0],
"length": 0.5,
"height": 0.5,
"width": 0.5
}
},
{
"Box": {
"origin": [0.4, 1.4, 0.5],
"length": 1,
"height": 0.5,
"width": 1
}
},
{
"Box": {
"origin": [1, 0.9, 0.9],
"length": 1,
"height": 0.4,
"width": 1
}
},
{
"Box": {
"origin": [1.4, 0, 0.4],
"length": 0.4,
"height": 0.4,
"width": 0.4
}
},
{
"Box": {
"origin": [0.4, 0, 1.4],
"length": 0.4,
"height": 0.4,
"width": 0.4
}
}
]
]

How to prevent first/last bars from being cut off in a chart with time scale

How do I prevent the first and last bars from being cut off (showing half)?
I need to show the short month names on the x-axis. I've tried playing around with various min/max settings, but I can't seem to get it right.
var graphData = {
dates: [
'2016-06-01',
'2016-07-01',
'2016-08-01',
'2016-09-01',
'2016-10-01',
'2016-11-01',
'2016-12-01',
'2017-01-01',
'2017-02-01',
'2017-03-01',
'2017-04-01',
'2017-05-01'
],
wins: [23, 5, 13, 24, 8, 11, 23, 5, 13, 24, 8, 11],
draws: [2, 1, 2, 0, 2, 2, 3, 1, 2, 4, 0, 1],
losses: [3, 1, 2, 10, 8, 8, 3, 1, 2, 10, 8, 8],
winRates: [50, 40, 72, 30, 46, 80, 50, 40, 72, 30, 46, 80]
};
var winsMax = Math.max.apply(Math, graphData.wins);
var lossesMax = Math.max.apply(Math, graphData.losses);
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: "bar",
data: {
labels: graphData.dates.map((date) => moment(date)),
datasets: [
{
type: "bar",
backgroundColor: "green",
hoverBackgroundColor: "green",
data: graphData.wins,
yAxisID: "winsAndLosses"
},
{
type: "bar",
backgroundColor: "red",
hoverBackgroundColor: "red",
data: graphData.losses.map((i) => -i),
yAxisID: "winsAndLosses"
},
{
type: "line",
data: graphData.winRates,
fill: true,
backgroundColor: "gray",
pointRadius: 0,
pointHoverRadius: 0,
yAxisID: "winRate"
}
]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
type: "time",
time: {
unit: "month",
displayFormats: {
month: "MMM"
}
},
stacked: true,
gridLines: {
display: false
},
ticks: {
callback: (label) => label.toUpperCase(),
fontSize: 10
}
}],
yAxes: [
{
id: "winsAndLosses",
stacked: true,
ticks: {
min: (lossesMax + 10) * -1,
max: winsMax + 10,
callback: (label) => Math.abs(label) // TODO: Localization (number formatting).
},
display: false
},
{
id: "winRate",
ticks: {
min: 0,
max: 100,
stepSize: 10,
callback: (label) => label + "%", // TODO: Localization (number formatting).
fontSize: 10
}
}
]
}
}
});
.myChartDiv {
max-width: 800px;
max-height: 400px;
}
<script src="https://npmcdn.com/chart.js#latest/dist/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="800" height="400"></canvas>
</div>
</body>
</html>
There's a setting called offset which seems to work for me:
xAxes: [{
offset: true
}]
var graphData = {
dates: [
'2016-06-01',
'2016-07-01',
'2016-08-01',
'2016-09-01',
'2016-10-01',
'2016-11-01',
'2016-12-01',
'2017-01-01',
'2017-02-01',
'2017-03-01',
'2017-04-01',
'2017-05-01'
],
wins: [23, 5, 13, 24, 8, 11, 23, 5, 13, 24, 8, 11],
draws: [2, 1, 2, 0, 2, 2, 3, 1, 2, 4, 0, 1],
losses: [3, 1, 2, 10, 8, 8, 3, 1, 2, 10, 8, 8],
winRates: [50, 40, 72, 30, 46, 80, 50, 40, 72, 30, 46, 80]
};
var winsMax = Math.max.apply(Math, graphData.wins);
var lossesMax = Math.max.apply(Math, graphData.losses);
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: "bar",
data: {
labels: graphData.dates.map((date) => moment(date)),
datasets: [
{
type: "bar",
backgroundColor: "green",
hoverBackgroundColor: "green",
data: graphData.wins,
yAxisID: "winsAndLosses"
},
{
type: "bar",
backgroundColor: "red",
hoverBackgroundColor: "red",
data: graphData.losses.map((i) => -i),
yAxisID: "winsAndLosses"
},
{
type: "line",
data: graphData.winRates,
fill: true,
backgroundColor: "gray",
pointRadius: 0,
pointHoverRadius: 0,
yAxisID: "winRate"
}
]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
type: "time",
time: {
unit: "month",
displayFormats: {
month: "MMM"
}
},
stacked: true,
gridLines: {
display: false
},
ticks: {
callback: (label) => label.toUpperCase(),
fontSize: 10
},
offset:true
}],
yAxes: [
{
id: "winsAndLosses",
stacked: true,
ticks: {
min: (lossesMax + 10) * -1,
max: winsMax + 10,
callback: (label) => Math.abs(label) // TODO: Localization (number formatting).
},
display: false
},
{
id: "winRate",
ticks: {
min: 0,
max: 100,
stepSize: 10,
callback: (label) => label + "%", // TODO: Localization (number formatting).
fontSize: 10
}
}
]
}
}
});
.myChartDiv {
max-width: 800px;
max-height: 400px;
}
<script src="https://npmcdn.com/chart.js#latest/dist/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="800" height="400"></canvas>
</div>
</body>
</html>

How do I draw line after receiving data - Route from GPS Trace

I just started using Here Maps. Before I used Google Direction, I want to try use 'Here Maps' API. This is example JSON result. After I got this result, How do I implement this into Polyline or Direction (MAP Here)? Thanks
{
RouteLinks: [
{
linkId: 25664478,
functionalClass: 5,
shape: "51.1017723 0.3934907 51.1018066 0.3933491 51.1018295 0.39326",
linkLength: 15.575699313408467
},
{
linkId: 25664473,
functionalClass: 4,
shape: "51.1018295 0.39326 51.1022491 0.39348",
linkLength: 44.17562556306323
},
{
linkId: 25664459,
functionalClass: 4,
shape: "51.1022491 0.39348 51.1022987 0.39351",
linkLength: 5.305684979980019
},
{
linkId: 781742854,
functionalClass: 4,
shape: "51.1022987 0.39351 51.1025505 0.39365",
linkLength: 26.670487136749067
},
{
linkId: 781742855,
functionalClass: 4,
shape: "51.1025505 0.39365 51.1027794 0.39378",
linkLength: 24.302012297623005
},
{
linkId: 25664450,
functionalClass: 4,
shape: "51.1027794 0.39378 51.1030807 0.39403",
linkLength: 33.974229462422905
},
{
linkId: 25664444,
functionalClass: 4,
shape: "51.1030807 0.39403 51.103241 0.39413",
linkLength: 17.215963662407898
},
{
linkId: 25664440,
functionalClass: 4,
shape: "51.103241 0.39413 51.1033783 0.39421 51.1035385 0.39433 51.1036797 0.39445",
linkLength: 48.32839625333388
},
{
linkId: 25664427,
functionalClass: 4,
shape: "51.1036797 0.39445 51.1038017 0.39454",
linkLength: 13.445306290244636
},
{
linkId: 860272608,
functionalClass: 4,
shape: "51.1038017 0.39454 51.1039391 0.39465",
linkLength: 15.378381014646559
},
{
linkId: 860272609,
functionalClass: 4,
shape: "51.1039391 0.39465 51.1041908 0.39484",
linkLength: 27.85427285471891
},
{
linkId: 781742870,
functionalClass: 4,
shape: "51.1041908 0.39484 51.1043282 0.39494 51.1045609 0.39506",
linkLength: 39.56626207722863
},
{
linkId: 781742871,
functionalClass: 4,
shape: "51.1045609 0.39506 51.1047287 0.39515 51.1050262 0.3953021",
linkLength: 48.951382959921716
}
],
TracePoints: [
{
confidenceValue: 1, linkIdMatched: 25664478, matchDistance: 1.46,
routeLinkSeqNrMatched: 0, lat: 51.10177, lon: 0.39349,
elevation: 0, speedMps: 0, headingDegreeNorthClockwise: 10000,
latMatched: 51.10178065190155, lonMatched: 0.3934977183445852,
timestamp: 0, headingMatched: 114.46568884011239,
minError: 1.3027890756593314
},
{
confidenceValue: 1, linkIdMatched: 25664478, matchDistance: 1.57,
routeLinkSeqNrMatched: 0, lat: 51.10181, lon: 0.39335,
elevation: 0, speedMps: 0, headingDegreeNorthClockwise: 10000,
latMatched: 51.10182, lonMatched: 0.39336,
timestamp: 0, headingMatched: -65.53429247174023,
minError: 1000000
},
{
confidenceValue: 1, linkIdMatched: 781742854, matchDistance: 1,
routeLinkSeqNrMatched: 4, lat: 51.10255, lon: 0.39366,
elevation: 0, speedMps: 0, headingDegreeNorthClockwise: 10000,
latMatched: 51.102547928304084, lonMatched: 0.3936687569824506,
timestamp: 0, headingMatched: 20.644254301899522,
minError: 0.6541474931313044
},
{
confidenceValue: 1, linkIdMatched: 860272608, matchDistance: 4.59,
routeLinkSeqNrMatched: 10, lat: 51.10398, lon: 0.39466,
elevation: 0, speedMps: 0, headingDegreeNorthClockwise: 10000,
latMatched: 51.10394, lonMatched: 0.39465,
timestamp: 0, headingMatched: 25.217234923243595,
minError: 1.2405405512432781
},
{
confidenceValue: 1, linkIdMatched: 1022687693, matchDistance: 1.33,
routeLinkSeqNrMatched: 14, lat: 51.10501, lon: 0.39533,
elevation: 0, speedMps: 0, headingDegreeNorthClockwise: 10000,
latMatched: 51.105012239590245, lonMatched: 0.39531827230152644,
timestamp: 0, headingMatched: 16.91643828307876,
minError: 0.8568378930601925
}
],
Warnings: [
{
"tracePointSeqNum": -1,
"routeLinkSeqNum": 3,
"category": 3,
"text": "Entering link 781742854 into forbidden driving direction"
}
],
MapVersion: "2013Q4" }
*linkId,shape is like that trip points which is given by Heremap api step1.
You just draw route by polyline function.
addPolylineToMap(map,linkId);
function addPolylineToMap(map,linkId) {
for (j = 0; j < (shape.length - 1); j = j + 2) {
var strip = new H.geo.Strip();
strip.pushPoint({lat: shape[j],lng: shape[j+1]});
}
}

Resources