I am trying to create a grid, each row having a different style(font, color, background color, etc). The styles are in an array of strings, (each having css code), the same length as the number of rows in the grid.
My problem is that I can't find a solution to set each row's style to the styles stored in my array.
The grid I created looks like this:
newGrid = Ext.create('Ext.ux.Grid', {
store: tableStore,
columns: gridColumns,
});
and the array looks pretty much like styles[]
Any help would be greatly appreciated!
Here is working fiddle
var myStyles = [
{
backgroundColor: 'red'
},
{
backgroundColor: 'green',
fontWeight: 'bold'
},
{
backgroundColor: 'blue'
},
{
backgroundColor: 'yellow',
fontStyle: 'italic'
}
];
myStore.getData().each(function(record){
// You can map grid store records with styles array in any other way,
// for example purposes I just use row internalId
var recordId = record.internalId - 1;
for(var propertyName in myStyles[recordId ]) {
myGridView.getRow(record).style[propertyName] = myStyles[recordId][propertyName];
}
});
Ext.view.Table.getRow() return HTMLElement so you can manipulate with it with JS any way you want, read HTMLElement.className and HTMLElement.style for example.
Also, with abit more of addition code you can map styles array with grid records based on, for example, record certain property value.
Related
I have created line chart using chart.js.But when array have more than one lack element then, how to pass array to data in line chart of chart.js.
When i am passing small number of element in array it work but for big number array element it not work.
var num1: number;
var num2:number;
var x_Axes:number[]=[];
var y_Axes:number[]=[];
for(num1=0;num1<=60;num1++){
xAxes.push(num1);
}
for(num2=0;num2<=2000000;num2++){
y_Axes.push(num2);
}
data: {
labels: x_Axes,
datasets: [
{
pointBorderColor: 'none',
borderColor: "#D71F26",
borderWidth: 1,
pointRadius: 0,
data: y_Axes,
}
You can see for labels i also use array and it work.but data it not work why i don't know.
when page load browser not throw any error,it take long time to load and finally it show blank on graph.
Is there a way to set a different color to a datapoint in a Line Chart if its above a certain value?
I found this example for dxChart - https://stackoverflow.com/a/24928967/949195 - and now looking for something similar for ChartJS
In updating to version 2.2.2 of ChartJS, I found that the accepted answer no longer works. The datasets will take an array holding styling information for the properties.
In this case:
var pointBackgroundColors = [];
var myChart = new Chart($('#myChart').get(0).getContext('2d'), {
type: 'line',
data: {
datasets: [
{
data: dataPoints,
pointBackgroundColor: pointBackgroundColors
}
]
}
});
for (i = 0; i < myChart.data.datasets[0].data.length; i++) {
if (myChart.data.datasets[0].data[i] > 100) {
pointBackgroundColors.push("#90cd8a");
} else {
pointBackgroundColors.push("#f58368");
}
}
myChart.update();
I found this looking through the samples for ChartJS, specifically this one: "Different Point Sizes Example"
With recent versions of chart.js I would recommend doing this with scriptable options.
Scriptable options give you an easy way to vary the style of a dataset property (e.g. line point colour) dynamically according to some function you provide. Your function is passed a 'context' object that tells it the index and value of the point etc. (see below).
Most chart properties can be scripted; the dataset properties for each chart type tell you the exact list (e.g. see here for line chart).
Here is how you might use scriptable options on a line chart (based on the example in the docs). On this chart negative data points are shown in red, and positive ones in alternating blue/green:
window.myChart = Chart.Line(ctx, {
data: {
labels: x_data,
datasets: [
{
data: y_data,
label: "Test Data",
borderColor: "#3e95cd",
fill: false,
pointBackgroundColor: function(context) {
var index = context.dataIndex;
var value = context.dataset.data[index];
return value < 0 ? 'red' : // draw negative values in red
index % 2 ? 'blue' : // else, alternate values in blue and green
'green';
}
}
],
}
});
The context object passed to your function can have the following properties. Some of these won't be present for certain types of entity, so test before use.
chart: the associated chart
dataIndex: index of the current data
dataset: dataset at index datasetIndex
datasetIndex: index of the
current dataset
hover: true if hovered
Here's what worked for me (v 2.7.0), first I had to set pointBackgroundColor and pointBorderColor in the dataset to an array (you can fill this array with colours in the first place if you want):
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [
{
data: dataPoints,
pointBackgroundColor: [],
pointBorderColor: [],
}
]
}
});
Then you can monkey with the colours of the points directly:
myChart.data.datasets[0].pointBackgroundColor[4] = "#cc00cc";
myChart.data.datasets[0].pointBorderColor[4] = "#cc0000";
myChart.update();
Some other properties to play with to distinguish a point: pointStrokeColor (it apparently exists but I can't seem to get it to work), pointRadius & pointHoverRadius (integers), pointStyle ('triangle', 'rect', 'rectRot', 'cross', 'crossRot', 'star', 'line', and 'dash'), though I can't seem to figure out the defaults for pointRadius and pointStyle.
For chartjs 2.0 see this following answer.
Original answer below.
Good question regarding ChartJS. I've been wanting to do a similar thing. i.e dynamically change the point colour to a different colour. Have you tried this below. I just tried it and it worked for me.
Try this:
myLineChart.datasets[0].points[4].fillColor = "rgba(000,111,111,55)" ;
Or Try this:
myLineChart.datasets[0].points[4].fillColor = "#FF0000";
Or even this:
myLineChart.datasets[0].points[4].fillColor = "lightgreen";
Then do this:
myLineChart.update();
I guess you could have something like;
if (myLineChart.datasets[0].points[4].value > 100) {
myLineChart.datasets[0].points[4].fillColor = "lightgreen";
myLineChart.update();
}
Give it a try anyway.
Just adding what worked for me in the new 2.0 version.
Instead of:
myLineChart.datasets[0].points[4].fillColor = "lightgreen";
I had to use:
myChart.config.data.datasets[0].backgroundColor[4] = "lightgreen";
Not sure if that's because of a change in 2.0 or because I'm using a bar chart and not a line chart.
If you initialize the myChart in this manner,
var myChart = new Chart(ctx, {
type: 'line',
data: {
you have to change line color by this code
myChart.data.datasets[0].backgroundColor[0] ="#87CEFA";
If you initialize the myChart in this manner,
myBar = new Chart(ctx).Line(barChartData, {
you have to change line color by this code
myLineChart.datasets[0].points[4].fillColor = "#FF0000";
Community,
I am trying to have a Chart.js - PieChart with a defined background for each specific dataset element.
eg: The Dataset has a maximum of 3 elements: good, normal and bad. But it can also just have two or even one.
pieChartData () {
let dataset = []
let labels = []
let bgColor = [
'green',
'yellow',
'red'
]
for (var key in this.accountProfile.categories) {
if (this.accountProfile.categories.hasOwnProperty(key)) {
labels.push(key)
dataset.push(this.accountProfile.categories[key].volume)
}
}
return {
labels: labels,
datasets: [
{
data: dataset,
backgroundColor: bgColor
}
]
}
}
I would like to have:
good as green,
normal as yellow,
bad as red
but if my dataset has just normal and bad, the colors get mixed up and normal is green instead of yellow, bad is yellow instead of red and so on.
Any help would be much appreciated.
Thanks, J
You can define array where colors are values and good, bad and normal are keys, see next:
let chartColors = [];
chartColors['good'] = 'green';
chartColors['bad'] = 'red';
chartColors['normal'] = 'yellow';
Then the next step would be to add new array variable where you will push on the same way as you have done for labels:
someColorVar.push(chartColors[key]);
Then replace bgcolor with someColorVar.
I need to stack the bars in the bar chart to the left as per the image attached
is there a way to do that in chart.js?
EDIT:
Just to clarify what I am looking for.
The number of the bars in my chart is dynamic, if there are 10 of them then chart looks fine but if there are only 2 they each take 50% of the width of the chart (see picture #2)
I want both of those bars to be exactly the same width as if there were 10 of them and be stacked to the left.
One option that I'm currently considering is just to add (10 - no of bars) bars with 0 value so that they won't be visible. But I'm hoping that there is a better solution.
Thanks.
Instead of creating a graph with 10 empty bar charts, then populate it with your values, I think it would be better to add empty values to reach the number of 10 (same idea though).
If you take a look in the Chart.js documentation, you can see that you can create plugins for your charts and graphs. Plugins are extremely useful when editing your chart (instead of just hardcoding what you want) since they allow you to handle what is happening while creating your charts.
For instance : beforeUpdate, afterDraw are some of the events you can handle with plugins.
Now, you must know that the chart object contains a lot of information :
If you want to edit a global option, you'd check chart.config.options
If you want to edit a specific chart, you'd check chart.config.data
In our case, we'd need the data attribute.
If you take a deep look in it, you'd see that the number of values come from the lengh of both data.labels and data.datasets[n].data (n being the nth dataset).
Now that you know what to do, and how to do it, you can do it.
I still made a quick example of what you are looking for :
var ctx = document.getElementById("myChart").getContext("2d");
// stores the number of bars you have at the beginning.
var length = -1;
// creates a new plugin
Chart.pluginService.register({
// before the update ..
beforeUpdate: function(chart) {
var data = chart.config.data;
for (var i = data.labels.length; i < data.maxBarNumber; i++) {
length = (length == -1) ? i : length;
// populates both arrays with default values, you can put anything though
data.labels[i] = i;
data.datasets[0].data[i] = 0;
}
},
// after the update ..
afterUpdate: function(chart) {
console.log(chart);
var data = chart.config.data;
if (length == -1) return;
// prevents new charts to be drawn
for (var i = length; i < data.maxBarNumber; i++) {
data.datasets[0]._meta[0].data[i].draw = function() {
return
};
}
}
});
var data = {
// change here depending on how many bar charts you can have
maxBarNumber: 10,
labels: [1, 2, 3, 4, 5, 6, 7],
datasets: [{
label: "dataset",
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255,99,132,1)',
borderWidth: 1,
data: [65, 59, 80, 81, 56, 55, 40],
}]
};
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
scales: {
xAxes: [{
display: false
}],
yAxes: [{
stacked: true
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
You can use Array.prototype.reverse() to reverse the data if it is currently stacked to the right. Otherwise you will need to use some type of sorting to go from largest data to smallest data.
I use Flot library for charting, I need to present a bars chart and there one special series which should be distinguished, giving it a certain color would be best option.
I've already did so in previous charts giving the color parameter to the series pushed to the data but it's not working here.
Bar for 21 should be in red and it's not.
First I tried the usual:
series.push({
color: 'anyHexColorCode',
data: [[parseFloat(k).toFixed(9).toString(),respuesta['puntos'][k]]]
})
In a loop I checked for the wished value and gave that a different color, same as I also do in the current function I got shown below.
This is how I'm sending to plot:
function plotInterpolacion(respuesta) {
clearCharts()
var series = []
var colorsList = ['#8B0000','#FFA614']
alert("La aproximación para x=" + $("#a").val() + " es igual a: " + respuesta['aproximacion'])
var xs = Object.keys(respuesta['puntos']).sort().forEach(function (k,i) {
if (k == respuesta['aproximacion']) {
series.push({
color: 0,
data: [[parseFloat(k).toFixed(9).toString(),respuesta['puntos'][k]]]
})
}
else {
series.push({
color: 1,
data: [[parseFloat(k).toFixed(9).toString(),respuesta['puntos'][k]]]
})
}
})
$.plot($("#bars"), series, {
bars: {
show:true,
align: "center",
barWidth: 0.6
},
xaxis: {
mode: "categories",
tickLength:0
},
colors: colorsList
})
}
In that example, bar for 21 should be in red.
This is what respuesta['puntos'] looks like:
"puntos": {
"18.0": 79.0,
"17.8": 72.0,
"21.0": 184.0000000000009
}
I have added jquery.colorhelpers.js flot plugin but it didn't make any difference.
The barWidth is expressed in axis units. So with a barWidth of 0.5, and only 0.2 x-units between the first and second bars, they will of course overlap.
A series can have only one color, and all of your bars are in the same series. If you want them to have different colors, split them into separate series.
Use the array directly when you are giving the color to data set? Like this:
color:colorsList[0]
http://jsfiddle.net/Margo/ZRkJN/4/