Develop Reference

Google chart horizontal date bars too wide

My issue is that the each bar spans a few days either side of the date instead of just the one day on the hAxis (x axis). How do I make each hAxis bar be just 1 day wide?
google.charts.safeLoad({'packages':['corechart']});
google.charts.setOnLoadCallback(function(){
chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
});
...
var rows = [[new Date("2022-12-14 00:00:00"),2,"14/12/2022","color:blue"],[new Date("2022-12-01 00:00:00"),1,"01/12/2022","color:blue"],[new Date("2022-09-21 00:00:00"),1,"21/09/2022","color:blue"],[new Date("2022-03-16 00:00:00"),1,"16/03/2022","color:blue"]];
var data = new google.visualization.DataTable();
data.addColumn('date', "Date");
data.addColumn('number', "Quantity");
data.addColumn({type:"string", role:"tooltip"});
data.addColumn({type:"string", role:"style"});
data.addRows(rows);
var options = {
hAxis:{
title: "Date",
textStyle : { fontSize:10 },
titleTextStyle: { fontSize:12, bold:true, italic:false },
viewWindow: { min:new Date("2021-12-14"), max:new Date("2022-12-14") }
},
vAxis:{
title: "Quantity",
textStyle : { fontSize:10 },
titleTextStyle: { fontSize:12, bold:true, italic:false },
format:"0"
},
isStacked: "absolute",
animation: {
duration: 750,
easing: "out",
startup: true
},
chartArea: {
width: "92%",
height: "160",
top: "4"
},
explorer: { actions: ["dragToZoom", "rightClickToReset"] },
legend: {position: 'none'},
width: "100%",
height: "100%",
bar: {
gap:2,
groupWidth: "95%"
}
};
chart.draw(data, options);

Add or declare two plotOptions in highcharts for Synchronized chart

How can I change second chart color to green for value between 150 to 500?
at the first chart I use plotOptions to declare zone to change color to green.
But I have a second plotOptions (If Possible) for second chart to change the color between 150 to 550 to green run the cod to find-out what I have!
and another questions id when i have a lot point Json cannot pars ! for this solution i create Json From Server and passed to chart by $.getJSON('/home/GetChartDataFromThisDay' but problem is still exist!
i have about 25/000 point to show in chart. what should be do?
$('#container').bind('mousemove touchmove touchstart', function (e) {
var chart,
point,
i,
event;
for (i = 0; i < Highcharts.charts.length; i = i + 1) {
chart = Highcharts.charts[i];
event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
point = chart.series[0].searchPoint(event, true); // Get the hovered point
if (point) {
point.highlight(e);
}
}
});
/**
* Override the reset function, we don't need to hide the tooltips and crosshairs.
*/
Highcharts.Pointer.prototype.reset = function () {
return undefined;
};
/**
* Highlight a point by showing tooltip, setting hover state and draw crosshair
*/
Highcharts.Point.prototype.highlight = function (event) {
this.onMouseOver(); // Show the hover marker
this.series.chart.tooltip.refresh(this); // Show the tooltip
this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
};
/**
* Synchronize zooming through the setExtremes event handler.
*/
function syncExtremes(e) {
var thisChart = this.chart;
if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
Highcharts.each(Highcharts.charts, function (chart) {
if (chart !== thisChart) {
if (chart.xAxis[0].setExtremes) { // It is null while updating
chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, { trigger: 'syncExtremes' });
}
}
});
}
}
var t='{"xData":[0.001567,0.011765,0.022194,0.032316,0.04266,0.063668,0.074477,0.085323,0.09576,0.106078,0.116096,0.137524,0.148342,0.159059,0.170005,0.180716,0.191407,0.212538,0.222819,0.233929,0.244239,0.255301,0.266081,0.287527,0.298115,0.309392,0.320217,0.330928,0.341401,0.361717,0.372173,0.382337,0.39294,0.403072,0.413454,0.434618,0.444845,0.455745,0.465785,0.475987,0.486064,0.507086,0.517517,0.527961,0.538242,0.548414,0.558444,0.578941,0.589212,0.599472,0.60977,0.620178,0.630189,0.650782,0.661001,0.671137,0.681175,0.691235,0.702012,0.722644,0.733166,0.743824,0.754059,0.764109,0.774519,0.795597,0.805721,0.81592,0.826139,0.836369,0.846826,0.86771,0.87803,0.888342,0.898695,0.908723,0.91922,0.939802,0.950378,0.960776,0.971377,0.981843,0.992312,1.013125,1.023302,1.033488,1.043822,1.054203,1.065019,1.086078,1.09635,1.106421,1.117028,1.127541,1.138599,1.159588,1.170167,1.180741,1.190794,1.201112,1.211355,1.233278,1.243477,1.254957,1.265227,1.276378,1.285656,1.297311,1.308367,1.318715,1.329589,1.340834,1.352388,1.375063,1.385369,1.396291,1.408156,1.418989,1.429535,1.451141,1.462205,1.473011,1.483844,1.494311,1.514761,1.525336,1.535858,1.546476,1.557325,1.567512,1.590091,1.600925,1.612303,1.622558,1.633071,1.643555,1.66484,1.675722,1.685986,1.696733,1.706895,1.719102,1.741295,1.752144,1.762688,1.773713,1.784052,1.795705,1.817305,1.827465,1.838408,1.849369,1.860023,1.871438,1.89257,1.90323,1.914398,1.924634,1.934642,1.945212,1.966275,1.976294,1.986422,1.996652,2.008005,2.018309,2.041139,2.051221,2.0613,2.072507,2.08342,2.094075,2.114574,2.125286,2.135765,2.146845,2.157966,2.169391,2.190921,2.200899,2.212709,2.222671,2.232908,2.244001,2.264898,2.275703,2.286885,2.298115,2.310186,2.32059,2.344695,2.354843,2.366387,2.379001,2.390328,2.402215,2.423134,2.433156,2.444912,2.457061,2.468253,2.478978,2.499832,2.513223,2.52561,2.538429,2.548659,2.560809,2.581308,2.592816,2.603963,2.615992,2.626242,2.638223,2.660346,2.671583,2.681938,2.69265,2.70588,2.716296,2.740081,2.75085,2.761319,2.772027,2.782659,2.793531,2.816194,2.828031,2.839243,2.851443,2.863884,2.874359,2.895246,2.906506,2.91761,2.92786,2.938937,2.950218,2.973357,2.98366,2.994639,3.005213,3.01666,3.02761,3.050025,3.061713,3.071828,3.082787,3.093422,3.105289,3.127231,3.138982,3.149755,3.160217,3.171299,3.191571,3.202226,3.213225,3.223987,3.234092,3.244644,3.265939,3.276411,3.286489,3.297156,3.307909,3.319018,3.34064,3.351107,3.361683,3.373136,3.384768,3.395457,3.417722,3.429096,3.439122,3.449679,3.459868,3.469997,3.492679,3.503647,3.514941,3.525858,3.538746,3.550422,3.572255,3.58452,3.595367,3.605736,3.617401,3.628324,3.652523,3.663679,3.67378,3.684605,3.695595,3.705843,3.728706,3.739169,3.750205,3.761258,3.771771,3.781911,3.804724,3.81631,3.826313,3.837847,3.85049,3.860999,3.88262,3.892937,3.903053,3.913656,3.924698,3.935126,3.956362,3.966543,3.976899,3.98752,3.997644,4.008721,4.029852,4.040633,4.051006,4.06126,4.071761,4.083526,4.10749,4.117855,4.128661,4.13934,4.151117,4.1624,4.184736,4.194826,4.205098,4.215261,4.225325,4.236367,4.262012,4.273794,4.285743,4.297226,4.308086,4.318245,4.340246,4.351486,4.363196,4.374465,4.387109,4.398635,4.421101,4.432135,4.444666,4.456226,4.467413,4.477804,4.498505,4.510413,4.522595,4.534044,4.545944,4.558048,4.580379,4.59312,4.605616,4.618065,4.631266,4.644086,4.667943,4.67948,4.691266,4.703019,4.715923,4.725932,4.752312,4.765224,4.777128,4.787361,4.800435,4.823353,4.836044,4.848602,4.860302,4.871112,4.882779,4.904695,4.914823,4.927074,4.938111,4.949586,4.960761,4.982911,4.9942,5.004246,5.016296,5.027215,5.038043,5.058885,5.070303,5.080649,5.093865,5.104424,5.114903,5.134965,5.146346,5.15634,5.168547,5.179066,5.191167,5.214242,5.224914,5.237573,5.249537,5.261586,5.272517,5.296154,5.306348,5.316773,5.327153,5.339961,5.350638,5.376502,5.389277,5.402142,5.412197,5.42399,5.434873,5.458466,5.470907,5.482679,5.493339,5.50574,5.516349,5.538897,5.549552,5.56083,5.571879,5.583764,5.59509,5.619028,5.629925,5.640716,5.650957,5.661787,5.671957,5.693974,5.704919,5.717491,5.731152,5.744728,5.755687,5.778668,5.791951,5.80409,5.815697,5.828482,5.840501,5.864145,5.875704,5.887893,5.900147,5.912517,5.924894,5.948897,5.959155,5.970262,5.981632,5.992996,6.00356,6.027256,6.038776,6.050959,6.061351,6.071864,6.082436,6.104054,6.115602,6.127623,6.139058,6.150639,6.161323,6.183013,6.194359,6.206269,6.218033,6.2281,6.240494,6.262584,6.275326,6.287166,6.298953,6.310644,6.321583,6.345676,6.356738,6.366782,6.377931,6.388519,6.397159],"datasets": [{"name": "دما","data":[13.833,12.524,11.441,10.651,9.961,4.566,4.617,4.728,4.823,4.844,4.856,4.87,4.702,4.679,4.674,4.641,4.47,4.688,4.798,4.756,4.903,4.919,5.017,4.938,4.879,4.831,4.623,3.887,3.502,3.083,3.123,3.073,2.922,2.827,2.805,2.605,2.743,2.698,2.513,2.41,2.17,2.288,2.308,2.222,2.183,2.224,2.163,2.223,2.142,2.257,2.015,1.971,1.894,1.848,1.835,1.85,2.036,1.827,1.904,1.803,1.852,1.866,1.906,1.956,1.954,1.734,1.904,1.899,2.001,1.966,1.844,1.879,1.856,1.837,1.827,1.907,1.729,1.74,1.68,1.797,1.811,1.941,2.026,2.217,2.281,2.517,2.673,2.702,2.893,3.016,3.073,3.126,3.283,3.361,3.33,3.465,3.916,4.49,5.074,5.717,6.523,7.012,6.726,7.095,7.471,7.824,7.802,4.441,4.625,4.696,4.861,4.768,4.889,5.281,5.36,5.419,5.137,5.278,5.151,4.934,4.952,4.742,4.666,4.525,4.126,4.228,4.334,4.383,5.287,5.088,5.28,5.274,5.251,5.413,5.365,5.372,5.512,4.839,5.099,5.196,5.219,5.094,5.582,5.91,5.952,6.012,5.854,5.789,5.465,5.525,5.659,5.67,5.173,5.033,5.318,5.289,5.226,5.15,5.106,4.989,5.103,5.288,5.428,5.363,5.026,5,4.941,4.872,4.751,4.408,4.425,4.301,4.134,4.171,4.272,4.34,4.543,4.826,5.381,5.374,5.433,5.483,5.539,5.869,6.956,7.443,7.654,8.005,8.181,8.386,9.202,9.51,9.66,9.141,8.79,8.747,8.949,9.188,9.625,10.154,10.173,10.361,11.186,11.226,11.091,10.899,10.945,10.892,9.618,9.092,8.465,7.864,7.396,7.076,7.053,6.772,6.958,7.202,6.93,6.857,7.007,7.059,7.099,7.025,6.95,7.116,6.331,6.39,6.571,6.571,6.604,6.407,6.371,6.348,6.348,5.995,6.162,6.287,6.241,6.033,6.083,6.313,6.118,5.78,5.698,5.804,5.743,5.655,5.976,6.005,6.06,5.988,6.021,6.049,5.882,5.296,5.142,4.701,4.701,4.647,4.491,4.48,4.384,4.263,4.515,4.721,5.084,6.225,6.302,6.409,6.52,6.462,6.525,6.816,6.656,6.566,6.34,6.177,6.143,7.462,7.783,7.885,7.998,8.182,8.352,8.32,8.5,8.967,8.474,8.178,7.89,7.436,7.634,7.777,7.628,7.189,6.787,6.048,6.003,6.189,6.216,6.389,6.353,7.341,7.899,7.849,7.757,7.314,7.134,6.858,6.689,6.526,5.909,5.138,4.617,4.339,4.558,4.493,4.545,4.419,4.245,4.468,5.093,5.737,6.215,6.613,6.876,7.566,7.586,7.901,7.736,7.23,6.703,5.896,5.73,6.032,6.263,6.458,7.107,7.766,7.911,7.794,7.776,7.876,7.866,7.462,7.298,6.898,6.62,6.747,7.285,8.139,8.411,8.776,8.946,9.155,9.296,10.15,9.96,9.885,9.99,10.203,10.401,10.935,11.071,11.274,11.566,11.851,12.187,12.363,12.426,12.478,12.486,12.117,12.132,11.791,11.332,11.441,11.38,11.309,10.985,10.627,10.355,9.899,9.833,9.747,9.693,9.514,9.502,9.888,9.98,10.255,10.667,10.531,10.452,10.267,10.2,10.437,10.553,10.577,10.661,11.022,11.213,11.311,11.572,11.708,11.176,10.857,10.754,10.629,10.185,10.052,10.083,10.31,10.478,10.626,11.121,11.141,11.221,11.299,11.435,11.599,11.353,11.299,11.288,11.279,11.208,11.307,11.685,11.58,11.379,11.096,11.144,10.947,10.699,10.881,10.746,10.276,9.994,9.629,9.76,9.749,10.012,10.184,10.336,10.473,10.848,11.349,11.978,12.167,12.327,12.339,12.064,12.09,12.12,11.94,11.562,11.208,10.974,10.948,10.983,10.76,10.694,10.534,10.273,10.364,10.421,10.357,10.316,10.472,10.94,11.314,11.485,11.488,11.606,11.479,11.091,11.288,11.354,11.501,11.302,10.968,11.026,10.944,11.08,11.388,11.504,11.279,10.683,10.533,10.505,10.305,10.146,10.148,9.501,9.366,9.23,9.067,8.956,8.935],"unit": "°C","type": "line","valueDecimals": 1}, {"name":"رطوبت","data":[26.857,27,27.111,27.2,27.272,30.545,32.181,33.818,35.272,36.545,37.818,41.818,44.545,47.272,48.545,49.818,53.545,61,64.909,68.818,72.727,75.09,77.454,82.181,84.545,84.454,86.181,87.909,89.636,93.09,96.727,100.363,104,107.636,111.272,116.727,121.09,125.454,129.818,134.181,136.727,151.636,159.09,166.545,174,181.454,186.363,201.636,209.272,216.909,222.818,228.727,234.636,249.363,258.181,267,273.09,279.181,288.181,303,308.818,314.636,326.909,336.272,345.636,364.363,373.727,380.181,389.818,399.454,409.09,425.727,432.727,439.727,446.727,453.727,460.727,473.272,478.818,484.363,489.909,491.636,493.363,498.272,500.727,503.181,506.454,508,509.545,512.636,514.363,516.09,517.909,519.727,521.545,525.636,527.272,528.909,529.636,530.363,530.909,531.181,531.3,531.444,530.75,529.857,528.666,521,521,521.777,522.4,522.909,522.818,522.636,522.545,522.454,522.363,522.272,522.181,520.727,520.545,521.09,521.636,522.181,523.272,523.818,524.363,524.909,525.454,528.09,532.272,534.363,536.454,537.909,539.363,540.818,543.727,545.909,544.818,543.727,542.636,541.545,540,539.545,539.09,538.636,537.272,535.181,533.363,532.454,531.545,530.636,529.727,528.818,526.272,525.909,525.545,525.181,524.818,524.454,523.727,522.363,521,520,519,516.545,511.636,510.636,509.636,506.909,504.181,502.454,499,497.272,497,496.727,497.454,496.727,493.818,491.636,489.454,487.272,487.09,486.909,486.545,485.363,484.181,484.09,481.545,479,478.181,477.909,477.636,477.363,477.09,476.818,476.363,481.818,487.272,492.727,493.909,493.181,491.727,491,490.272,489.545,487.636,485.727,482.363,474.454,468.454,462.454,456.454,450.454,439.727,435,430.272,425.545,418.727,418.363,418.545,419.09,419.636,420.181,419.454,418.727,413.818,413,412.181,411.363,409.636,407.909,405,403.818,397.454,392.818,388.181,383.545,374.272,369.636,365,358.363,351.181,344,340,338,336,334,332,328.636,323.909,322.545,321.181,319.818,318.272,315.181,313.636,312.09,311.909,311.727,310.545,308.181,307,306,305,302.818,300.636,297.545,296.636,296.727,296.181,295.636,295.09,294,294.636,293.09,291.545,291.545,291.545,292.181,292.818,293.454,294.09,292.545,291,292.272,292.363,292.454,292.545,289.818,287.09,281.636,281.09,280.545,277,273.454,271.454,267.454,265.181,262.909,260.636,258.363,256.09,248.909,246.818,240.909,235,229.09,226.272,220.636,217.818,215,215,211.545,208.09,201.181,197.727,194.272,190.818,187.363,183.909,170.818,173,175.181,177.363,179.545,181.727,186.09,182.727,179.363,179.09,178.818,173.272,160.272,152.818,145.363,137.909,130.454,126.818,116.272,111,107.363,101.909,98.363,94.818,87,82.818,80.363,79.545,78.272,77,73,71.454,69.636,67.909,66.727,65.454,62.909,62.09,61.272,60.363,59.454,59,58.545,58.272,58.09,57.909,57.727,57.545,57.272,57.181,56.909,56.636,56.454,56.272,55.909,55.727,55.818,55.545,55.272,54.909,54.818,54.727,54.636,54.545,54.454,54,54,54,54,54,53.636,52.909,52.545,52.636,52.727,52.818,52.909,52.636,52.272,52.272,52.272,52.272,52.818,53,53.09,53.181,53.272,53.818,54.363,55.09,55.454,55.272,55.09,54.909,54.727,54.363,53.727,53.09,52.636,52.181,51.727,50.818,50.363,50.363,50.363,50.363,50.818,51.727,51.272,50.818,50.363,50.636,50.909,50.545,50.363,50.181,50,49.818,50.818,52.818,53.09,53.363,53.636,53.909,54.181,53.272,52.818,52.09,51.363,50.636,49.909,47.818,46.09,44.363,43.363,42.363,41.363,39.363,37.636,35.909,35.181,35.09,35.363,35.909,36.181,36.545,36.909,37.272,38.363,39.545,39.636,39.727,39.818,38.636,37.454,34.909,33.636,32.363,31.09,29.818,27.181,21.909,20.545,19.181,17.818,16.454,15.09,10.727,8.545,8.636,8.727,8.818,8.909,9.09,8.9,8.666,9.5,10.571,12],"unit": "%","type": "line","valueDecimals": 0}]}';
var obj = JSON.parse(t);
// Get the data. The contents of the data file can be viewed at
// https://github.com/highcharts/highcharts/blob/master/samples/data/activity.json
$.each(obj.datasets, function (i, dataset) {
dataset.data = Highcharts.map(dataset.data, function (val, j) {
return [obj.xData[j], val];
});
$('<div class="chart">')
.appendTo('#container')
.highcharts({
chart: {
marginLeft: 40, // Keep all charts left aligned
spacingTop: 20,
spacingBottom: 20,
zoomType: 'x'
},
plotOptions: {
series: {
zones: [{
value: 3,
className: 'zone-2'
}, {
value: 10,
className: 'zone-1'
}, {
className: 'zone-2'
}],
}
},
title: {
text: dataset.name,
align: 'left',
margin: 0,
x: 30
},
credits: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
crosshair: true,
events: {
setExtremes: syncExtremes
},
labels: {
format: '{value} ساعت'
}
},
yAxis: [{
plotLines: [{
label: {
text: 'max',
x: 25
},
color: 'red',
width: 2,
value: 10,
dashStyle: 'longdashdot'
},{
label: {
text: 'min',
x: 25
},
color: 'red',
width: 2,
value: 3,
dashStyle: 'longdashdot'
}],
title: {
text: null
}
},{
plotLines: [{
label: {
text: 'max',
x: 25
},
color: 'red',
width: 2,
value: 550,
dashStyle: 'longdashdot'
},{
label: {
text: 'min',
x: 25
},
color: 'red',
width: 2,
value: 150,
dashStyle: 'longdashdot'
}],
title: {
text: null
}
},{
plotLines: [{
label: {
text: 'max',
x: 25
},
color: 'red',
width: 2,
value: 125,
dashStyle: 'longdashdot'
},{
label: {
text: 'min',
x: 25
},
color: 'blue',
width: 2,
value: 50,
dashStyle: 'longdashdot'
}],
title: {
text: null
}
}],
tooltip: {
positioner: function () {
return {
x: this.chart.chartWidth - this.label.width, // right aligned
y: 10 // align to title
};
},
borderWidth: 0,
backgroundColor: 'none',
pointFormat: '{point.y}',
headerFormat: '',
shadow: false,
style: {
fontSize: '18px'
},
valueDecimals: dataset.valueDecimals
},
series: [{
data: dataset.data,
name: dataset.name,
type: dataset.type,
color: Highcharts.getOptions().colors[i],
yAxis:i,
fillOpacity: 0.3,
tooltip: {
valueSuffix: ' ' + dataset.unit
}
}]
});
});
#container {
min-width: 310px;
max-width: 800px;
height: 400px;
margin: 0 auto
}
.highcharts-point {
stroke: white;
}
.highcharts-graph.zone-0 {
stroke: red;
}
.highcharts-area.zone-0 {
fill: red;
}
.highcharts-point.zone-0 {
fill: red;
}
.highcharts-graph.zone-1 {
stroke: green;
}
.highcharts-area.zone-1 {
fill: green;
}
.highcharts-point.zone-1 {
fill: green;
}
.highcharts-graph.zone-2 {
stroke: red;
}
.highcharts-area.zone-2 {
fill: red;
}
.highcharts-point.zone-2 {
fill: red;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

You are using the same values for zones in both charts. You need to change their values on each chart creation.
API Reference:
http://api.highcharts.com/highcharts/Highcharts.setOptions
Example:
http://jsfiddle.net/8u0k32et/

How to change color of donut chart in highchart?

I am using donut chart from highchart. I want to change the color of every part of my chart by manually. Suppose I want, from my code, Equity:red, Debt:blue, Large Cap: green, Multi cap: brown and so on. How can I do this? Please share with me if any one has any idea. I am referring from this chart .
My codes are added below
function print_chart(equity_data,debt_data, equity_percent , debt_percent )
{
$(function () {
var donut_data_param;
var colors = ['#483D8B','#458B00'];
donut_data_param = [{
y: equity_percent,
color: colors[0],
drilldown: {
name: 'Equity',
categories: ['Large Cap', 'Multi Cap', 'Mid & Small Cap','Eq Hybrid'],
data: equity_data,
color: colors[0]
}
}, {
y: debt_percent,
color: colors[1],
drilldown: {
name: 'Debt',
categories: ['Liquid', 'Ultra short' ,'short','Debt Hybrid','FD'],
data: debt_data,
color: colors[1]
}
}];
var categories = ['Equity','Debt'],
data = donut_data_param,
browserData = [],
versionsData = [],
i,
j,
dataLen = data.length,
drillDataLen,
brightness;
// Build the data arrays
for (i = 0; i < dataLen; i += 1) {
// add browser data
browserData.push({
name: categories[i],
y: data[i].y,
color: data[i].color
});
// add version data
drillDataLen = data[i].drilldown.data.length;
for (j = 0; j < drillDataLen; j += 1) {
brightness = 0.2 - (j / drillDataLen) / 5;
versionsData.push({
name: data[i].drilldown.categories[j],
y: data[i].drilldown.data[j],
color: Highcharts.Color(data[i].color).brighten(brightness).get()
});
}
}
// Create the chart
$('#mychart').highcharts({
chart: {
type: 'pie',
marginBottom: -40,
marginTop: -10
},
legend: {
layout: 'vertical',
floating: true,
align: 'left',
verticalAlign: 'top',
symbolPadding: 20,
symbolWidth: 10,
y: 100
}, credits: {
enabled: false
},
exporting: { enabled: false },
title: {
text: ''
},
// subtitle: {
// text: 'Source: netmarketshare.com'
// },
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
shadow: false,
center: ['50%', '50%']
}
},
tooltip: {
valueSuffix: '%'
},
series: [{
name: 'Percentage',
data: browserData,
size: '60%',
dataLabels: {
formatter: function () {
return this.y > 5 ? this.point.name : null;
},
color: '#ffffff',
distance: -30
}
}, {
name: 'Percentage',
data: versionsData,
size: '80%',
innerSize: '60%',
dataLabels: {
enabled: false
},
showInLegend: false
}]
});
});
}

Got the solution. http://jsfiddle.net/faywp9w3/
changed this:- color: data[i].drilldown.colors[j]
// add version data
drillDataLen = data[i].drilldown.data.length;
for (j = 0; j < drillDataLen; j += 1) {
brightness = 0.2 - (j / drillDataLen) / 5;
versionsData.push({
name: data[i].drilldown.categories[j],
y: data[i].drilldown.data[j],
color: data[i].drilldown.colors[j]
});
}
Declared : var colors = ['#0000ff','#458B00','#658300'];
And add this : colors: [colors[2],colors[1],colors[2],colors[1]] in drilldown
drilldown: {
name: 'Equity',
categories: ['Large Cap', 'Multi Cap', 'Mid & Small Cap','Eq Hybrid'],
data: equity_data,
colors: [colors[2],colors[1],colors[2],colors[1]]
}

jsfiddle
series: [{
type: 'pie',
name: 'Browser share',
innerSize: '50%',
data: [{
name: 'one',
y: 40,
color: 'yellow' // Jane's color
},
{
name: 'two',
y: 50,
color: 'green' // Jane's color
},
{
name: 'three',
y: 10,
color: 'red' // Jane's color
}
]

I want to make this Javascript function more efficient?

I have three pie charts being generated using Google Charts API. I want to compress this function further as there is a lot of duplication. Is there a loop I can make for it etc.
if (data) {
var myVar = [];
var myVar1 = [];
var myVar2 = [];
myVar.push(['Label', 'Value']);
myVar1.push(['Label', 'Value']);
myVar2.push(['Label', 'Value']);
myVar.push(['Car Sales Today', data.salesToday, ]);
myVar1.push(['Car Sales Yesterday', data.salesYesterday]);
myVar2.push(['Car Sales Last Week', data.salesLastWeek]);
var build1 = {
package: 'PieChart',
data: myVar,
customTooltips: [
data.salesToday,
],
container: 'today-sales-chart',
options: {
width: 'auto',
height: 300,
chartArea: { width: '50%', height: '80%' },
yAxis: { textPosition: 'none' },
legend: { position: "bottom" },
tooltip: { isHtml: true },
colors: ['#e6dc39'],
pieSliceText: 'none'
}
};
var build2 = {
package: 'PieChart',
data: myVar1,
customTooltips: [
data.salesYesterday,
],
container: 'yesterday-sales-chart',
options: {
width: 'auto',
height: 300,
chartArea: { width: '50%', height: '80%' },
yAxis: { textPosition: 'none' },
legend: { position: "bottom" },
tooltip: { isHtml: true },
colors: ['#33bb18'],
pieSliceText: 'none'
}
};
var build3 = {
package: 'PieChart',
data: myVar2,
customTooltips: [
data.salesLastWeek
],
container: 'lastweek-sales-chart',
options: {
width: 'auto',
height: 300,
chartArea: { width: '50%', height: '80%' },
yAxis: { textPosition: 'none' },
legend: { position: "bottom" },
tooltip: { isHtml: true },
colors: ['#e06e29'],
pieSliceText: 'none'
}
};
charts.push(build1, build2, build3);
google.setOnLoadCallback.drawCharts(build1.container);
google.setOnLoadCallback.drawCharts(build2.container);
google.setOnLoadCallback.drawCharts(build3.container);
}
I tried to do the following for example:
var myVar, myVar1, myVar2 = [];
but I get an error. Any help would be great.

I took some time to optimize your code, but I didn't test it. make sure all the variable names are ok, and don't make a conflict on your code
if (data) {
var allData = [{
arr : [['Label', 'Value'], ['Car Sales Today', data.salesToday]],
container : 'today-sales-chart',
customTooltips: data.salesToday
}
,{
arr : [['Label', 'Value'], ['Car Sales Yesterday', data.salesYesterday]],
container : 'yesterday-sales-chart',
customTooltips: data.salesYesterday
}
,{
arr : [['Label', 'Value'], ['Car Sales Last Week', data.salesLastWeek]],
container : 'lastweek-sales-chart',
customTooltips: data.salesLastWeek
}
];
var options = {
width: 'auto',
height: 300,
chartArea: { width: '50%', height: '80%' },
yAxis: { textPosition: 'none' },
legend: { position: "bottom" },
tooltip: { isHtml: true },
colors: ['#e6dc39'],
pieSliceText: 'none'
}
var builds = [];
for (var index in allData) {
builds.push({
package: 'PieChart',
data: allData[index].arr,
customTooltips: [ allData[index].customTooltips ],
container: allData[index].container,
options: options
});
}
for(var index in builds) {
charts.push(builds[index]);
google.setOnLoadCallback.drawCharts(builds[index].container);
}
}
Update
to add the possibility to change the color, in this case you don't need to use options as an independent variable :
var builds = [];
for (var index in allData) {
builds.push({
package: 'PieChart',
data: allData[index].arr,
customTooltips: [ allData[index].customTooltips ],
container: allData[index].container,
options: {
width: 'auto',
height: 300,
chartArea: { width: '50%', height: '80%' },
yAxis: { textPosition: 'none' },
legend: { position: "bottom" },
tooltip: { isHtml: true },
colors: allData[index].color, // <--- you set the color here
pieSliceText: 'none'
}
});
}

set different colors for each column in highcharts

I need to set different colors for each column in Highcharts graph dynamically. My Highcharts graph is:
options = {
chart: {
renderTo: 'chart',
type: 'column',
width: 450
},
title: {
text: 'A glance overview at your contest’s status'
},
xAxis: {
categories: ['Approved Photos', 'Pending Approval Photos',
'Votes', 'Entrants'],
labels: {
//rotation: -45,
style: {
font: 'normal 9px Verdana, sans-serif, arial'
}
}
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Amount'
}
},
legend: {
enabled: false
},
series: []
};
series = {
name: "Amount",
data: [],
dataLabels: {
enabled: true,
color: '#000000',
align: 'right',
x: -10,
y: 20,
formatter: function () {
return this.y;
},
style: {
font: 'normal 13px Verdana, sans-serif'
}
}
};
The data is set this way:
for (var i in Data) {
if (parseInt(Data[i]) != 0) {
series.data.push(parseInt(Data[i]));
} else {
series.data.push(null);
}
}
options.series.push(series);
chart = new Highcharts.Chart(options);
How can I dynamically set different colors for each data point in this loop?

Here is another solution with the latest version of Highcharts (currently 3.0).
Set the colorByPoint option to true and define the color sequence that you want.
options = {
chart: {...},
plotOptions: {
column: {
colorByPoint: true
}
},
colors: [
'#ff0000',
'#00ff00',
'#0000ff'
]
}
Here is an example based upon Highcharts Column with rotated labels demo

When you add the value to the series.data you can also set the color using the point options e.g
series.data.push({ y: parseInt(Data[i]), color: '#FF0000' });
For more details about the point options see https://api.highcharts.com/class-reference/Highcharts.Point#color

Try either of these approaches:
Approach 1:
Highcharts.setOptions({ colors: ['#3B97B2', '#67BC42', '#FF56DE', '#E6D605', '#BC36FE'] });
Approach 2:
var colors = ['#3B97B2', '#67BC42', '#FF56DE', '#E6D605', '#BC36FE', '#000'];
$('#bar_chart').highcharts({
chart: {
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: ''
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: false
}
}
},
series: [{
name: '',
colorByPoint: true,
data: [{
name: 'Blue',
y: 5.78,
color: colors[0]
}, {
name: 'Green',
y: 5.19,
color: colors[1]
}, {
name: 'Pink',
y: 32.11,
color: colors[2]
}, {
name: 'Yellow',
y: 10.04,
color: colors[3]
}, {
name: 'Purple',
y: 19.33,
color: colors[4]
}]
}]
});

i had colors from API response and 2 series. second series with dynamic colors.
following is sample to set dynamic colors while series mapping.
const response = [{
'id': 1,
'name': 'Mango',
'color': '#83d8b6',
'stock': 12.0,
'demand': 28,
},
{
id ': 2,
'name': 'Banana',
'color': '#d7e900',
'stock': 12.0,
'demand': 28,
}
];
let chartData: {
categories: [],
series: []
};
chartData.categories = response.map(x => x.name);
chartData.series.push({
name: 'Series 1',
type: 'column',
data: response.map(x => x.demand)
});
chartData.series.push({
name: 'Series 2',
type: 'column',
data: response.map(x => ({
y: x.stock,
color: x.color // set color here dynamically
}))
});
console.log('chartData: ', chartData);
you could also read more about Highcharts series Point and Marker