0

I'm new to javascript coding in general and I'm having some issues with creating an angular chart using a custom xml file. I'm using x2js to convert my xml file to json in order to be used in the data for the chart. In my plnkr, I created an angular service, incorporating x2js to convert my xml file.

In the app.js file, I called back the function in the service and parsed the data into the pieces required for the chart data. I'm not sure if I did this correctly, but one problem may lie with the parseInt() function in the value element. I included this parse function because I noticed there may be quotes around my data values, which can interfere with the data format required for the chart library. $scope.dataOne and $scope.dataTwo are my two sets of data that I want to use to create two different graphs.

Note: I used a krispo's template from plnkr, and expanded on it to include the things I need in my code. I also used this documentation if needed.

There seems to be an error somewhere in my code. I didn't parse all of the data, only enough to create two pairs of data to test the chart. Nothing is showing up.

Any help would be greatly appreciated, as I am new to programming, having only worked with python before.

Edit: It's alive(in the plnkr)! The xml must have been converted properly, because now the selection menu above the chart appears with the series from the xml data. However the chart doesn't appear. I've hit a road block because when I try opening the file in my browser to find where my error is, it gives me the following error: 

XMLHttpRequest cannot load file:///C:/Users/Nicholas/Desktop/logixdata/new%20website/newchart/data.xml.
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

and this:

Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:...the path...'.
    at Error (native)

I'm getting closer to the solution, but I've narrowed it down to somewhere in the DataSource.get().success(function(data){ segment of code in the app.js file.

Nick Borisenko
  • 494
  • 3
  • 18
  • 1
    provide your code please. if possible use firebug(for Firefox) , chrome developers tool (for chrome) and get the exact JavaScript error and post here as well. – JPS Jul 28 '15 at 00:36
  • The code is in the plnkr link. I thought it would be best to have it there than post it here because there are several lengthy files. Here is the link again: http://plnkr.co/edit/m42wOY?p=preview. Also I will find the errors that the browser gives me and post them here – Nick Borisenko Jul 28 '15 at 00:43
  • yyou have a typo in `Datasource` injection should be `DataSource`. xml is invalid also – charlietfl Jul 28 '15 at 01:02
  • now its telling me that data is not defined on line 55. What do you mean about invalid xml? What do I need to do to fix it? @charlietfl – Nick Borisenko Jul 28 '15 at 01:07
  • ok i've validated the xml file. Thank you. – Nick Borisenko Jul 28 '15 at 01:25

1 Answers1

0

I found the solution. All of the $scope data elements that I made had to be inside the DataSource function, which was calling back the xml conversion service function. There I parsed all of the data. I also missed a specification in my notation - I had, for example, data.Header.data[0].y, where the y key held the data values for the chart. I forgot that the values of y were an array, so I had to specify which of the values I wanted for each value assignment (data.Header.data[0].x[1], for example).

Nick Borisenko
  • 494
  • 3
  • 18