Click here to Skip to main content
14,456,102 members

JavaScript

 
SuggestionRe: guidence for the begginners Pin
CHill6015-Nov-18 22:46
mveCHill6015-Nov-18 22:46 
QuestionLoops Pin
Member 1403490227-Oct-18 6:06
MemberMember 1403490227-Oct-18 6:06 
AnswerRe: Loops Pin
Richard MacCutchan27-Oct-18 6:54
communityengineerRichard MacCutchan27-Oct-18 6:54 
QuestionSTOP VALIDATION Pin
Member 1344978425-Oct-18 1:44
MemberMember 1344978425-Oct-18 1:44 
AnswerRe: STOP VALIDATION Pin
Afzaal Ahmad Zeeshan25-Oct-18 3:40
mvaAfzaal Ahmad Zeeshan25-Oct-18 3:40 
Questionno me funciona funcion autocomplete Jquery Pin
serenimus20-Oct-18 9:53
Memberserenimus20-Oct-18 9:53 
AnswerRe: no me funciona funcion autocomplete Jquery Pin
Nelek20-Oct-18 9:59
protectorNelek20-Oct-18 9:59 
QuestionMap JSON data file with dates and multiple string value pairs to Angular/Chart.js Pin
Member 1201357914-Oct-18 23:08
MemberMember 1201357914-Oct-18 23:08 
The task

I work with Angular and Chart.js (just started working with both for the first time) and need to import a recordset into Chart.js to be displayed as a multi-axis line chart. At the moment I am displaying some dummy data for visualization which works flawless.

The recordset to be displayed is a record of statistical data stored in a local MS SQL database table. There are three columns that need to be displayed from the table in Chart.js.

1. ExeTimeStamp (in SQL server defined as the following style --> "ODBC canonical date and time with milliseconds." http://www.blackwasp.co.uk/sqldatetimeformats.aspx)
2. LogTimeStamp (same as above ExeTimeStamp style)
3. TaskResult (in SQL server defined as a String, holds thousands of recordsets, each containing 15 pairs of "value" and "label" data)


The challenge

By means of the following tutorial (http://www.tutorialsteacher.com/nodejs/access-sql-server-in-nodejs) I was able to connect to the database and to retrieve the data for all three columns to be displayed in Chrome which results in the following JSON output...

{"recordsets":[[
    [{
    	"ExeTimeStamp":"2018-08-11T08:06:47",
    	"LogTimeStamp":"2018-08-11T08:07:29",
    		"TaskResult":[
    			{"value":"1452","label":"Google readings"},
    			{"value":"1618","label":"Navigate to 'log on' page"},
    			{"value":"5467","label":"Log in"},
    			{"value":"2420","label":"Find user"},
    			{"value":"1500","label":"Click on 'active cases'"},
    			{"value":"3084","label":"Click on case"},
    			{"value":"1350","label":"Click on 'documents'"},
    			{"value":"652","label":"Click on download PDF icon"},
    			{"value":"5008","label":"Log in via login client"},
    			{"value":"1","label":"Wait for down-load/check for PDF in PDF viewer"},
    			{"value":"1299","label":"Click on extended search"},
    			{"value":"1267","label":"Input search term"},
    			{"value":"5004","label":"Execute search},
    			{"value":"1696","label":"Log out"},
    			{"value":"30366","label":"Total without google readings"
    }]
    //...remaining recordsets...
    }]],"output":{},"rowsAffected":[20461]}


This data now needs to be mapped to Chart.js so it is possible to read the data into the chart display itself.

Having looked at other suggestions, my approach would be to create a new typescript class looking somewhat like this...

export class livelogs implements OnInit {
    
      constructor() { }
    
      ngOnInit() {
      }
    
      exetimestamp: Date;
      logtimestamp: Date;
      taskresult: string[];
    
    }


...in order to make data available for reading by Chart.js from that class.

However each recordset with the 15 pairs of "value","label" data in TaskResult needs to be accessed one pair at a time and mapped individually to Chart.js so each line (and intersecting point) in the chart gets its own value and label.

Therefore, I am in doubt as to whether my approach is the right one, nor if or how it could be actually made to work.

Can anyone point me into the right direction here?

Thanks in advance for any input.

The chart type from Chart.js which I am using now can be seen here...

http://www.chartjs.org/samples/latest/charts/line/multi-axis.html

Note: If someone might wonder why TaskResult wasn't/isn't separated rather into multiple columns, holding each one pair - as it would be a better solution to the problem - I agree, but have already asked the responsible about this option. Since the statistical information in the future will have to be accessed by many users by means of a customized search option, plus that the same information needs to refresh other more specific graphs at a fixed time-interval, the reasoning is that the server would be taxed to hard with constant requests if more columns had to be accessed and the load therefore too high, which makes this possibility a no-go.
Questionaspx file don't open in chrome Pin
anasr200010-Oct-18 3:22
professionalanasr200010-Oct-18 3:22 
Questiontest regexep javascript Pin
Alboyz5-Oct-18 5:31
MemberAlboyz5-Oct-18 5:31 
AnswerRe: test regexep javascript Pin
Richard Deeming5-Oct-18 5:48
communityengineerRichard Deeming5-Oct-18 5:48 
GeneralRe: test regexep javascript Pin
Alboyz5-Oct-18 6:02
MemberAlboyz5-Oct-18 6:02 
GeneralRe: test regexep javascript Pin
uxotucung9-Nov-18 4:09
Memberuxotucung9-Nov-18 4:09 
QuestionAdding a list of files to the array and displaying them in the component Pin
Member 140077214-Oct-18 5:33
MemberMember 140077214-Oct-18 5:33 
QuestionDate picker style not showing Pin
thepast24-Sep-18 9:21
Memberthepast24-Sep-18 9:21 
AnswerRe: Date picker style not showing Pin
ZurdoDev24-Sep-18 9:58
mveZurdoDev24-Sep-18 9:58 
GeneralRe: Date picker style not showing Pin
Iniciativa Box Funcional25-Sep-18 8:36
MemberIniciativa Box Funcional25-Sep-18 8:36 
QuestionRelation between null and zero. Pin
GKP199222-Sep-18 22:21
professionalGKP199222-Sep-18 22:21 
AnswerRe: Relation between null and zero. Pin
Richard Deeming24-Sep-18 9:03
communityengineerRichard Deeming24-Sep-18 9:03 
GeneralRe: Relation between null and zero. Pin
GKP199224-Sep-18 18:37
professionalGKP199224-Sep-18 18:37 
QuestionTypeScript, Dropping Image and loading preview without posting, a working sample, FileReader, readAsDataUrl, reader.result Pin
jkirkerx19-Sep-18 8:55
professionaljkirkerx19-Sep-18 8:55 
QuestionCan't match this string in typescript using if and else if Pin
jkirkerx18-Sep-18 14:04
professionaljkirkerx18-Sep-18 14:04 
AnswerRe: Can't match this string in typescript using if and else if Pin
Graham Breach18-Sep-18 22:21
MemberGraham Breach18-Sep-18 22:21 
GeneralRe: Can't match this string in typescript using if and else if Pin
jkirkerx19-Sep-18 8:27
professionaljkirkerx19-Sep-18 8:27 
QuestionCan't match this string in typescript using if and else if Pin
jkirkerx18-Sep-18 14:04
professionaljkirkerx18-Sep-18 14:04 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.