I have a chart that is being generated using flot. Due to large variation in data and a lot of columns I get following:
where some names are longer when columns and they start covering them. I am trying now to move names so they would stay under the chart.
mechanism I am using ATM
function onCancellationAgentsReceived(series) {
$("#agentcancellations").empty();
$.plot("#agentcancellations", [series], { bars: { show: true, align: "center" }, xaxis: { mode: "categories", tickLength: 0, position :"bottom", } });
}
How do I move labels under the chart?
Related
I've got a working not stacked logarithmic horizontal bar chart .I need a copy of this chart where the X and Y-axis-es are stacked(both at the same time).The problem comes when I change the axises to stacked ,than the bars goes off canvas and the values don't fit the grid.(https://i.imgur.com/LH6YTy0.png) - The picture shows the values and the grid at the bottom shows that the datas not fitting the grid values - Is that a bug or am I overlooking something?
The code is a simple a chart declaration, there are 4 datasets I'm working with right now, each looks like this:
{label: "D_number_data", data: Array(11), fill: false, backgroundColor: "#80B300", borderColor: "#80B300", …}
I think nothing is wrong with the datasets or the way I assign them to the chart,so something must be with the stacked axis-es.
I've tried resizing and changing only one Axis to be stacked,which is also working, but the reason I need both axis to be stacked is that in that way they are not overlapping each other so it's easier to look at it and read the data.
let myChart = new Chart(ctx2, {
type: 'horizontalBar',
data: {
labels: [],
datasets: [],
},
options: {
labels:'50px',
borderWidth:1,
maintainAspectRatio: false,
scales: {
xAxes: [{
stacked:true,
barPercentage: 1,
ticks:{
autoSkip: false,
pointLabelFontSize: '20px'
},
}],
yAxes: [{
stacked: true,
barPercentage: 0.4,
ticks:{
fontColor: 'rgb(0, 0, 0)'},
fontSize:500,
}],
}
}
});
The expected result would be the values fit the values in the grid and the bars stays on canvas.
Found the problem, in my project the data in the dataset object was a string array (something like["1","2","3"]). After parseInt the elements in the data array , the stacked logarythmic bar chart work fine. Funny thing that I created many chart-s with string data arrays using chart.js, and I only encountered this issue in chart-s where the type was set to logarithmic, and both axis set to stacked.
What I'm trying to achieve is this:
I'm using ng2 charts for this which is just an extension of chart.js. I have the bar charts and the colors and all that jazz. What I can't figure out is how to get the x axis labels to show up on top of the bar charts instead of just below them. To clarify, I'm not looking to have it show up on hover or anything else other than just to show up on top of the bars.
Question: What configuration is needed to get the x-axis labels to show up on the bars themselves?
You need the mirror attribute set to true.
Mirror attribute is in Options => scales => xaxis => ticks => mirror.
public barChartOptions: any = {
scales: {
yAxes: [{
ticks: {
mirror: false
}
}],
xAxes: [{
ticks: {
mirror: true }
}], ....
I used to draw this kind of chart (one vertical axis, one horizantal axis):
Now i have been asked to do this kind of chart:
as you see, the problem with the ordered chart that it contains (two vertical axis, one horizantal axis).
My question
does flot or any other jquery library able to do that please?
See the flot example here on multiple axis. Minimal example:
$.plot("#placeholder", [
{ data: d1 },
{ data: d2, yaxis: 2 } // set second series to use second axis
], {
yaxes: [ {
min: 0 // options for first axis
}, {
alignTicksWithAxis: 1 // options for second axis, put it on right
position: "right"
} ],
});
Two mix a bar and line chart set that in each's series object:
$.plot("#placeholder", [{
data: d1,
lines: { show: true }
}, {
data: d2,
bars: { show: true }
}]);
Putting these together, here's an example:
I'm trying to chart the duration of something using flot and having some issues. In my sql table I have two datetime columns and I am performing the below select to get the difference between them as a timestamp that works with flot (I think)
$p1Query = $db->rawQuery("SELECT AVG((synth.page2-synth.page1)) AS difference FROM (SELECT (UNIX_TIMESTAMP(pageoneloadtime))*1000 AS page1, (UNIX_TIMESTAMP(pagetwoloadtime))*1000 AS page2 FROM usersession) synth");
$p1Average = floor($p1Query[0]['difference']);
The javascript section of my chart looks like this.
var pageTimeData = [["Page 1",<?= $p1Average ?>],["Page 2",<?= $p2Average ?>],["Page 3",<?= $p3Average ?>],["Page 4",<?= $p4Average ?>]];
$.plot("#pageTimeChart", [ pageTimeData ], {
series: {
bars: {
show: true,
barWidth: 0.6,
align: "center"
}
},
xaxis: {
mode: "categories",
tickLength: 0
},
yaxis: {
mode: "time",
timeformat: "%M:%S",
minTickSize:[2,"seconds"]
}
});
But I can't figure out why my chart isn't displaying any bars. I have verified that I have loaded the necessary javascript files
I realized it was just a simple type. minTickSize:[2,"seconds"] needs to be minTickSize:[2,"second"]
Is it possible to use categories as x-values in Highstock?
I don't need a time bar as x-axes, but something like numbered ratings.
This works in Highcharts, but i need the scrollbar functionality from Highstock.
You can use highstock release, but use highcharts and scrollbar.
Take look at example:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis:{
min:0,
max:2,
categories:['first','second','third','fourth']
},
scrollbar: {
enabled: true
},
rangeSelector: {
enabled:false
},
series: [{
name: 'USD to EUR',
data: [1,3,4,6]
}]
});
http://jsfiddle.net/b826C/
You may be able to get the functionality you want using Highstock and the following workaround:
The x-axis is a datetime and your series date ranges from datetime 0 to datetime x, here x is the number of categories you have.
Then when you format the xAxis label use:
labels: {
formatter: function() {
return categoryText[this.value];
}
}
Similarly you can format, the text in the navigator,
categoryText is a local variable that contains the text names of your categories.
Here is the fiddle: https://jsfiddle.net/b826C/98/
One of the developers of Highcharts/Highstock answered to my support request:
It's not possible to switch the navigator to something else than time intervals.
The only solution to my problem is a navigation with a master and detail chart like in this sample: http://www.highcharts.com/demo/dynamic-master-detail