I'm trying to combine stacked bars and a line chart in one flot plot.
The problem I'm facing is, that the line data also gets stacked. Which means the data for the first point (line.data[0]) will be plotted as 15 but I would like it to be 5.
Please see this jsfiddle: http://jsfiddle.net/derkinzi/eor5ngjd/
It works when setting stack: null but I need the stacks. Also giving the line it's own yaxis doesn't solve the problem. (change line 90 to: yaxis: 2)
How can I amend the code so line.data get's it's independent plotting with an independent yaxis?
Basically I need this but with stacked bars: http://jsfiddle.net/derkinzi/eor5ngjd/11/
This is my dataset:
var stack1 = {
label: 'stack1',
data: [
[1, 6],
[2, 3],
[4, 5],
[4, 3],
[5, 4]
],
bars: bar_options
};
var stack2 = {
label: 'stack2',
data: [
[1, 4],
[2, 4],
[3, 4],
[4, 4],
[5, 4]
],
bars: bar_options
};
var line = {
label: 'line',
data: [
[1, 5],
[2, 15],
[3, 15],
[4, 15],
[5, 20]
],
lines: line_options,
yaxis: 1,
points: {
radius: 5,
show: true
},
};
var dataset = [stack1, stack2, line];
As describes in the stack plugin, you can specify the stack option per data series, so in your case do this:
var stack1 = {
//...
stack: true,
};
var stack2 = {
//...
stack: true,
};
var line = {
//...
stack: false,
//...
};
Also, when you define multiple axes, use the yaxes property, not yaxis.
Updated fiddle
Related
I am using a scatter diagram with apexcharts like this: https://apexcharts.com/javascript-chart-demos/scatter-charts/basic/.
My problem is that if there is two or more datapoints with the exact same value, they will be stacked above eachother and therefore only one is shown and the other ones are completely hidden (not shown on hover either).
Is there any function to make them all viewable even if they have the same value? Maybe some sort of offset if more of the same value or some tooltip showing number of layers or something?
Code:
var options = {
series: [{
name: "Data A",
data: [
[16, 5], [16, 5, [16, 5], [15, 2], [14, 1], [14, 4]]
},{
name: "Data B",
data: [
[16, 5], [14, 1], [14, 4], [12, 11]]
},
chart: {
height: 350,
type: 'scatter',
zoom: {
enabled: true,
type: 'xy'
}
},
xaxis: {
tickAmount: 10,
labels: {
formatter: function(val) {
return parseFloat(val).toFixed(1)
}
}
},
yaxis: {
tickAmount: 7
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
I've three series of data: for green bars, red bard and target like
var dataBarsRed = {
data: [
[2, 3], ],
label: 'Bars in Red',
color: 'red'
};
var dataBarsGreen = {
data: [
[1, 2],
[3, 1],
[4, 3]
],
label: 'Bars in Green',
color: 'green'
};
var dataLines = {
data: [
[1, 3, 3],
[2, 3.5, 3.5],
[3, 1.5, 1.5],
[4, 2.5, 2.5]
],
label: 'Lines',
color: 'navy',
bars: {
barWidth: 0.5
}
};
I've attached the fiddle for it.
It is possible to make the target as diamond () using Flot JS?
You can customize the point shape by specifying it in the series options (or each individual series). The symbol plugin can be used access more shapes:
var options = {
series: {
points: {
shape: "diamond"
}
}
}
This updated JSFiddle uses the symbols plugin to show diamonds as the point marker.
I have a page with several charts on it, using Chartist. I want to have both global options and individual options for each chart.
var barChartOptions = {
reverseData: true,
horizontalBars: true,
}
new Chartist.Bar('#chart1', {
labels: [1, 2, 3, 4],
series: [[100, 120, 180, 200]]
},barChartOptions
// HOW DO I ADD SPECIFIC OPTIONS?!
);
new Chartist.Bar('#chart2', {
labels: [1, 2, 3, 4],
series: [[120, 90, 150, 100]]
},barChartOptions);
new Chartist.Bar('#chart3', {
labels: [1, 2, 3, 4],
series: [[180, 190, 90, 110]]
},barChartOptions);
Here's a jsFiddle showcasing my problem.
Note: I'm a JavaScript n00b, so I might be missing something very basic here.
Assuming you use jQuery or Underscore.js, you can use the extend (jQuery, Underscore) function to merge two objects, so you can do:
var barChartOptions = {
reverseData: true,
horizontalBars: true,
}
new Chartist.Bar('#chart1', {
labels: [1, 2, 3, 4],
series: [[100, 120, 180, 200]]
},_.extend({/*specific options*/}, barChartOptions));
This way the object that will be passed to Chartist.Bar is your specific options merged with the global barChartOptions.
The scenario is represented in the fiddle below. I am using a column chart to represent the data. When there is multiple data only the highest is being displayed in the graph. I am expecting it to stack.
http://jsfiddle.net/7pccz1j4/
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
type: 'datetime',
},
yAxis: {
min: 0,
minTickInterval: 1
},
series: [{
name: 'series1',
data: [
[1418075700000, 2],
[1418076000000, 2],
[1418076300000, 2],
[1418076600000, 2],
[1418076900000, 2],
[1418077200000, 2],
[1418077500000, 2],
[1418077800000, 2],
[1418078100000, 2],
[1418078100000, 3],
[1418078400000, 2],
[1418078700000, 2],
[1418079000000, 2]
]
}]
});
});
The same scenario with a line chart is this fiddle.
http://jsfiddle.net/RKVgx/253/
You need to set stacking option like in the example: http://jsfiddle.net/7pccz1j4/2/
plotOptions:{
series:{
stacking:'normal'
}
},
Does Flot offers an option to make the bar chart float?. I am looking for a Flot equivalent to interval bar plot (PyChart). The following picture is taken from the link:
(I am aware that Flot may not support this since it seems like each bar in Flot only has one variable, but I am not sure).
Edit: Any javascript library suggestion is also welcome!
I managed a workaround using Flot's bar chart and Flot's stacking. Basically for the empty space, I create a stack with white color (which somehow got translated into transparent except for the edges). Unfortunately, Flot's stacking require all stacks of the same level to be of the same type/color. In order to circumvere this, some of the bars have zero width in the stacks of wrong colors. Result looks surprisingly good!
The corresponding code follows (the example data does NOT corresponds to the image above, since it would be a little too large. This shows only two of the "colors").
var series = [
{
data: [
[24.0, 0],
[6.93333333333, 1],
[6.95, 2],
[6.91666666667, 3],
[6.95, 4],
],
color: "#FFFFFF",
},
{
data: [
[0.0, 0],
[0.0666666666667, 1],
[0.05, 2],
[0.0833333333333, 3],
[0.05, 4],
],
color: "#FFFF00",
},
];
date_ticks_pre = [[0, "Okt 19, 2014"], [1, "Okt 20, 2014"], [2, "Okt 21, 2014"], [3, "Okt 22, 2014"], [4, "Okt 23, 2014"]];
var options = {
series: {
bars: {
show: true,
barWidth: .75,
horizontal: true,
align: "center"
},
stack: true,
},
xaxis: {
ticks: 24,
},
yaxis: {
ticks: date_ticks_pre,
},
zoom: { interactive: true },
pan: { interactive: true },
};
$.plot('#flot_plot',
series,
options);