Basic dimple.js Line Chart Issue - Loading data

Question

I am trying to load in data into a dimple.js line chart, but I am new to JavaScript and I am having trouble plotting a basic line chart. I have a column for Watts and a column for Time. How do I plot this in dimple.js?

My file contains a column for Time and a column for Watts.

I think there may be an issue on my line with: data = dimple.filterData(data, "Watts", []);?

<html>
<div id="chartContainer">
  <script src="dimple/js/d3.v3.min.js"></script>
  <script src="dimple/js/dimple.v2.1.6.min.js"></script>
  <script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer", 590, 400);
    d3.csv("TESTFILE.txt", function (data) {
      var myChart = new dimple.chart(svg, data);
      data = dimple.filterData(data, "Watts", []);
      myChart.setBounds(60, 30, 505, 305);
      var x = myChart.addCategoryAxis("x", "Time");
      myChart.addMeasureAxis("y", "Watts");
      var s = myChart.addSeries(null, dimple.plot.line);
      myChart.draw();
      });
  </script>
</div>
</html>

My current output is shown below:

score 0 · Answer 1 · answered Oct 12 '15 at 15:35

0

Remove the line:

data = dimple.filterData(data, "Watts", []);

It's not needed and will delete everything in your data. filterData removes all elements where the passed field's value is not in the array so an empty array will always remove all data. It's only required if you want to filter your data, without it all data will be removed.

It sounds like you might have tried this so if it still doesn't work then there may be a further problem, please post a couple of rows from your data.

answered Oct 12 '15 at 15:35

John Kiernander

4,904
1
15
29

Hi John, I've added a photo of my data set. – Gary Oct 12 '15 at 16:00
I assume it's still not working once that line is removed. It looks like your dataset is tsv not csv in which case use `d3.tsv` to get the data. – John Kiernander Oct 12 '15 at 19:27
John, I tried `d3.tsv` but still, nothing showed up. I inspected the element, and received the following errors: "XMLHttpRequest cannot load file:///C:/Users//Documents/Redacted/www/1382306R.txt. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource." and: Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load – Gary Oct 13 '15 at 12:05
I found my issue. Chrome is not allowing Cross Origin Requests. I downloaded Firefox, ran the code in Firefox, and it worked perfectly. – Gary Oct 13 '15 at 12:38

score 0 · Answer 2 · edited May 23 '17 at 12:22

0

There was nothing wrong with my code. I referred to this exchange to solve my problem.

I ended up downloading Firefox, running my code from Notepad++, and it worked perfectly.

XMLHttpRequest cannot load file. Cross origin requests are only supported for HTTP

edited May 23 '17 at 12:22

Community

1
1

answered Oct 13 '15 at 12:38

Gary

2,137
3
23
41

Basic dimple.js Line Chart Issue - Loading data

2 Answers2