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.
Related
I'm using Apache ECharts 5.2.2 and try to show some markAreas in the chart on a time axis.
Apache ECharts provide some useful examples to get into some specific options. Area Pieces is an example where you can set up your own EChartsOption with markArea.
I tried to adjust the example to my needs but I fail to get it running on time axis using Date object.
If you paste the following EChartsOption into the example, you get an idea.
option = {
xAxis: {
type: 'time', // changed from 'category'
boundaryGap: false
},
yAxis: {
type: 'value',
boundaryGap: [0, '30%']
},
visualMap: {
type: 'piecewise',
show: false,
dimension: 0,
seriesIndex: 0,
pieces: [
{
min: new Date('2019-10-11'), // old tag was gt
max: new Date('2019-10-13'), // old tag was lt
color: 'rgba(0, 0, 180, 0.4)'
},
{
min: new Date('2019-10-15'), // old tag was gt
max: new Date('2019-10-17'), // old tag was lt
color: 'rgba(0, 0, 180, 0.4)'
}
]
},
series: [
{
type: 'line',
smooth: 0.6,
symbol: 'none',
lineStyle: {
color: '#5470C6',
width: 5
},
markLine: {
symbol: ['none', 'none'],
label: { show: true },
data: [{ xAxis: new Date('2019-10-11') }, { xAxis: new Date('2019-10-13') }, { xAxis: new Date('2019-10-15') }, { xAxis: new Date('2019-10-17') }]
},
areaStyle: {},
data: [
// changed from string
[new Date('2019-10-10'), 200],
[new Date('2019-10-11'), 560],
[new Date('2019-10-12'), 750],
[new Date('2019-10-13'), 580],
[new Date('2019-10-14'), 250],
[new Date('2019-10-15'), 300],
[new Date('2019-10-16'), 450],
[new Date('2019-10-17'), 300],
[new Date('2019-10-18'), 100]
]
}
]
};
visualMap defines pieces that has a begin tag min and an end tag max of the visualized area to highlight. Unfortunately, the area does not accept the beginning and ending of the defined Date object and highlights the whole chart.
What am I doing wrong to get it running on time axis? I found a bug report that is fixed in version 5.2.1 for string time data. Even string is not working so I guess, I do something wrong here... Any clue?
Thanks in advance!
I finally did it.
The tags min and max in pieces needs a number to handle data in time axis correctly. So, giving the timestamp of Date object by calling method getTime() is enough.
pieces: [
{
min: new Date('2019-10-11').getTime(),
max: new Date('2019-10-13').getTime(),
color: 'rgba(0, 0, 180, 0.4)'
},
{
min: new Date('2019-10-15').getTime(),
max: new Date('2019-10-17').getTime(),
color: 'rgba(0, 0, 180, 0.4)'
}
]
Maybe, someone else have the same problem. The documentation of Apache ECharts is sometimes not accurate enough.
I have 2 set of datasets I want to display in single line chart for last 7 days, and if possible only show single Y axis with max value from all data sets. I try to use time as xAxes but it is not showing up.
here is my code https://jsfiddle.net/e6trkxL0/
You have to place the labels for datapoints.
let start = new Date(),
end = new Date();
start.setDate(start.getDate() - 7); // set to 'now' minus 7 days.
start.setHours(0, 0, 0, 0); // set to midnight.
let chart = new Chart(document.getElementById("lastSevenDaysOverview"), {
type: "line",
data: {
labels: [],
datasets: [{
label: 'Dataset 1',
data: [1, 4, 66, 7, 12, 3, 8],
borderColor: '#ff3366',
backgroundColor: '#ff3366',
},
{
label: 'Dataset 2',
data: [31, 14, 6, 71, 1, 35, 9],
borderColor: '#880000',
backgroundColor: '#880000',
}
]
},
options: {
interaction: {
mode: 'index',
intersect: true,
},
stacked: false,
responsive: true,
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
},
xAxes: [{
type: "time",
// this is not doing much
// time: {
// min: start,
// max: end,
// unit: "day"
//}
}]
}
}
});
chart.render();
for (let i = 0; i < 7; i++) {
var labelDate = start;
labelDate.setDate(start.getDate() + 1);
chart.data.labels.push(labelDate.toLocaleString())
}
chart.update();
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="lastSevenDaysOverview"></canvas>
2 things, for a time axis in chart.js you need according to the documentation a time adapter. Also you defined you x axis scales as a array which is incorrect. You need to define all scales as an object where the key of the object is the scale ID, you can read more about it in the migration guide
For points to be mapped in the chart you also need to provide a x place which in this case needs to be the date for which the datapoint is valid.
To just show a single axis with the highest values you can let both datasets be mapped to the same y axis:
let start = new Date(),
end = new Date();
start.setDate(start.getDate() - 7); // set to 'now' minus 7 days.
start.setHours(0, 0, 0, 0); // set to midnight.
new Chart(document.getElementById("lastSevenDaysOverview"), {
type: "line",
data: {
datasets: [{
label: 'Dataset 1',
data: [{
x: new Date('10-16-2021'),
y: 1
}, {
x: new Date('10-18-2021'),
y: 4
}, {
x: new Date('10-19-2021'),
y: 66
}],
borderColor: '#ff3366',
backgroundColor: '#ff3366',
},
{
label: 'Dataset 2',
data: [{
x: new Date('10-14-2021'),
y: 31
}, {
x: new Date('10-18-2021'),
y: 14
}, {
x: new Date('10-19-2021'),
y: 6
}],
borderColor: '#880000',
backgroundColor: '#880000'
}
]
},
options: {
interaction: {
mode: 'index',
intersect: true,
},
responsive: true,
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
},
x: {
type: "time",
min: start,
max: end,
time: {
unit: "day"
}
}
},
}
});
<canvas id="lastSevenDaysOverview"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
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.
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.
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.