We Keep Coding

Apexcharts - Modelling multiple series (more than 2) with different y-axis scales

We've been trying to find a way to do this through Apexcharts.
We have multiple series with a shared x-axis (date), but different y-axis scales, which we're trying to normalize so we can show multiple data points together.
The only examples we can find for doing this have been supporting only 2 series at maximum:
https://apexcharts.com/docs/chart-types/multiple-yaxis-scales/
Our series may have values like:
[10,12,14,15,16]
[0.3,0.4,0.6,0.7,0.4]
[131,127,150,129,144]
We cannot have these sharing the same y-axis as then the 2nd series would look very squished. Somehow, we're trying to find a way to visually display all these 3 on the same graph in a way that the individual differences are still visible.
So really what we're doing is we're "normalizing" the different y-axis ranges, while still preserving the exact original value.
We're open to alternatives other than Apexcharts too.

Are you trying to plot two series on the same yaxis scale?
if so here's a workaround modelling multiple series with two y-axis
otherwise, if you're just trying to plot as many axes as series, here's an example modeling multiple series with an axis for each serie
First example :
var options = {
series: [
{
name: "Serie 1",
type: "line",
data: [10,12,14,15,16]
},
{
name: "Serie 2",
type: "line",
data: [0.3,0.4,0.6,0.7,0.4]
},
{
name: "Serie 3",
type: "line",
data: [131,127,150,129,144]
}
],
chart: {
height: 350,
type: "line",
stacked: false
},
dataLabels: {
enabled: false
},
stroke: {
width: 2
},
xaxis: {
categories: [2009, 2010, 2011, 2012, 2013]
},
yaxis: [
{
seriesName: "Serie 1",
min:0,
max:200,
axisTicks: {
show: true
},
axisBorder: {
show: true,
color: "#008FFB"
},
labels: {
style: {
colors: ["#008FFB"]
}
},
title: {
text: "Axe 1",
style: {
color: "#008FFB"
}
},
tooltip: {
enabled: true
}
},
{
seriesName: "Serie 2",
opposite: true,
min: 0,
max: 1,
axisTicks: {
show: true
},
axisBorder: {
show: true,
color: "#FEB019"
},
labels: {
style: {
colors: ["#FEB019"]
}
},
title: {
text: "Axe 2",
style: {
color: "#FEB019"
}
},
tooltip: {
enabled: true
}
},
{
seriesName: "Serie 3",
min: 0,
max: 200,
axisTicks: {
show: true,
},
axisBorder: {
show: false
},
labels: {
show:false,
},
title: {
text: "",
},
tooltip: {
enabled: false
}
}
],
legend: {
horizontalAlign: "left",
offsetX: 40
}
};
Second example :
var options = {
series: [
{
name: "Serie 1",
type: "line",
data: [10,12,14,15,16]
},
{
name: "Serie 2",
type: "line",
data: [0.3,0.4,0.6,0.7,0.4]
},
{
name: "Serie 3",
type: "line",
data: [131,127,150,129,144]
}
],
chart: {
height: 350,
type: "line",
stacked: false
},
dataLabels: {
enabled: false
},
stroke: {
width: 2
},
xaxis: {
categories: [2009, 2010, 2011, 2012, 2013]
},
yaxis: [
{
seriesName: "Serie 1",
axisTicks: {
show: true
},
axisBorder: {
show: true,
color: "#008FFB"
},
labels: {
style: {
colors: ["#008FFB"]
}
},
title: {
text: "Axe 1",
style: {
color: "#008FFB"
}
},
tooltip: {
enabled: true
}
},
{
seriesName: "Serie 2",
opposite: true,
axisTicks: {
show: true
},
axisBorder: {
show: true,
color: "#FEB019"
},
labels: {
style: {
colors: ["#FEB019"]
}
},
title: {
text: "Axe 2",
style: {
color: "#FEB019"
}
},
tooltip: {
enabled: true
}
},
{
seriesName: "Serie 3",
axisTicks: {
show: true
},
axisBorder: {
show: true,
color: "#008FFB"
},
labels: {
style: {
colors: ["#008FFB"]
}
},
title: {
text: "Axe 3",
style: {
color: "#008FFB"
}
},
tooltip: {
enabled: true
}
},
],
legend: {
horizontalAlign: "left",
offsetX: 40
}
};

Highcharts how to add treemap upon click event on line chart?

Anyone know how to add treemap upon click event on line chart point? Here's my JSFiddle link:
https://jsfiddle.net/ssoj_tellig/d6pfv1bg/19/
When I click on the line chart on the point 0.63 at the third week of sample5, I'd like a treemap to appear at the bottom with the values loaded in var mytreemap_data (or any other values for the demo, doesn't matter). I'd like to understand how it'd work.
Many thanks for your help!
var mytreemap_data = [1528675200000,0.1,0.2,0.3,0.15,0.25]
// How can we show a tree map at the bottom with the values above
// upon clicking on the point 0.63 for the third week of sample 5 ??
const chart_1 = new Highcharts.stockChart('mychart_1', {
chart: {
zoomType: 'x',
type: 'spline',
},
xAxis: {
type: 'datetime',
tickInterval: 86400000 * 7, //show each week
ordinal: false,
labels:{
formatter: function() {
return Highcharts.dateFormat('%d %b %Y', this.value);
},
align: 'right',
rotation: -90,
},
},
yAxis: {
opposite: false,
min: 0,
max: 1,
tickInterval: 0.1,
title: {
text: 'Score'
}
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'top'
},
credits : {
enabled : false
},
navigator :{
enabled: true
},
scrollbar :{
enabled: true
},
rangeSelector: {
enabled: true,
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 1,
text: '1m'
}, {
type: 'all',
text: 'All'
}],
selected: 1
},
series: [{
name: 'sample1',
data: [[1527465600000,0.42242020440407213],[1528070400000,0.38747025807155444],[1528675200000,0.42678078180915674],[1529280000000,0.4091743882448146],
[1529884800000,0.4238743811604633],[1530489600000,0.39724984766613747],[1531094400000,0.39441610665405447],[1531699200000,0.41417484302834673],
[1532304000000,0.39208450506752085],[1532908800000,0.4026164523657783]],
}, {
name: 'sample2',
data: [[1527465600000,0.44242020440407213],[1528070400000,0.40747025807155444],[1528675200000,0.44678078180915674],[1529280000000,0.4291743882448146],
[1529884800000,0.4438743811604633],[1530489600000,0.41724984766613747],[1531094400000,0.41441610665405447],[1531699200000,0.43417484302834673],
[1532304000000,0.41208450506752085],[1532908800000,0.4226164523657783]],
}, {
name: 'sample3',
data: [[1527465600000,0.42242020440407213],[1528070400000,0.42747025807155444],[1528675200000,0.46678078180915674],[1529280000000,0.4491743882448146],
[1529884800000,0.4638743811604633],[1530489600000,0.43724984766613747],[1531094400000,0.43441610665405447],[1531699200000,0.45417484302834673],
[1532304000000,0.43208450506752085],[1532908800000,0.4426164523657783]],
}, {
name: 'sample4',
data: [[1527465600000,0.52242020440407213],[1528070400000,0.48747025807155444],[1528675200000,0.52678078180915674],[1529280000000,0.5091743882448146],
[1529884800000,0.5238743811604633],[1530489600000,0.49724984766613747],[1531094400000,0.49441610665405447],[1531699200000,0.51417484302834673],
[1532304000000,0.49208450506752085],[1532908800000,0.5026164523657783]],
}, {
name: 'sample5',
data: [[1527465600000,0.62242020440407213],[1528070400000,0.58747025807155444],[1528675200000,0.62678078180915674],[1529280000000,0.6091743882448146],
[1529884800000,0.6238743811604633],[1530489600000,0.59724984766613747],[1531094400000,0.59441610665405447],[1531699200000,0.61417484302834673],
[1532304000000,0.59208450506752085],[1532908800000,0.6026164523657783]],
}],
plotOptions: {
series: {
label: {
connectorAllowed: false,
},
pointstart: 1527465600000,
// pointInterval = 2,
tooltip: {
valueDecimals: 2
},
}
},
responsive: {
rules: [{
condition: {
maxWidth: 500
},
}]
}
});
document.getElementById('button').addEventListener('click', e => {
var series = chart_1.series[0];
var series1 = chart_1.series[1]
var series2 = chart_1.series[2];
if (series.visible & series1.visible & series2.visible) {
series.hide();
series1.hide();
series2.hide();
e.target.innerHTML = 'Show samples 1-3';
} else {
series.show();
series1.show();
series2.show();
e.target.innerHTML = 'Hide samples 1-3';
}
})

Use click event callback function for a point and create another chart with treemap series, for example:
plotOptions: {
series: {
point: {
events: {
click: function() {
Highcharts.chart('treemapContainer', {
series: [{
type: 'treemap',
data: mytreemap_data
}]
})
}
}
},
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/rh7cfxLj/
API Reference: https://api.highcharts.com/highcharts/plotOptions.series.point.events.click

X-axis restarts - KendoUI

Using this example below, the x-axis series are not starting from the same x value. The x-axis will restart at 0 half way through.
function createChart() {
$("#chart").kendoChart({
title: {
text: "Path"
},
categoryAxis: {
labels: {
step: 10,
format: "####"
},
},
valueAxis: {
reverse: true,
},
series: [{
type: "line",
field: "y",
categoryField: "x",
name: "Path1",
style: "smooth",
data: stats,
markers: {
visible: false
}
}, {
type: "line",
field: "y",
categoryField: "x",
name: "Path2",
style: "smooth",
data: stats2,
markers: {
visible: false
}
}],
});
}
http://jsfiddle.net/1sgt4810/30/

Here is the solution:
Rather than using type line, I should have used scatterLine based on the following example http://docs.telerik.com/kendo-ui/dataviz/chart/overview#multiple-xy-axes
seriesDefaults: {
type: "scatterLine"
},
http://jsfiddle.net/3yhbyy2g/1/

Flot not displaying timestamps/dates correctly

Flot graph do not show date/hour correctly. In x-axis there are values of unix timestamps.
data:
[[1365712202000,61.39],[1365712510000,60.89],[1365712817000,0]]
flot configs:
$.plot(plotarea , [
{
label: "Value",
data: dataLine,
color: "#FF8848",
lines: { show: true, steps: false },
points: { show: true },
grid: { hoverable: true, clickable: true },
xaxis: { mode: "time", timeformat: "%d/%H/%M" }
}
]

Your configuration is wrong. xaxis and grid are not series options but plot options. Try:
$.plot($('#placeholder') ,[{
label: "Value",
data: dataLine,
color: "#FF8848",
lines: { show: true, steps: false },
points: { show: true }
}],
{
grid: { hoverable: true, clickable: true },
xaxis: { mode: "time", timeformat: "%d/%H/%M" }
}
);
Fiddle here.

How to reduce the size of the KendoUI Pie Chart?

How do you reduce the size of the KendoUI pie chart? I am using the pie chart using the following configuration. I have set the margins to 1 pixel and the padding to 1 pixel but it doesn't appear to have any affect on how the pie chart is rendered. I have no title but there is still space for a title. I want to be able to reduce the space between the top of the chart and the space between the legend and the actual chart.
My configuration:
jQuery("#chart").kendoChart({
// theme: jQuery(document).data("kendoSkin") || "Metro",
legend: {
position: "bottom",
padding: 1,
margin: 1
},
seriesDefaults: {
labels: {
visible: true,
template: "${ value }%"
}
},
dataSource: {
data: <%=ChartData%>
},
series: [{
type: "pie",
field: "percentage",
categoryField: "source",
explodeField: "explode"
}],
tooltip: {
visible: false,
template: "${ category } - ${ value }%"
},
title: { padding: 1, margin: 1 },
seriesColors: ["#d15400", "#19277e", "#e2935e", "#d2d2d2"],
chartArea: { margin: 1 },
plotArea: { margin: 1 }
});

The pie chart has 60px padding by default. If you need to reduce that space around the pie chart you need to change that padding.
...
series: [{
type: "pie",
field: "percentage",
categoryField: "source",
explodeField: "explode",
padding: 0
}]
...

$("#chart").kendoChart({
theme: $(document).data("kendoSkin") || "default",
title: {
text: "Samplet"
},
seriesDefaults: {
labels: {
template: "#= kendo.format('{0:P}', percentage)#",
visible: true
}
},chartArea: {
width: 300,
height: 300
},
series: [{
type: "pie",
data: [{
category: "Quality",
value: 80},
{
category: "Time",
value: 20},
{
category: "Cost",
value: 40}]}],
tooltip: {
visible: true,
template: "#= kendo.format('{0:P}', percentage)#"
}
});
here we define a property in chartarea to resize the pie chart..