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 to position a custom label in highcharts

I am trying to do exactly what is in this official HighCharts fiddle: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/members/renderer-label-on-chart/
However the example's "label" function has hardcoded the x(270) and y(50) parameters:
function (chart) { // on complete
var point = chart.series[0].points[8];
chart.renderer.label('Max observation', 270, 50, 'callout',
point.plotX + chart.plotLeft, point.plotY + chart.plotTop)
My chart obviously will require different parameters. I tried using point's plotX etc. However these are undocumented. in fact the are are not part of API as a (presumably) HighCharts developer points out in another answer - they are just inner properties to get coordinates where plot point. in other word, undocumented.
Using them is shorthand for getting values from point:
http://api.highcharts.com/highcharts#Point.x
http://api.highcharts.com/highcharts#Point.y
And translating to position via:
http://api.highcharts.com/highcharts#Axis.toPixels()
The links above seem completely unrelated.
I tried this to divine what those coordinates provide
}, function (chart) { // on complete
var point = chart.series[0].points[8];
chart.renderer.label('.'
, point.plotX.toFixed(0), point.plotY.toFixed(0), 'callout', point.plotX + chart.plotLeft, point.plotY + chart.plotTop)
.add();
});
seems plotX is some point situated a random set of pixels to the left of the chart series point that provides it (about 60ish) and seems to depend on the font you use.

This seems to be what you're looking for:
var point = chart.series[0].points[8];
var pxX = chart.xAxis[0].toPixels(point.x, true);
var pxY = chart.yAxis[0].toPixels(point.y, true);
chart.renderer.label('Max observation', pxX, pxY, 'callout', point.plotX + chart.plotLeft, point.plotY + chart.plotTop);
Fiddle - Notice .toPixels works per Axis, so you need to determine the pixel representation of point X and point Y separately. The true parameter to the function positions the callout based on its point, rather than the top left corner of the callout.

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.