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

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

Related

Can a echarts formatter function use the existing Cascading Templates functionality?

We have a chart with a time x axis. We need to tweak how the time labels are formatted in some cases, but for most cases, the very handy Cascading Templates work very nicely in Apache eCharts:
axisLabel: {
formatter: {
year: '{yyyy}',
month: '{MMM}',
day: '{dd}',
hour: '{HH}:{mm}',
minute: '{HH}:{mm}',
},
},
I would like to do something like:
axisLabel: {
formatter: (value: number, index: number) => {
if (index === 0 || index === data.length - 1) {
// print full timestamp for first and last label
return echarts.format.formatTime('{yyyy}-{MM}-{dd} {HH}:{mm}', value);
}
// and otherwise use the default from above ... possible?
},
},
I didn't find anything about this in the options docs.
In fact, echarts.format is not included in the API docs, but included in the typescript definition, so I assume it's not internally and can be used by developers ...?
Addition: eCharts does a really nice job that it e.g. automatically prints important labels bold - depending on the context:
And with a formatter function, this gets lost - or I didn't find a way yet how I can keep it.
Looking at the source I found that the formatter function is actually passed a 3rd argument with information about the tick that is missing in the documentation.
I opened PR !332 to improve documentation
Example:
// Use callback function; function parameters are axis index
formatter: function (value, index, tick) {
// Formatted to be month/day; display year only in the first label
var date = new Date(value);
var texts = [(date.getMonth() + 1), date.getDate()];
if (index === 0) {
texts.unshift(date.getYear());
}
let label = texts.join('/');
// apply bold style via rich text for significant levels, i.e. `level > 0`
return tick.level ? `{bold|${label}}` : label;
}

Amcharts "TypeError: this.chart.zoomToDates is not a function"

I'm trying to follow this primer to create external zoom control.
I have 3 buttons
<v-btn v-on:click="showPeriod('1 month')">1 month</v-btn>
<v-btn v-on:click="showPeriod('3 month')">3 month</v-btn>
<v-btn v-on:click="showPeriod('6 month')">6 month</v-btn>
and the eventListener showPeriod
showPeriod: function(period) {
console.log("Periods", this.periods)
if (period != 'All'){
this.changeDataZoom(this.periods[period])
}
else {
//Logic fot 'ALL' period
}
},
changeDataZoom: function (rawPeriod) {
let regex = /([0-9]{2,4}[\-][0-9]{2}[\-][0-9]{2}).*?/g
let periods = []
rawPeriod.match(regex).forEach(function (period) {
periods.push(moment(period,"YYYY-MM-D").format("YYYY-MM-DD"))
})
//Periods ["2018-01-26", "2018-07-27"]
this.chart.zoomToDates(periods[0], periods[1])
},
But when I trying to call this.chart.zoomToDates I get an error "TypeError: this.chart.zoomToDates is not a function"
I also tried to convert string to date using AmCharts.stringToDate but it didn't help me either.
Link to reproduce an error
P.S. I know about periods property - but in this case 1 month is not actually the calendar month, so I need to specify dates manually.
That codepen uses serial chart and you're using stock chart.
Serial chart has method zoomToDates
zoomToDates(start, end)
start - start date, Date object \ end - end date, Date object
Stock chart has method zoom
zoom(startDate, endDate)
startDate, endDate - Date objects.
So, you need something like:
changeDataZoom: function (rawPeriod) {
let regex = /([0-9]{2,4}[\-][0-9]{2}[\-][0-9]{2}).*?/g
let periods = []
rawPeriod.match(regex).forEach(function (period) {
periods.push(moment(period,"YYYY-MM-D").format("YYYY-MM-DD"))
})
//Periods ["2018-01-26", "2018-07-27"]
this.chart.zoom(new Date(periods[0]), new Date(periods[1]))
}

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.

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

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.

Categories