I'm quite new to Highcharts and the documentation is pretty huge for me to solve my little big problem.
I'm working on app for runners and want to display running pace on chart in minutes:seconds by kilometer or mile, in format like 05:30, which means pace 5 minutes and 30 seconds pre kilometer or mile.
My current (and not working) code is here:
Highcharts.chart('container', {
yAxis: {
type: 'datetime',
categories: ['03:30','04:00','04:30','05:00','05:30','06:00','06:30','07:00','07:30','08:00','08:30'],
labels: { format: '{value:%H:%M}'}
},
xAxis: {
categories: ['2018-01-01', '2018-05-01', '2018-10-01']
},
series: [{
data: ['05:00', '06:00' , '06:30'],
dataLabels: { format: '{value:%H:%M}'}
}],
legend: {layout: 'vertical',align: 'right',verticalAlign: 'middle'},
plotOptions: {series: {label: {connectorAllowed: false},pointStart: 0}},
responsive: {rules: [{condition: {maxWidth: 1000},chartOptions: {legend: {layout: 'horizontal',align: 'center',verticalAlign: 'bottom'}}}]}
});
Currently the line in chart is not appearing. Can anybody repair my code to work correctly? Thanks.
Data needs to be numbers, not string values. If you look in console, you will most likely have Error 14 telling you this.
Changing your data to milliseconds (the format needed for highcharts to understand time) will work, like this:
data: [5 * 3600 * 1000, 06 * 3600 * 1000, 6.5 * 3600 * 1000],
Working example: https://jsfiddle.net/ewolden/55bk99ke/2/
If you want to fix the tooltip in the above example, you just need to format it the same way you format the yAxis labels. Like this:
tooltip: {
pointFormat: '{point.y:%H:%M}'
},
https://jsfiddle.net/ewolden/55bk99ke/5/
Related
I am currently working on a project for my company, where I need to plot highstock charts, which show energy-data of our main buildings.
Since it is live data, new datapoints come per Websocket every few-or-so seconds. However, the graph should only show one datapoint every hour. I wanted to clear this with the highstock dataGrouping, but it does not really work. It groups the points yes, but it still shows the „transmission“, the graph-line, between them. Thus making the whole graph completely irreadable.
In an other Version of the project, the graph only shows the latest datapoint of each group (as specified in the „approximate“ object in the chart options), but also does not start a new group after the chosen Interval runs through.
I've been sitting on this problem for about 3 days now and have not found any proper completely working solution yet.
Unfortunately, due company policy and due to hooks and components necessary, which are only used here in the company, I'm not able to give you a jsfilddle or similar, even though I'd really love to. What I can do is give you the config, mabye you find something wrong there?
const options = {
plotOptions: {
series: {
dataGrouping: {
anchor: 'end',
approximation: function (groupData: unknown[]) {
return groupData[groupData.length - 1];
},
enabled: true,
forced: true,
units: [['second', [15]]],
},
marker: {
enabled: false,
radius: 2.5,
},
pointInterval: minutesToMilliseconds(30),
pointStart: currentWeekTraversed?.[0]?.[0],
},
},
}
This would be the plotOptions.
If you need any more information, let me know. I'll see then, what and how I can send it to you.
Thank you for helping. ^^
This is example how dataGrouping works with live data,
try to recreate your case in addition or use another demo from official Highcharts React wrapper page.
rangeSelector: {
allButtonsEnabled: true,
buttons: [{
type: 'minute',
count: 15,
text: '15S',
preserveDataGrouping: true,
dataGrouping: {
forced: true,
units: [
['second', [15]]
]
}
}, {
type: 'hour',
count: 1,
text: '1M',
preserveDataGrouping: true,
dataGrouping: {
forced: true,
units: [
['minute', [1]]
]
}
}
},
Demo: https://jsfiddle.net/BlackLabel/sr3oLkvu/
In Dhtmlx we realized that duartion can be calculated start to end or start duration or duration to end based on perfrence however we would like count the start to date as 1 not zero.
I Sow in many questions the answer is to change the display. Then, there will be the problem of exporting to xml MS Project or XML PM6 it will have conflict when it passes through Api and reault to incoherent output.
Is there any round about it
It is diffeent in MS project
Unfortunately, when we upload from MS project to DHTMLX Ganett the duration is calculated automatically because we don't wnat to change the grid time slots
Any suggestions of how to add this day in calculation without playing with start or end date
var dateEditor = gantt.config.editor_types.date;
gantt.config.duration_unit = "day";
gantt.config.work_time = true;
gantt.setWorkTime({day : 1, hours: true});
gantt.setWorkTime({day : 2, hours: true});
gantt.setWorkTime({day : 3, hours: true});
gantt.setWorkTime({day : 4, hours: true});
gantt.setWorkTime({day : 5, hours: true});
gantt.setWorkTime({day : 6, hours: true});
gantt.setWorkTime({day : 7, hours: true});
gantt.config.columns = [
{name: "text", label: "Name", tree: true, width: 200, editor: textEditor, resize: true},
{name: "duration", label: "Duration", width:80, align: "center", editor: durationEditor, resize: true},
{name: "start_date", label: "Start", width:140, align: "center", editor: startDateEditor, resize: true},
{name: "end_date", label: "Finish", width:140, align: "center", editor: endDateEditor, resize: true}
];
gantt.calculateEndDate({start_date: new Date("2022/01/13"), duration:5});
console.log(gantt.calculateDuration({start_date: new Date("2022/01/13"), end_date: new Date("2022/01/15")}));
gantt.init("gantt_here")
Gantt uses the non-inclusive duration. There is no way to change how Gantt works, but you can change what is displayed to the users by using the templates:
https://docs.dhtmlx.com/gantt/desktop__loading.html#taskenddatedisplayampinclusiveenddates
https://docs.dhtmlx.com/gantt/api__gantt_task_end_date_template.html
Here is an example of how it works:
https://snippet.dhtmlx.com/ixxx7r2i
Also, you can set the duration_unit to hour and enable the work_time parameter:
Gantt will show the same dates in the grid because the hours will be different.
To show the duration in days and even in fractional values, you can use the formatters:
https://docs.dhtmlx.com/gantt/desktop__formatters_ext.html#durationformatter
Here is an example with the date input type in the inline editors:
https://snippet.dhtmlx.com/j2axq1lu.
Here we need to modify the dates because the input element with the date type doesn't have the hour values.
Here is another example with the datetime-local input type in the inline editors:
https://snippet.dhtmlx.com/cy7tht5r.
The input element may take more space, but it will store the dates more accurately.
Is is possible to for the KendoUI Chart (Area) to have multiple data labels or even a concatenation of two? I need to display both a value and a percentage for each data point. Is this something that would need to be handled on the data source side or is it on the view?
Thanks for any help.
You can use templates to format both labels and tooltips; see labels.template and tooltip.template.
The key is to reference the Property you want using dataItem ex:
dataItem.TotalDollars
template: "${ category } - #= kendo.format('{0:C}', dataItem.TotalDollars)#"
The answer above wont really help unless you have a strong understanding of the Kendo UI framework. I was having a similar issue and before I found my answer I found this question. I circled back because the answer is simple and some simple example code is really simple. Lets save everyone some clicks.
DATA RESPONSE FROM REMOTE DATA (copy and past for local binding):
[
{
"ProgramName":"Amarr Garage Doors",
"PercentageShare":50.12,
"TotalDollars":5440.000000
},
{
"ProgramName":"Monarch Egress Thermal Hinge C",
"PercentageShare":4.64,
"TotalDollars":504.000000
},
{
"ProgramName":"Monarch Egress Window Wells",
"PercentageShare":15.73,
"TotalDollars":1707.000000
},
{
"ProgramName":"Monarch Premier V Egress Windo",
"PercentageShare":16.25,
"TotalDollars":1764.000000
},
{
"ProgramName":"Organized Living Shelftech Ven",
"PercentageShare":13.27,
"TotalDollars":1440.000000
}
]
**Chart Generation Code: **
function createChart() {
$("#SubmissionSummaryByProgramChart").kendoChart({
title: {
text: "Breakdown by Program"
},
legend: {
position: "right"
},
dataSource: {
transport: {
read: {
url: "GetFooData",
dataType: "json",
data: {
Year : 2014,
Quarter : 1,
}
}
}
},
series: [{
type: "pie",
field: "PercentageShare",
categoryField: "ProgramName"
}],
tooltip: {
visible: true,
template: "${ category } - #= kendo.format('{0:C}', dataItem.TotalDollars)#"
}
});
};
$(document).ready(createChart);
I need some help related with jqPlot pie-chart value. Using the following data-set:
['XX01',77.28], ['XX02',3.28], ['XX03',3.31], ['XX04',2.42], ['XX05',2.4],
['XX06',1.61], ['XX07',2.45], ['XX08',1.69], ['XX09',2.18], ['XX10',1.6],
['XX11',1.78]
and this jqPlot option script:
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true,
dataLabels: 'value',
dataLabelFormatString: '%.2f%%',
dataLabelPositionFactor: 1.2,
shadow: false,
sliceMargin: 3
},
}
the result is not showing all the available values. see the snapshot.
Can somebody help me about this? Waiting for any solution here... thanks!
Thank you for the response, Nandu.
I just figured it out yesterday, there is plugin's option for the data label, it is called dataLabelThreshold - jqPlot documentation. By default the value is 3, which mean that for any value below 3 won't be displayed. So the solutions just as simple as define the new threshold.
See this FIDDLE
$.jqplot('pieChart', [[['XX01',7.28], ['XX02',3.28], ['XX03',3.31], ['XX04',2.42], ['XX05',2.4],
['XX06',1.61], ['XX07',2.45], ['XX08',1.69], ['XX09',2.18], ['XX10',1.6],
['XX11',1.78]]],
{
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true,
dataLabels: 'value',
dataLabelFormatString: '%.2f%%',
dataLabelPositionFactor: 1.2,
shadow: false,
sliceMargin: 3
},
}
});
I think it is due to your data.I changed the first data from 77.28 to 7.28.It works fine.
I'm working with FullCalendar fetching events from a json feed. However, I've run into a problem.
The calendar shows my event just fine in the month view, but when going to the day/week in day-view and week-view, the even is not shown?
My initialization of fullcalendar looks like this:
var options = {
header: {
left: 'prev, next',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
allDaySlot: false,
monthNames: ["Januar","Februar","Marts","April","Maj","Juni","Juli", "August", "September", "Oktober", "November", "December" ],
monthNamesShort: ['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec'],
dayNames: ['Søndag', 'Mandag', 'Tirsdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lørdag'],
dayNamesShort: ['Søn','Man','Tir','Ons','Tor','Fre','Lør'],
buttonText: {
today: 'I dag',
month: 'Måned',
week: 'Uge',
day: 'Dag'
},
weekends: false,
defaultView: 'agendaWeek',
events: '/feed/',
firstHour: 8,
slotMinutes: 20,
defaultEventMinutes: 120,
axisFormat: 'HH:mm',
timeFormat: {
agenda: 'H:mm{ - h:mm}'
},
minTime: 8,
maxTime: 16
};
$('#calendar-holder').fullCalendar(options);
My feed returns the following json:
[{"id":"7","title":"Elias (10:00)","start":1359108000,"end":1359109800,"url":"\/tidsbestillinger\/edit\/"}]
Any ideas why this is happening?
Solved! Had to set
allDayDefault: false,
while initializing FullCalendar.
Alternatively I could have set
allDay = false
in the JSON - but doing it globally is much easier.
Also make sure that event length must be enough that it can be displayed in slotDuration.
e.g.
my slotDuration is 15 minutes, my event only displayed if it has minimum 2 minutes duration.