Jquery Flot-Chart: point position for dates - javascript

I've just started using flot and I'm already clueless how I'll get the points on the right date. First I thought it might be a problem with the daytime, if so.. how do I handle it?
var data = [
[gd(1, 1, 2014), 125],
[gd(2, 1, 2014), 101],
[gd(3, 1, 2014), 118],
[gd(4, 1, 2014), 109],
[gd(5, 1, 2014), 131],
[gd(6, 1, 2014), 129],
[gd(7, 1, 2014), 115]
];
var dataset =
[{
label: "Label",
data: data,
color: "#e5a836",
points: {
fillColor: "#a27c36",
show: true
},
lines: { show: true }
}];
var options = {
grid: {
backgroundColor: "#ffffff",
},
yaxis: {
color: "black"
},
xaxis: {
position: "bottom",
color: "black",
mode: "time",
tickSize: [1, "day"],
timeformat: "%d.%m.%Y"
}
}
Made a quick review:
http://jsfiddle.net/9x7aJ/4276/

Use this in your gd() function:
return Date.UTC(year, month - 1, day);
Flot uses UTC by default but new Date() gives you local time by default.

Related

Flot JS x-axis time not formatting properly when trying to display dates

Using Flot I am trying to develop a chart where the x-axis displays dates in %M%D format. However when running the following code it just shows up as the epoch time instead.
http://jsfiddle.net/unwo728s/1/
JavaScript code:
var data = [ [gd(2016, 12, 3), 1000], [gd(2016, 12, 4), 200], [gd(2016, 12, 5), 3000], [gd(2016, 12, 6), 1000], [gd(2016, 12, 7), 1000], [gd(2016, 12, 8), 1000]];
var dataset = [
{
label: "Daily Amount",
data: data,
color: "#FFFFFF",
points: { fillColor: "#FFFFFF", show: true },
lines: { show: true }
}
];
var options = {
xaxes: {
mode: "time",
timeformat: "%m/%d",
tickSize: [3, "day"],
color: "black",
axisLabel: "Date",
}
};
$.plot($("#flot-placeholder"), dataset, options);
function gd(year, month, day) {
return new Date(year, month, day).getTime();
}
How can I change the x-axis to be properly formatted?
It should be
var options = {
xaxis: {
Also you need to subtract one from your `month´ parameter (month is zero-based in JS).
See this updated fiddle.

Add horizontal Line to my chart.js Barchart

Hi I want to add a horizontal line to my Barchart. This is the Code of my chart:
var singleBarOptions = {
scaleBeginAtZero: true,
scaleShowGridLines: true,
scaleGridLineColor: "rgba(0,0,0,.05)",
scaleGridLineWidth: 1,
barShowStroke: true,
barStrokeWidth: 1,
barValueSpacing: 5,
barDatasetSpacing: 1,
responsive: true
};
var singleBarData = {
labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016"],
datasets: [
{
label: "My Second dataset",
fillColor: "rgba(0,191,255,0.5)",
strokeColor: "rgba(0,191,255,0.8)",
highlightFill: "rgba(100,149,237,0.75)",
highlightStroke: "rgba(100,149,237,1)",
data: [60, 50, 40, 30, 20, 10, 20]
}
]
};
var ctx = document.getElementById("singleBarOptions").getContext("2d");
var myNewChart = new Chart(ctx).Bar(singleBarData, singleBarOptions);
Is there an easy way to draw this line?
It would also be nice if I could change the position of the line later on.
There are solutions here on stackoverflow, but they don't deal with settings.
Yes, use the Annotations plugin:Chart.Annotation.js
annotation: {
annotations: [{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: '26',
borderColor: 'tomato',
borderWidth: 1
}],
drawTime: "afterDraw" // (default)
}
Result:
Codepen: Chart.js Annotations BarChart
Note: I am using V 2.2.1, your syntax is I believe from a previous version, so I am only using your Data and some options.

FLOT Chart xAxis time

I am using flot chart for charts. Please find following...
js array
data_visits = [
[new Date('06/02/2014 01:00').getTime(), 100],
[new Date('06/05/2014 10:00').getTime(), 200],
[new Date('06/10/2014 13:00').getTime(), 300],
[new Date('06/15/2014 15:00').getTime(), 400],
];
chart code
if($('#flot_overview').length) {
var chart_placeholder = $('#flot_overview');
var options = {
grid: {
clickable: true,
hoverable: true,
autoHighlight: true,
backgroundColor: null,
borderWidth: 0,
color: "#666",
labelMargin: 10,
axisMargin: 0,
mouseActiveRadius: 10,
minBorderMargin: 5
},
series: {
lines: {
show: true,
lineWidth: 2,
steps: false,
fill: true
},
points: {
show:true,
radius: 4,
symbol: "circle",
fill: true
}
},
tooltip: true,
tooltipOpts: {
content: "<span style='display:block; padding:7px;'>%x - <strong style='color:yellow;'>%y</strong></span>",
xDateFormat: "%b %d, %Y %H:%M",
shifts: {
x: 20,
y: 0
},
defaultTheme: false
},
xaxis: {
mode: "time",
minTickSize: [1, "hour"],
timeformat: '%H:%M',
labelWidth: "40"
},
yaxis: { min: 0 },
legend: {
noColumns: 0,
position: "ne"
},
colors: ["#0892cd"],
shadowSize: 0
};
$.plot(chart_placeholder,[{
label: "Click / Visits",
data: data_visits,
points: {fillColor: '#fff'},
lines: {fillColor: 'rgba(8,146,205,.2)'}
}],options);
}
It generates chart properly and shows correct time in tooltip, but it does not show correct time in xAxis as per my settings, it always show 00:00 for all xaxis if i use timeformat: '%H:%M' it works fine if i format this as date.
Please help, thanks.
Since your data spans multiple days, flot is logically placing the tick marks at the start each day. This means that with a time format of '%H:%M', you then get 0:00.
In my mind something like this makes a lot more sense for you data.

Values are setting on place in flot chart

I am trying to plot a chart in my page.Am able to set the chart values properly.But the values are not setting. Because of this am getting space at the end .
var DataSet1 = [
[new Date("2014/03/03").getTime(), 0],
[new Date("2014/03/10").getTime(), 16 ],
[new Date("2014/03/17").getTime(), 32 ],
[new Date("2014/03/24").getTime(), 189],
[new Date("2014/03/31").getTime(), 250] ];
var DataSet2 = [
[new Date("2014/03/03").getTime(), 0],
[new Date("2014/03/10").getTime(), 40],
[new Date("2014/03/17").getTime(), 20 ],
[new Date("2014/03/24").getTime(), 180],
[new Date("2014/03/31").getTime(), 230] ];
/* to find last 4 weeks mondays */
var newDate = new Date();
var day = newDate.getDay();
var date = newDate.getDate();
var xaxisArray = [];
for(var i = 0;i<5;i++){if(i!=0){
var tempnewDate = new Date(setNewDate);
setNewDate =tempnewDate.setDate(tempnewDate.getDate()-(7));
xaxisArray.push(setNewDate);
} else {
setNewDate =newDate.setDate(date-day+1);
xaxisArray.push(setNewDate);
}
}
$.plot($("#chart-revenue2"),[
{ data: DataSet1,label: "#FST",},
{ data: DataSet2, label: "SCND",
points: { show: true },
lines: { show: true,fill: false},
yaxis: 2,color:"#C76C6B"} ] ,
{
xaxis:
{
mode: "time",
min: xaxisArray[4],
max:xaxisArray[0],
timeformat: "%d/%m/%y",
ticks: xaxisArray.reverse(),
minTickSize :30
}
, yaxes: [
{
min:0, max: 400, tickSize: 50
},
{
position: "right",
min:0, max: 300, tickSize: 50
}
],
series: {
lines: {
show: true,
lineWidth: 3,
fill: true
},
shadowSize: 0,
},
grid: {backgroundColor: { colors: ["#ffffff", "#f4f4f4"] }},
colors: ["#294777"],
legend: { show: true, container: '#chart-revenue1-table' }
});
Please check my fiddle..
The problem is how you are calculating the dates for your axis ticks. When you create newDate, it has hours, minutes and seconds, which are then included in each tick. Make sure they are all zero and it will all line up:
var newDate = new Date()
newDate.setHours(0);
newDate.setMinutes(0);
newDate.setSeconds(0);
There's probably a better way to do that, I just haven't looked it up :)
See it working here: http://jsfiddle.net/ryleyb/htsBz/1/
You've set the maximum on the xaxis beyond the last point you have data for. What did you expect it to do? It doesn't have data, so it leaves it blank. If you want your axis to fit, set it's max to max: new Date("2014/03/31").getTime(), or better yet, just don't set the max and let flot autoscale it for you.

flot yaxsis and colors

I am trying to implement a flot bar graph, but I am having a few problems
The first being that setting the yaxsis min and max does not seem to work, the graph still only goes from 0 - 14.
Second I dont know how to set individual colours and names for each bar.
This is what I have
var d2 = [{
"label": "Face",
"data": [[0 , "3"], [5, "13"]]
},
{
"label": "Telephone",
"data": [[1, "400"], [6, "337"]]
},
{
"label": "Web",
"data": [[2, "1304"], [7, "843"]]
}];
var options = {
yaxes: {min: 0, max: 25000},
xaxis: {
tickSize: [1],
autoscaleMargin: .10,
show: false
},
series: {
lines: { show: false},
bars: {
show: true,
barWidth: 0.9,
align: 'center',
multiplebars:true,
},
points: {
show: true
}
}
};
$.plot($('#graph1'), d2, options);
Does anyone know how to fix these?
Thanks
If you want a different name and color for each bar then you'll need to configure the bar settings as part of the data sets.
var data1 = [
{
label: "Face",
data: [[0 , 3], [5, 13]],
bars: {
show: true,
barWidth: 0.9,
fill: true,
lineWidth: 1,
order: 1,
fillColor: "#AA4643"
},
color: "#AA4643"
},
{
label: "Telephone",
data: [[1, "400"], [6, "337"]],
bars: {
show: true,
barWidth: 0.9,
fill: true,
lineWidth: 1,
order: 2,
fillColor: "#89A54E"
},
color: "#89A54E"
}]
Then graph them like this:
$.plot($("#placeholder"), data1, options);
As for min and max not working, what happens if you don't configure them? Does the axis fit the data correctly?

Categories

Resources