0

i am using angular 2 highchart and i want to show 'spline' highchart with date on x axis and time on y axis and my chart lines going as linear, its because i have same datetime ticks for both axis. i want to segregate those axis as Date and Time, how can i do that

here is my sample data as below

[{"x":1517192498650,"y":1517192498650,"name":"GS_20180129_DailyTrades_Finception"},{"x":1517190450740,"y":1517190450740,"name":"GS_20180129_DailyTrades_Finception"},{"x":1517105975550,"y":1517105975550,"name":"GS_20180128_DailyTrades_Finception"},{"x":1517103307507,"y":1517103307507,"name":"GS_20180128_DailyTrades_Finception"},{"x":1517017629587,"y":1517017629587,"name":"GS_20180127_DailyTrades_Finception"},{"x":1517017613657,"y":1517017613657,"name":"GS_20180127_DailyTrades_Finception"},{"x":1516932898280,"y":1516932898280,"name":"GS_20180126_DailyTrades_Finception"}]

Here is my data manipulation code in typescript

static PrepareFileTransactionsForDateTimeChart(fileTransactions: Array<FileTransactionViewModel>) {
    const formattedFileTransactions = new Array<any>();
    fileTransactions.forEach((_fileTransaction: FileTransactionViewModel) => {
        const data = {
            x: moment(_fileTransaction.DateTime).valueOf(),
            y: moment(_fileTransaction.DateTime).valueOf(),
            // x: moment(moment(_fileTransaction.DateTime).format('DD-MM-YYYY') + ' 12:00:00').valueOf(),
            // y: moment('01-01-2018 ' + moment(_fileTransaction.DateTime).format('HH:MM:SS')).valueOf(),
            name: _fileTransaction.FileName
        };
        formattedFileTransactions.push(data);
    });
    return formattedFileTransactions;
}

and at last here is my highchart code where i am plotting the data

 async AppendChartData(data: any) {
    this.options = {
      chart: {
        type: 'spline'
      },
      title: {
        text: 'File transactions overview'
      },

      subtitle: {
        text: ''
      },

      xAxis: {
        type: 'datetime',
        title: {
          text: 'Date'
        },
        labels: {
          format: '{value:%e-%b-%Y}'
        },
      },

      yAxis: {
        type: 'datetime',
        title: {
          text: 'Time'
        },
        labels: {
          format: '{value:%H:%M:%S}'
        },
      },

      tooltip: {
        headerFormat: '',
        pointFormat: '<b>{point.name}: </b> <br><br> {point.x:%e-%b-%Y} {point.y:%H:%M:%S}',
        followPointer: true,
        enabled: true,
        shadow: false
      },

      plotOptions: {
        spline: {
          lineWidth: 4,
          states: {
            hover: {
              lineWidth: 5
            }
          },
          marker: {
            enabled: false
          },
        }
      },

      series: [{
        name: 'File Transaction',
        data: data
      }]
    };
  }

and my data is plotting like in image below enter image description here

please let me know what will be the good approach to do so.

Vipin Saini
  • 39
  • 1
  • 2
  • 9
  • 1
    I don't understand what you want to do, what is the question? – ewolden Feb 08 '18 at 09:12
  • Question is [{"x":1517192498650,"y":1517192498650,"name":"GS_20180129_DailyTrades_Finception"}] i want to plot this data as : x value will be on x axis as Date and y value will be on y axis as Time i wanna show chart as date and time while both ticks has DateTime as well – Vipin Saini Feb 08 '18 at 10:15
  • That is exactly what you have done though, is it not? Is there any problem or anything missing with your solution? – ewolden Feb 08 '18 at 10:17
  • this is not working exactly how i want to, highchart is treating these ticks as DateTime on both axis so that graph line is plotting. i want it as, If the datetime in sample data is 21-12-2017 12:00:00 then i want to match the point as 21-12-2017(Date) to 12:00:00(Time) currently its working as 21-12-2017 12:00:00 to 21-12-2017 12:00:00 please check attached image once – Vipin Saini Feb 08 '18 at 10:44
  • @ewolden..... ? – Vipin Saini Feb 08 '18 at 12:13
  • still struggling to understand what you mean. is this it: https://i.imgur.com/yRwS5kn.png? If not, please draw what you want...... – ewolden Feb 08 '18 at 12:26
  • yes, i want exactly this but my one is getting diagonally linear, because it is treating both axis as combined datetime. i want it to treat those axis separately as shown in your attached image. – Vipin Saini Feb 08 '18 at 13:01
  • https://i.imgur.com/oIJKU7F.png check this image its pointing the circle above the time. because its treating both axis as datetime .. that point is there because the y axis has also date in that, its just formatted only for display purpose – Vipin Saini Feb 08 '18 at 13:08
  • 1
    I still don't get what's wrong with this code: http://jsfiddle.net/BlackLabel/hgec825e/ Everything seems to work fine. What do you expect to look differently? – Kamil Kulig Feb 09 '18 at 13:03

0 Answers0