Develop Reference

How to change background color of every single bubble in highcharts?

I am trying to get user inputs and then draw a bubble chart with 100 bubbles. How can I change the background color of bubbles to different colors(up to 10 colors)?
Below is my javascript code,
<script>
function generateChart() {
var my_arr = [];
var Stakeholders = [];
$('td').each(function () {
my_arr.push($(this).children().val());
});
var length = my_arr.length;
for (var i = 0; i < length - 2; i++) {
var Stakeholder = new Object();
Stakeholder.name = my_arr[i] || 'Unknown';
Stakeholder.x = parseFloat(my_arr[i + 1] || 5);
Stakeholder.y = parseFloat(my_arr[i + 2] || 5);
Stakeholders.push(Stakeholder);
i += 2;
}
drawChart(Stakeholders);
};
function drawChart(Stakeholders) {
Highcharts.chart('container', {
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy',
spacingTop: 40,
spacingRight: 40,
spacingBottom: 40,
spacingLeft: 40,
borderWidth: 1
},
plotOptions: {
column: {
colorByPoint: true
}
},
series: [{
data: Stakeholders
}]
});
};
</script>

I should have added a property to Stakeholder:
var colors = ['#98d9c2', '#ffd9ce', '#db5461', '#f5853f', '#b497d6', '#dc965a', '#FF9655', '#FFF263', '#6AF9C4', "000"];
for (var i = 0; i < length - 2 ; i++) {
var Stakeholder = new Object();
var color = parseInt(Math.random() * 10);
Stakeholder.name = my_arr[i] || 'Unknown';
Stakeholder.x = parseFloat(my_arr[i + 1]);
Stakeholder.y = parseFloat(my_arr[i + 2]);
Stakeholder.z = 5;
Stakeholder.color = colors[color];
Stakeholders.push(Stakeholder);
i += 2;
}

I'm not sure if you want to assign specific colors to specific bubbles or just randomly assign colors, but you can add a color: 'somecolor' property to each bubble object in the series.
Fiddle here (see lines 96-110).
Or, you could create an array of colors, loop through your bubble series, and randomly assign a color to each bubble object.
Hope this helps.

how to change color of dots in graph using chart.js

want to change the graph dot point color
this is my js code
i had created a graph using chart.js but now i want to show different dot color in graph so that user can understand which value are more than average and which are not.
how can i achieve that i am sending you my code
var label = [];
var dataset_data = [];
$scope.number = details.number;
var total_picked = 0;
angular.forEach(details.picked_details,function(value,key)
{
label.push("Pair with "+value.paired_with);
dataset_data.push(value.no_of_times);
total_picked+=value.no_of_times;
})
var data = {
labels: label,
datasets: [{
data: dataset_data
}]
};
var ctx = document.getElementById("LineWithLine").getContext("2d");
Chart.types.Line.extend({
name: "LineWithLine",
draw: function () {
Chart.types.Line.prototype.draw.apply(this, arguments);
var lines = this.options.limitLines;
for (var i = lines.length; --i >= 0;) {
var xStart = Math.round(this.scale.xScalePaddingLeft);
var linePositionY = this.scale.calculateY(lines[i].value);
//this.chart.ctx.fillStyle = lines[i].color ? lines[i].color : this.scale.textColor;
this.chart.ctx.fillStyle = "green";
this.chart.ctx.font = this.scale.font;
this.chart.ctx.textAlign = "left";
this.chart.ctx.textBaseline = "top";
if (this.scale.showLabels && lines[i].label) {
this.chart.ctx.fillText(lines[i].label, xStart + 20, linePositionY);
}
this.chart.ctx.lineWidth = this.scale.gridLineWidth;
this.chart.ctx.strokeStyle = lines[i].color ? lines[i].color : this.scale.gridLineColor;
//this.chart.ctx.strokeStyle = "green";
if (this.scale.showHorizontalLines) {
this.chart.ctx.beginPath();**strong text**
this.chart.ctx.moveTo(xStart, linePositionY);
this.chart.ctx.lineTo(this.scale.width, linePositionY);
this.chart.ctx.stroke();
this.chart.ctx.closePath();
}
this.chart.ctx.lineWidth = this.lineWidth;
this.chart.ctx.strokeStyle = this.lineColor;
//this.chart.ctx.strokeStyle = "yellow";
this.chart.ctx.beginPath();
this.chart.ctx.moveTo(xStart - 5, linePositionY);
this.chart.ctx.lineTo(xStart, linePositionY);
this.chart.ctx.stroke();
this.chart.ctx.closePath();
}
}
});
new Chart(ctx).LineWithLine(data, {
datasetFill : false,
limitLines: [
{
value: parseInt(total_picked/47),
label: "Average Pair of "+details.number+" With Other is "+parseInt(total_picked/47),
color: '#FF0000'
}
],
});

Refer to this issue. Basically, you can create an array of colors for pointBackgroundColor.
https://github.com/chartjs/Chart.js/issues/2670

Google Column Chart - Show different color for each column

Snippet
google.load("visualization", "1", {packages: ["corechart", "bar"]});
google.setOnLoadCallback(drawStuff);
function drawStuff() {
var timesheetRes = ["Resouce 1","Resouce 2","Resouce 3","Resouce 4","Resouce 5"];
var timesheetWeek = ["Week 1","Week 2","Week 3","Week 4","Week 5"];
var timesheetHours = [45,40,40,0,0];
var dataArray = [['Resources', 'Week', 'Hours']];
for (var n = 0; n < timesheetHours.length; n++) {
dataArray.push([timesheetRes[n], timesheetWeek[n], timesheetHours[n]]);
}
var data = new google.visualization.arrayToDataTable(dataArray);
var color = <?php echo $json_color_str ?>;
var color_count = <?php echo $color_count ?>;
for (var i = 0; i < color_count; i++) {
var color_str = color[i];
var options = {
width: 700,
height: 350,
legend: {position: 'none'},
bar: {groupWidth: '50%'},
isStacked: true,
tooltip: {trigger: 'none'},
colors: color_str, //being passed in array format for each bar
hAxis: {title: "Resource(s)",
titleTextStyle: {color: '#e91e63', bold: 1, fontSize: 14}},
vAxis: {title: "Week(s)",
ticks: weekAxis(),
gridlineColor: 'transparent',
titleTextStyle: {color: '#F4B400', bold: 1, fontSize: 14}
}
};
var chart = new google.visualization.ColumnChart(document.getElementById("top_x_div"));
chart.draw(data, options);
}
}
function weekAxis() {
var ticks = new Array();
var week_count = <?php echo $week_no ?>; //count number of weeks
for (i = 1; i <= week_count; i++) {
var tick_str = {};
tick_str['v'] = (week_count * i);
tick_str['f'] = 'Week ' + i;
ticks.push(tick_str);
}
return ticks;
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="top_x_div"></div>
Current Output
Expected Output
where Week(s) will be displayed on vAxis while Resource(s) will be displayed on hAxis. Here I have changed hAxis and vAxis values to display Weeks and
Resources respectively and show fix 4/5/6 chart sections considering number of weeks in a month.
Tried looping options by passing color array for each bar, but it only takes the last array passed and thus displays same color for each and its columns.
How can I change color of chart columns based on color string
passed as shown in expected output image ?
Or is it possible using jQuery ?

DataLabels on series with many points

I often have to show serieses with many points and I want to set dataLabels for some points. This works fine, but when the series has too many points, the dataLabel is not visible in the beginning. When I zoom into the series, I can see that it is displayed correctly.
So my question: Is there a way to show the dataLabel always for such a series?
Here is my JSFiddle: http://jsfiddle.net/Charissima/9aB6B/
dataLabel at 51.
$(function() {
var myData = [];
for (var i = 0; i < 50; i++) {
myData.push(i + Math.random() * 3);
}
myData.push(51);
for (var i = 52; i < 400; i++) {
myData.push(i + Math.random() * 3);
}
chart = $('#container').highcharts('StockChart', {
chart : {
zoomType: 'x',
events : {
load : function() {
myChart = this;
mySeries = this.series[1];
},
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter: setDataLabels
}
}
},
series: [
{
name: 'Label51',
id : 'dataseries',
color: 'blue',
data: myData
}
]
});
function setDataLabels() {
if (this.y == 51) {
return this.y;
} else {
return null;
}
}
});

This is caused by dataGoruping - disable it and will work fine.

How I can have different values and different labels at graphael?

I am using a linechart at graphael. My datapoints are dates,which are not recognisable by the graphael. So I have represented every date, using 1,2,3 ....
The fact is that I need to display dates at my chart, as the x axis labels. How I can do that? I tried the label property, but it does not working.
My code is shown below:
var lines = r.linechart(30, 30, 600, 440,[[1,2,3,4,5]],[[100,150,130,85,100]], {axisxstep : 20,nostroke: false, axis: "0 0 1 1", symbol: "circle", smooth: true }).hoverColumn(function () {
this.tags = r.set();
for (var i = 0, ii = this.y.length; i < ii; i++) {
this.tags.push(r.tag(this.x, this.y[i], this.values[i], 160, 10).insertBefore(this).attr([{ fill: "#fff" }, { fill: this.symbols[i].attr("fill") }]));
}
}, function () {
this.tags && this.tags.remove();
});

Take a look at this fiddle. You have to change the attribute of each label (date for us) inside chartobject:
var lineChart = r.linechart(0, 0, 200, 250, xValues, yValues1, {
smooth: true,
colors: ['#F00', '#0F0', '#FF0'],
symbol: 'circle',
axis: '0 0 1 1'
});
for (var i = 0; i < lineChart.axis[0].text.items.length; i++) {
var label = lineChart.axis[0].text.items[i];
var originalDate = new Date(parseInt(label.attr('text'), 10));
var newText = originalDate.getDate() + "/" + (originalDate.getMonth() + 1) + "/" + (originalDate.getFullYear());
label.rotate(60);
label.attr({
'text': newText
});
}
Also, the data for graphael can only be numerical type to plot the graph, we have to create a Date object for each label in x like this:
var xValues = [
new Date("01/05/2014"),
new Date("01/06/2014"),
new Date("01/07/2014"),
new Date("01/08/2014"),
new Date("01/09/2014"),
new Date("01/10/2014"),
new Date("01/11/2014"),
new Date("01/12/2014"),
new Date("01/13/2014")
];