Series data type

[lockit]

I can't use a DateTime object in the series, but I needed it in xAxes as js date in a scatter chart.

I've solved it overwriting the helper, i've just added this: when DateTime "new Date('#{element.iso8601}')"

Thanks

[airblade]

I looked at this in irb/pry:

irb -rdate -rjson
>> DateTime.now.to_json
=> "\"2017-04-12T09:35:31+01:00\""
>> DateTime.now.iso8601
=> "2017-04-12T09:35:43+01:00"

Is the problem the extra set of quotation marks in the json version?

[sbosio]

I'm using date types in data series without problem.

Are you using the Chart.js library version that bundles Moment.js, or the version without it? I think this code will only work with the bundled version of the library, because all dates represented as strings will be parsed and converted by Moment.js.

I'm guessing you aren't including the Moment.js library. Try changing //= require 'Chart.min.js' with //= require 'Chart.bundle.min.js' in your app/assets/javascripts/application.js file.

If that solves the problem, perhaps it should be noted in the README.md that when using date/time series it's required to use the bundled version of the lib if you're not including it elsewhere in the project.

I think Moment.js is a requirement of Chart.js (see: http://www.chartjs.org/docs/latest/axes/cartesian/time.html), and you shouldn't be using date/time series if you aren't including the Moment.js library on your project. The Chart.js library version without Moment.js included is provided in case you'd already included it on your project as a standalone library.

[vijayj]

@sbosio - I am having the same problem with a time series. I have to plot response time of an api over a period. I am using rails so I intuitively passed in Time object for x-axis. That did not seem to work. I also had to add code to the chart_helper

    when Time
        "new Date(#{element.to_i * 1000})"        

as I have time in epoch

If you can share how you managed to get the ruby code working with date time, that would be extremely helpful.

FYI @airblade

When I pass in the x-axis as date time, I get the following in javascript where the Time object is presented as string.

//<![CDATA[
(function() { var initChart = function() { var ctx = document.getElementById("chart-0"); var chart = new Chart(ctx, { type: "line", data: {"labels":["2017-12-04T21:26:05.000-08:00","2017-12-04T21:26:10.000-08:00","2017-12-04T21:26:15.000-08:00","2017-12-04T21:26:20.000-08:00","2017-12-04T21:26:25.000-08:00","2017-12-04T21:26:30.000-08:00","2017-12-04T21:26:35.000-08:00","2017-12-04T21:26:40.000-08:00","2017-12-04T21:26:45.000-08:00","2017-12-04T21:26:50.000-08:00","2017-12-04T21:26:55.000-08:00","2017-12-04T21:27:00.000-08:00","2017-12-04T21:27:05.000-08:00","2017-12-04T21:27:10.000-08:00","2017-12-04T21:27:15.000-08:00","2017-12-04T21:27:20.000-08:00","2017-12-04T21:27:25.000-08:00","2017-12-04T21:27:30.000-08:00","2017-12-04T21:27:35.000-08:00","2017-12-04T21:27:40.000-08:00","2017-12-04T21:27:45.000-08:00","2017-12-04T21:27:50.000-08:00","2017-12-04T21:27:55.000-08:00","2017-12-04T21:28:00.000-08:00","2017-12-04T21:28:05.000-08:00","2017-12-04T21:28:10.000-08:00","2017-12-04T21:28:15.000-08:00","2017-12-04T21:28:20.000-08:00","2017-12-04T21:28:25.000-08:00","2017-12-04T21:28:30.000-08:00","2017-12-04T21:28:35.000-08:00","2017-12-04T21:28:40.000-08:00","2017-12-04T21:28:45.000-08:00","2017-12-04T21:28:50.000-08:00","2017-12-04T21:28:55.000-08:00","2017-12-04T21:29:00.000-08:00","2017-12-04T21:29:05.000-08:00","2017-12-04T21:29:10.000-08:00","2017-12-04T21:29:15.000-08:00","2017-12-04T21:29:20.000-08:00","2017-12-04T21:29:25.000-08:00","2017-12-04T21:29:30.000-08:00","2017-12-04T21:29:35.000-08:00","2017-12-04T21:29:40.000-08:00","2017-12-04T21:29:45.000-08:00","2017-12-04T21:29:50.000-08:00","2017-12-04T21:29:55.000-08:00","2017-12-04T21:30:00.000-08:00","2017-12-04T21:30:05.000-08:00","2017-12-04T21:30:10.000-08:00","2017-12-04T21:30:15.000-08:00","2017-12-04T21:30:20.000-08:00","2017-12-04T21:30:25.000-08:00","2017-12-04T21:30:30.000-08:00","2017-12-04T21:30:35.000-08:00","2017-12-04T21:30:40.000-08:00","2017-12-04T21:30:45.000-08:00","2017-12-04T21:30:50.000-08:00","2017-12-04T21:30:55.000-08:00","2017-12-04T21:31:00.000-08:00","2017-12-04T21:31:05.000-08:00","2017-12-04T21:31:10.000-08:00","2017-12-04T21:31:15.000-08:00","2017-12-04T21:31:20.000-08:00","2017-12-04T21:31:25.000-08:00","2017-12-04T21:31:30.000-08:00","2017-12-04T21:31:35.000-08:00"],"datasets":[{"label":"Response Time","backgroundColor":"rgba(220,220,220,0.2)","borderColor":"rgba(255, 165, 0,1)","data":[1622.2581300813,2105.8669796557,2002.8259629101,2127.5737179487,2823.7652519894,3333.9344262295,3283.1631382316,3125.1123139378,2350.734223301,2903.5581127733,2358.2118451025,3527.7369640788,2535.7497048406,2507.8916967509,3444.2118171683,2833.5693779904,2998.2877777778,2785.3769633508,2945.3545918367,2723.123853211,2707.1612903226,3244.0436363636,2496.1485587583,2816.8635863586,2899.885193133,2499.1963882619,2908.0189732143,2695.0493962678,2867.9841437632,2491.8993288591,2646.8149350649,2505.8774834437,2759.1962513782,2773.2833698031,3139.7321814255,2621.1278538813,2671.7673160173,2675.4877005348,2768.5723756906,3059.7898789879,2509.9234088457,2597.6916099773,2682.4612068966,2977.3639455782,3036.3761061947,2516.7813852814,2587.3744680851,2506.4877764843,2728.0738045738,3038.8322510823,2123.0188053097,2744.2070938215,3196.8858695652,2751.6670281996,3208.2904608789,2432.6245954693,4731.6185344828,3044.8034557235,2845.1388012618,3002.0656108597,2874.9003285871,4858.3305882353,3498.0829493088,4587.9347536618,2214.5351170569,751.84343434343,791.54277286136],"fill":true,"yAxisID":"y-axis-1"}, options: {"title":{"text":"Response time","x":-20},"responsive":true,"maintainAspectRatio":false,"scales":{"xAxes":[{"type":"time","time":{"format":"MM/DD/YYYY HH:mm","tooltipFormat":"ll HH:mm"},"scaleLabel":{"display":true,"labelString":"Date"}}],"yAxes":[{"type":"linear","display":true,"position":"left","id":"y-axis-1","ticks":{"stepSize":1000}} }; if (typeof Chart !== "undefined" && Chart !== null) { initChart(); } else { /* W3C standard */ if (window.addEventListener) { window.addEventListener("load", initChart, false); } /* IE */ else if (window.attachEvent) { window.attachEvent("onload", initChart); } } })();
//]]>

If I get this working without my patch, I am happy to change the README to explain how to use date and time from ruby to work with chartjs through this gem.

[sbosio]

When I need to pass a Time object (as options for the graph, not for the data) I use the Time#iso8601 method in order to convert it into a string, as you can see in the uploaded image. Time objects passed as data are converted using the generic 'to_json' call in the case statement, which produces an ISO8601 string. As I stated previously, if it's not working, I suppose it could be related to NOT including Moment.js library, Chart.js's page on Github says: "The Chart.bundle.js and Chart.bundle.min.js builds include Moment.js in a single file. This version SHOULD be used if you require time axes and want a single file to include, select this version." Moment.js recommends using ISO8601 when representing dates and times as strings. So, it should be working, at least it worked for me that way. Let me know if that was the problem (that you weren't including Moment.js on your project).

[vijayj]

@sbosio - Thanks for the input. I think I finally figured it out. It all depends on how one passes data. If you pass data as an array of pairs - [{x:ts, y:value},{x:ts, y:value}] where ts is timestamp then the library works. If you pass in data as dataset { labels : [x-values] data:[y-values] } then this gem needs a patch

when Time
        "new Date(#{element.to_i * 1000})"