I created this simple line chart using morris.js. But it is not showing data properly. I don't know why?
Please check it at js fiddle.
Js fiddle: link
new Morris.Line({
element: 'multi-line-mp',
data: [
{
day: 'Jan 1',
sales: '0',
purchases: '1'
},
{
day: 'Jan 2',
sales: '14',
purchases: '3'
},
{
day: 'Jan 3',
sales: '45',
purchases: '0'
},
{
day: 'Jan 4',
sales: '47',
purchases: '32'
},
{
day: 'Jan 5',
sales: '90',
purchases: '10'
}
],
xkey: 'day',
ykeys: ['Sales', 'Purchases'],
labels: ['Sales', 'Purchases'],
resize: true
});
The date format of your xkey (day) is not good, this is rather a string than a real date.
You have 2 choices:
change the format of the xkey to be a real date (like 2021-01-01 instead of Jan 1)
set the option parseTime to false, so that it won't try to format the string to be a date
In case you change the format of xkey, you still can change the way the date is displayed thanks to the function dateFormat (see the documentation for this here: http://morrisjs.github.io/morris.js/lines.html)
Related
I am somewhat new to Highcharts and I am trying to pull off something that I am sure can be done but I cant figure it out.
I have posted my jsfiddle here: https://jsfiddle.net/dfeagin/1hn6c9ad/7/
Here is what the data looks like in my categories section for that axis:
categories: ['1/20/2020 9:22:02 PM', '1/20/2020 9:22:03 PM', '1/20/2020 9:22:04 PM', '1/20/2020 9:22:08 PM', '1/20/2020 9:22:09 PM', '1/20/2020 9:22:10 PM', '1/20/2020 9:22:12 PM', '1/20/2020 9:22:14 PM', '1/20/2020 9:22:15 PM', '1/20/2020 9:22:16 PM', '1/20/2020 9:22:18 PM', '1/20/2020 9:22:19 PM'.....]
On the XAxis, which represents minutes, there are a total of 46 minutes between the start to end time frame. I want to show two minute increments and just show the minute number vs. a date/time stamp:
0 2 4 6 8 10 ..... 42 44 46
How can I get it to do that? The data will have differing numbers of data points between those two minute increments but I want the 2 min intervals to be consistent.
Another note: I am generating the data that I feed to Highcharts in a .net web application so if it helps the situation I can send in a series of minute numbers vs. time/date stamps. So I could be sending over:
categories: ['0', '0', '0', '1', '1', '2', '2', '2', '2', '2', '2', '2', '3', ... '43', '43', '43', '44', '44', '45', '45', '45', '45', '45', '45', '45', '46', '46']
I think you would be better setting the chart up as spline rather than each series, with a datetime x-axis and putting data into the series as an array of date/value x/y pairs.
This way you can have more control over the xAxis ticks in this case setting tick interval to 2 minutes, and is more flexible in general.
Use a custom formatter to manipulate the tick value.
https://jsfiddle.net/gazx45oy/
Chart type:
chart: {
type: 'spline',
xAxis settings:
xAxis: [{
type: 'datetime',
startOnTick: true,
minPadding: 0,
tickInterval: 120000,
labels: {
formatter: function () {
return (this.value - this.axis.min) / 60000;
},
Series data:
var vesselSteamTemp = [
[Date.UTC(2020,20,1,9,22,2), 119],
I am trying to create a gantt chart with Chart.js. I use horizontalBar chart type and this works fine if I populate numbers instead of dates, but it does not render when I pass dates as data.
Data structure: Task, Start Date, End Date
this.chartData = {
labels: ['Task 1', 'Task 2'],
datasets: [{
data: ['2019-01-20', '2019-01-30'],
}],
};
this.options = {
title: {
display: true,
text: 'Title of Chart',
},
legend: {display: false},
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'day',
},
}],
},
};
Template:
<chart class="chart" type="horizontalBar" [data]="chartData" [options]="options"></chart>
Tried another example
You are passing the values as strings. Try to pass as dates:
datasets: [{
label: 'Demo',
data: [{
t: new Date("2015-3-15 13:3"),
y: 12
},
For me, dateTimeLabelFormats showing inconsistent date-format based on the time selection.
Below is the URL
http://jsfiddle.net/46bk7pvm/2/
In above URL, when I select 6 month it is reflecting with proper date format. Which is '%Y-%m'. But when I select 1 Month or 3 Months it is reflecting with day: '%Y<br/>%m-%d', format. But it should be Month format which is month: '%Y-%m'.
In short for month selection it should be
month: '%Y-%m',
for day selection it should be
day: '%Y<br/>%m-%d',
and for year it should be
year: '%Y'
Here is the code block
Highcharts.stockChart('container', {
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
second: '%Y-%m-%d<br/>%H:%M:%S',
minute: '%Y-%m-%d<br/>%H:%M',
hour: '%Y-%m-%d<br/>%H:%M',
day: '%Y<br/>%m-%d',
week: '%Y<br/>%m-%d',
month: '%Y-%m',
year: '%Y'
}
},
rangeSelector: {
selected: 1
},
series: [{
name: 'USD to EUR',
data: usdeur
}]
});
How can we set above dateformat dynamically based on the time period selection.?
dateTimeLabelFormats defines format for xAxis ticks according to the distance between closest of them. When you click 1M, then you have only four weeks of data so if there will be room only for four dataLabels then week format will be applied. If you have more space (wider chart) then day format will be used etc.
What you want is probably to change format on labels after button click: http://jsfiddle.net/BlackLabel/wxpfc2k5/
Snippet (only 1M button!):
rangeSelector: {
selected: 1,
buttons: [{
type: 'month',
count: 1,
text: '1m',
events: {
click: function() {
chart.xAxis[0].update({
labels: {
format: '{value:%Y-%m}' // change format on click
}
});
}
}
}, {
type: 'month',
count: 3,
text: '3m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'ytd',
text: 'YTD'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}]
}
More about label formatting can be found in the API and docs.
Thanks, Paweł Fus for your suggestion on formatter.
I solved my problem by assigning date-format to formatter. Here is the code.
labels: {
overflow: false,
align: "center",
style: _xaxis_label_style,
step: _step,
staggerLines: _staggerLines,
x: 0,
enabled: true,
useHTML: term_useHTML,
formatter: function () {
if ($j(".hdnSelection").val() == "today") {
return Highcharts.dateFormat(dateformatlable.hour, this.value);
}
else {
var key = "1month"; //default case
if (typeof $j('.hdnSelectionmonth') !== "undefined" && $j('.hdnSelectionmonth').val() != '') {
key = $j('.hdnSelectionmonth').val();
}
var duration = key.substring(1);
switch (duration.toLowerCase()) {
case "day":
return Highcharts.dateFormat(dateformatlable.day, this.value);
case "week":
return Highcharts.dateFormat(dateformatlable.week, this.value);
case "month":
return Highcharts.dateFormat(dateformatlable.month, this.value);
case "year":
return Highcharts.dateFormat(dateformatlable.year, this.value);
break;
case "ytd":
return Highcharts.dateFormat(dateformatlable.year, this.value);
default:
return Highcharts.dateFormat(dateformatlable.day, this.value);
}
}
}
},
showLastLabel: true
You can get selected unitName from tickPositionInfo and apply it in the label formatter:
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
const format = {
second: '%Y-%m-%d<br/>%H:%M:%S',
minute: '%Y-%m-%d<br/>%H:%M',
hour: '%Y-%m-%d<br/>%H:%M',
day: '%Y<br/>%m-%d',
week: '%Y<br/>%m-%d',
month: '%Y-%m',
year: '%Y'
}[this.tickPositionInfo.unitName];
return Highcharts.dateFormat(format, this.value);
}
}
}
I am trying to display dateTime in day/weekly/month format on the x axis of high charts I have the data formatted as x utc date time format and y (magnitude). I was under the impression I only need to do this for it to work
Highcharts.chart('container', {
title: {
text: 'Chart with time'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: "%e. %b",
month: "%b '%y",
year: "%Y"
}
},
series: [{
data: [
[1493326164493, 100],
[1493326194018, 120]
]
}]
});
What am I doing wrong? I have posted a fiddle link below for my scenario
https://jsfiddle.net/dLfv2sbd/
axis.dateTimeLabelFormats works a little bit different. In the first place, Highcharts tries to guess what is 'the best unit' of your data and, e.g. if it is a day, it will format it according to day property from dateTimeLabelFormats.
If you want to just format axis labels, you can use axis.labels.format and specify a format like this:
xAxis: {
type: 'datetime',
labels: {
format: '{value:%Y-%b-%e}'
},
example: https://jsfiddle.net/dLfv2sbd/1/
You can try format date with
xAxis: {
labels: {
formatter: function(){
return moment(new Date(this.value)).format('DD'); // example for moment.js date library
//return this.value;
},
},
Also you can check documentation http://api.highcharts.com/highcharts/xAxis.labels.formatter
You can try this also -
{value:%Y-%b-%e %l:%M %p }
labels: {
format: '{value:%Y-%b-%e %l:%M %p }'
},
Output- 2017-Apr-27 8:49 PM
format: '{value:%Y-%b-%e %l:%M}'
labels: {
format: '{value:%Y-%b-%e %l:%M %p }'
},
Output- 2017-Apr-27 8:49
format: '{value:%Y-%b-%e}'
labels: {
format: '{value:%Y-%b-%e}'
},
Output - 2017-Apr-27
format: '{value:%Y-%b-%e %H:%M}'
labels: {
format: '{value:%Y-%b-%e %H:%M}'
},
output 2017-Apr-27 20:49
Simple year-month-day format:
format: '{value:%Y-%m-%e}'
I have a PHP PDO query, it selects the year, month and day from the database. It also counts the number of rows that each day has:
SELECT
dateYear, dateMonth, dateDay,
count(dateDay) AS count_days
FROM just_ink
WHERE dateMonth = :month AND dateYear = :year AND deleted = 0
GROUP BY dateYear, dateMonth, dateDay
When echoing the results:
foreach ($result as $subResult) {
foreach ($subResult as $row) {
$year = $row['dateYear'];
$month = $row['dateMonth'];
$day = $row['dateDay'];
$count = $row['count_days'];
echo $month . " " . $day . " " . $year . " " . $count . " lines, ";
}
}
This returns a value like:
June 7 2016 3 lines, June 8 2016 1 lines,
This means, June 7th has 3 forms and June 8th has 1 form.
Now for the formatting, I am using Highcharts basic line chart. The data needs to be formatted in this way:
<script>
$(function () {
$('#container').highcharts({
title: {
text: 'Monthly New Forms',
x: -20 //center
},
xAxis: {
title: {
text: 'Day of the Month'
},
categories: [
'1', '2', '3', '4', '5',
'6', '7', '8', '9', '10',
'11', '12', '13', '14', '15',
'16', '17', '18', '19', '20',
'21', '22', '23', '24', '25',
'26', '27', '28', '29', '30',
'31'
]
},
yAxis: {
title: {
text: 'Month of June'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Number of New Forms Per Day',
data: [1, 2, 3, 4, 5, 6]
}]
});
});
</script>
Where the categories are the x-axis titles, and the series data is the frequency of each day. So If I want to represent
June 7 2016 3 lines, June 8 2016 1 lines,
The series data would need to look like
0, 0, 0, 0, 0, 0, 3, 1, 0, etc.
Any ideas?
First create an array with elements for every day of the month:
$counts = array_fill(1, 31, 0);
Then in your loop, fill in the entry for the day:
foreach ($subresult as $row) {
$day = $row['dateDay'];
$counts[$day] = $row['count_days'];
}
$counts = array_values($counts); // because json_encode treats it as an object if indexes don't start at 0
echo json_encode($counts);
I'm not sure why you're selecting dateYear and dateMonth, since those are the inputs to the query. You don't need to set those variables in the loop, since they'll always be the same thing.
$highchartdata = []
foreach ($subResult as $row) {
$highchartdata[$row['dateDay']] = $row['count_days'];
}
echo json_encode($highchartdata);
get the above json data from server
obj = JSON.parse(data);// parse the json data
for (i = 1; i <=31; i++) {
if(!obj[i]) // if ith key is not defined make it 0
obj[i]=0;
}
console.log(obj);