How to create a chart for showing sigma value like this - javascript

I need to create a stacked bar chart to show Six Sigma value as shown in the image
Here the values in the Y axis are static. But the values in the X axis are not evenly spaced. The image is not properly designed. I am attaching a picture to illustrate the values of the X axis according to the value of the bars. In the picture the yield column corresponds to the values on the bars.
Also I need to show the values on the bar as shown in the image.
I have tried to use chartjs 2 but I can not figure out how to make a custom spacing scale for the X axis.
My attempt at modifying the X axis ticks is given below
let chart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [{
yAxisID: 'yAxis'
}]
},
options: {
scales: {
xAxis: {
type: 'logarithmic',
position: 'right',
}
}
}
});
Any recommendations other than chartjs for this functionality would also be highly appreciated

Related

In Highcharts, can I access the x and y value in various parts of the chart code? I want to show a plot line at certain x values being plotted

I want to be able to check if the y value being plotted is zero, and if it is I want to show a green plot line at that corresponding x value.
Does this make sense and is it doable?
I can chart the plot lines in xAxis like this:
xAxis: {
type: "datetime",
tickInterval: 24*60*60*1000,
labels: {
format: this.active_filter == "week" ? '{value:%a}' : '{value:%b %e}',
},
min: start_date_unix*1000,
max: end_date_unix*1000,
plotLines: [{
color: '#FF0000',
width: 2,
value: VALUE
}]
},
But where value is I want to check the y value of the bar being graphed.
You can modify every part of the chart dynamically and access all of the required values. Below you can find an example of how to perform a dynamic operation:
const chart = Highcharts.chart('container', {...});
const plotLines = [];
chart.series[0].points.forEach(point => {
if (point.y === 0) {
plotLines.push({
value: point.x,
color: 'green'
});
}
});
chart.xAxis[0].update({
plotLines
});
Live demo: http://jsfiddle.net/BlackLabel/6nvx4bep/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart

Customize axes in plotly.js for categorical data with missing points

I have a set of data basically from node-edge graph: a number of nodes (from A1...A10) and a list of edges (i.e. A1-A3, A2-A3, A4-A6 etc.). I want to create a bubble chart from this data, however, if I simply pass my edges as points I end up with axes reduced to nodes with edges (if A5 does not have edges, it will not show) and Y axis is sorted depending on the first edge point, not alphabetically (if A3 was in the first edge, it will be first on the Y axis). What I am looking for is to manually pass list of nodes (A1...A10) to plotly.js to build identical X and Y axes. Is it possible?
Found a suitable solution in Plotly.js: Cannot show full categorical x-axis
var layout = {
xaxis: {
title: 'x Axis Label'
, autorange: false
, type: 'category'
, categoryorder: 'array'
, categoryarray: ['0001','0002','0003']
},
yaxis: {
title: 'Y Axis Label %>'
, autorange: false
, type: 'category'
, categoryorder: 'array'
, categoryarray: ['one','two','three', 'etc']
},
};
However, still had to use autorange: true otherwise it would not display initial graph correctly

Avoid float number labels on y-axis with dygraphs javascript and set different grid lines to secondary y axis

I have series with simple integer values. So there is no need to have float numbers as y-axis labels.
I use the axisLabelFormatter to convert y to integers. But the result is, that I have duplicated integer values on the y-axis.
How can I get a y-axis, which is labeled only with single integers at the correct place?
I would like to have the secondary y-axis with a different grid too
See also the example at https://jsfiddle.net/eM2Mg/9559/.
I have tried your example, modified it and I have got this result
I have modified your code the next way
var graph2 = new Dygraph(document.getElementById("graph2"), data, {
axes: {
y2: {
axisLabelFormatter: function(y) {
return texts[y] || parseInt(y);
},
drawGrid: true,
independentTicks: true,
pixelsPerLabel: 100,
gridLinePattern: [2,2]
}
},
legend: "always",
series: {
"State": {
axis: "y2",
strokeWidth: 2,
stepPlot: true,
}
},
strokeWidth: 2,
title: "my try to get what I want"
});
I have set the option drawGrid and independentLabels to true.
It is necessary to adjust the pixelsPerLabel to the size you think the 3 values auto, on, off are better shown.
And the grid patterLine to show a different grid for the right y axis.
You can also remove the drawGrid if you consider it look better without the grid.
I hope this could be a solution for you! Regards!

I can't get my line graph to plot correctly using jqplot

I want to plot a graph with the following as the xaxis:
var xaxis = [31.1,31.2,31.3,31.4,31.5, 32.1,32.2,32.3,32.4,32.5];
notice how there is a skip between 31.5 and 32.1. However, when I plot my line graph, there is a large space between these two points. Here's my code:
$(document).ready(function(){
var cust1 = [[31.1,10],[31.2,15],[31.3,25],[31.4, 60],[31.5,95]];
var cust2 = [[31.1,0],[31.2,15],[31.3,30],[31.4, 50],[31.5,85]];
var data = [];
data.push(cust1);
data.push(cust2);
var xaxis = [31.1,31.2,31.3,31.4,31.5, 32.1,32.2,32.3,32.4,32.5];
var plot3 = $.jqplot('line-chart', data,
{
title:'Design Progress',
axes: {
xaxis: {
//renderer: $.jqplot.LineRenderer,
label: 'Work Weeks',
ticks: xaxis
},
yaxis: {
label: "Percent Complete",
max: 100,
min: 0
}
}
}
);
});
I think it's because I'm not specifying a renderer option in my xaxis options. However, I've tried to use $.jqplot.LineRenderer and $.jqplot.CategoryAxisRenderer without any luck (I even set my xaxis values as strings but that didn't work). Anybody know what's going on?
Here's a pic to further clarify:
Reason why it happens : jQuery flot library is building the graph with values that determined by your data.
When you provide such data, the plugin will set the axis values to be as same as the text and with the borders of the numbers you gave.
what you can do, is set the text to be different than the axis value.
You can easily do it by options.xaxis.ticks.push([value, "the text"]).
Pay attention that you are the one who is going to set which label will have which axis value, and this calls for setting the options parameter before calling the $plot

Flot Re-scale Yaxis min/max on X-axis scale

I have one long unixtime, value Array which is used to initiate a flot chart, and some buttons to change the scale, what I can't seem to be able to do is get Y-axis to scale with the change in X-scale.
Here is an example chart:
http://jsfiddle.net/U53vz/
var datarows = //Data Array Here
var options = { series: { lines: { show: true }, points: { show: true } },
grid: { hoverable: true,clickable: false, },
xaxis: { mode: "time", min: ((new Date().getTime()) - 30*24*60*60*1000), max: new Date().getTime(), }
};
function castPlot() {
window.PLOT = $.plot("#placeholder", [{ data: dataRows }], options
);
};
In the official example scaling is automatic and unspecified on the Y-axis:
http://www.flotcharts.org/flot/examples/axes-time/index.html
The only alternative I can think of is looping through the dataset and calculating new Y min/max on each button press. Unless I am breaking some very obvious default function.
When calculating y-scale, flot does not look at only the "viewable" data but the whole dataset. Since the data points are still present, the y min/max respects them. So your options are:
Subset the series data down to the desired range and let flot scale both x and y.
As you suggested, calculate your own min/max on the y axis.
If you plot get any more complicated than it is now (especially if you start setting up click/hover events on it), I would also recommend you switch to redrawing instead of reiniting your plot.
var opts = somePlot.getOptions();
opts.xaxes[0].min = newXMin;
opts.xaxes[0].max = newXMax;
opts.yaxes[0].min = newYMin;
opts.yaxes[0].max = newYMax;
somePlot.setupGrid();
somePlot.draw();
EDITS
Here's one possible solution.

Categories