Dotnet.Highcharts: Cost Not Plotted Against the Correct Date

DotNet.Highcharts: Cost not plotted against the correct date

Your Y values are completely disconnected from X values. In order to achieve what you want, you need to restructure your data as below:

        DateTime dt = new DateTime(2016, 2, 27);

        Highcharts chart = new Highcharts("graph")
           .SetTitle(new Title { Text = "Incoming Stats" })
           .SetXAxis(new XAxis { Type = AxisTypes.Datetime })
           .SetYAxis(new YAxis { Title = new YAxisTitle { Text = "Amount Incoming" } })
           .SetSeries(new[]
             {
              new Series { Name = "inc", Data = new Data(new object[,] { 
                  {dt , 23 }, 
                  {dt.AddDays(1) , 223 }, 
                  {dt.AddDays(2) , 51 }, 
                  {dt.AddDays(11) , 200 }, }) },
              new Series { Name = "exp", Data = new Data(new object[,] { 
                  {dt.AddDays(5) , 100 }, 
                  {dt.AddDays(6) , 23 }, 
                  {dt.AddDays(11) , 23 }, 
                  {dt.AddDays(19) , 35 }, 
                  {dt.AddDays(35) , 288 }, }) }
             });

EDIT:
How to do it dynamically:

        object[,] data1 = new object[Dt.Rows.Count, 2];
        for (int i = 0; i < Dt.Rows.Count; i++)
        {
            data1[i, 0] = Dt.Rows[i]["IncDate"];
            data1[i, 1] = Dt.Rows[i]["IncCost"];
        }

        object[,] data2 = new object[Dt2.Rows.Count, 2];
        for (int i = 0; i < Dt2.Rows.Count; i++)
        {
            data2[i, 0] = Dt2.Rows[i]["ExpDate"];
            data2[i, 1] = Dt2.Rows[i]["ExpCost"];
        }

        Highcharts chart = new Highcharts("graph")
           .SetTitle(new Title { Text = "Incoming Stats" })
           .SetXAxis(new XAxis { Type = AxisTypes.Datetime })
           .SetYAxis(new YAxis { Title = new YAxisTitle { Text = "Amount Incoming" } })
           .SetSeries(new[]
             {
                    new Series { Name = "inc", Data = new Data(data1) },
                    new Series { Name = "exp", Data = new Data(data2) }
             });

Data retrieved from database:

Highcharts not plotting Date string as Category

I have just tried your code, and it works perfectly fine, see: http://jsfiddle.net/3bQne/1026/

I guess, you need to update to Highcharts 3.0.10 to get this working.

Highcharts date not showing correctly on x-axis

Timestmaps for highcharts must be in milliseconds.
http://jsfiddle.net/4azb64t7/2/

var data = [
    [142084800000, 20, 30],
    [142214400000, 30, 40],
    [142352640000, 45, 50],
    [142439040000, 35, 40],
    [142516800000, 30, 35]
];

new to highchart and stuck with type datetime , data not plot

Your data structure looks correct, but you need to use an array instead of a string. You can use JSON.parse to convert.

  series: [{
    type: 'area',
    name: 'USD to EUR',
    data: JSON.parse('[[1015174800000, 62], [1044810000000, 86], ...]')
  }]

---

Live demo: https://jsfiddle.net/BlackLabel/w9vfut1k/

API Reference: https://api.highcharts.com/highcharts/series.area.data

The continuous update highcharts with more data plotting the continuity is not visible so we need that continuity in the centre of the graph

I tried plotting null data against future timestamp values, but
Stockchart does not accept such kind of data and displays nothing.

It happens because by default xAxis.ordinal = true it means that points are equally spaced in the chart regardless of the actual time or x distance between them. The solution is simple, set xAxis.ordinal = false and set axis extremes to show future time before the graph line. Check the demo and code posted below.

var power = [],  speed = [],  torque = [],
  i = 0;let time = 1542278447000;for (i; i < 100; i += 1) {  let torqueValue = Math.floor(Math.random() * (100 - 5 + 1)) + 5;  let speedValue = Math.floor(Math.random() * (100 - 5 + 1)) + 5;  powerValue = torqueValue * speedValue  time = time + 1000  torque.push([    time, // the date    torqueValue // the torque  ]);  speed.push([    time, // the date    speedValue // the speed  ]);  power.push([    time, // the date    powerValue // the power  ]);}
// create the chartHighcharts.stockChart('container', {  chart: {    events: {      load: function() {        var chart = this,          multiplier,          dataLength,          x,          y;
        setInterval(function() {          chart.series.forEach(function(series) {            multiplier = series.dataMax;            dataLength = chart.series[0].xData.length;            x = chart.series[0].xData[dataLength - 1] + 1000;            y = Math.round(Math.random() * multiplier);
            series.addPoint([x, y], false, true);          });
          chart.xAxis[0].setExtremes(null, x + 15000);        }, 1000);
      }    }  },  rangeSelector: {    enabled: false,    selected: 2  },  navigator: {    enabled: false  },  scrollbar: {    enabled: false  },
  title: {    text: ''  },  exporting: {    enabled: false  },
  subtitle: {    text: ''  },
  xAxis: {    title: {      text: 'Time'    },    ordinal: false  },
  yAxis: [{    opposite: false,    startOnTick: true,    endOnTick: true,    labels: {      align: 'left',      x: -22    },    title: {      text: 'Torque',      x: -15    },    height: '30%',    offset: 0,    lineWidth: 2,    resize: {      enabled: true    }  }, {    opposite: false,    labels: {      align: 'left',      x: -22    },    title: {      text: 'Speed',      x: -15    },    top: '33%',    height: '30%',    offset: 0,    lineWidth: 2  }, {    opposite: false,    labels: {      align: 'left',      x: -22    },    title: {      text: 'Power',      x: -15    },    top: '66%',    height: '30%',    offset: 0,    lineWidth: 2  }],
  legend: {    enabled: true  },  tooltip: {    split: true  },
  credits: {    enabled: false  },
  plotOptions: {    series: {}  },
  series: [{    color: '#77787b',    type: 'spline',    name: 'Torque',    id: 'Power',    zIndex: 2,    data: torque  }, {    color: '#335572',    type: 'spline',    name: 'Speed',    id: 'Speed',    data: speed,    yAxis: 1  }, {    color: '#ee4650',    type: 'spline',    name: 'Power',    id: 'Power',    data: power,    yAxis: 2  }]});

.header {  padding: 20px 20px 10px 0px;  width: 100%;  display: flex;  font-size: 16px;  color: #5e5e5e;  font-family: 'Montserrat Medium', 'Montserrat Regular', 'Montserrat'}
span {  width: 50%;  font-family: 'Montserrat Medium', 'Montserrat Regular', 'Montserrat'}
span:last-child {  text-align: right;}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><script src="https://code.highcharts.com/stock/highstock.js"></script><script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script><script src="https://code.highcharts.com/stock/modules/exporting.js"></script><script src="https://code.highcharts.com/stock/indicators/indicators.js"></script><script src="https://code.highcharts.com/stock/indicators/volume-by-price.js"></script>
<div class='header'>  <span>  Date: 15/11/2018  </span>  <span>  Thrust: 3079.21 N  </span></div><div id="container" style="height: 500px; min-width: 310px"></div>

How to change DateTime format on Highcharts?

Use this for formatting

formatter: (currData) => {
     const currDate = new Date(currData.value);
     return currDate.getHours() + ':' + currDate.getMinutes();
},

Fiddle - https://jsfiddle.net/5hupyv8m/1/

Or

simply update the for loop for x axis labels

Like

for (var i = 0; i < data.length; i++) {
    accelero_x.push(data[i].accelero_x);
    const currTimeStamp = new Date(data[i].timestamp);
    timestamp.push(currTimeStamp.getHours() + ':' + currTimeStamp.getMinutes());
}

https://jsfiddle.net/4poc6re7/

Update

You can use this function for converting time in hh:mm format

 function format_two_digits(n) {
   return n < 10 ? '0' + n : n;
 }

Updated fiddle : https://jsfiddle.net/4poc6re7/1/

---

Related Topics