ApexCharts impossible to set the logarithmic option in javascript - bar-chart

I use a DrawChart method and try to set the logarithmic option to the yaxis to true without success:
The datas (for the series) contains :
"[{type:"bar",data:[1.19576304413727E-08,1.30322021618667E-07]}]"
I try to place the logarithmic : true option in several place without succes. For me it must be placed into the yaxis part.
Thank you in advance
chart.updateOptions({
series: datas,
chart: {
toolbar: {
show: showToolbar
},
animations: {
enabled: false
},
type: 'bar'
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '50%',
endingShape: 'rounded'
}
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
title: {
text: 'Masse'
},
categories: categories//,
//tickAmount: 10
},
yaxis: {
labels: {
formatter: function (value) {
//var ex;
return value.toExponential();
//return value;
}
},
title: {
text: unit
},
tickAmount: 10
//min: min,
//max: max,
//decimalsInFloat: 3
},
grid: {
padding: {
left: 50,
right: 50
}
},
legend: {
show: true,
position: 'bottom',
horizontalAlign: 'left',
showForSingleSeries: true,
showForNullSeries: true,
showForZeroSeries: true
},
})

I found the problem !
When you have log values really small (like 5.32E-9), the logarithm option doesnt work if you try to display the legend thrue a JS function.
So multiply by 1E10 the divide into the JS function (where you display the legend) by 1E10.

Related

ChartJS - Line Chart with different size datasets

I'm working on an application that will generate some charts and I'm using chartjs to draw them.
The issue I'm facing is this: the charts will be generated with dynamic data. The application may generate up to 9 datasets and rarely they will have the same size. How can I make chartjs advance or fill the values when the datasets size won't match?
I saw some examples here at stackoverflow and even at chartjs github page but they didn't work me.
This is an example of what I have so far: https://jsfiddle.net/camarrone/49onz8no/1/
Two datasets with different data array. The first value for the second dataset doesn't exist hence it should be zero or null. Like this: https://jsfiddle.net/camarrone/d39a0qgw/
This is "failing" code for reference:
<html>
<head>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js'></script>
</head>
<body>
<div style="width: 900px; height: 500px">
<canvas id="chart1"></canvas>
</div>
<script>
let chart1 = new Chart(document.getElementById("chart1"), {
type: 'line',
data: {
labels: ["2018-04-21T16:00:00", "2018-04-21T18:00:00", "2018-04-21T20:00:00", "2018-04-23T12:00:00", "2018-04-23T13:00:00"],
datasets: [
{
type: 'line',
fill: false,
label: 'Label_1',
borderColor:"hsl(181.40751321285697,45.9256727159548%,27.54659126333186%)",
data: [7,3,11,2,3]
},
{
type: 'line',
fill: false,
label: 'Label_2',
borderColor:"hsl(181.91996173600447,39.046658571489985%,65.63412032509264%)",
data: [1,6,1,2]
},
],
},
options: {
animation: {
duration: 0
},
title: {
display: false,
text: ''
},
legend: {
labels: {
useLineStyle: true
},
position: 'bottom',
},
}
});
</script>
</body>
</html>
For those facing the same issue and future reference. Here is the working code for my case:
<html>
<head>
<script type='text/javascript' src='./momentjs-with-locales.js'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js'></script>
</head>
<body>
<div style="width: 900px; height: 500px">
<canvas id="chart1"></canvas>
</div>
<script>
let chart1 = new Chart(document.getElementById("chart1"), {
type: 'line',
data: {
labels: ["2018-04-21T16:00:00", "2018-04-21T18:00:00", "2018-04-21T20:00:00", "2018-04-23T12:00:00", "2018-04-23T13:00:00"],
datasets: [
{
fill: false,
label: 'Page View',
borderColor: "hsl(226.15793242887034,78.48665583019744%,62.177112879909686%)",
data: [
{
labels: ["2018-04-21T16:00:00", "2018-04-21T18:00:00", "2018-04-21T20:00:00", "2018-04-23T12:00:00", "2018-04-23T13:00:00"],
},
{
x: new Date('2018-04-21T16:00:00'),
y: 7
},
{
x: new Date("2018-04-21T18:00:00"),
y: 3
},
{
x: new Date("2018-04-21T20:00:00"),
y: 11
},
{
x: new Date("2018-04-23T12:00:00"),
y: 2
},
{
x: new Date("2018-04-23T13:00:00"),
y: 3
}
],
},
//dataset 2
{
fill: false,
label: 'View Content',
borderColor: "hsl(232.84952363040048,93.45575469963681%,28.844243872178236%)",
data: [
{
labels: ["2018-04-21T17:00:00", "2018-04-21T20:00:00", "2018-04-23T12:00:00", "2018-04-23T13:00:00"],
},
{
x: new Date("2018-04-21T17:00:00"),
y: 1
},
{
x: new Date("2018-04-21T20:00:00"),
y: 6
},
{
x: new Date("2018-04-23T12:00:00"),
y: 1
},
{
x: new Date("2018-04-23T13:00:00"),
y: 2
}
],
},
],
},
options: {
animation: {
duration: 0
},
title: {
display: false,
text: ''
},
legend: {
labels: {
useLineStyle: true
},
position: 'bottom',
},
scales: {
xAxes: [
{
type:'time',
distribution: 'series',
time: {
unit: 'day',
displayFormat: {
day: 'DD/MM/YYYY'
}
},
}
],
yAxes: [
{
ticks: {
beginAtZero: true,
},
}
]
}
}
});
</script>
</body>
</html>
DEMO online:
I am not using x/y formatted datasets, so I kept looking. I ended up finding that inserting 'null' values solved my problem--the arrays can then be the same length, and not have drops to zero polluting the shapes.
However, note that this seems to not work with log scales on line graphs. Luckily, the only graphs I use uneven-length datasets on is probably best presented in linear form, but it is irritating.
Note also that you may want to utilize the { spanGaps: false } option.

Additional Chart in Tooltip possible?

Has anyone ever tried to insert another chart with completely different data to the tooltip which is popping up when hovering over data points?
I have checked the possibilty to pass html to the formatter, but not sure how dynamically this is working.
I have a bubble chart and it would be perfect to add small line charts to the tooltips of the bubbles.
Yes, it is possible.
If you set tooltip's useHTML to true and create a chart in it, then you will get a chart in a tooltip.
Example: http://jsfiddle.net/n9z7r5uj/
$(function() {
$('#container').highcharts({
series: [{
type: 'bubble',
data: [[1,2,3],[4,1,6],[2,3,9]]
}],
tooltip: {
useHTML: true,
pointFormatter: function() {
var data = [this.x, this.y, this.z];
setTimeout(function() {
$('#chart').highcharts({
title: {
text: ''
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
animation: false,
data: data
}],
yAxis: {
title: ''
},
xAxis: {
categories: ['x','y','z']
}
});
}, 0);
return '<div id="chart" style="width: 100px; height: 150px;"></div>';
}
}
});
});

Strange behavior of Highchart tool tip

The tooltip in my Highchart is behaving strangely. It is living its own life. It doesn't show the tooltip of the point on which I hover, but shows the tooltip of any point randomly.
Here is a JSFiddle example: http://jsfiddle.net/AeV7h/9/
$(function () {
var data=[[28,0],[24,3],[16,10]];
var param= { WodTag: "cur_spd", Name: "Current speed", Color: "#C6C6C6", LineStyle: "Solid", SeriesType: "line", LineWidth: 2, TickInterval: null, MinValue: null, MaxValue: null, Decimals: 2 };
$('#container').highcharts({
chart: {
height: 700,
width: 400,
plotBorderWidth: 1,
plotBorderColor: '#E4E4E4',
},
xAxis: {
title: {
useHTML: true,
text: param.Name + "( m/s )",
},
gridLineWidth: 1,
min: param.MinValue,
max: param.MaxValue,
gridLineDashStyle: 'Dot',
tickInterval: param.TickInterval
},
yAxis: {
title: {
text: 'Depth(m)',
},
reversed: true,
tickLength: 50,
gridLineDashStyle: 'Dot'
},
title: {
text: null,
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
useHTML: true,
formatter: function () {
return this.y;
}
},
series: [{
name: param.Name,
data: data,
color: param.Color,
dashStyle: param.LineStyle,
lineWidth: param.LineWidth,
type: "line"
}]
});
});
Can anyone help and tell me why it is behaving like this, and how I can fix it?
Your problem is that your data is not sorted by increasing X value. If you read the Series.data documentation it says that (API):
Note data must be sorted by X in order for the tooltip positioning and data grouping to work.
You should always sort your data like this before handing it over to Highcharts. Highcharts doesn't sort any data. Doing it by hand for your example your data should look like this:
var data=[[16,10],[24,3],[28,0]];
As in this JSFiddle demonstration, and everything works as intended.

Highcharts load date values in X axis

I have a Highcharts chart which gets it's data from a JSON request.
function slowips(target){
var options = {
chart: {
renderTo: target,
type: 'spline',
borderColor: '#0072C6',
borderWidth: 3
},
title: {
text: 'Responsetime'
},
subtitle: {
text: 'Nr.1 is slowest'
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
yAxis: {
title: {
text: 'Milliseconds'
},
min: 0
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b',
year: '%Y'
},
labels: {
enabled: true,
},
minorTickLength: 0,
tickLength: 0,
},
plotOptions: {
spline: {
animation: false,
enableMouseTracking: false,
marker: {
enabled: false
}
}
},
series: [{}]
};
$.getJSON('graphs/test.php', function(data) {
options.series = data;
var chart = new Highcharts.Chart(options);
});
}
slowips();
This is an example JSON input:
[ { "name":"sddf", "data": [ ["2013-02-01 00:01:00", 2 ], ["2013-02-02 00:02:00", 2.55 ] ] } ]
Also tried:
[ { "name":"sddf", "data": [ [Date.UTC(12, 3, 09), 2 ], [Date.UTC(12, 3, 10), 2.55 ] ] } ]
The first JSON example renders a chart, but with incorrect X axis data. The second JSON does not render the chart.
Please help out!
You need to use timestamps, so when you load first JSON, then you need to parse it by Date.UTC() / Data.parse(), but functions cannot be places in json inside (as you have in second example).

Adding series markers to highcharts area chart

I am attempting to create an area chart based on a timeline and everything works until I add a series marker. I have tried a few different patterns but can't get the chart to render with a marker.
Attempt 1: replace [x,y] item with [{x,y,marker}] object
data: [[1384219800000,2],
[{x:1384269600000,y:7,marker:{symbol:"url(http://www.highcharts.com/demo/gfx/sun.png)"}}],
[1384279900000,1]]
Attempt 2: replace [x,y] item with [x, {y,marker}] object
data: [[1384219800000,2],
[1384269600000, {y:7,marker:{symbol:"url(http://www.highcharts.com/demo/gfx/sun.png)"}}],
[1384279900000,1]]
This is the working area chart without the marker. This renders fine until I try to add the marker notation
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
style: {
display: 'none'
}
},
subtitle: {
style: {
display: 'none'
}
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: ''
},
min: 0,
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null
},
legend: {
borderWidth: 0,
enabled: true,
align: 'right',
verticalAlign: 'top',
x: -5,
y: -15,
floating: true
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 0,
lineColor: '#666666',
enabled: false
}
}
},
series:
[{
name: 'Items',
color: '#3399CC',
data: [[1384219800000,2],[1384269600000,7],[1384279900000,1]]
}],
navigation:
{
menuItemStyle: {
fontSize: '10px'
}
},
navigator: {
enabled: true
},
scrollbar: {
enabled: false
},
rangeSelector: {
enabled: false
}
});
});
Your first syntax is close to correct, except you need to drop the [] around the {} and enable the marker for that specific point:
data: [
[1384219800000,2],
{
x:1384269600000,
y:7,
marker:{
enabled: true,
symbol:"url(http://www.highcharts.com/demo/gfx/sun.png)"
}
},
[1384279900000,1]
]
Fiddle here.