user2372815 user2372815 - 11 months ago 44
jQuery Question

mortgage calculator using highchart

I want to create a high chartenter image description here 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}]}]}

);
});

Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download