Help with Javascript and CSS graph?

[Keudn]

I am using Chart.js's bar graph here. The code that enters the data and sets the color of the bars is this

var barChartData = {		labels : ["Integritas","Optimus","Spirare","Virtus"],		datasets : [			{				fillColor : "rgba(220,0,0,1)",				strokeColor : "rgba(0,0,0,0.8)",				highlightFill: "rgba(200,200,0,0.75)",				highlightStroke: "rgba(0,0,0,1)",				data : [100,300,400,500]			}		]	}

However, the problem is it sets ALL the bars to the same color. How can I change this to set EACH label to a different color? I tried copying this and setting only one label per dataset but the chart fails to load if I try that.

[Mr_KoKa]

You can modify your Chart.Bar.js file so it will handle data as array of objects where eg. value is value and color is color your data would look like 

[{value: 1, color: '#999'}, value: 2, color: '#444}]

You may want to use rgba notation.

 

You would need to find this in your Char.Bar.js file and modify it:

helpers.each(dataset.data,function(dataPoint,index){	//Add a new point for each piece of data, passing any required data to draw.	datasetObject.bars.push(new this.BarClass({		value : dataPoint,		label : data.labels[index],		datasetLabel: dataset.label,		strokeColor : dataset.strokeColor,		fillColor : dataset.fillColor,		highlightFill : dataset.highlightFill || dataset.fillColor,		highlightStroke : dataset.highlightStroke || dataset.strokeColor	}));},this);

to something like this: (I have not tested it but should work)

helpers.each(dataset.data,function(dataPoint,index){	//Add a new point for each piece of data, passing any required data to draw.	datasetObject.bars.push(new this.BarClass({		value : dataPoint.value,		label : data.labels[index],		datasetLabel: dataset.label,		strokeColor : dataset.strokeColor,		fillColor : dataPoint.color,		highlightFill : dataset.highlightFill || dataset.fillColor,		highlightStroke : dataset.highlightStroke || dataset.strokeColor	}));},this);

[Keudn]

I edited it to what you posted but the bar graphs don't show up at all, is there anything else that needs changed as well?

[Mr_KoKa]

You may want to check dev console in your browser to check up if there any arrors show up. If we (you ) won't figure it out I will download the lib and fiddle with it.

 

You did change data and the second part of code too? The part where we use dataPoint.value and dataPoint.color.

[Keudn]

You may want to check dev console in your browser to check up if there any arrors show up. If we (you ) won't figure it out I will download the lib and fiddle with it.

 

You did change data and the second part of code too? The part where we use dataPoint.value and dataPoint.color.

I changed the second part but I think the problem is I am not using the first part correctly, do I replace the fillcolor with the first part?

[Mr_KoKa]

No, fillColor is used originally to create new bar, but we modified so it's uses values from data so your code that initializes your chard should look like this:

var barChartData = {		labels : ["Integritas","Optimus","Spirare","Virtus"],		datasets : [			{				fillColor : "rgba(220,0,0,1)",				strokeColor : "rgba(0,0,0,0.8)",				highlightFill: "rgba(200,200,0,0.75)",				highlightStroke: "rgba(0,0,0,1)",				data : [{value: 1, color: '#999'}, {value: 2, color: '#444'}]			}		]	}

I just noticed I ate one '{' and one apostrophe. sorry, it might be the problem.

 

You may want to fiddle with this lines in the second part:

		highlightFill : dataset.highlightFill || dataset.fillColor,		highlightStroke : dataset.highlightStroke || dataset.strokeColor

so you can control color of the bar after it's beeing highlighted, I'm not sure when it happens, but probably on mouse hover or click.

[Keudn]

No, fillColor is used originally to create new bar, but we modified so it's uses values from data so your code that initializes your chard should look like this:

Ahh that seemed to work! Thank you!