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.
Related
I was trying with the below code which is given here.
var trace1 = {
x: [1, 2, 3, 4, 5],
y: [1, 6, 3, 6, 1],
mode: 'markers',
type: 'scatter',
name: 'Team A',
text: ['A-1', 'A-2', 'A-3', 'A-4', 'A-5'],
marker: { size: 12 }
};
var trace2 = {
x: [1.5, 2.5, 3.5, 4.5, 5.5],
y: [4, 1, 7, 1, 4],
mode: 'markers',
type: 'scatter',
name: 'Team B',
text: ['B-a', 'B-b', 'B-c', 'B-d', 'B-e'],
marker: { size: 12 }
};
var data = [ trace1, trace2 ];
var layout = {
xaxis: {
range: [ 0.75, 5.25 ]
},
yaxis: {
range: [0, 8]
},
title:'Data Labels Hover'
};
Plotly.newPlot('myDiv', data, layout);
I want to disable the default plotly feature double clicking to zoom in the markers. But I want to keep the zoom out feature on double clicking.
Is it anyhow possible?
Please check this. I have used doubleClick: 'reset' to fulfill my objective.
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'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
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.
In my jsfiddle, example I've got two instances of the same chart. Each has two series of data - one common to both with the same max and min and the other different but with values wholey within the extents of the first series. What i'm expecting is to see the two graphs to the same scale. What I get is the first shrunk to the middle of the graph range and the second full width.
I've tried all sorts - setting the max and min etc, but really, I don't understand what the issue is so i'm having trouble figuring out what to do about it
Can anyone tell me what's going one - why don't they scale the same and what can I do to force them to? I've added some buttons to print the extremes and they report as being the same. I've tried setting min and max on the series to the min and max values from my data - but to no avail.
var gc2 = [
[1421680291000, 5],
[1421690785000, 5],
[1421713693000, 1],
[1421746462000, 6],
[1421747928000, 6],
[1421754240000, 6],
[1421775733000, 6],
[1421782226000, 6],
[1421798460000, 6],
[1421884860000, 3],
[1421971260000, 6],
[1422057660000, 6],
[1422144060000, 6],
[1422230460000, 6],
[1422268738000, 3],
[1422273729000, 1],
[1422316860000, 1],
[1422663082000, 5],
[1422748860000, 6],
[1422835260000, 3],
[1422921660000, 6],
[1423180860000, 3],
[1423267260000, 5],
[1423353660000, 3],
[1423440060000, 5],
[1423872060000, 5],
[1423958460000, 5]
];
var bad = [
[1421971260000, 1],
[1422057660000, 1],
[1422144060000, 1],
[1422230460000, 1],
[1422268738000, 1],
[1422748860000, 1]
];
var good = [
[1421746462000, 1],
[1421747928000, 1],
[1421754240000, 1],
[1421775733000, 1],
[1421782226000, 1],
[1421798460000, 1]
];
$(document).ready(function () {
checkOrder(gc2);
checkOrder(good);
checkOrder(bad);
});
function checkOrder(series) {
var xlow = 0;
for (var i = 0; i < series.length; i++) {
if (series[i][0] < xlow) {
console.log("out of order");
} else {
xlow = series[i][0];
}
}
}
$(function () {
$('#container1').highcharts('StockChart', {
chart: {
defaultSeriesType: 'column',
backgroundColor: 'transparent'
},
rangeSelector: {
selected: 1
},
title: {
text: 'not working'
},
xAxis: {
type:'datetime'
},
yAxis: {
min: 0,
max: 10
},
series: [{
name: 'x1',
data: gc2,
tooltip: {
valueDecimals: 2
}
}, {
name: 'x2',
data: bad,
tooltip: {
valueDecimals: 2
}
}]
});
});
$(function () {
$('#container2').highcharts('StockChart', {
chart: {
defaultSeriesType: 'column',
backgroundColor: 'transparent'
},
rangeSelector: {
selected: 1
},
title: {
text: 'working'
},
xAxis: {
type:'datetime'
},
yAxis: {
min: 0,
max: 10
},
series: [{
name: 'x1',
data: gc2,
tooltip: {
valueDecimals: 2
}
}, {
name: 'x',
data: good,
tooltip: {
valueDecimals: 2
}
}]
});
});