Importing data from input file

[lipalath-ms]

Is it possible to specify the input file name and import data from the file instead of hard coding the data values as follows?

var dataset = [{ "measure": "30/32", "data": [ ["2017-06-09 16:01:00", 0, "2017-06-10 07:49:00"], ["2017-06-10 07:49:00", 1, "2017-06-10 07:54:00"], ["2017-06-10 07:55:00", 0, "2017-06-10 13:04:00"], ["2017-06-10 13:03:00", 1, "2017-06-10 13:10:00"], ["2017-06-10 13:11:00", 0, "2017-06-10 13:17:00"], ["2017-06-10 13:17:00", 1, "2017-06-10 13:22:00"], ["2017-06-10 13:22:00", 0, "2017-06-10 19:00:00"], ["2017-06-10 19:00:00", 1, "2017-06-10 19:05:00"], ["2017-06-10 19:06:00", 0, "2017-06-11 20:05:00"], ["2017-06-11 20:05:00", 1, "2017-06-11 20:10:00"], ["2017-06-11 20:11:00", 0, "2017-06-12 07:43:00"], ["2017-06-12 07:43:00", 1, "2017-06-12 07:56:00"],

[flrs]

@lisapalathingal, using a file as input is currently not supported. A workaround would be to generate the page on the fly, for example with PHP, or to use some jQuery or other technologies to fetch the data and dynamically update the visualization.

Let us know if you found a solution. I would be happy to add it to the examples of Visavail.js.

[lipalath-ms]

Thank you @flrs. When I try to visualize data, this is how it appears:

Instead of displaying Feb 24 and Feb 25, it displays Fri 24, Sat 25. Although a small issue, I'm curious to know what's the issue.

Thanks!

[flrs]

@lisapalathingal, this behavior is new to me as well. Good catch!

I read up on the issue, and it seems to be related to d3.js, see this Stack Overflow post.

Some hints to fix it are given in this post.

Should you decide to fix the issue (and then hopefully contribute), here are some hints to the code that needs work:

• In Visavail.js the code would have to be extended here:

    // define axes
    var xAxis = d3.svg.axis()
        .scale(xScale)
        .orient('top');

• There is a feature which highlights year ticks. That could potentially interfere with the changes that you are making. In the code, it is stated here:

    // rework ticks and grid for better visual structure
    function isYear(t) {
      return +t === +(new Date(t.getFullYear(), 0, 1, 0, 0, 0));
    }
  
    function isMonth(t) {
      return +t === +(new Date(t.getFullYear(), t.getMonth(), 1, 0, 0, 0));
    }
  
    var xTicks = xScale.ticks();
    var isYearTick = xTicks.map(isYear);
  // and so on...

[deesethu]

@lisapalathingal, using a file as input is currently not supported. A workaround would be to generate the page on the fly, for example with PHP, or to use some jQuery or other technologies to fetch the data and dynamically update the visualization.

Let us know if you found a solution. I would be happy to add it to the examples of Visavail.js.

@flrs Can you add support to import from JSON from a file?