mortgage calculator using highchart

mortgage calculator using highchart - javascript

I want to create a high chart as bankrate.com created
In it, I would like to show principal, balance and interest. It would be shown according to year.
I have tried to create it but I am unable to group years according to above example:
$(function () {
$('#container').highcharts(
{"chart":{"type":"area"},
"xAxis":{
"dateTimeLabelFormats":{"year":"%Y"},
"type":"datetime",
labels: {
formatter: function() {
return Highcharts.dateFormat('%Y', this.value);
}
},
tickPositions: [
Date.UTC(2012, 02, 30),
Date.UTC(2015, 02, 30),
Date.UTC(2019, 02, 30),
Date.UTC(2019, 02, 1),
Date.UTC(2021, 06, 4),
Date.UTC(2021, 03, 7),
Date.UTC(2021, 07, 5),
]
},
"series":[
{
pointInterval: 24 * 3600 * 1000,
"data":[
{"x":Date.UTC(2012, 02, 30),"y":1998.0},{"x":Date.UTC(2019, 02, 30),"y":22417.0},{"x":Date.UTC(2015, 02, 30),"y":358.0},{"x":Date.UTC(2019, 02, 1),"y":358.0},
{"x":Date.UTC(2021, 06, 4),"y":1158.0},
{"x":Date.UTC(2021, 03, 7),"y":2258.0},
{"x":Date.UTC(2021, 07, 5),"y":45358.0}]}]}
);
});

I have corrected your code and made an example for you below. Your main issue was that you are formatting the tick positions to the same as your points. And since some of your points were very close together, the ticks would be on top of each other.
I have also taken the liberty to do some changes to your data so that it looks nicer.
In the example I made two series, and I changed the bar scaling to show 2010, 2020 and 2030 as per your example. This was done with the following code:
min: Date.UTC(2010, 01, 01),
max: Date.UTC(2030, 01, 01),
tickPositions: [
Date.UTC(2010, 01, 01),
Date.UTC(2020, 01, 01),
Date.UTC(2030, 01, 01)
]
That is, setting min and max so that the ticks are included, and specifying a tick per decade.
Full example here:
var chart = Highcharts.chart('container', {
chart: {
"type": "area"
},
xAxis: {
"dateTimeLabelFormats": {
"year": "%Y"
},
"type": "datetime",
labels: {
formatter: function() {
return Highcharts.dateFormat('%Y', this.value);
}
},
min: Date.UTC(2010, 01, 01),
max: Date.UTC(2030, 01, 01),
tickPositions: [
Date.UTC(2010, 01, 01),
Date.UTC(2020, 01, 01),
Date.UTC(2030, 01, 01)
]
},
series: [{
name: 'Series1',
pointInterval: 24 * 3600 * 1000,
"data": [{
"x": Date.UTC(2012, 02, 30),
"y": 1998.0
}, {
"x": Date.UTC(2015, 02, 30),
"y": 358.0
}, {
"x": Date.UTC(2019, 02, 1),
"y": 358.0
}, {
"x": Date.UTC(2019, 02, 30),
"y": 22417.0
}, {
"x": Date.UTC(2021, 03, 7),
"y": 2258.0
}, {
"x": Date.UTC(2021, 06, 4),
"y": 1158.0
}, {
"x": Date.UTC(2025, 07, 5),
"y": 45358.0
}]
},
{
name: 'Series2',
pointInterval: 24 * 3600 * 1000,
"data": [{
"x": Date.UTC(2012, 02, 30),
"y": 5.0
}, {
"x": Date.UTC(2015, 02, 30),
"y": 2555.0
}, {
"x": Date.UTC(2019, 02, 1),
"y": 2777.0
}, {
"x": Date.UTC(2019, 02, 30),
"y": 26.0
}, {
"x": Date.UTC(2021, 03, 7),
"y": 25000.0
}, {
"x": Date.UTC(2021, 06, 4),
"y": 21000.0
}, {
"x": Date.UTC(2025, 07, 5),
"y": 30000.0
}]
}
]
});
<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" style="height: 400px"></div>

I have prepared a similar example to what is presented on a provided image. Hope it helps.
API Reference:
http://api.highcharts.com/highcharts/legend
Example:
http://jsfiddle.net/760qfdm0/

Related

Group Data by month and week according to count and filter in chart.js

I have the following data set and I am using chart.js
<script>
let chart = new Chart(mychart, {
type:'line',
data: {
datasets: [{
label: 'Issues',
fill: false,
backgroundColor: 'rgba(255,0,255,0.4)',
borderColor: 'rgba(255,0,255,0.4)',
data: [{
x: new Date(2018, 4, 1),
y: 20
}, {
x: new Date(2018, 10, 3),
y: 17
},{
x: new Date(2019, 0, 1),
y: 20
}, {
x: new Date(2019, 0, 3),
y: 17
},{
x: new Date(2019, 2, 7),
y: 17
}, {
x: new Date(2020, 1, 1),
y: 20
}, {
x: new Date(2020, 3, 3),
y: 17
}, {
x: new Date(2020, 4, 1),
y: 20
}, {
x: new Date(2020, 5, 3),
y: 17
}, {
x: new Date(2020, 7, 1),
y: 20
}, {
x: new Date(2020, 9, 3),
y: 17
}, {
x: new Date(2020, 10, 5),
y: 28
}, {
x: new Date(2020, 11, 4),
y: 11
}]
}],
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'month',
unitStepSize: 1,
distributions: 'series',
displayFormats: {
'day': 'DD/MM/YYYY'
}
}
}]
}
}
})
The chart currently look like this:
What I want is whenever user selects the filter either month or week from the drop down the above data should be grouped accordingly to the count for week or month in the chart.
For example we have total 20 + 17 entries for January 2019 but they are coming as separate points what I want is it should be shown like 37 for January 2019.

Mouse behavior buggy?

I have a problem with this highcharts fiddle.
$(function() {
$('#container').highcharts({
lang: {
"noData": "no Data from 01.07.2016 until 01.08.2016"
},
"title": {
"text": ""
},
"series": [{
"zIndex": 10,
"color": "#2f7ed8",
"name": "Series 1",
"stickyTracking": false,
"marker": {
"symbol": "square",
"radius": 5
},
"lineWidth": 0,
"data": [{
"y": 291.0,
"x": Date.UTC(2015, 11, 10, 10, 45, 0),
}, {
"y": 156.0,
"x": Date.UTC(2015, 11, 10, 13, 0, 0),
}, {
"y": 215.0,
"x": Date.UTC(2015, 11, 10, 16, 30, 0),
}, {
"y": 212.0,
"x": Date.UTC(2015, 11, 10, 18, 45, 0),
}, {
"y": 232.0,
"x": Date.UTC(2015, 11, 10, 21, 15, 0),
}, {
"y": 73.0,
"x": Date.UTC(2015, 11, 10, 23, 15, 0),
}, {
"y": 112.0,
"x": Date.UTC(2015, 11, 11, 7, 30, 0),
}, {
"y": 264.0,
"x": Date.UTC(2015, 11, 11, 9, 30, 0),
}, {
"y": 152.0,
"x": Date.UTC(2015, 11, 11, 11, 15, 0),
}, {
"y": 138.0,
"x": Date.UTC(2015, 11, 11, 12, 0, 0),
}, {
"y": 133.0,
"x": Date.UTC(2015, 11, 11, 14, 30, 0),
}, {
"y": 272.0,
"x": Date.UTC(2015, 11, 11, 16, 30, 0),
}, {
"y": 106.0,
"x": Date.UTC(2015, 11, 11, 20, 15, 0),
}, {
"y": 239.0,
"x": Date.UTC(2015, 11, 11, 22, 45, 0),
}, {
"y": 220.0,
"x": Date.UTC(2015, 11, 11, 23, 45, 0),
}, {
"y": 257.0,
"x": Date.UTC(2015, 11, 12, 8, 45, 0),
}, {
"y": 140.0,
"x": Date.UTC(2015, 11, 12, 10, 45, 0),
}, {
"y": 86.0,
"x": Date.UTC(2015, 11, 12, 12, 0, 0),
}, {
"y": 96.0,
"x": Date.UTC(2015, 11, 12, 13, 45, 0),
}, {
"y": 230.0,
"x": Date.UTC(2015, 11, 12, 16, 0, 0),
}, {
"y": 262.0,
"x": Date.UTC(2015, 11, 12, 18, 30, 0),
}, {
"y": 133.0,
"x": Date.UTC(2015, 11, 12, 20, 15, 0),
}, {
"y": 167.0,
"x": Date.UTC(2015, 11, 12, 22, 0, 0),
}, {
"y": 59.0,
"x": Date.UTC(2015, 11, 13, 7, 45, 0),
}, {
"y": 207.0,
"x": Date.UTC(2015, 11, 13, 10, 15, 0),
}, {
"y": 133.0,
"x": Date.UTC(2015, 11, 13, 12, 0, 0),
}, {
"y": 127.0,
"x": Date.UTC(2015, 11, 13, 19, 45, 0),
}, {
"y": 207.0,
"x": Date.UTC(2015, 11, 13, 21, 15, 0),
}, {
"y": 88.0,
"x": Date.UTC(2015, 11, 14, 8, 15, 0),
}, {
"y": 161.0,
"x": Date.UTC(2015, 11, 14, 11, 0, 0),
}, {
"y": 142.0,
"x": Date.UTC(2015, 11, 14, 13, 30, 0),
}, {
"y": 155.0,
"x": Date.UTC(2015, 11, 14, 15, 45, 0),
}, {
"y": 197.0,
"x": Date.UTC(2015, 11, 14, 18, 45, 0),
}, {
"y": 310.0,
"x": Date.UTC(2015, 11, 14, 22, 15, 0),
}, {
"y": 89.0,
"x": Date.UTC(2015, 11, 15, 0, 15, 0),
}, {
"y": 182.0,
"x": Date.UTC(2015, 11, 15, 8, 15, 0),
}, {
"y": 96.0,
"x": Date.UTC(2015, 11, 15, 11, 30, 0),
}, {
"y": 70.0,
"x": Date.UTC(2015, 11, 15, 13, 0, 0),
}, {
"y": 111.0,
"x": Date.UTC(2015, 11, 15, 14, 30, 0),
}, {
"y": 233.0,
"x": Date.UTC(2015, 11, 15, 16, 0, 0),
}, {
"y": 191.0,
"x": Date.UTC(2015, 11, 15, 17, 45, 0),
}, {
"y": 162.0,
"x": Date.UTC(2015, 11, 15, 21, 15, 0),
}, {
"y": 248.0,
"x": Date.UTC(2015, 11, 16, 9, 15, 0),
}, {
"y": 77.0,
"x": Date.UTC(2015, 11, 16, 11, 0, 0),
}, {
"y": 94.0,
"x": Date.UTC(2015, 11, 16, 13, 15, 0),
}, {
"y": 100.0,
"x": Date.UTC(2015, 11, 16, 16, 15, 0),
}, {
"y": 101.0,
"x": Date.UTC(2015, 11, 16, 18, 15, 0),
}, {
"y": 154.0,
"x": Date.UTC(2015, 11, 16, 21, 30, 0),
}, {
"y": 162.0,
"x": Date.UTC(2015, 11, 17, 0, 15, 0),
}, {
"y": 132.0,
"x": Date.UTC(2015, 11, 17, 11, 15, 0),
}, {
"y": 151.0,
"x": Date.UTC(2015, 11, 17, 15, 30, 0),
}, {
"y": 144.0,
"x": Date.UTC(2015, 11, 17, 18, 30, 0),
}, {
"y": 84.0,
"x": Date.UTC(2015, 11, 17, 21, 30, 0),
}, {
"y": 136.0,
"x": Date.UTC(2015, 11, 17, 23, 15, 0),
}, {
"y": 55.0,
"x": Date.UTC(2015, 11, 18, 4, 45, 0),
}, {
"y": 131.0,
"x": Date.UTC(2015, 11, 18, 6, 0, 0),
}, {
"y": 182.0,
"x": Date.UTC(2015, 11, 18, 10, 15, 0),
}, {
"y": 203.0,
"x": Date.UTC(2015, 11, 18, 12, 15, 0),
}, {
"y": 332.0,
"x": Date.UTC(2015, 11, 18, 15, 0, 0),
}, {
"y": 177.0,
"x": Date.UTC(2015, 11, 18, 21, 0, 0),
}, {
"y": 85.0,
"x": Date.UTC(2015, 11, 18, 23, 30, 0),
}, {
"y": 63.0,
"x": Date.UTC(2015, 11, 19, 9, 0, 0),
}, {
"y": 189.0,
"x": Date.UTC(2015, 11, 19, 10, 30, 0),
}, {
"y": 170.0,
"x": Date.UTC(2015, 11, 19, 11, 15, 0),
}, {
"y": 175.0,
"x": Date.UTC(2015, 11, 19, 15, 15, 0),
}, {
"y": 204.0,
"x": Date.UTC(2015, 11, 19, 17, 30, 0),
}, {
"y": 169.0,
"x": Date.UTC(2015, 11, 19, 18, 45, 0),
}, {
"y": 115.0,
"x": Date.UTC(2015, 11, 19, 21, 45, 0),
}, {
"y": 117.0,
"x": Date.UTC(2015, 11, 20, 8, 15, 0),
}, {
"y": 83.0,
"x": Date.UTC(2015, 11, 20, 10, 0, 0),
}, {
"y": 49.0,
"x": Date.UTC(2015, 11, 20, 11, 30, 0),
}, {
"y": 195.0,
"x": Date.UTC(2015, 11, 20, 15, 15, 0),
}, {
"y": 273.0,
"x": Date.UTC(2015, 11, 20, 17, 30, 0),
}, {
"y": 227.0,
"x": Date.UTC(2015, 11, 20, 19, 45, 0),
}, {
"y": 243.0,
"x": Date.UTC(2015, 11, 20, 22, 0, 0),
}, {
"y": 190.0,
"x": Date.UTC(2015, 11, 20, 23, 15, 0),
}, {
"y": 170.0,
"x": Date.UTC(2015, 11, 21, 0, 15, 0),
}, {
"y": 86.0,
"x": Date.UTC(2015, 11, 21, 8, 15, 0),
}, {
"y": 311.0,
"x": Date.UTC(2015, 11, 21, 10, 45, 0),
}, {
"y": 244.0,
"x": Date.UTC(2015, 11, 21, 11, 45, 0),
}, {
"y": 129.0,
"x": Date.UTC(2015, 11, 21, 13, 30, 0),
}, {
"y": 119.0,
"x": Date.UTC(2015, 11, 21, 15, 30, 0),
}, {
"y": 125.0,
"x": Date.UTC(2015, 11, 21, 19, 30, 0),
}, {
"y": 206.0,
"x": Date.UTC(2015, 11, 21, 21, 0, 0),
}, {
"y": 230.0,
"x": Date.UTC(2015, 11, 21, 23, 45, 0),
}, {
"y": 229.0,
"x": Date.UTC(2015, 11, 22, 0, 15, 0),
}, {
"y": 137.0,
"x": Date.UTC(2015, 11, 22, 8, 30, 0),
}, {
"y": 118.0,
"x": Date.UTC(2015, 11, 22, 10, 30, 0),
}, {
"y": 57.0,
"x": Date.UTC(2015, 11, 22, 13, 15, 0),
}, {
"y": 211.0,
"x": Date.UTC(2015, 11, 22, 15, 15, 0),
}, {
"y": 88.0,
"x": Date.UTC(2015, 11, 22, 19, 15, 0),
}, {
"y": 290.0,
"x": Date.UTC(2015, 11, 22, 22, 30, 0),
},{
"y": 268.0,
"x": Date.UTC(2015, 11, 25, 20, 0, 0),
}, {
"y": 297.0,
"x": Date.UTC(2015, 11, 25, 21, 0, 0),
}, {
"y": 265.0,
"x": Date.UTC(2015, 11, 25, 22, 15, 0),
}, {
"y": 236.0,
"x": Date.UTC(2015, 11, 26, 8, 15, 0),
}, {
"y": 249.0,
"x": Date.UTC(2015, 11, 26, 10, 0, 0),
}, {
"y": 181.0,
"x": Date.UTC(2015, 11, 26, 11, 15, 0),
}, {
"y": 250.0,
"x": Date.UTC(2015, 11, 26, 12, 0, 0),
}, {
"y": 241.0,
"x": Date.UTC(2015, 11, 26, 15, 30, 0),
}, {
"y": 270.0,
"x": Date.UTC(2015, 11, 26, 17, 30, 0),
}, {
"y": 225.0,
"x": Date.UTC(2015, 11, 26, 18, 30, 0),
}, {
"y": 146.0,
"x": Date.UTC(2015, 11, 26, 20, 0, 0),
}, {
"y": 143.0,
"x": Date.UTC(2015, 11, 26, 21, 15, 0),
}, {
"y": 88.0,
"x": Date.UTC(2015, 11, 26, 22, 45, 0),
}, {
"y": 98.0,
"x": Date.UTC(2015, 11, 27, 0, 0, 0),
}, {
"y": 144.0,
"x": Date.UTC(2015, 11, 27, 8, 0, 0),
}, {
"y": 295.0,
"x": Date.UTC(2015, 11, 27, 10, 15, 0),
}, {
"y": 256.0,
"x": Date.UTC(2015, 11, 27, 11, 15, 0),
}, {
"y": 214.0,
"x": Date.UTC(2015, 11, 27, 16, 45, 0),
}, {
"y": 179.0,
"x": Date.UTC(2015, 11, 27, 19, 15, 0),
}, {
"y": 191.0,
"x": Date.UTC(2015, 11, 27, 21, 15, 0),
}, {
"y": 160.0,
"x": Date.UTC(2015, 11, 28, 0, 0, 0),
}, {
"y": 95.0,
"x": Date.UTC(2015, 11, 28, 9, 45, 0),
}, {
"y": 138.0,
"x": Date.UTC(2015, 11, 28, 12, 0, 0),
}, {
"y": 104.0,
"x": Date.UTC(2015, 11, 28, 13, 45, 0),
}, {
"y": 165.0,
"x": Date.UTC(2015, 11, 28, 17, 45, 0),
}, {
"y": 185.0,
"x": Date.UTC(2015, 11, 28, 18, 45, 0),
}, {
"y": 338.0,
"x": Date.UTC(2015, 11, 28, 21, 30, 0),
}, {
"y": 286.0,
"x": Date.UTC(2015, 11, 28, 23, 15, 0),
}, {
"y": 131.0,
"x": Date.UTC(2015, 11, 29, 3, 15, 0),
}, {
"y": 98.0,
"x": Date.UTC(2015, 11, 29, 8, 30, 0),
}, {
"y": 205.0,
"x": Date.UTC(2015, 11, 29, 10, 30, 0),
}, {
"y": 130.0,
"x": Date.UTC(2015, 11, 29, 11, 45, 0),
}, {
"y": 80.0,
"x": Date.UTC(2015, 11, 29, 13, 30, 0),
}, {
"y": 246.0,
"x": Date.UTC(2015, 11, 29, 16, 30, 0),
}, {
"y": 183.0,
"x": Date.UTC(2015, 11, 29, 18, 45, 0),
}, {
"y": 199.0,
"x": Date.UTC(2015, 11, 29, 19, 45, 0),
}, {
"y": 219.0,
"x": Date.UTC(2015, 11, 29, 21, 30, 0),
}, {
"y": 318.0,
"x": Date.UTC(2015, 11, 29, 23, 45, 0),
}, {
"y": 156.0,
"x": Date.UTC(2015, 11, 30, 8, 45, 0),
}, {
"y": 73.0,
"x": Date.UTC(2015, 11, 30, 11, 0, 0),
}, {
"y": 98.0,
"x": Date.UTC(2015, 11, 30, 11, 45, 0),
}, {
"y": 105.0,
"x": Date.UTC(2015, 11, 30, 14, 30, 0),
}, {
"y": 194.0,
"x": Date.UTC(2015, 11, 30, 17, 45, 0),
}, {
"y": 183.0,
"x": Date.UTC(2015, 11, 30, 20, 15, 0),
}, {
"y": 289.0,
"x": Date.UTC(2015, 11, 30, 21, 15, 0),
}, {
"y": 350.0,
"x": Date.UTC(2015, 11, 31, 0, 15, 0),
}, {
"y": 242.0,
"x": Date.UTC(2015, 11, 31, 8, 45, 0),
}, {
"y": 240.0,
"x": Date.UTC(2015, 11, 31, 10, 30, 0),
}, {
"y": 146.0,
"x": Date.UTC(2015, 11, 31, 11, 15, 0),
}, {
"y": 117.0,
"x": Date.UTC(2015, 11, 31, 13, 30, 0),
}, {
"y": 191.0,
"x": Date.UTC(2015, 11, 31, 15, 15, 0),
}, {
"y": 189.0,
"x": Date.UTC(2015, 11, 31, 17, 45, 0),
}, {
"y": 153.0,
"x": Date.UTC(2015, 11, 31, 20, 45, 0),
}, {
"y": 161.0,
"x": Date.UTC(2016, 0, 1, 0, 0, 0),
}, {
"y": 143.0,
"x": Date.UTC(2016, 0, 1, 0, 45, 0),
}, {
"y": 62.0,
"x": Date.UTC(2016, 0, 1, 8, 30, 0),
}, {
"y": 98.0,
"x": Date.UTC(2016, 0, 1, 13, 0, 0),
}, {
"y": 166.0,
"x": Date.UTC(2016, 0, 1, 14, 30, 0),
}, {
"y": 202.0,
"x": Date.UTC(2016, 0, 1, 17, 45, 0),
}, {
"y": 273.0,
"x": Date.UTC(2016, 0, 1, 21, 0, 0),
}, {
"y": 240.0,
"x": Date.UTC(2016, 0, 2, 0, 15, 0),
}, {
"y": 145.0,
"x": Date.UTC(2016, 0, 2, 8, 45, 0),
}, {
"y": 87.0,
"x": Date.UTC(2016, 0, 2, 12, 0, 0),
}, {
"y": 163.0,
"x": Date.UTC(2016, 0, 2, 16, 0, 0),
}, {
"y": 196.0,
"x": Date.UTC(2016, 0, 2, 19, 45, 0),
}, {
"y": 347.0,
"x": Date.UTC(2016, 0, 2, 22, 45, 0),
}, {
"y": 200.0,
"x": Date.UTC(2016, 0, 3, 0, 30, 0),
}, {
"y": 132.0,
"x": Date.UTC(2016, 0, 3, 8, 45, 0),
}, {
"y": 251.0,
"x": Date.UTC(2016, 0, 3, 10, 0, 0),
}, {
"y": 254.0,
"x": Date.UTC(2016, 0, 3, 12, 0, 0),
}, {
"y": 94.0,
"x": Date.UTC(2016, 0, 3, 14, 30, 0),
}, {
"y": 88.0,
"x": Date.UTC(2016, 0, 3, 18, 15, 0),
}, {
"y": 247.0,
"x": Date.UTC(2016, 0, 3, 21, 30, 0),
}, {
"y": 179.0,
"x": Date.UTC(2016, 0, 4, 0, 0, 0),
}, {
"y": 109.0,
"x": Date.UTC(2016, 0, 4, 10, 0, 0),
}, {
"y": 67.0,
"x": Date.UTC(2016, 0, 4, 12, 15, 0),
}, {
"y": 172.0,
"x": Date.UTC(2016, 0, 4, 15, 30, 0),
}, {
"y": 96.0,
"x": Date.UTC(2016, 0, 4, 17, 0, 0),
}, {
"y": 116.0,
"x": Date.UTC(2016, 0, 4, 18, 45, 0),
}, {
"y": 111.0,
"x": Date.UTC(2016, 0, 4, 21, 0, 0),
}, {
"y": 234.0,
"x": Date.UTC(2016, 0, 4, 22, 45, 0),
}, {
"y": 187.0,
"x": Date.UTC(2016, 0, 5, 0, 0, 0),
}, {
"y": 72.0,
"x": Date.UTC(2016, 0, 5, 9, 45, 0),
}, {
"y": 266.0,
"x": Date.UTC(2016, 0, 5, 11, 45, 0),
}, {
"y": 237.0,
"x": Date.UTC(2016, 0, 5, 13, 15, 0),
}, {
"y": 268.0,
"x": Date.UTC(2016, 0, 5, 16, 45, 0),
}, {
"y": 261.0,
"x": Date.UTC(2016, 0, 5, 18, 0, 0),
}, {
"y": 140.0,
"x": Date.UTC(2016, 0, 5, 21, 30, 0),
}],
"tooltip": {
"pointFormat": "<span style=\"color:{series.color}\">{series.name}</span>: <b>{point.y}</b> ",
"useHTML": true,
"crosshairs": true
}
}, {
"zIndex": 11,
"color": "#D6487E",
"name": "Series 2",
"marker": {
"symbol": "triangle-down",
"radius": 5
},
"lineWidth": 0,
"data": [],
"tooltip": {
"pointFormat": "<span style=\"color:{series.color}\">{series.name}</span>: <b>{point.y}</b> ",
"useHTML": true,
"crosshairs": true
}
}, {
"zIndex": 10,
"color": "#2f7ed8",
"name": "Series 3",
"marker": {
"symbol": "triangle",
"radius": 5
},
"lineWidth": 0,
"data": [],
"tooltip": {
"pointFormat": "<span style=\"color:{series.color}\">{series.name}</span>: <b>{point.y}</b> ",
"useHTML": true,
"crosshairs": true
}
}, {
"enableMouseTracking": false,
"zIndex": 3,
"isThreshold": true,
"name": "Background series",
"color": "#edf9d2",
"type": "arearange",
"data": [
[Date.UTC(2015, 11, 1, 0, 0, 0), 80.0, 160.0],
[Date.UTC(2016, 0, 10, 23, 59, 59), 80.0, 160.0],
[Date.UTC(2016, 0, 10, 23, 59, 59), 80.0, 160.0]
],
"scalingFix": true
}, {
"zIndex": 10,
"color": "#2f7ed8",
"name": "Test series",
"marker": {
"symbol": "circle",
"radius": 5
},
"lineWidth": 0,
"data": [],
"tooltip": {
"pointFormat": "<span style=\"color:{series.color}\">{series.name}</span>: <b>{point.y}</b> ",
"useHTML": true,
"crosshairs": true
}
}, {
"name": "scaling-fix",
"data": [
[Date.UTC(2016, 6, 31, 23, 59, 59), 80.0],
[Date.UTC(2016, 7, 1, 23, 59, 59), 80.0]
],
"zIndex": 0,
"visible": false,
"type": "line",
"showInLegend": false
} ],
"yAxis": {
"minRange": 20,
"startOnTick": true,
"plotBands": [],
"title": {
"text": "Values",
"enabled": true
},
"gridZIndex": 0,
"min": 0,
"endOnTick": false,
"plotLines": [],
"tickInterval": 20
},
"chart": {
"zoomType": "x",
"marginLeft": 70,
"resetZoomButton": {
"theme": {
"states": {
"hover": {
"style": {
"color": "white"
},
"fill": "#DA5430"
}
},
"stroke": "#DA5430",
"r": 0,
"style": {
"color": "white"
},
"fill": "#DA5430"
}
},
"type": "line",
},
"tooltip": {
"dateTimeLabelFormats": {
"millisecond": "%A, %e. %b., %H:%M:%S.%L",
"week": "Woche von %A, %e. %b. %Y",
"hour": "%A, %e. %b., %H:%M",
"month": "%B %Y",
"second": "%A, %e. %b., %H:%M:%S",
"year": "%Y",
"day": "%A, %e. %b. %Y",
"minute": "%A, %e. %b., %H:%M"
},
"snap": 0,
"shared": false,
"followPointer": false,
"useHTML": true
},
"credits": {
"enabled": false
},
"plotOptions": {
"series": {
"states": {
"hover": {
"lineWidth": 0,
"lineWidthPlus": 0
}
},
"cursor": "pointer",
"stickyTracking": false
},
"line": {
"zIndex": 6,
"marker": {
"enabled": true
},
"stickyTracking": false,
"dataLabels": {
"enabled": false,
"useHTML": true
}
},
"arearange": {},
"scatter": {
"marker": {
"enabled": true
},
"stickyTracking": false,
"dataLabels": {
"enabled": false,
"useHTML": true
}
},
"area": {
"stacking": true,
"enableMouseTracking": false,
"marker": {
"enabled": false
},
"shadow": false,
"lineWidth": 0,
"showInLegend": false
}
},
"xAxis": {
"minRange": 60000,
"min": Date.UTC(2015, 11, 1, 0, 0, 0),
"minPadding": 0.0,
"plotBands": [{
"zIndex": -100,
"to": Date.UTC(2016, 6, 3, 21, 59, 59),
"from": Date.UTC(2016, 6, 1, 22, 0, 0),
"color": "rgba(200,200,200,0.1)"
}, {
"zIndex": -100,
"to": Date.UTC(2015, 11, 6, 22, 59, 59),
"from": Date.UTC(2015, 11, 4, 23, 0, 0),
"color": "rgba(200,200,200,0.1)"
}, {
"zIndex": -100,
"to": Date.UTC(2015, 11, 13, 22, 59, 59),
"from": Date.UTC(2015, 11, 11, 23, 0, 0),
"color": "rgba(200,200,200,0.1)"
}, {
"zIndex": -100,
"to": Date.UTC(2015, 11, 20, 22, 59, 59),
"from": Date.UTC(2015, 11, 18, 23, 0, 0),
"color": "rgba(200,200,200,0.1)"
}, {
"zIndex": -100,
"to": Date.UTC(2015, 11, 27, 22, 59, 59),
"from": Date.UTC(2015, 11, 25, 23, 0, 0),
"color": "rgba(200,200,200,0.1)"
}],
"plotLines": [{
"zIndex": -100,
"width": 2,
"dashStyle": "ShortDash",
"color": "rgba(200,200,200,0.3)",
"value": Date.UTC(2015, 11, 6, 23, 0, 0)
}, {
"zIndex": -100,
"width": 2,
"dashStyle": "ShortDash",
"color": "rgba(200,200,200,0.3)",
"value": Date.UTC(2015, 11, 13, 23, 0, 0)
}, {
"zIndex": -100,
"width": 2,
"dashStyle": "ShortDash",
"color": "rgba(200,200,200,0.3)",
"value": Date.UTC(2015, 11, 20, 23, 0, 0)
}, {
"zIndex": -100,
"width": 2,
"dashStyle": "ShortDash",
"color": "rgba(200,200,200,0.3)",
"value": Date.UTC(2015, 11, 27, 23, 0, 0)
}],
"gridZIndex": 0,
"dateTimeLabelFormats": {
"millisecond": "%H:%M:%S.%L",
"week": "%e. %b. %y",
"hour": "%H:%M",
"month": "%B %y",
"second": "%H:%M:%S",
"year": "%Y",
"day": "%e. %b. %y",
"minute": "%H:%M"
},
"gridLineWidth": 0,
"maxPadding": 0.0,
"endOnTick": false,
"max": Date.UTC(2016, 0, 10, 23, 59, 59),
"minTickInterval": 60000,
"type": "datetime",
"events": {
"afterSetExtremes": function() {
var axis = "xAxis";
var axis2 = "yAxis";
var chartgroup = null;
if (typeof charts_p_allchartsmodule != 'undefined') {
chartgroup = charts_p_allchartsmodule;
}
if (typeof charts_container != 'undefined' && charts_container['p_allchartsmodule']) {
chartgroup = charts_container['p_allchartsmodule'];
}
if (chartgroup && this.chart.controllingChart == true) {
if (this.chart.inverted == true) {
var min = this.chart.xAxis[0].min;
var max = this.chart.xAxis[0].max;
} else {
var min = this.chart.xAxis[0].min;
var max = this.chart.xAxis[0].max;
}
for (key in chartgroup) {
if (this.chart != chartgroup[key]) {
if (chartgroup[key].inverted == true) {
chartgroup[key].xAxis[0].setExtremes(min, max, true);
} else {
chartgroup[key].xAxis[0].setExtremes(min, max, true);
}
}
}
this.chart.controllingChart = false;
}
}
}
},
"exporting": {
"url": "/m/hc-export/",
"chartOptions": {
"rangeSelector": {
"enabled": false
},
"navigator": {
"enabled": false
},
"scrollbar": {
"enabled": false
}
}
},
"rangeSelector": {
"buttons": [{
"text": "Alle",
"type": "all"
}],
"inputEnabled": false,
"enabled": true
},
"type": "scatter",
"legend": {
"draggable":true,
"floating":true,
"verticalAlign": "top",
"zIndex": 2000,
"title": {
"text": ":: Legend"
},
"itemStyle": {
"fontSize": "8px"
},
"align": "left",
"draggable": true,
"borderWidth": 1,
"backgroundColor": "rgba(234, 234, 234,0.8)",
"floating": true
}
});
});
When you hover over on of the points it will select a other point with nearly the same X-Axis. The Y-Axis is switching up and down but not to the point where the mouse hovers over. So the selection behavior isn´t precise, so you can´t see the right tooltip where your mouse hovers over.
Mouse = red dot
Please have a look at it.

Your series is treated as a "line" chart, which causes this behaviour of the tooltip popup. I found a problem in your configuration object. The type:"scatter" option must be placed in the "chart":{} object.
chart:{
type:"scatter"
}
see: http://jsfiddle.net/u9q2m9wp/2/
see also: Highcharts - only show tooltip when hovering directly on point

How I can stick together the lines on the Highcharts timeline chart?

I creates the timeline Highchart like this jsfiddle.net
$(function () {
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
title: {
text: 'Equipment Status'
},
scrollbar: {
enabled: true
},
xAxis: {
categories: ['Status']
},
yAxis: {
type: 'datetime',
title: {
text: 'Timespan'
}
},
plotOptions: {
columnrange: {
grouping: false
}
},
legend: {
enabled: true
},
tooltip: {
formatter: function () {
return '<b>' + this.x + ' - ' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%e %B %H:%M', this.point.low) +
' - ' + Highcharts.dateFormat('%B %e %H:%M', this.point.high) + '<br/>';
}
},
series: [{
name: 'Producing',
data: [{
x: 0,
low: Date.UTC(2013, 07, 03, 0, 0, 0),
high: Date.UTC(2013, 07, 03, 4, 0, 0)
}, {
x: 0,
low: Date.UTC(2013, 07, 03, 10, 0, 0),
high: Date.UTC(2013, 07, 03, 12, 0, 0)
}, {
x: 0,
low: Date.UTC(2013, 07, 03, 14, 0, 0),
high: Date.UTC(2013, 07, 03, 15, 0, 0)
}
]
}, {
name: 'Breakdown',
data: [{
x: 0,
low: Date.UTC(2013, 07, 03, 4, 0, 0),
high: Date.UTC(2013, 07, 03, 10, 0, 0)
}, {
x: 0,
low: Date.UTC(2013, 07, 03, 18, 0, 0),
high: Date.UTC(2013, 07, 03, 24, 0, 0)
}]
}, {
name: "Changeover",
data: [{
x: 0,
low: Date.UTC(2013, 07, 04, 1, 0, 0),
high: Date.UTC(2013, 07, 04, 5, 0, 0)
}, {
x: 0,
low: Date.UTC(2013, 07, 02, 10, 0, 0),
high: Date.UTC(2013, 07, 02, 23, 0, 0)
}, ]
}, {
name: "TrialRun",
data: [{
x: 0,
low: Date.UTC(2013, 07, 04, 5, 0, 0),
high: Date.UTC(2013, 07, 04, 13, 0, 0)
}, {
x: 0,
low: Date.UTC(2013, 07, 02, 2, 0, 0),
high: Date.UTC(2013, 07, 02, 10, 0, 0)
}]
}]
});
});
As you can see, first part (with date range 2 August 02:00 - August 2 10:00 and has orange color) was placed directly before the second part (with date range 2 August 10:00 - August 2 23:00 and has green color). But between them we see a wite space. How I can remove this white space from chart, where dates are stuck together (like this: end of first part August 2 10:00, start of second part 2 August 10:00)

You don't need to do anything in CSS - that's overkill, and causes maintenance headaches.
Highcharts has options for this, and many other formatting issues.
In your case, just set the borderWidth to 0 in your plotOptions:
plotOptions: {
columnrange: {
borderWidth:0,
}
}
(and/or set borderColor: 'transparent')
Example:
http://jsfiddle.net/u3eWz/80/
Reference:
http://api.highcharts.com/highcharts#plotOptions.columnrange.borderWidth

HighChart timestamp highlight the time now

I use HighStock library to show an availability calendar with columnrange.
Here is my code :
$(function () {
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
title: {
text: 'Equipment Status'
},
scrollbar: {
enabled: true
},
xAxis: {
categories: ['Status']
},
yAxis: {
type: 'datetime',
title: {
text: 'Timespan'
}
},
plotOptions: {
columnrange: {
grouping: false
}
},
legend: {
enabled: true
},
tooltip: {
formatter: function () {
return '<b>' + this.x + ' - ' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%e %B %H:%M', this.point.low) +
' - ' + Highcharts.dateFormat('%B %e %H:%M', this.point.high) + '<br/>';
}
},
series: [{
name: 'Producing',
data: [{
x: 0,
low: Date.UTC(2013, 07, 03, 0, 0, 0),
high: Date.UTC(2013, 07, 03, 4, 0, 0)
}, {
x: 0,
low: Date.UTC(2013, 07, 03, 10, 0, 0),
high: Date.UTC(2013, 07, 03, 12, 0, 0)
}, {
x: 0,
low: Date.UTC(2013, 07, 03, 14, 0, 0),
high: Date.UTC(2013, 07, 03, 15, 0, 0)
}
]
}, {
name: 'Breakdown',
data: [{
x: 0,
low: Date.UTC(2013, 07, 03, 4, 0, 0),
high: Date.UTC(2013, 07, 03, 10, 0, 0)
}, {
x: 0,
low: Date.UTC(2013, 07, 03, 18, 0, 0),
high: Date.UTC(2013, 07, 03, 24, 0, 0)
}]
}, {
name: "Changeover",
data: [{
x: 0,
low: Date.UTC(2013, 07, 04, 1, 0, 0),
high: Date.UTC(2013, 07, 04, 5, 0, 0)
}, {
x: 0,
low: Date.UTC(2013, 07, 02, 10, 0, 0),
high: Date.UTC(2013, 07, 02, 23, 0, 0)
}, ]
}, {
name: "TrialRun",
data: [{
x: 0,
low: Date.UTC(2013, 07, 04, 5, 0, 0),
high: Date.UTC(2013, 07, 04, 13, 0, 0)
}, {
x: 0,
low: Date.UTC(2013, 07, 02, 2, 0, 0),
high: Date.UTC(2013, 07, 02, 10, 0, 0)
}]
}]
});
});
JSFiddle Link
I would like to highlight the tick's current timestamp (hour/minutes) by, for example, a single vertical line in red at the current time.
Is it possible?
Thank you !

Hello there Peter Krzywokulski,
By creating a new variable for the today's time:
var today = new Date();
And as the guys mentioned here, creating a plotline:
plotLines: [{
value: today,
color: 'red',
width: 2
}]
You can check it out here: JSFfiddle
Good luck!

As Pawel Fus said, I just need to use plotLines options.
yAxis: {
type: 'datetime',
title: {
text: 'Timespan'
},
plotLines: [{
value: Date.UTC(2013, 07, 02, 23, 30, 0),
color: 'red',
width: 2
}]
}
JSFiddle

Highcharts spline and columnrange inverted

I have chart that has both splines and a columnrange which ideally would be inverted so the bars run horizontal and the xAxis values will be on the y axis.
See current code at jsfiddle.
Relevant part of code:
$(function () {
$('#container').highcharts({
chart: {
//type: 'spline'
//inverted: true,
},
credits: {
enabled: false
},
title: {
text: 'Polygon Graph: 109470 - North Penrith'
},
xAxis: [{
type: 'datetime',
}, {
type: 'category',
categories: ['Planning', 'Bulk Earthworks', 'DA Design', 'CC Design']
}],
yAxis: [{
opposite: true,
labels: {
format: '${value:,.0f}'
},
title: {
text: 'Value ($)'
},
min: 0
}, {
type: 'datetime',
}],
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
var d = new Date(this.y);
return d.getDate();
}
}
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%e %b %y', this.x) + ': ' + ' $' + this.y;
}
},
series: [{
name: 'Expected Costs',
data: [
[Date.UTC(2013, 9, 29), 145000],
[Date.UTC(2013, 10, 6), 140000],
[Date.UTC(2013, 10, 13), 133000],
[Date.UTC(2013, 10, 20), 125000],
[Date.UTC(2013, 10, 27), 116000],
[Date.UTC(2013, 11, 3), 106000],
[Date.UTC(2013, 11, 10), 101000],
[Date.UTC(2013, 11, 17), 96000],
[Date.UTC(2013, 11, 24), 94000],
[Date.UTC(2013, 12, 1), 82000],
[Date.UTC(2013, 12, 8), 70000],
[Date.UTC(2013, 12, 15), 58000],
[Date.UTC(2013, 12, 22), 33000],
[Date.UTC(2013, 12, 29), 8000],
],
color: 'red'
}, {
name: 'Actual Costs',
data: [
[Date.UTC(2013, 9, 29), 135000],
[Date.UTC(2013, 10, 6), 133000],
[Date.UTC(2013, 10, 13), 125000],
[Date.UTC(2013, 10, 20), 116000],
[Date.UTC(2013, 10, 27), 104000],
[Date.UTC(2013, 11, 3), 89000],
[Date.UTC(2013, 11, 10), 84000],
[Date.UTC(2013, 11, 17), 78000],
//[Date.UTC(2013,11,24),75000 ],
// [Date.UTC(2013,12,1),64000 ],
// [Date.UTC(2013,12,8),59000 ],
// [Date.UTC(2013,12,15),50000 ],
// [Date.UTC(2013,12,22),25000 ],
// [Date.UTC(2013,12,29),0 ]
],
color: 'green'
}, {
name: 'Projected Costs',
data: [
//[Date.UTC(2013,9,29),135000 ],
// [Date.UTC(2013,10,6),133000 ],
// [Date.UTC(2013,10,13),125000 ],
// [Date.UTC(2013,10,20),116000 ],
// [Date.UTC(2013,10,27),104000 ],
// [Date.UTC(2013,11,3),89000 ],
// [Date.UTC(2013,11,10),84000 ],
[Date.UTC(2013, 11, 17), 78000],
[Date.UTC(2013, 11, 24), 75000],
[Date.UTC(2013, 12, 1), 64000],
[Date.UTC(2013, 12, 8), 59000],
[Date.UTC(2013, 12, 15), 50000],
[Date.UTC(2013, 12, 22), 25000],
[Date.UTC(2013, 12, 29), 0]
],
dashStyle: 'longdash'
}, {
name: 'Gantt',
type: 'columnrange',
//inverted: true,
xAxis: 1,
yAxis: 1,
data: [
[Date.UTC(2013, 9, 29), Date.UTC(2013, 9, 30)],
[Date.UTC(2013, 9, 30), Date.UTC(2013, 10, 17)],
[Date.UTC(2013, 10, 18), Date.UTC(2013, 10, 30)],
[Date.UTC(2013, 10, 30), Date.UTC(2013, 11, 17)]
],
}]
});
I have tried starting from a columnrange chart and building it from there, however that results in the spline values graphing from smallest to largest (even with a reverse option). This meant it seemed like a better idea to add the columnrange to the spline base.
I'm stuck it seems like highcharts should be able to do this.
How do I get the columnrange to be horizontal while still maintaining the rest of the layout of the graph?

Unfortunatley when you use inverted options then axis are flipped and all series are inverted. It is default behaviour. You cannot combine inverted and not inverted series.

Develop Reference

JavaScript is the programming language of the Web.

mortgage calculator using highchart - javascript

I have prepared a similar example to what is presented on a provided image. Hope it helps. API Reference: http://api.highcharts.com/highcharts/legend Example: http://jsfiddle.net/760qfdm0/

Related

Group Data by month and week according to count and filter in chart.js

Mouse behavior buggy?

How I can stick together the lines on the Highcharts timeline chart?

HighChart timestamp highlight the time now

Highcharts spline and columnrange inverted

Categories

Resources