Google Annotation Chart background color [duplicate] - javascript

I'm styling a google chart using the javascript api. I want to change the background of the area where the data is plotted. For some reason when I set background options like so:
chart.draw(data, { backgroundColor: { fill: "#F4F4F4" } })
It changes the the background of the whole chart and not the area where the data is plotted. Any ideas on how to only change the background of the plotted area?
Thanks


pass the options like this
var options = {
title: 'title',
width: 310,
height: 260,
backgroundColor: '#E4E4E4',
is3D: true
};


add this to your options:
'chartArea': {
'backgroundColor': {
'fill': '#F4F4F4',
'opacity': 100
},
}


The proper answer is that it depends if it is classic Google Charts or Material Google Charts. If you use classic version of the Google Charts, multiple of the above suggestion work. However if you use newer Material type Google charts then you have to specify the options differently, or convert them (see google.charts.Bar.convertOptions(options) below). On top of that in case of material charts if you specify an opacity for the whole chart, the opacity (only) won't apply for the chart area. So you need to explicitly specify color with the opacity for the chart area as well even for the same color combination.
In general: material version of Google Charts lack some of the features what the Classic has (slanted axis labels, trend lines, custom column coloring, Combo charts to name a few), and vica versa: the number formating and the dual (triple, quadruple, ...) axes are only supported with the Material version.
In case a feature is supported by both the Material chart sometimes requires different format for the options.
<body>
<div id="classic_div"></div>
<div id="material_div"></div>
</body>
JS:
google.charts.load('current', { 'packages': ['corechart', 'bar'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540],
['2009', 1120, 580],
['2010', 1200, 500],
['2011', 1250, 490],
]);
var options = {
width: 1000,
height: 600,
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017'
},
// Accepts also 'rgb(255, 0, 0)' format but not rgba(255, 0, 0, 0.2),
// for that use fillOpacity versions
// Colors only the chart area, simple version
// chartArea: {
// backgroundColor: '#FF0000'
// },
// Colors only the chart area, with opacity
chartArea: {
backgroundColor: {
fill: '#FF0000',
fillOpacity: 0.1
},
},
// Colors the entire chart area, simple version
// backgroundColor: '#FF0000',
// Colors the entire chart area, with opacity
backgroundColor: {
fill: '#FF0000',
fillOpacity: 0.8
},
}
var classicChart = new google.visualization.BarChart(document.getElementById('classic_div'));
classicChart.draw(data, options);
var materialChart = new google.charts.Bar(document.getElementById('material_div'));
materialChart.draw(data, google.charts.Bar.convertOptions(options));
}
Fiddle demo: https://jsfiddle.net/csabatoth/v3h9ycd4/2/


It is easier using the options.
drawChart() {
// Standard google charts functionality is available as GoogleCharts.api after load
const data = GoogleCharts.api.visualization.arrayToDataTable([
['Chart thing', 'Chart amount'],
['Na Meta', 50],
['Abaixo da Meta', 22],
['Acima da Meta', 10],
['Refugos', 15]
]);
let options = {
backgroundColor: {
gradient: {
// Start color for gradient.
color1: '#fbf6a7',
// Finish color for gradient.
color2: '#33b679',
// Where on the boundary to start and
// end the color1/color2 gradient,
// relative to the upper left corner
// of the boundary.
x1: '0%', y1: '0%',
x2: '100%', y2: '100%',
// If true, the boundary for x1,
// y1, x2, and y2 is the box. If
// false, it's the entire chart.
useObjectBoundingBoxUnits: true
},
},
};
const chart = new GoogleCharts.api.visualization.ColumnChart(this.$.chart1);
chart.draw(data, options);
}
I'm using polymer that's why i'm using this.$.cart1, but you can use selectedbyid, no problem.


Have you tried using backgroundcolor.stroke and backgroundcolor.strokewidth?
See Google Charts documentation.


If you want to do like this then it will help. I use stepped area chart in the combo chart from the Google library...
where the values for each stepped area is the value for ticks.
Here is the link for jsfiddle code


Simply add background option
backgroundColor: {
fill:'red'
},
here is the fiddle link https://jsfiddle.net/amitjain/q3tazo7t/


You can do it just with CSS:
#salesChart svg > rect { /*#salesChart is ID of your google chart*/
fill: #F4F4F4;
}

Related

Is it possible to remove the cutout border on a doughnut graph using ChartJS 3.9?

Note: I'm quite new to javascript and ChartJS, so I have done my best to look at similar questions but I'm unsure how to apply the solutions to my issue. I'm really quite confused by the plugins, and it seems whenever I try to literally copy and paste in solutions from other posted questions, it either breaks the graph or just doesn't do anything at all. So, with that in mind, I appreciate any help!
I'm trying to format the outer of two overlaid doughnut graphs using ChartJS so that the outer graph looks like a rounded bracket. The intention is to be able to group certain slices of the inner doughnut together, EG: Inner graph shows number of years John has lived in 5 different places, the outer graph is grouping the 2nd, 3rd, and 4th slice to indicate that he lived in these locations while he was a wildland forest firefighter for the US Forest Service.
See below. Please note, the tick marks on the edges are important. It should look like a rounded bracket -> ] <-
Things I have tried:
Doing borderWidth: { top: 1, right: 1, bottom: 0, left: 1 } breaks the graph, as I'm not sure there's a "bottom" persay to a doughnut graph
Trying to change borderColor breaks the graph in the same way
I'm not sure how to select just the cutout to do any custom styling, as I'm not well versed on HTML canvases and how they work.
Although I am currently attempting to remove one of the borders, I have also considered solutions like:
Adding an additional border to the inner doughnut chart and forcing it to clip over the innermost edge of the outer doughnut
adding a round, white background to the inner doughnut that clips over the innermost edge of the outer doughnut
Changing just the color of the innermost edge of the outer doughnut to transparent or white
Hiding the border entirely, letting the background color of the outer doughnut act like the spine of the rounded bracket I'm trying to create, then adding two new data segments to the outer doughnut at the beginning and end each with a different cutout percentage than the spine. (I hope that makes sense. Essentially the data would look like {1, 98, 1} with the cutout specified on each slice so it would look like cutout: {85, 90, 85}, in theory. This version is untested.)
Pardon the comments in the js, those are just there for me to remember what's going on.
var chart1 = document.getElementById('chart1').getContext('2d');
let doughnut1 = new Chart(chart1, {
type: 'doughnut',
data: {
datasets: [{ // OUTER ring
data: [100], //leave at 100
backgroundColor: ['#fff'],
circumference: 300, //determines circumference of outer border X out of 360
weight: 0.15,
radius: '100%',
borderColor: 'black',
borderWidth: 4
}, {
data: [14, 14, 22, 37, 13],
backgroundColor: ['#f5ce42', '#ccc3a3', '#fc95f2', '#cdb2ed', '#423225'],
radius: '95%',
borderColor: 'black',
borderAlign: 'inside'
}]
}
});
.wrap__chart {width: 50vw; margin: 0 auto;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<div class="wrap__chart">
<canvas id="chart1"></canvas>
</div>
Parameters for this graph are:
The graph has to be dynamic, cannot include any static images or the like as the data will be filled from a calculator
The graph must be responsive (Ignoring the fact that it largely isn't right now lol)
Can't use JQuery, unfortunately...

You can leave a single line instead of a rectangle by modifying the width property weight: 0.15 to weight: 0.001 and the border property borderWidth: 4 to borderWidth: 1. There is no other property you can change to make it more like what you want.
The new code:
var chart1 = document.getElementById('chart1').getContext('2d');
let doughnut1 = new Chart(chart1, {
type: 'doughnut',
data: {
datasets: [{ // OUTER ring
data: [100], //leave at 100
backgroundColor: ['#fff'],
circumference: 300, //determines circumference of outer border X out of 360
weight: 0.001,
radius: '100%',
borderColor: 'black',
borderWidth: 1
}, {
data: [14, 14, 22, 37, 13],
backgroundColor: ['#f5ce42', '#ccc3a3', '#fc95f2', '#cdb2ed', '#423225'],
radius: '95%',
borderColor: 'black',
borderAlign: 'inside'
}]
}
});

Ok I finally found a solution for my own question. It's quite roundabout, so I don't know if it's an actual answer for anyone else.
It involves using three graphs, unfortunately:
var sliceA = 60000,
sliceB = 24000,
sliceC = 36000;
var protected = (((sliceA + sliceB)/(sliceA + sliceC + sliceB)) * 360);
//colors
var outerRing = 'green';
var ctx = document.getElementById("chart");
var chart = new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [{
data: [sliceA, sliceB, sliceC],
backgroundColor: ['limegreen', 'skyblue', 'firebrick'],
radius: '82%',
cutout: '50%',
}]
}
});
var chart2 = document.getElementById('chart2').getContext('2d');
let doughnut2 = new Chart(chart2, {
type: 'doughnut',
data: {
datasets: [{ // OUTER ring
data: [1, 98, 1], //leave at 100
backgroundColor: [outerRing, 'transparent', outerRing],
circumference: (protected + 5), //determines circumference of outer border X out of 360
weight: 0.5,
radius: '100%',
borderWidth: 0,
borderAlign: 'inside',
borderColor: 'transparent',
rotation: -2
},
{ data: //14, 14, 22, 37, 13
[100],
backgroundColor: [outerRing],
radius: '97%',
cutout: '92%',
circumference: (protected + 2),
borderWidth: '5px',
borderColor: outerRing,
rotation: -1
}
]
},
options: {
parsing: {
key: 'nested.value'
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<div class="container">
<canvas id="chart" style="position:absolute;"></canvas>
<canvas id="chart2" style="position:absolute;"></canvas>
</div>
it's not perfect, i'm still working out how to make the back rotation and addition to the variable "protected" in the outer rings responsive, with the intention of making it so that the inside of each tick mark aligns perfectly with 0 degrees and var protected degrees on the circle, to properly indicate that the outer ring encompasses all slices of the doughnut chart within the specified range.
you can change the outer ring style from a capital i to a [ style by changing the radius of each of the two layers of the outer ring. Switching the second dataset to be 100% and the first to be ~95% will change it accordingly.

How can I add min and max Threshold line in Google Line Charts

I have added line chart on my web-app and I need to add or highlight a constant line showing up in red for min-threshold value for this parameter and max-threshold for this parameter. I have gone the Google Line Charts Configuration Options but couldn't find any such options available in it. I wonder how anyone other also haven't ask this question on community so far. While searching a lot for solution to this problem I found one Fiddle related to this but it is adding an another line parameter and it showing tool-tip as that value, which I don't want to show on line chart. Also, adding it as another line in chart I find inefficient.
Thanks for help in advance.

there aren't any standard options for adding threshold lines or markers
adding another series is the only way
you can use the following option to disable tooltips...
enableInteractivity: false
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', ''],
['2004/05', 165, 938, 522, 998, 450, 250],
['2005/06', 135, 1120, 599, 1268, 288, 250],
['2006/07', 157, 1167, 587, 807, 397, 250],
['2007/08', 139, 1110, 615, 968, 215, 250],
['2008/09', 136, 691, 629, 1026, 366, 250]
]);
var options = {
seriesType: "line",
series: {
5: {
type: "steppedArea",
color: '#FF0000',
visibleInLegend: false,
areaOpacity: 0,
enableInteractivity: false
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
note: recommend loading the newer library loader.js instead of jsapi, according to the release notes...
The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader.js from now on.
this will only change the load statement, see above snippet...

You can override the automatically generated ticks with set values.
For example:
vAxes: {
0: {
title:'Left Axis Title',
ticks: [
0,
{v:460, f:'Minimum Recommended'},
{v:1840, f:'Maximum Safe'},
{v:2300, f:'100%'}
]
}
}

How to resize charts to fit the parent container with Google API

So I created a combo chart using the visualization API from Google, but im having problems resizing said chart to fit its parent container
That's how it looks on the website, The parent container's width is the one hovered. And i want the chart to fill the entire parent's width.
I have a panel system, in which each tab will have a different chart. the first one works like a charm, I dont have a problem with that one it fills the parent's container width correctly, but the second one is the one im having problems with.
Here's the HTML
<div class="tab-pane fade in active" id="anuales">
<div id ="anual-bar-chart" height ="500px" ></div>
</div>
<div class="tab-pane fade in" id="semestre-1">
<div id ="semester-1-chart" height="500px"></div>
</div>
And here's the js file to draw the charts
google.load("visualization", "1", {packages:["corechart", 'bar']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Año', 'Nacimiento', 'Reconocimiento', 'Adopción Simple', 'Matrimonios', 'Divorcios', 'Defunciones', 'Sentencias', 'Actas Foráneas', 'Promedio'],
['1997', 39520,732,39,10332,489,6033,88,0,7154],
['1998', 39113,728,61,9908,607,6261,82,0,7095],
['1999', 41007,825,58,10476,611,6103,74,0,7394],
['2000', 40337,898,30,10479,685,6198,80,0,7338],
['2001', 38132,847,10,9856,849,6288,78,0,7008],
['2002', 36933,856,7,9532,826,6425,96,0,6834],
['2003', 38688,858,63,9600,915,6731,139,0,7124],
['2004', 39612,919,40,9088,962,6674,199,0,7187],
['2005', 40985,1053,6,8785,1037,6874,215,0,7369],
['2006', 38863,1031,28,9023,1063,6954,164,0,7141],
['2007', 42757,1226,0,9318,1177,7169,3,0,8596],
['2008', 41310,1268,1,8842,1224,7676,1,0,7540],
['2009', 41155,1227,4,8185,1136,7757,5,0,7434],
['2010', 10867,1258,3,8268,1200,8250,3,330,7522],
['2011', 41760,1314,2,8977,1356,8077,5,987,7810],
['2012', 41553,1386,4,9240,1400,8622,7,782,7874],
['2013', 40953,1415,0,9726,1603,9107,11,622,7930],
['2014', 40981,1305,0,9713,1516,9349,5,619,7936],
['2015', 27017,887,0,6342,1227,3085,3,398,5245],
]);
var options = {
titleTextStyle: {color:'white'},
backgroundColor: {fill: 'transparent'},
chartArea: {width:'85%',height:'65%'},
vAxis: {textStyle:{color:'white'}},
legend:{textStyle: {color: 'white'}, position: 'bottom'},
height: 350,
hAxis: {textStyle:{color:'white'}},
seriesType: 'bars',
series: {8 : {type: 'line'}}
};
var chart = new google.visualization.ComboChart(document.getElementById('anual-bar-chart'));
chart.draw(data, options);
var data2 = google.visualization.arrayToDataTable([
['Mes', 'Nacimiento', 'Defunciones', 'Matrimonios', 'Divorcios', 'Reconocimientos', 'Adopción Simple', 'Sentencias', 'Actas Foráneas', 'Promedio'],
['Ene-15',3865,897,586,130,138,0,0,38,0],
['Feb-15',3322,793,818,166,143,0,0,62,0],
['Mar-15',3314,802,745,156,88,0,0,52,0],
['Abr-15',3289,714,653,159,106,0,1,35,0],
['May-15',3153,718,662,155,20,0,0,37,0],
['Jun-15',3349,728,901,162,103,0,0,42,0],
['Jul-15',3254,697,797,168,10,0,2,70,0],
['Ago-15',3462,736,1182,131,123,0,0,62,0],
]);
var options2 = {
titleTextStyle: {color:'white'},
backgroundColor: {fill: 'transparent'},
chartArea: {width:'85%',height:'65%'},
vAxis: {textStyle:{color:'white'}},
legend:{textStyle: {color: 'white'}, position: 'bottom'},
height: 350,
hAxis: {textStyle:{color:'white'}},
seriesType: 'bars',
series: {8 : {type: 'line'}}
};
var chart2 = new google.visualization.ComboChart(document.getElementById('semester-1-chart'));
chart2.draw(data2, options2);
}
The one that's named char2 at the bottom is the chart that im having problems with. I put the other one for u to see that I'm using the same configuration, but somehow it's displaying the charts different.
Can someone tell me what can I do, cause I've been looking around and there's nothing. I tried resizing the "chartArea" configuration that the api mentioned, but that only takes out the labels, but doesn't fit the parents container.

Google Charts don't resize automatically. They have to be redrawn when things resize (and showing/hiding is a resize).
I believe the code below, which I ripped off this question should solve your problem (you will need jquery too):
//create trigger to resizeEnd event
$(window).resize(function() {
if(this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 500);
});
//redraw graph when window resize is completed
$(window).on('resizeEnd', function() {
drawChart(data);
});

I wonder if my suggestion will solve your problem... Shouldn't you make two separate calls to draw the graphics? Perhaps your first bar chart is influencing your second because you have them bundled into one function call. For one of my projects I needed to deliver a piechart and a geochart and so I created a separate function to call them individually.
Please try this:
function drawCharts(){
anualBarChart();
semester1Chart();
}
function anualBarChart(){
var data = google.visualization.arrayToDataTable([
['Año', 'Nacimiento', 'Reconocimiento', 'Adopción Simple', 'Matrimonios', 'Divorcios', 'Defunciones', 'Sentencias', 'Actas Foráneas', 'Promedio'],
['1997', 39520,732,39,10332,489,6033,88,0,7154],
['1998', 39113,728,61,9908,607,6261,82,0,7095],
['1999', 41007,825,58,10476,611,6103,74,0,7394],
['2000', 40337,898,30,10479,685,6198,80,0,7338],
['2001', 38132,847,10,9856,849,6288,78,0,7008],
['2002', 36933,856,7,9532,826,6425,96,0,6834],
['2003', 38688,858,63,9600,915,6731,139,0,7124],
['2004', 39612,919,40,9088,962,6674,199,0,7187],
['2005', 40985,1053,6,8785,1037,6874,215,0,7369],
['2006', 38863,1031,28,9023,1063,6954,164,0,7141],
['2007', 42757,1226,0,9318,1177,7169,3,0,8596],
['2008', 41310,1268,1,8842,1224,7676,1,0,7540],
['2009', 41155,1227,4,8185,1136,7757,5,0,7434],
['2010', 10867,1258,3,8268,1200,8250,3,330,7522],
['2011', 41760,1314,2,8977,1356,8077,5,987,7810],
['2012', 41553,1386,4,9240,1400,8622,7,782,7874],
['2013', 40953,1415,0,9726,1603,9107,11,622,7930],
['2014', 40981,1305,0,9713,1516,9349,5,619,7936],
['2015', 27017,887,0,6342,1227,3085,3,398,5245],
]);
var options = {
titleTextStyle: {color:'white'},
backgroundColor: {fill: 'transparent'},
chartArea: {width:'85%',height:'65%'},
vAxis: {textStyle:{color:'white'}},
legend:{textStyle: {color: 'white'}, position: 'bottom'},
height: 350,
hAxis: {textStyle:{color:'white'}},
seriesType: 'bars',
series: {8 : {type: 'line'}}
};
var chart = new google.visualization.ComboChart(document.getElementById('anual-bar-chart'));
chart.draw(data, options);
}
function semester1Chart(){
var data2 = google.visualization.arrayToDataTable([
['Mes', 'Nacimiento', 'Defunciones', 'Matrimonios', 'Divorcios', 'Reconocimientos', 'Adopción Simple', 'Sentencias', 'Actas Foráneas', 'Promedio'],
['Ene-15',3865,897,586,130,138,0,0,38,0],
['Feb-15',3322,793,818,166,143,0,0,62,0],
['Mar-15',3314,802,745,156,88,0,0,52,0],
['Abr-15',3289,714,653,159,106,0,1,35,0],
['May-15',3153,718,662,155,20,0,0,37,0],
['Jun-15',3349,728,901,162,103,0,0,42,0],
['Jul-15',3254,697,797,168,10,0,2,70,0],
['Ago-15',3462,736,1182,131,123,0,0,62,0],
]);
var options2 = {
titleTextStyle: {color:'white'},
backgroundColor: {fill: 'transparent'},
chartArea: {width:'85%',height:'65%'},
vAxis: {textStyle:{color:'white'}},
legend:{textStyle: {color: 'white'}, position: 'bottom'},
height: 350,
hAxis: {textStyle:{color:'white'}},
seriesType: 'bars',
series: {8 : {type: 'line'}}
};
var chart2 = new google.visualization.ComboChart(document.getElementById('semester-1-chart'));
chart2.draw(data2, options2);
}
google.load("visualization", "1", {packages:["corechart","bar"]});
google.setOnLoadCallback(drawCharts);
The more I think about it, this shouldn't make a difference. Let me know if it is a bust and I'll remove it rather than copping down votes.

Adding a new line to Google chart without shifting the others

I'm having trouble using google charts stacked graphs to display a 'dynamic' graph, by dynamic I mean that every time I draw the graph, I add a new row of data.
The problem is that when I add the new row, the entire graph proportion changes.
Link to JSFiddle.
HTML:
<div id="chartdiv"></div>
<button onclick='DrawChart();'>Draw Chart</button>
CSS:
#chartdiv{
height: 400px;
overflow-x: hidden;
overflow-y: scroll;
border: solid;
}
JS:
google.load("visualization", "1", { packages: ["corechart"] });
// create legend
var legend = ['School', 'A', 'B', 'C', 'D', 'E', 'F', 'G'];
// create table
var dataTable = [legend];
// create line
var line = ['line', 0.05, 0.10, 0.25, 0.33, 0 , 0.12, 0.15];
function DrawChart() {
dataTable.push(line);
var data = google.visualization.arrayToDataTable(dataTable);
var view = new google.visualization.DataView(data);
var options_fullStacked = {
isStacked: 'percent',
legend: { position: 'top', maxLines: 3 },
height: data.getNumberOfRows() * 110,
width: 615,
bar: { groupWidth: 50 },
hAxis: {
minValue: 0,
ticks: [0, .25, .5, .75, 1]
},
};
var chart = new google.visualization.BarChart(document.getElementById("chartdiv"));
chart.draw(view, options_fullStacked);
}
I saw a somewhat similar question here, which I tried to learn from and make the changes accordingly, but it didn't help.
The best way to understand what I need help with is to enter the JSFiddle link and click the draw chart button a few times, each time you click it a new row will be added to the chart. So just try clicking it a few times and you'll see that things are starting to get messy after a while.
Ideally what I'm trying to achieve is that after the 2nd, 3rd (and so on) click I won't notice that the entire graph we loaded, I will only notice that a new row was added.
I would really appreciate help on this issue.

I was able to fix it. After playing with the graph for a while I found a way to overcome most of the bugs I had.
The main issues were the changing height and width, and that after a few runs the graph was starting to lose its structure.
The changes I made include:
Setting a fixed width.
Setting a min height and also making some adjustments to the size value.
Setting a fixed font size - that's what caused the graph to lose its shape.
I've included the updated code below. (looks much better in JSFiddle)
google.load("visualization", "1", {
packages: ["corechart"]
});
// create legend
var legend = ['School', 'A', 'B', 'C', 'D', 'E', 'F', 'G'];
// create table
var dataTable = [legend];
// create line
var lines = [
['line', 0.05, 0.10, 0.25, 0.33, 0, 0.12, 0.15],
['line', 0.1, 0.3, 0.25, 0, 0, 0.12, 0.23]
];
var i = 0;
function DrawChart() {
dataTable.push(lines[(i++) % 2]);
var data = google.visualization.arrayToDataTable(dataTable);
var view = new google.visualization.DataView(data);
var height = Math.max(180, data.getNumberOfRows() * 85);
var options_fullStacked = {
isStacked: 'percent',
legend: {
position: 'top',
maxLines: 3
},
height: height,
width: 720,
bar: {
groupWidth: 50
},
hAxis: {
minValue: 0,
ticks: [0, .25, .5, .75, 1],
title: "p"
},
chartArea: {
left: 100,
top: 30,
width: 600
},
fontSize: 14
};
var chart = new google.visualization.BarChart(document.getElementById("chartdiv"));
chart.draw(view, options_fullStacked);
}
#chartdiv {
height: 400px;
overflow-x: hidden;
overflow-y: scroll;
border: solid;
}
<script src="https://www.google.com/jsapi"></script>
<div id="chartdiv"></div>
<button onclick='DrawChart();'>Draw Chart</button>

Straight line down on line chart google chart?

Possible to make a line (dotted and straight) down from the dots in line chart google chart?
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2004', 1000],
['2005', 1170],
['2006', 660],
['2007', 1030]
]);
var options = {
title: 'Company Performance',
pointSize: 10
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
The concept is something like this...
http://jsfiddle.net/TD92C/

You can fake those lines by using a ComboChart and using a DataView to duplicate your data series. Set one series to the "line" type and the second to the "bar" type. Disable interactivity on the bars and remove that series from the chart legend. Use the bar.groupWidth option to narrow the bars drawn so that they resemble lines:
bar: {
// use this to set the width of the vertical lines
groupWidth: 2
},
series: {
0: {
// this is the line series
type: 'line',
pointSize: 10
},
1: {
// this creates the vertical "lines" down from the points
type: 'bars',
color: '#666666',
enableInteractivity: false,
visibleInLegend: false
}
}
See an example here http://jsfiddle.net/asgallant/TD92C/1/.

Categories