Possible to hide Chart.js grid lines that extend beyond chart? - javascript

I'm trying to find a way of hiding the grid lines that extend beyond the max value of the axis (see image below for reference).
And the same for the X-Axis of course. I essentially just want the lines to stop at the max tick value. I've scoured the documentation but no avail so hoping the good people of SE will be able to suggest a solution.

What version are you using? My bar chart in v 2.5.0 doesn't extend above
It does have the optional 'padding' argument:
window.myBarChart = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
elements: {
rectangle: {
borderWidth: 2,
}
},
layout: {
padding: {
top: 12
}
},
responsive: true,
legend: {
position: 'right',
}
}
});

Related

jquery flot xaxis how to make labels go under the chart?

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?

ExtJS 4.2.1 Chart Axis labeling

i do have a chart in my application with many x-values. The labeling doesnt seem to work fine because there is e.g. no space between the labels like this:
I know i could make the labels vertical, though is there an other option to scale/place the labels mor intelligent? Or is doing it vertically the way to go?
I guess my first thought is are your labels the same length every time?
Vertical labeling is often preferred because in many of the examples given we are using variable lengths for things like names.
Does your chart scroll off the screen because of all the columns? just curious.
Now you could try creating the grid with a set width to the columns, something like this and see how it does.
series: [{
....
renderer: function(sprite, storeItem, barAttr, i, store) {
// set a width that gives you enough space
barAttr.width = 60;
return barAttr;
},
....
now looking over my code I often use the Ext.String.ellipsis function to set the length of my labels under my columns. so something like this below where I trim at 8 characters:
axes: [{
type: 'Category',
position: 'bottom',
fields: ['name'],
label: {
renderer: function(v) {
return Ext.String.ellipsis(v, 8);
},
}
....
It work for me
{
type: 'Category',
position: 'bottom',
fields: ['time'],
title: 'Time',
style: {
textAlign: 'center',
},
label: {
rotate: {
degrees: 270
}
}
}
enter image description here

flot jquery is it possible to draw this kind of chart

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:

How to create a line to show threshold in bar graph

I am using flot to create bar charts like
I need to specify a threshold like a line at 750(y axis) for example, to show the limit...
there is one jquery.flot.threshold.js file in flot package, but i dont know how to use it on bar charts.How to do it ?
Seems there was some issues with using the threshold plugin with the current flot release version. If you just want to mark a threshold, it might be easier to use the grid markings option:
$.plot($("#placeholder"), [ d1, d2, d3 ], {
series: {
stack: true,
bars: { show: true, barWidth: 0.6 }
},
grid: {
markings: [ { xaxis: { from: 0, to: 12 }, yaxis: { from: 0, to: 20 }, color: "#6D7B8D" }]
}
});
Produces (fiddle here):

Can the colors on charts in ExtJs/ YUI Charts be changed dynamically?

I am using ExtJs/ YUI charts in my application.
What I am wondering, is it possible to dynamically change the color on any of the charts based on data?
i.e. I have a store which contains a field holding the hex color for that particular row. Is it possible to dynamically set the color of a bar in the bar chart with the hex value?
Take a look at this blog post. When you are configuring the chart object, pass a series object with a style property as described in that post to define the colors and their sequence.
Then you just need to get your colors by either looping through your store records and building a new array, or perhaps pulling it from your store with store.query. Then pass this array as the property.
(...),
series: [style: { colors: arrayBuiltFromStore }],
(...)
From what I've been able to find, you can use the
(...),
series: [style: {colors: arrayBuiltFromStore }],
(...)
method if you're creating a pie chart (or another chart with series.colors attribute), and it works great.
If you're using a type of chart that doesn't support series.colors... it gets a little more convoluted. I found that using the renderer method works fairly well. The only problem with this method (that I can see right away) is that it doesn't change the colors in the legend. It would take some further editing to see if this could be pulled from the store.
If you figure out the legend issue, let me know, but I hope this helps.
Note: Not all the variables used in the below script are populated in the script.
function myColorer(rec) {
var aFiller = new Array('#0000FF','#31CD31','#FFFF00','#FF0000');
return aFiller[rec];
}
Ext.onReady(function() {
var sDataStore = new Ext.data.JsonStore(sPathToDataStore);
chart = new Ext.chart.Chart({
renderTo: document.getElementById('test-graph'),
width: 800,
height: 600,
animate: true,
store: sDataStore,
legend: {
position: 'right',
isVertical: true,
},
axes: [{
type: 'Numeric',
grid: true,
position: 'left',
fields: ['field1','field2','field3','field4'],
title: 'Title Here',
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 1
}
},
minimum: 0,
adjustMinimumByMajorUnit: 0
}, {
type: 'Category',
position: 'bottom',
fields: label1,
title: sXAxisLabel,
grid: true,
}],
series: [{
renderer: function(sprite, record, curAttr, index, store) {
var color = myColorer(index);
return Ext.apply(curAttr, {
fill: color
});
},
type: 'area',
highlight: false,
axis: 'left',
xField: label1,
yField: ['field1','field2','field3','field4'],
style: {
opacity: 0.93
}
}]
});
});
Try this:
Create a hidden field and assign its value to the value of the store field which contains the colour value.
when rendering bar chart, set the background colour of a bar to the value of the hidden field.
Yes, you can do it by using renderers. Following code example changes colors of bars in bar chart:
series: {
type: 'bar',
xField: 'name',
yField: 'value',
label:{
field: 'value'
},
renderer: function(sprite, config, rendererData, index) {
var record = rendererData.store.getData().items[index];
return Ext.apply(rendererData, {
fillStyle: record.data.color,
});
}
}
Here 'color' is a field of the store model. You can set different color for each bar by setting it in corresponding record in your store.

Categories