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.

C3JS not correctly binding y2 axis json data

I have a graph that is a time series with two y axes. The left y axis shows latency in milliseconds and the right y axis (y2) shows throughput. However, it appears the json data isnt being correctly binded to y2 as its acting as if no data was presented to it.
This is a small subset of the json I'm working with:
json: [{
latency: 59,
datestamp: "20160712",
throughput: 46
}, {
latency: 272,
datestamp: "20160713",
throughput: 30
}]
Also note that I overrode the axes as stated in the documentation
axes: {
'latency': 'y',
'throughput': 'y2'
}
Here is the JS fiddle:
https://jsfiddle.net/Lz8nx8dc/3/
As you can see the throughput has much higher values than 1.0 yet y2 tick values arent being updated.

I ended up fixing it here: https://jsfiddle.net/Lz8nx8dc/5/
The solution was to move axes to be a property of data:
data: {
axes: {
'latency': 'y',
'throughput': 'y2'
}
}

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

Handling Large Datasets with With X axis Charts

I am using FLOTR API to display charts
I have some large sets of data for Six Months . For example
var jsonData = [August 19, 2004',August 20, 2004',August 21, 2004',August 22, 2004',.........,January 1 , 2005] ;
Like this for 6 Months .
But inside X axis I need to display only the Months date values .
Flotr.draw(
xaxis:{
tickFormatter: function(n)
{
return ;
},
}
Please tell me , what will be the best solution for this ??

In your xaxis object, you need to use the ticks property to specify the ticks you want.
It would look something like this:
xaxis: {
...
ticks: [[<timestamp>,'August, 2004'],[<timestamp>,'September, 2004'],...,[<timestamp>,'January, 2005]],
...
}
You'll have to create the timestamps the same way you've created them for your data, but that's about it.

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.