How can I create dashed lines in both x-axis and y-axis in flot.js? I don't know where to change in library. This is my code Of generated graph on canvas using flot.js. But I want the Dashed Lines on x-axis and y-axis on grid background in canvas. I try markingsStyle: 'dashed' but that did not work.
plot = $.plot("#placeholder", [{
dashes: { show: true },
data: data,
color: "rgb(255, 255, 255)",
label: $("#hidsymbolid").val(),
}, {
data: dataBaseLine,
color: "rgb(255, 255, 255)",
lineStyle: "dashed"
}
], {
series: {
lines: {
lineWidth: 1,
show: true,
lineJoin: "round",
lineCap: "round"
},
points: {
show: false
}
},
grid: {
hoverable: true,
backgroundColor: {
colors: ["#3B3B3B", "#3B3B3B"]
},
markingsStyle: 'dashed'
},
xaxis: {
show: true,
tickSize: parseFloat((maxvalue - minvalue) / 6),
min: minvalue,
max: maxvalue,
dashes: { show: true },
timeformat: "%H:%M:%S",
tickColor: "rgb(255, 255, 255)",
},
yaxis: {
show: true,
dashes: { show: true },
color: "rgb(255, 255, 255)",
alignTicksWithAxis: 2
}
});
Please try this.
setLineDash([5])
Example:-
var context = document.querySelector("canvas");
var cxt = context..getContext('2d');
cxt.beginPath();
cxt.setLineDash([9]);
cxt.rect(30,15,100,100);
cxt.stroke();
Related
I have a nodejs app which is generating chartjs diagram images. In local the label is fine it looks like this:
But when I deploy exactly the same code to azure it looks like the label is scaled up and jammed.
My dependencies are "dependencies": { "chart.js": "2.7.3", "chartjs-node-canvas": "3.2.0"} and this is my chart config:
options: {
maintainAspectRatio: false,
legend: {
display: false
},
tooltips: {
enabled: false
},
animation: {
duration: 0
},
elements: {
line: {
cubicInterpolationMode: 'monotone'
}
},
scales: {
xAxes: [{
type: 'linear',
display: true,
ticks: {
autoSkip: true,
fontColor: gray,
fontSize: 14,
maxRotation: 0,
min: 0,
minRotation: 0,
padding: 10
},
gridLines: {
color: 'transparent',
lineWidth: 0,
drawTicks: false,
zeroLineColor: gray,
zeroLineWidth: 2
},
scaleLabel: {
display: true,
labelString: xLabel,
fontColor: gray,
fontSize: 14
}
}],
yAxes: [{
display: true,
id: this.yAxisId,
position: 'left',
ticks,
gridLines: {
color: transparentGray,
lineWidth: 1,
drawTicks: false,
zeroLineColor: gray,
zeroLineWidth: 2
},
scaleLabel: {
display: true,
labelString: yLabel,
fontColor: gray,
fontSize: 14
}
}]
}
Something is wrong with my options and then why it works perfectly fine on local?
This is the chart i am trying to create in Angular. This comes from the reliability package in python.
https://github.com/MatthewReid854/reliability/tree/master/reliability
I am using Highchart - Area-Range + scatter. I am able to fix the x-axis as it is just logarithmic scale. But I am unable to fix the y -axis
For Weibull analysis, formula for Y-Axis Scale is as: ln(-ln(1-p))
where p=(i-0.3)/(n+0.4) and i is the rank of the observation. This scale is chosen in order to linearize the resulting plot for Weibull data.
weibullHighcharts(weibullresp:any,statDataresp:any){
const chart = Highcharts.chart('chart-gauge', {
chart: {
marginTop: 5,
height: 380,
inverted: true,
zoomType: 'xy',
credits: false,
events: {
load() {
let chart = this;
},
},
},
title: {
credits: false,
text: '',
},
xAxis: {
gridLineWidth: 1,
labels: {
format: '{value}%'
},
type: 'logarithmic',
reversed: false,
min: 0.1,
max:90,
title: {
enabled: true,
text: 'Fraction Failure'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
gridLineWidth: 1,
max: 999,
min: 10,
type: 'logarithmic',
title: {
text: 'Days to Failure'
}
},
legend: {
credits: false,
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
floating: true,
borderWidth: 1
},
series: [
{
color:'#0000FF',
showInLegend:false,
type: 'line',
data: weibullresp.averages,
zIndex: 1,
marker: {
lineWidth: 2,
}},
{
showInLegend:false,
data: weibullresp.ranges,
type: 'arearange',
lineWidth: 0,
linkedTo: ':previous',
fillOpacity: 0.3,
zIndex: 0,
marker: {
enabled: false
}},
{
showInLegend:false,
type:'scatter',
data: weibullresp.scatterData,
color:'#343434',
marker: {
radius: 2,
symbol: 'circle'
}
}
],
credits: {
enabled: false,
},
} as any);
}
Is there a package for python where Weibull plot can be created?
How to fix the y-axis in Highchart?
Kindly help me fix the y-axis in Highchart or Let me know how can i achieve the the python image shared in front end -Angular. I need exactly same image in Python
Try to change tickInterval, minorTickInterval on axis.
On logarithmic axes, the unit is the power of the value. For example, setting the minorTickInterval to 1 puts one tick on each of 0.1, 1, 10, 100 etc. Setting the minorTickInterval to 0.1 produces 9 ticks between 1 and 10, 10 and 100 etc.
Highcharts.chart('container', {
title: {
text: 'Logarithmic axis demo'
},
xAxis: {
tickInterval: 1,
type: 'logarithmic',
},
yAxis: {
type: 'logarithmic',
minorTickInterval: 0.1,
},
tooltip: {
headerFormat: '<b>{series.name}</b><br />',
pointFormat: 'x = {point.x}, y = {point.y}'
},
series: [{
data: [1, 2, 4, 8, 16, 32, 64, 128, 256, 512],
pointStart: 1
}]
});
Demo: https://jsfiddle.net/BlackLabel/x21uc5sd/
I'm trying to make a highchart donut with a legend on the side,
I'm really struggling to get the data labels to be more centered. At the moment each of them are in a different place,
an image of intended result:
https://codepen.io/mattdavidson/pen/qgqZyV
Highcharts.chart('container', {
credits: { enabled: false },
chart: { height: 300, width: 500, animation: false },
title: {
align: 'center',
verticalAlign: 'middle',
text: 10,
y: 25,
x: 55,
style: { color: '#333333', fontSize: '72px', fontWeight:'bold'},
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
format: '{point.y}',
distance: -25,
style: { fontSize: '32px', textOutline: 0 },
},
animation: false,
showInLegend: true,
},
},
legend: {
layout: 'vertical',
verticalAlign: 'middle',
align: 'left',
symbolHeight: 25,
symbolRadius: 5,
itemMarginTop: 10,
itemMarginBottom: 10,
},
series: [
{
type: 'pie',
innerSize: '55%',
colors: ['rgb(212,33,71)', 'rgb(250,189,43)', 'rgb(60,168,74)'],
data: [['Category 1', 4], ['Category 2', 5], ['Category 3', 1]],
},
],
});
There is an issue reported on Highcharts github about donut labels position. Check it here: https://github.com/highcharts/highcharts/issues/9005.
I've changed some options and added custom text using Highcharts.SVGRenderer#text (dynamic sum of all values) on the donut center. Perhaps it will help you: https://jsfiddle.net/BlackLabel/2jmqext9/.
Code:
Highcharts.chart('container', {
credits: {
enabled: false
},
chart: {
height: 300,
width: 500,
animation: false,
events: {
load: function() {
var chart = this,
offsetLeft = -20,
offsetTop = 10,
x = chart.plotLeft + chart.plotWidth / 2 + offsetLeft,
y = chart.plotTop + chart.plotHeight / 2 + offsetTop,
value = 0;
chart.series[0].yData.forEach(function(point) {
value += point;
});
chart.renderer.text(value, x, y).add().css({
fontSize: '30px'
}).toFront();
}
}
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
color: '#fff',
format: '{point.y}',
distance: -25,
style: {
fontSize: '20px',
textOutline: 0
},
},
animation: false,
showInLegend: true,
},
},
legend: {
layout: 'vertical',
verticalAlign: 'middle',
align: 'left',
symbolHeight: 15,
symbolRadius: 5,
symbolPadding: 10,
itemMarginTop: 10,
itemMarginBottom: 10,
itemStyle: {
fontSize: '15px'
}
},
series: [{
type: 'pie',
innerSize: '55%',
colors: ['rgb(212,33,71)', 'rgb(250,189,43)', 'rgb(60,168,74)'],
data: [
['Category 1', 4],
['Category 2', 2],
['Category 3', 12]
],
}, ],
});
I'm looking for advice on how I should/can configure Flotcharts using the Fillbetween and Threshold pluggins to create a chart that accomplishes the following:
Plot a line chart. (done)
Set some threshold values. (done)
Set and fill values that are outside of the threshold values. (not quite done)
Here's what I've accomplished so far,
https://jsfiddle.net/gstoa/utv4kvw2/
$(function() {
var values = {
'avgBottom': [
[1, -2],
[2, -2],
[3, -2],
[4, -2],
[5, -2]
],
'avgTop': [
[1, 3],
[2, 3],
[3, 3],
[4, 3],
[5, 3]
],
'values': [
[1, .5],
[2, -3],
[3, .8],
[4, 4.5],
[5, 6.6]
]
};
var dataset = [{
data: values['values'],
lines: {
show: true
},
color: "rgb(50,50,255)"
}, {
id: 'avgBottom',
data: values['avgBottom'],
lines: {
show: true,
lineWidth: 0,
fill: false
},
color: "rgb(50,50,255)"
}, {
id: 'values',
data: values['values'],
lines: {
show: true,
lineWidth: 0.5,
fill: 0.2,
shadowSize: 0
},
color: "rgb(50,50,255)",
fillBetween: 'avgBottom'
}, {
id: 'avgTop',
data: values['avgTop'],
lines: {
show: true,
lineWidth: 0,
fill: 0.2
},
color: "rgb(50,50,255)",
fillBetween: 'values'
}];
$.plot($("#placeholder"), dataset, {
xaxis: {
tickDecimals: 0
},
series: {
lines: {
show: true,
fill: true
},
points: {
show: false,
radius: 4
},
color: "#62CB31",
// threshold: {
// below: -2,
// color: "rgb(255,0,0)"
// }
},
yaxis: {
tickFormatter: function(v) {
return v;
}
}
});
$.plot($("#placeholder"), [d1, d2, d3]);
});
I'd like this line chart to look like the following:
Any advice is greatly appreciated.
To do this, I had to switch from the fillbetween to the fillbelow flot plugin. I then had to modify the source of the fillbelow plugin to look at a new fillColor property of the series (I've got a pull request to merge these changes back into the main branch).
All in all, your new data set looks like the code snippet below (this JSFiddle demonstrates how to get the chart to look like your example image).
var dataset = [{
id: 'topValues',
data: values['values'],
lines: {
show: true,
},
color: "rgb(50,50,255)",
fillBelowTo: 'avgTop',
fillBelowUseSeriesObjectFillColor: false,
fillColor: "#FF0000"
}, {
id: 'avgTop',
data: values['avgTop'],
lines: {
show: true,
lineWidth: 0,
fill: true
},
color: "rgb(50,50,255)"
}, {
id: 'bottomValues',
data: values['values'],
lines: {
show: true,
lineWidth: 0,
shadowSize: 0
},
color: "rgb(50,50,255)"
}, {
id: 'avgBottom',
data: values['avgBottom'],
lines: {
show: true,
lineWidth: 0,
fill: true,
},
fillBelowTo: 'bottomValues',
fillBelowUseSeriesObjectFillColor: false,
fillColor: "#FF0000",
color: "rgb(50,50,255)"
}];
The fillBelowTo property acts similarly to the fillBetween
property of the fillbetween plugin - it denotes to which series you'd
like to fill below to.
The fillBelowUseSeriesObjectFillColor
property (set to false) tells us to not use the lines.fillColor
color and instead use the fillColor value. If fillBelowUseSeriesObjectFillColor was true, the lines.fillColor color would be used (which in this case would be blue).
using jqPlot, is it possible to limit the point labels to just one series? See screenshot below! What I would like displayed is just the values above the "Actual" bar. The "mean" and "Planned" should'nt display!
Thanks!
Here's my code
<script type="text/javascript">
$(document).ready(function () {
$.jqplot.config.enablePlugins = true;
var trendline = [60000, 70000, 110000, 80000];
var planned = [70000, 90000, 120000, 100000,];
var actual = [80000, 80000, 150000, 120000];
var xAxis = ['Jan', 'Feb', 'Mar', 'Apr'];
$(function() {
$.jqplot('chartDiv', [planned, actual, trendline], BarChart());
});
function BarChart()
{
var optionsObj = {
title: '',
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: xAxis,
},
yaxis: {
tickOptions: { showMark: false, formatString: "%'d" },
},
},
legend: {
show: true,
},
grid: {
borderColor: "#dad5d1",
background: "#dad5d1",
drawGridlines: false,
shadow: false
},
series: [
{label:'Planned',renderer:$.jqplot.BarRenderer},
{label: 'Actual',renderer:$.jqplot.BarRenderer},
{label: 'Mean',
pointLabels: {
show: true,
},
renderer:$.jqplot.LineRenderer,
lineWidth:4,
markerOptions:{
color: "#d87d12",
size:12,
}}
],
seriesColors: [ "#ada195", "#4a4541", "#ff9619"],
seriesDefaults:{
shadow: false,
rendererOptions:{
barPadding: 0,
barMargin: 10,
barWidth: 25
}
},
};
return optionsObj;
}
});
</script>
This actually looks like a bug in the point labels plugin. You can work around it by disabling the values in the seriesDefault (show:false) and then turning them on for the series you desire:
series: [
{label:'Planned',renderer:$.jqplot.BarRenderer},
{label: 'Actual',renderer:$.jqplot.BarRenderer},
{label: 'Mean',
pointLabels: {
show: true,
},
renderer:$.jqplot.LineRenderer,
lineWidth:4,
markerOptions:{
color: "#d87d12",
size:12,
}}
],
seriesDefaults:{
pointLabels:{show:false},
shadow: false,
rendererOptions:{
barPadding: 0,
barMargin: 10,
barWidth: 25
}
},