How can I remove the horizontal grid line in my google column chart?
I tried some of the solutions but can't still remove it. Thanks.
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Year', 'Austria', 'Belgium', 'Czech Republic', 'Finland', 'France', 'Germany'],
['2003', 1336060, 3817614, 974066, 1104797, 6651824, 15727003],
['2004', 1538156, 3968305, 928875, 1151983, 5940129, 17356071],
['2005', 1576579, 4063225, 1063414, 1156441, 5714009, 16716049],
['2006', 1600652, 4604684, 940478, 1167979, 6190532, 18542843],
['2007', 1968113, 4013653, 1037079, 1207029, 6420270, 19564053],
['2008', 1901067, 6792087, 1037327, 1284795, 6240921, 19830493]
]);
// Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById('visualization')).
draw(
data,
{
title:"Yearly Coffee Consumption by Country",
width:600, height:400,
hAxis: {title: "Years", minorGridlines: { color: 'red' } }
}
);
}
The horizontal grid lines are controlled by the vAxis.gridlines option. Set the vAxis.gridlines.color option to "transparent" to make them disappear:
vAxis: {
gridlines: {
color: 'transparent'
}
}
Something else worth trying for your chart options (if you don't want the lines there at all):
var options = {
...
vAxis : {
gridlines : {
count : 0
}
}
};
Related
js code :
its to add chart to col-4 bar must have 3 columns each having space between it all different color, remove legend in this google chart
function drawBarChart() {
var data = google.visualization.arrayToDataTable([
["Retention", "Level", {
role: "style"
}],
["HIGH", 12, "#E54B4B"],
["ELEVATED", 29, "#FFB100"],
["LOW", 52, "#2BC18D"],
]);
var options = {
title: "Density of Precious Metals, in g/cm^3",
height: 600,
width: 370,
legend: 'none',
bar: {
groupWidth: "55%"
},
ticks: [0, 20, 40, 60, 80, 100],
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_divTwo'));
// Convert the Classic options to Material options.
chart.draw(data, google.charts.Bar.convertOptions(data, options));
};
I would like to recreate this chart color scheme in Chart.js.
So far I've succeeded in creating the horizontal linear gradient for both the stroke and background colors, but I can't find a way to create the opacity mask for the background color to 'blend' it into the page background.
This is my chart so far
Note:
I can create an opacity mask on the canvas itself using css property:
-webkit-mask-image: -webkit-gradient(linear, left 50%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))
But this method masks the whole lower bottom of the chart, i.e the stroke of the chart, for example
How would I go about masking only the background color of the chart?
Chart.js setup
data = {
labels: labels,
datasets: [
{
label: 'Dataset 1',
fill: true,
data: Utils.numbers(NUMBER_CFG),
borderColor: getGradient,
pointBorderColor: getGradient,
pointBackgroundColor: getGradient,
pointHoverBackgroundColor: getGradient,
pointHoverBorderColor: getGradient,
backgroundColor: getGradient
},
]
};
let width, height, gradient;
function gradient(ctx, chartArea) {
const chartWidth = chartArea.right - chartArea.left;
const chartHeight = chartArea.bottom - chartArea.top;
if (!gradient || width !== chartWidth || height !== chartHeight) {
// Create the gradient because this is either the first render
// or the size of the chart has changed
width = chartWidth;
height = chartHeight;
var gradientStroke = ctx.createLinearGradient(chartArea.right, chartArea.top, chartArea.left, chartArea.top);
gradientStroke.addColorStop(0, "#80b6f4");
gradientStroke.addColorStop(1, "#f49080");
}
return gradientStroke;
}
function getGradient(context) {
const chart = context.chart;
const {ctx, chartArea} = chart;
if (!chartArea) {
// This case happens on initial chart load
return;
}
return gradient(ctx, chartArea);
}
I hope you have solved that by now. In any case, I think you should try to change the values you pass to createLinearGradient function. See this example (it's not mine, but helped me to understand that).
var ctx = document.getElementById("chart").getContext("2d");
/*** Gradient ***/
var gradient = ctx.createLinearGradient(0, 0, 0, 200);
gradient.addColorStop(0, 'rgba(250,174,50,1)');
gradient.addColorStop(1, 'rgba(250,174,50,0)');
/***************/
var data = {
labels : ["02:00","04:00","06:00","08:00","10:00","12:00","14:00","16:00","18:00","20:00","22:00","00:00"],
datasets: [
{
fillColor : gradient, // Put the gradient here as a fill color
strokeColor : "#ff6c23",
pointColor : "#fff",
pointStrokeColor : "#ff6c23",
pointHighlightFill: "#fff",
pointHighlightStroke: "#ff6c23",
data : [25.0,32.4,22.2,39.4,34.2,22.0,23.2,24.1,20.0,18.4,19.1,17.4]
}
]
};
var options = {
responsive: true,
datasetStrokeWidth : 3,
pointDotStrokeWidth : 4,
tooltipFillColor: "rgba(0,0,0,0.8)",
tooltipFontStyle: "bold",
tooltipTemplate: "<%if (label){%><%=label + ' hod' %>: <%}%><%= value + '°C' %>",
scaleLabel : "<%= Number(value).toFixed(0).replace('.', ',') + '°C'%>"
};
var myLineChart = new Chart(ctx).Line(data, options);
<canvas id="chart" width="800" height="400"></canvas>
I simply want to "center" the annotation in the bars in this chart. You can see how the data appear at the end of the bar. Can that percentage be centered in the bar?
Try as I might, I cannot figure it out. I found a block of code that was described as a hack, but it would have to be customized for each chart. I use this code to generates lots and lots of charts. Any help would be wildy appreciated!
function drawVisualizationstack(qid,cdata, w,h,l,cw,pos,stacked,questioncase) {
pos='top';
var data = new google.visualization.DataTable();
var e;
for (var k=0;k<cdata.length;k++) {
e=cdata[k];
if (e[0]=='column') {
if (e[2]=="tooltip") {
data.addColumn({type:'string',role:'tooltip','p':{'html':true}});
//data.addColumn({type: 'string', role: 'annotation','p':{'html':true}});
}
else if (e[2]=="annotation") {
data.addColumn({type: 'string', role: 'annotation', p: {html: true}});
}
else {
if (e[2]=="All") e['2']="All";
data.addColumn(e[1],e[2]);
}
}
else {
if (e==="" || e===undefined) {mclog('UNDEFINED DATA ROW FOR ' + qid);}
else {
data.addRow(e);
}
}
}
h=h*.75;
var chartHeight=h-65;
var options = {
width:500,
height:h,
isStacked:true,
chartArea:{height:chartHeight,left:l,width:cw},
backgroundColor:'transparent',
bar:{groupWidth:'80%'},
tooltip: {isHtml:true},
legend:{position:'none'},
hAxis: {title: 'Percentage',minValue:0,maxValue:100},
hAxis: {textPosition: 'none',ticks: [0]},
colors: ['#5d5d5d', '#002e32', '#0e1a40', '#364940', '#a9b861', '#404000', '#504000', '#604000', '#003070', '#687000'] //set default colors for charts
}}},
true,italic: true,color: '#871b47',auraColor: '#d799ae',opacity: 0.8}}
}
var chart = new google.visualization.BarChart(document.getElementById('questchart_'+qid));
jQuery("base").attr('href',document.location);
chart.draw(data,options);
}
I am working with Google's Charting API and I have a problem where the graph will sometimes have 0 in the middle of the y axis and underneath show negative numbers.
I want to set the chart to be a minimum of 0 and found on Google that all I need to do is add vAxis:{viewWindow: {min: 0}}.
I'm drawing my chart like the below
function (result)
{
alert(result);
var obj = $.parseJSON(result);
var resultData = obj.DATA;
var data = new google.visualization.DataTable(resultData);
var options = {
title: "Crash counts for ",
pointSize: 6,
hAxis: {showTextEvery: 2, slantedText: true, slantedTextAngle: 30},
animation: {
duration: 1000,
easing: 'out'
}
vAxis:{viewWindow: {min: 0}}
};
var chart = new google.visualization.LineChart(document.getElementById("lineChart"));
chart.draw(data, options);
}
), "json";
}
Chrome says that the line vAxis has an error which is unexpected identifier.
Well, really simple mistake, you just forgot to add a , after animation :
var options = {
title: "Crash counts for ",
pointSize: 6,
hAxis: {showTextEvery: 2, slantedText: true, slantedTextAngle: 30},
animation: {
duration: 1000,
easing: 'out'
}, // here is the change
vAxis:{viewWindow: {min: 0}}
};
Consider drawing a column chart and I don't get any data from the data source, How do we draw an empty chart instead of showing up a red colored default message saying "Table has no columns"?
What I do is initialize my chart with 1 column and 1 data point (set to 0). Then whenever data gets added I check if there is only 1 column and that it is the dummy column, then I remove it. I also hide the legend to begin so that it doesn't appear with the dummy column, then I add it when the new column gets added.
Here is some sample code you can plug in to the Google Visualization Playground that does what I am talking about. You should see the empty chart for 2 seconds, then data will get added and the columns will appear.
var data, options, chart;
function drawVisualization() {
data = google.visualization.arrayToDataTable([
['Time', 'dummy'],
['', 0],
]);
options = {
title:"My Chart",
width:600, height:400,
hAxis: {title: "Time"},
legend : {position: 'none'}
};
// Create and draw the visualization.
chart = new google.visualization.ColumnChart(document.getElementById('visualization'));
chart.draw(data,options);
setTimeout('addData("12:00",10)',2000);
setTimeout('addData("12:10",20)',3000);
}
function addData(x,y) {
if(data.getColumnLabel(1) == 'dummy') {
data.addColumn('number', 'Your Values', 'col_id');
data.removeColumn(1);
options.legend = {position: 'right'};
}
data.addRow([x,y]);
chart.draw(data,options);
}
A even better solution for this problem might be to use a annotation column instead of a data column as shown below. With this solution you do not need to use any setTimeout or custom function to remove or hide your column. Give it a try by pasting the given code below into Google Code Playground.
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['', { role: 'annotation' }],
['', '']
]);
var ac = new google.visualization.ColumnChart(document.getElementById('visualization'));
ac.draw(data, {
title : 'Just a title...',
width: 600,
height: 400
});
}
The way I did this was by disabling the pie slices, turning off tooltips, stuffing in a pretend value and making it gray. I'm sure there are more clever ways to do this, but this worked for me where the other methods didn't.
The only drawback is that it sets both items in the legend to gray as well. I think you could perhaps just add a third item, and make it invisible on the legend only. I liked this way though.
function drawChart() {
// Define the chart to be drawn.
data = new google.visualization.DataTable();
data.addColumn({type: 'string', label: 'Result'});
data.addColumn({type: 'number', label: 'Count'});
data.addRows([
['Value A', 0],
['Value B', 0]
]);
var opt_pieslicetext = null;
var opt_tooltip_trigger = null;
var opt_color = null;
if (data.getValue(1,1) == 0 && data.getValue(0,1) == 0) {
opt_pieslicetext='none';
opt_tooltip_trigger='none'
data.setCell(1,1,.1);
opt_color= ['#D3D3D3'];
}
chart = new google.visualization.PieChart(document.getElementById('mydiv'));
chart.draw(data, {sliceVisibilityThreshold:0, pieSliceText: opt_pieslicetext, tooltip: { trigger: opt_tooltip_trigger }, colors: opt_color } );
}