Develop Reference

Morris.js distance instead of years - javascript

I'm kind of new to morris.js and finally got some things work except I don't get how to change values. On the bottom of the charts are years, but I'd like to do distances (let's say KM's / or Miles) and left side minutes.
Example:
Does anyone know how to get this working?
I'm using the following code:
<script>
Morris.Area({
element: 'pace',
data: [
{ distance: '1km', value: 4.30 },
{ distance: '2km', value: 4.35 },
{ distance: '3km', value: 4.21 },
{ distance: '4km', value: 4.30 },
{ distance: '5km', value: 4.35 },
{ distance: '6km', value: 4.35 },
{ distance: '7km', value: 4.30 },
{ distance: '8km', value: 4.40 },
{ distance: '9km', value: 4.34 },
{ distance: '10km', value: 4.32 },
{ distance: '11km', value: 4.20 },
{ distance: '12km', value: 4.19 }
],
xkey: 'distance',
// A list of names of data record attributes that contain y-values.
ykeys: ['value'],
labels: ['Value'],
lineColors: ['#c20101'],
fillOpacity: 0.1,
pointFillColors: ['#9e0206']
});
</script>

According to https://morrisjs.github.io/morris.js/lines.html, it should work if you set your config like this:
parseTime: false,
xLabelFormat: function(x) { return x.label + ' km' }
Hope it helps

Related

I recently started working with xslt to generate html from a given xml document. I am trying to display history values using plotly, which is already working well.
Nevertheless, I am currently facing a problem: The x-axis with the date values should be displayed in German. I have already tried to set locale to 'de_DE', but unfortunately this does not work. Does anyone have any idea of how it might work?
var myPlot = node.children[0];
trace1 = {
x: values.map(a => a.xvalue),
y: values.map(a => a.yvalue),
type:'scatter',
name:'Messung',
locale:'de_DE',
hovertemplate: '<b>Wert:</b> %{y}<br><b>Datum:</b> %{x}<br>'
};
data = [ trace1 ];
layout = {
title: 'Verlaufswert: ' + vitSigTitle,
hovermode:'closest',
xaxis: {
autorange: true,
range: [beginDate, endDate],
rangeselector: {
buttons: [
{
count: 1,
label: 'Monat',
step: 'month',
stepmode: 'backward'
},
{
count: 6,
label: '6 Monate',
step: 'month',
stepmode: 'backward'
},
{
count: 1,
label: 'Jahr',
step: 'year',
stepmode: 'backward'
},
{
count: 1,
label: 'Day',
step: 'day',
stepmode: 'backward'
},
{ step: 'all' },
]
},
rangeslider: {range: [beginDate, endDate]},
type: 'date'
},
yaxis: {
title: vitSigUnit,
autorange: false,
range: [minValue-10, maxValue+10],
type: 'linear',
locale:'de_DE'
}
};
Plotly.newPlot(node.children[0], data, layout, {locale: 'de-DE'});
console.log(Plotly.BUILD);

Just setting the locale is not enough, you also have to include the corresponding js file, see https://github.com/plotly/plotly.js/blob/master/dist/README.md#to-include-localization

I'm displaying a balance of a bank account over time. My goal is to have individual tool tips that show the balance AND the transaction that the balance change corresponds to.
I know I can format the Y value with a formatter, but after looking for a few hours I can't find a way to add data to each tool tip. For example the first tool tip might change the balance from 100 to 50, the tooltip would say 'credit card payment' the next tool tip might change the balance to 500 and the tool tip would say 'Paycheck'. here's what I'm doing in my options:
series: [{
name: 'Balance',
data: [
{
x: new Date('2018-02-12').getTime(),
y: 76
}, {
x: new Date('2019-02-12').getTime(),
y: 100
},
{
x: new Date('2020-02-12').getTime(),
y: 200
}, {
x: new Date('2021-02-12').getTime(),
y: 300
},
{
x: new Date('2022-02-12').getTime(),
y: 150
}, {
x: new Date('2023-02-12').getTime(),
y: 22
}
]
}],
options: {
chart: {
type: 'line',
stacked: false,
height: 380,
zoom: {
type: 'x',
enabled: true,
autoScaleYaxis: true
},
toolbar: {
autoSelected: 'zoom'
}
},
dataLabels: {
enabled: false
},
markers: {
size: 2,
},
title: {
text: 'Account balance over time',
align: 'left'
},
yaxis: {
labels: {
formatter: function (val) {
return val.balance;
},
},
title: {
text: 'Balance'
},
},
xaxis: {
type: 'datetime',
},
tooltip: {
shared: true,
y: {
formatter: function (val) {
return "$"+val;
}
}
}
},
Here is what the tooltips look like now:
Above the word 'balance' Id like it to say the actual transaction that's changing the balance. I'm wondering if this is possible at all with apex charts.

Have you tried these options from the docs: https://apexcharts.com/docs/options/tooltip/
There is a 'custom' function you can pass to create your own custom html
under the section called 'custom: function || Array of functions'
Here is the codepen they provide.
tooltip: {
custom: function({ series, seriesIndex, dataPointIndex, w }) {
return (
'<div class="arrow_box">' +
"<span>" +
w.globals.labels[dataPointIndex] +
": " +
series[seriesIndex][dataPointIndex] +
"</span>" +
"</div>"
);
}
}
Also, there is the 'formatter: function' where you can just provide a function to the formatter, similar to what you've already done.

I am using the echarts.js library for pie charts,
I would like to make each slice in the pie hyperlink to another page.
Im using static data points for now, to test if it will work - and will update to dynamic data after.
Below is an example of pie1a - i would like T2, T2, T4 and N/A to reference their own pages. T2 = "http://localhost/T2.html".
//ECHART_PIE1a
var echartPie1a = echarts.init(document.getElementById('echart_pie1a'), theme);
echartPie1a.setOption({
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
x: 'right',
y: 'bottom',
data: ['T2', 'T3', 'T4', 'N/A']
},
calculable: true,
series: [{
name: '(TB)',
type: 'pie',
radius: '54%',
center: ['54%', '36%'],
data: [{
value: 438,
name: 'T2'
}, {
value: 1109,
name: 'T3'
}, {
value: 42,
name: 'T4'
}, {
value: 389,
name: 'N/A'
}]
}]
});

echartPie1a.setOption(option);
echartPie1a.on('click', function (params)
{window.open('' + encodeURIComponent(params.name) + '.html', '_self');
});
Seems to have done the trick.

Hi I'm working for the first time with the charts of the DevExtreme Framework, because I'm searching for a good chart plugin for my web-application, which can solve some of my special requirements. At the moment my chart looks like this (I can't put it in a fiddle or in the stackoverflow snippet, because there I got an error, when a put an external library for globalize/chartjs.js so I copied into the question):
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DevExtreme Chart</title>
<!--FRAMEWOKR-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="./lib/globalize.min.js"></script>
<script src="./lib/dx.charts.js"></script>
<!--JS-->
<script type="text/javascript" src="chart.js"></script>
</head>
<body>
<div id="chartContainer" style="width:100%; height: 600px"></div>
</body>
</html>
JS:
$(document).ready(function(){
var dataSource = [
{
argument: '15.06.2016',
puls: 102,
temperatur: 37.6,
weight: 89
},
{
argument: '16.06.2016',
puls: 99,
temperatur: 35.1,
weight: 88
},
{
argument: '17.06.2016',
puls: 87,
temperatur: 38.0,
weight: 87
},
{
argument: '18.06.2016',
puls: 91,
temperatur: 36.3,
weight: 88
},
{
argument: '19.06.2016',
puls: 112,
temperatur: 37.1,
weight: 90
}
];
$("#chartContainer").dxChart({
dataSource: dataSource,
commonSeriesSettings: {
type: "spline",
label: {
visible: false,
connector: {
visible: false
}
},
argumentField: "argument",
axis: "pulsAxe"
},
tooltip: {
enabled: true
},
series: [
{
name: "Puls",
valueField: "puls",
},
{
name: "Temperatur",
valueField: "temperatur",
axis: "temperaturAxe"
},
{
name: "Gewicht",
valueField: "weight",
axis: "weightAxe"
}
],
valueAxis: [
{
name: "pulsAxe",
title: "Puls",
label: {
customizeText: function(value) {
return value.value + " bpm"
}
}
},
{
name: "temperaturAxe",
title: "Temperatur",
position: "right",
label: {
customizeText: function(value) {
return value.value + " °C"
}
}
},
{
name: "weightAxe",
title: "Gewicht",
position: "right",
label: {
customizeText: function(value) {
return value.value + " kg"
}
}
}
]
});
});
My result:
Now I would like to change the red line like the blue line in this example (this chart is not devextreme, it's highcharts):
My goal is, also to mix line-style in the same line on a specific zone (I would like to say, this part is solid, and this is dotted). How can I do this with devextreme charts? Is this possible?
I would be thankfull for some help.
Cheers.

At the moment the chart doesn't have the capability to display one series with the mix-line style.
There is, however, a way to create two series for one line. The first series can be used to show the solid-style part of the line and the second series for the dot-style part. Here is an example of such an approach:
$("#container").dxChart({
dataSource: [{
arg: 1,
val1: 10
}, {
arg: 2,
val1: 15
}, {
arg: 3,
val1: 8
}, {
arg: 4,
val1: 6
}, {
arg: 5,
val1: 12
}, {
arg: 5,
val2: 12
}, {
arg: 6,
val2: 17
}],
legend: { visible: false },
series: [{
color: "#334455",
valueField: "val1",
point: { visible: false }
}, {
color: "#334455",
valueField: "val2",
point: { visible: false },
dashStyle: "dot",
hoverStyle: {
dashStyle: "dot"
}
}]
});

I have used highchart to plot chart. In which x axis has date time and y axis has numbers. but the problem is that last label on x-axis is not coming. So if you can help please help me to do it.
if i use endontick and show last label it adds 00:00:04 in end
Here is the link to jsfiddle of same code is like a 4k line code
https://goo.gl/bbwZRC
<script>
$(function () {
$('#trend1307').highcharts({
chart:{
defaultSeriesType: 'line',
events: {
load: function () {
var car = this;
$(car.series).each(function (i, serie) {
$('<li><span style="background-color: ' + serie.color + ';"></span>' + serie.name + '</li>').click(function () {
serie.visible ? serie.hide() : serie.show();
}).appendTo('#legend1307');
});
}
}
},
legend: {
enabled: false
},
title:false,
borderWidth: 1,
xAxis: {
type:'time',
title: {
text: 'Time (HH:MM:SS)'
},
categories: [ Date.UTC(2016,01,25,21,00,00)
, Date.UTC(2016,01,25,21,05,00)
, Date.UTC(2016,01,25,21,10,00)
, Date.UTC(2016,01,25,21,15,00)
, Date.UTC(2016,01,25,21,20,00)
, Date.UTC(2016,01,25,21,25,00)
, Date.UTC(2016,01,25,21,30,00)
, Date.UTC(2016,01,26,19,05,00)
, Date.UTC(2016,01,26,19,10,00)
, Date.UTC(2016,01,26,19,15,00)
, Date.UTC(2016,01,26,19,20,00)
, Date.UTC(2016,01,26,19,25,00)
, Date.UTC(2016,01,26,19,30,00)
, Date.UTC(2016,01,26,19,35,00)
, Date.UTC(2016,01,26,19,40,00)
, Date.UTC(2016,01,26,19,45,00)
, Date.UTC(2016,01,26,19,50,00)
, Date.UTC(2016,01,26,19,55,00)
, Date.UTC(2016,01,26,20,00,00)
, Date.UTC(2016,01,26,20,05,00)
, Date.UTC(2016,01,26,20,10,00)
, Date.UTC(2016,01,26,20,15,00)
, Date.UTC(2016,01,26,20,20,00)
, Date.UTC(2016,01,26,20,25,00)
, Date.UTC(2016,01,26,20,30,00)
, Date.UTC(2016,01,26,20,35,00)
, Date.UTC(2016,01,26,20,40,00)
, Date.UTC(2016,01,26,20,45,00)
, Date.UTC(2016,01,26,20,50,00)
, Date.UTC(2016,01,26,20,55,00)
, Date.UTC(2016,01,26,21,00,00)
],
type: 'datetime',
showLastLabel:true,
labels: {
format: '{value:%H:%M:%S}',
rotation: - 90,
style: {
fontSize: '9px',
color:"black"
}
},
},
yAxis: {
plotLines: [ , {
value: 25,
color: 'red',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Maximum Temperature 25°C',
style: {
fontSize: '9px',
color:"black"
}
},
zIndex: 3
}],
max:26,
labels: {
format: '{value:.1f}'
},
tickInterval: 1,
title: {
text: 'Temperature (°C)'
},
},
tooltip: {
valueSuffix: '°C'
},
series: [
{
name: 'T-464',
lineWidth:.75,
data: [
19.3,19.6,19.4,19.2,19.4,19.5,19.3,19.3,19.3,19.2,19.5,19.5,19.4,19.1,18.8,18.6,19,18.8,18.7,18.6,18.7,18.6,18.6,18.5,18.4,18.4,18.5,18.4,18.4,18.3,18.2,18.2,18.3,18.4,18.2,18.1,18.1,18.2,18.2,18,18,18.1,18.2,18.3,18.2,18.1,18.1,17.9,18,18.3,18.1,18.2,18.3,18.3,18.4,18.4,18.3,18.3,18.3,18.4,18.4,18.4,18.4,18.1,18.1,18.2,18.2,18.4,18.6,18.4,18.4,18.7,18.7,18.6,18.6,18.6,18.5,18.4,18.5,18.6,18.5,18.6,18.4,18.5,18.6,18.6,18.5,18.6,18.4,18.4,18.3,18.4,18.5,18.5,18.5,18.4,18.5,18.4,18.3,18.2,18.2,18.2,18.3,18.4,18.4,18.3,18.2,18.4,18.4,18.2,18.1,18.1,18.3,18.4,18,18.1,17.8,18,17.8,18,17.8,17.9,17.9,18,17.7,18,17.8,17.9,17.8,18.1,18,17.8,18,17.8,18.1,17.9,17.8,17.7,17.8,17.5,17.8,17.8,17.7,17.7,17.9,17.8,17.7,17.9,17.6,17.9,17.6,17.9,17.7,17.9,17.8,17.6,17.8,17.8,17.8,18,18,17.9,18.1,18.3,18.2,18.1,18.1,18.4,18.2,18.1,18.1,18.2,18.3,18.3,18.4,18.4,18.3,18.3,18.3,18.1,18.1,18.2,18.4,18.3,18.2,18.2,18.1,18,18.1,18,18.1,18.3,18.3,18.2,18.1,18.1,18.1,17.9,18,18.1,18,18,18,18,18.1,18.1,18,18,17.9,18,18.1,18.3,18.3,18.2,18.3,18.1,18,18,18.1,18.1,18.1,18.1,18.5,18.3,18.3,18.3,18.2,18.1,17.9,18,18,18.1,18.4,18.3,18.3,18,18,17.9,17.8,17.9,17.8,17.8,18.1,17.9,17.8,17.6,17.9,17.8,17.8,17.8,17.8,17.7,17.8,17.8,17.8,17.9,17.8,17.6,17.7,17.9,17.8,17.7,17.6,17.6,17.7,17.7,17.7,17.6,17.6,17.6,17.7,17.6,17.5,17.8,17.7,17.8,17.8,17.9,18.1,17.7,17.7,17.8,17.9,17.8,17.5,17.8,17.7,17.9,17.7 ],
}
, {
name: 'T-2306',
lineWidth:.75,
data: [
21.1,21.3,21.2,20.9,21.2,21.2,21,20.9,20.8,20.7,21,20.8,20.5,20.1,19.8,19.5,19.8,19.6,19.5,19.5,19.6,19.5,19.4,19.3,19.3,19.3,19.3,19.2,19.2,19.1,19.1,19.1,19.1,19.1,19,18.9,19,19.1,19,18.8,18.9,18.9,18.9,19.1,19.2,19.3,19.3,19.4,19.6,19.8,19.7,19.9,20.1,20.2,20.3,20.3,20.3,20.2,20.2,20.3,20.2,20.2,20.2,19.9,19.9,20.1,20.1,20.2,20.3,20.2,20.2,20.4,20.3,20.2,20.3,20.3,20.2,20.2,20.6,20.4,20.3,20.4,20.3,20.4,20.4,20.4,20.4,20.4,20.3,20.3,20.2,20.4,20.4,20.4,20.4,20.3,20.5,20.3,20.2,20.2,20.1,20.2,20.2,20.3,20.2,20.2,20.2,20.3,20.2,19.9,19.8,19.8,19.8,19.8,19.3,19.1,18.9,18.9,18.8,18.8,18.7,18.7,18.8,18.8,18.6,18.8,18.6,18.8,18.5,18.8,18.7,18.7,18.8,18.6,18.8,18.7,18.6,18.5,18.4,18.2,18.4,18.4,18.4,18.4,18.4,18.4,18.4,18.6,18.3,18.6,18.3,18.5,18.4,18.6,18.4,18.4,18.4,18.4,18.6,18.9,18.9,19,19.4,19.6,19.5,19.4,19.4,19.7,19.5,19.6,19.6,19.8,19.8,19.9,19.9,19.9,19.8,19.8,19.9,19.8,19.8,19.9,20,20.1,19.9,19.9,19.8,19.8,19.9,19.8,19.8,20,20,20,19.8,19.7,19.8,19.6,19.7,19.7,19.6,19.6,19.7,19.7,19.8,19.9,19.8,19.8,19.7,19.7,19.8,19.9,20,19.9,19.9,19.8,19.7,19.5,19.5,19.3,18.8,18.7,18.9,18.7,18.6,18.6,18.6,18.5,18.4,18.4,18.4,18.6,18.8,18.7,18.8,18.4,18.4,18.4,18.4,18.4,18.3,18.3,18.4,18.3,18.3,18.2,18.3,18.3,18.3,18.2,18.3,18.2,18.2,18.3,18.3,18.3,18.2,18.2,18.2,18.3,18.2,18.2,18.1,18.1,18.2,18.1,18.1,18.1,18.1,18.2,18.2,18,18.1,18.3,18.2,18.3,18.2,18.3,18.6,18.1,18.2,18.3,18.4,18.2,18,18.3,18.2,18.4,18.3 ],
}
, {
name: 'T-2282',
lineWidth:.75,
data: [
7.3,17.1,17.1,17.3,17.2,17.3,17.3,17.4,17.4,17.4,17.5,17.3,17.4,17.6,17.6,17.7,17.6,17.6,17.8,17.6,17.7,17.8,17.7,17.7,17.6,17.7,17.7,17.9,17.8,17.8,17.8,17.8,17.8,17.8,17.8,17.7,17.8,17.7,17.7,17.8,17.8,17.7,17.8,17.9,18.6,18.4,18.4,18.4,18.4,18.3,18.2,18.4,18.4,18.6,18.9,18.8,18.9,18.5,18.6,18.4,18.4,18.4,18.3,18.4,18.7,18.6,18.5,18.2,18.5,18.4,18.3,18.4,18.4,18.2,18.4,18.6,18.5,18.5,18.3,18.4,18.4,18.6,18.4,18.4,18.3,18.3,18.2,18.3,18.3,18.2,18.1,18.2,18.3,18,17.8,18.1,17.9,18,17.9,17.9,18.3,17.7,17.8,18,18.2,17.9,17.5,17.9,17.8,18.1,17.9 ],
}
, {
name: 'T-2089',
lineWidth:.75,
data: [
19.6,19.6,19.7,19.5,19.7,19.6,19.6,19.5,19.4,19.5,19.7,19.6,19.3,19.2,19,18.7,18.9,18.8,18.7,18.7,18.7,18.7,18.6,18.5,18.6,18.5,18.5,18.4,18.4,18.3,18.4,18.3,18.4,18.4,18.3,18.2,18.2,18.2,18.1,17.9,18,18.1,18.1,18.2,18.1,17.9,17.9,17.8,17.8,17.8,17.7,17.7,17.7,17.7,17.8,17.8,17.8,17.7,17.7,17.8,17.8,17.7,17.7,17.5,17.6,17.6,17.6,17.6,17.7,17.6,17.6,17.7,17.6,17.6,17.7,17.7,17.6,17.6,17.7,17.5,17.4,17.4,17.3,17.4,17.4,17.5,17.5,17.4,17.4,17.4,17.3,17.4,17.5,17.4,17.5,17.5,17.6,17.4,17.4,17.4,17.5,17.5,17.5,17.6,17.6,17.6,17.6,17.6,17.6,17.4,17.4,17.5,17.5,17.7,17.7,17.7,17.7,17.7,17.7,17.7,17.7,17.7,17.8,17.8,17.6,17.7,17.7,17.8,17.6,18,17.9,17.8,17.9,17.7,18.1,18,17.9,17.9,17.8,17.6,17.7,17.9,17.9,17.9,17.9,17.8,17.8,17.9,17.7,17.9,17.7,17.9,17.8,17.9,17.8,17.8,17.9,17.8,17.9,17.8,17.7,17.6,17.7,17.7,17.6,17.5,17.5,17.7,17.6,17.6,17.7,17.7,17.7,17.7,17.7,17.7,17.6,17.6,17.7,17.6,17.6,17.7,17.7,17.8,17.9,17.9,18.1,18.2,18.3,18.2,18.3,18.4,18.5,18.5,18.4,18.4,18.6,18.4,18.5,18.6,18.5,18.5,18.4,18.4,18.5,18.7,18.8,18.8,18.7,18.8,18.8,18.8,18.8,18.8,18.8,18.8,18.9,19,18.9,18.9,19.1,19.2,19.5,19.4,19.4,19.4,19.5,19.4,19.3,19.3,19.2,19.4,19.6,19.6,19.7,19.6,19.5,19.4,19.3,19.3,19.3,19.3,19.4,19.3,19.3,19.1,19.1,19.1,19,19.1,19.3,19.1,19.2,19.3,19.2,19.1,19.1,19.1,19.1,19.2,19.1,19.1,19.1,19,19,19,18.9,18.8,18.8,18.8,18.8,18.6,18.4,18.4,18.3,18.4,18.2,18.3,18.5,18.2,18.2,18.2,18.4,18.2,17.9,18.1,18.1,18.2,18.3 ],
}
],
plotOptions:{
line:{
marker:{
enabled : false
}
}
},
legend:{
enabled:false
}
});
});</script>

Don't use categories. In your case:
Set xAxis.type to datetime (not type: 'time'!). Remove categories, or at least replace categories with tickPositions.
If you have regular interval between points, use series.pointStart and series.pointInterval (or pointIntervalUnit). If your data may be irregular, then change your data format. Currently you have data: [value, value, value]. Instead use data: [ [timestamp, value], [timestamp, value], [timestamp, value] ]
Add xAxis.tickInterval option - for example 3600 * 1000, to determine where ticks should appear.
Add xAxis.maxPadding = 0 option - so last tick won't exceed extremes.
That's all. Example with regular interval between points: https://jsfiddle.net/txuhs36t/2/