We Keep Coding

C3js - Failed to parse x 'time' to Date object

I am constantly facing a failed to parse time to date object issue. I want to generate a graph which on the left (Y-axis) shows a probability. Say the probability is 0, 0.2, 0.4 etc.. to 1. On the graph, I would like to plot the probability of something at a specific time. The below code is what I am using.
arr1 is the array containing the probabilities.
arr5 is the array containing the timestamp for each of the probability in arr1. The time format is in "12:03:55".
The issue now is if I were to hard code the timestamps into the chart columns, the chart would display perfectly fine. However I am getting the time from a user uploaded .csv file, hence I am concatenating an array which has the timestamps. And this gives me the error of Failed to parse x '12:03:55' to Date object.
I did console.log(dataTime), so I know my concat has been performed correctly in the intended format. This is what the console.log returns.
["times", "12:03:55", "12:03:56", "12:03:56", "12:03:56", "12:03:57", "12:03:57", "12:03:58", "12:03:58", "12:03:59", "12:03:59", "12:04:00"]
This is what the console.log for dataMood returns.
["Mood", 0.3677342, 0.34968433, 0.32662648, 0.3163717, 0.78009516, 0.97079295, 0.97183245, 0.9724318, 0.9689829, 0.7293974, 0.12735543]
Below is the code I am using.
var labelMood = 'Mood';
var dataMood = [labelMood].concat(arr1);
var times = 'times';
var dataTime = [times].concat(arr5);
var chart = c3.generate({
bindto: '#line',
data: {
x: 'times',
xFormat: '%H:%M:%S',
columns: [
dataTime, dataMood
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%H:%M:%S'
}
}
}
});
I really can't see why this isn't working since the format of the concatenated object is the same as how I would've hard coded the times into columns. I'm at my wits end after having Googled for hours. Hopefully someone has came across this issued before and has solved it successfully.

Formatting text from axis ticks in plotly using tickformat

Is possible to add format to the xaxis and yaxis ticks using tickformat?
The idea is cut long names of axis as:
axiswithaverylongname --> axisw...
In the plotly api reference there's and example to format dates
https://plot.ly/javascript/reference/#layout-xaxis-tickformat
and also they refer to the d3 documentation
https://github.com/d3/d3-format/blob/master/README.md
from the plotly reference:
tickformat (string)
default: ""
Sets the tick label formatting rule using d3 formatting mini-languages
which are very similar to those in Python. For numbers, see:
https://github.com/d3/d3-format/blob/master/README.md#locale_format
And for dates see: https://github.com/d3/d3-time-
format/blob/master/README.md#locale_format We add one item to d3's
date formatter: "%{n}f" for fractional seconds with n digits. For
example, "2016-10-13 09:15:23.456" with tickformat "%H~%M~%S.%2f"
would display "09~15~23.46"

As far as I know there is no way of doing it directly via tickformat but a few lines of JavaScript code will fix it for you.
Plotly.d3.selectAll(".xtick text").each(function(d, i) {
Plotly.d3.select(this).html(Plotly.d3.select(this).html().substr(0, 5));
});
Using d3's seleectAll wet get all text labels on the x-axis and update the text with the first 5 letters of the initial label.
You can either do it automatically or when the button is pressed in the example below.
var trace1 = {
x: ["A", "B1", "axiswithaverylongname", "Wow, wait a second, that's way tooooo long"],
y: [1, 2, 3, 4],
type: "bar"
};
var myPlot = document.getElementById('myPlot')
Plotly.newPlot('myPlot', [trace1]);
document.getElementById("cleanButton").addEventListener("click", function(){
Plotly.d3.selectAll(".xtick text").each(function(d, i) {
if (Plotly.d3.select(this).html().length > 8) {
Plotly.d3.select(this).html(Plotly.d3.select(this).html().substr(0, 5) + '...');
}
});
});
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myPlot" style="width:100%;height:100%"></div>
<button id="cleanButton">Clean x-axis</button>

How do I chart the a second custom data point in Dygraphs?

I'm toying around with Dygraphs and really liking it. However I'm having trouble setting a string value for the second point. I've tried to produce it to be a date, but I would rather keep the custom format for my own date and time.
My simple chart is
new Dygraph(document.getElementById("graphdiv"),
dataload
,
{
labels: [ "x", "A" ],
title: 'Point',
ylabel: 'Value in Eng Units',
xlabel: 'Time & Date'
});
The code that provides the data into dataload is
i = 0
while ( i < 100){
datappointvalue = [ archivetime[i], archivevalue[i] ] ;
dataload.push(datapidvalue);
}
As you can guess archivetime and archivevalue are arrays that I populate.
archivetime has the format of a string "22-MAR-2016 20:20:41.26" archivevalue has the format of decimal/int "144.32".
My graph always comes out like
this - It will always get the values of archivevalue, but never archivetime.
So the question is ultimately how can I display my second value to be the date and time. I would prefer not having to reformat my archivedate into something else, but if necessary that can be done.
Thanks!

I've figured it out.
I did not realize that the x-axis had to be in a specific date format and to use new Date() in the code.
So my code is now
i = 0
while ( i < 100){
datappointvalue = [ new date(archivetime[i]), archivevalue[i] ] ;
dataload.push(datapidvalue);
}
where archivetime[i] now has the format "2016/3/17 20:20:41" as specified in http://dygraphs.com/data.html
Thanks

Adding flags to Highstock chart (highcharts) with JavaScript

I've been working on this demo chart http://jsfiddle.net/hcharge/G7rsh/ and I'm struggling to add flags to the x axis.
In the examples on the highchart webpage they use UTC to locate the flag, however the series on this chart are plotted in a different way, using this format [1330560000000,32.29]
Would anybody have an answer? I'm not sure if this is specific to JavaScript or Highcharts but thought it would be worthwhile posting on here.
I've tried adding
series: [{
type: 'flags',
data : [{'text':'Flag Set','title':'E','x':1330560000000} ],
width: 16
}],
to the javascript but this doesn't seem to do anything, any help would be amazing, thanks

if (seriesCounter == names.length) {
selectSeries(0);
// build flags
seriesOptions.push({
'type': 'flags',
//'name': 'myflag',
'data': [{
'title':'E',
'x':1330560000000
}],
'width': 16,
// if you want to place to some serie add the following line
//'onSeries': 1 //serie id
});
createChart();
}
You can see the following demo.

this is unix time format , when working with highstock you have to use unix time format to represent the xaxis
this is how you add flags to highstock
var alarms = { type: 'flags', name:'flag',color: 'red',
data :
[{x:1326845030000,title : 'Alarm 1',text : 'Alarm 1'} ,
{x:1326847030000,title : 'Alarm 2',text : 'Alarm 3'} ,
{x:1326840030000,title : 'Alarm 3',text : 'Alarm 2'} ],
shape : 'squarepin',width : 50 };
alarm variable will then be pushed to your series array
x is where you will place your flag on the xAxis , if you want your flag on a series , use onSeries : 'series_id' object in the alarm object

flot graph not displaying

I have a flot jquery graph but the lines are not displaying. It just displays the graph with x and yaxis but not data lines.
{!formatteddata1} gets a string with the series values from salesforce
The alert gives these values
[1294041600000,14.00],[1294041600000,14.50],[1294041600000,15.00],[1293955200000,12.00]
Below is the code to generate the graph.
j$('#loadgraph').click(function() {
var d1=[];
d1='{!formatteddata1}';
alert(d1);
j$.plot(j$("#placeholder"),[d1],{
xaxis:
{ mode: "time",
min: (new Date("2010/11/01")).getTime(),
max: (new Date("2011/02/01")).getTime()
}
,yaxis: {
min:0, max: 24, tickSize: 5
}
});
});

Hey mate,
The d1 shouldn't be a String, you're declaring it as an array but you're pushing the value with single quotes changing it to string. Change this:
var d1=[];
d1='{!formatteddata1}';
to this:
var d1=[{!formatteddata1}];
Cheers
G.