I need a single column column chart for Google Charts - charts

I need a one column column-chart that has a vertical axis from 0 to 150000 and a bar that fills it (they have met their deductible completely). I thought I had what I read to do this as below, but that gives me a vertical axis of 0 to 400,000 and a bar up to 150,000.
Alternatively, I could use suggestions on how to display a single field whereas one can pay in full or in 4 payments to meet that deductible.
PLEASE help!
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(barDisassembly);
function barDisassembly() {
var data = google.visualization.arrayToDataTable([
['Categories', 'Disassembly Fee'],
['N-1701', 150000]
]);
var options = {
chart: {
width: 200,
height: 400,
legend: { position: 'top', maxLines: 3 },
vAxis: {
viewWindowMode:'explicit',
viewWindow:{
max:150000,
min:0
}
}
}
};
var bar = new google.visualization.ColumnChart(document.getElementById('bar_disassembly'));
bar.draw(data, options);
}
</script>

Remove chart from the options.
The only configuration options associated with chart are subtitle and title...
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(barDisassembly);
function barDisassembly() {
var data = google.visualization.arrayToDataTable([
['Categories', 'Disassembly Fee'],
['N-1701', 150000]
]);
var options = {
width: 400,
height: 400,
legend: {
position: 'top',
maxLines: 3
},
vAxis: {
viewWindow: {
max: 150000,
min: 0
}
}
};
var bar = new google.visualization.ColumnChart(document.getElementById('bar_disassembly'));
bar.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="bar_disassembly"></div>

Related

Google Donut Chart (Visualization) - Percentage greater than 100

I am creating a donut chart using Google Visualization. Its an Monthly Revenue Goal chart. e.g. let say goal is set 1000 and 800 is the revenue then 80% will be shown as completed and 20% as remaining.
What I want to do is that if revenue is 2000 then 200% should be shown. (Visually it can not be greater than 100 (whole donut) , I just want to see the 200%.
Is this possible?
we can use the formatted value to display anything we need.
first, we need to set the following config option, to display the value of the data table column.
pieSliceText: 'value'
then when loading the data table, we use object notation to provide the formatted value, where v: is the value, and f: is the formatted value.
{v: 2000, f: '2,000 - 200%'}
with the config option above, we can display anything...
see following working snippet...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['category', 'amount'],
['goal', 1000],
['revenue', {v: 2000, f: '2,000 - 200%'}],
]);
var options = {
pieHole: 0.4,
pieSliceText: 'value'
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
#chart_div {
height: 600px;
width: 800px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
NOTE: but you may need to disable or provide a custom tooltip to match...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['category', 'amount', {role: 'tooltip', type: 'string'}],
['goal', 1000, '1,000'],
['revenue', {v: 2000, f: '2,000 - 200%'}, '2,000 - 200%'],
]);
var options = {
pieHole: 0.4,
pieSliceText: 'value'
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
#chart_div {
height: 600px;
width: 800px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

google charts , y-axis is not ordered, unable to fix it

<div id="thelinechart" style="width: 1000px; height: 550px"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();data.addColumn('string','Year');
data.addColumn('number','Current Trend');
data.addColumn('number','2015 Projection');
data.addColumn('number','2016 Projection');
data.addColumn('number','2017 Projection');
data.addColumn('number','2018 Projection');
data.addRows([
['2015',250,250,null,null,null],['2016',200,300,200,null,null],['2017',200,310,230,200,null],['2018',290,340,320,280,290],['2019',null,370,350,360,290],['2020',null,null,430,470,390],['2021',null,null,null,520,440],['2022',null,null,null,null,450]
]);
var options = {
chart: {
title: 'Capacity',
subtitle: 'in weight'
},
width: 850,
height: 450,
vAxis: {
viewWindowMode: 'explicit',
viewWindow: {
//max: 8000,
min: 0,
},
gridlines: {
count: 18, //set kind of step (max-min)/count
}
}
};
var chart = new google.charts.Line(document.getElementById('thelinechart'));
chart.draw(data, options);
}
</script>
I dont know how to fix this, and I have tried other maps from google as well but it doesnt seems to help me out in figuring out whats going wrong and why the y axis is not ordered from 0.
when using a material chart,
you need to use the following static method to convert the options to material options...
google.charts.Line.convertOptions(options)
see following working snippet...
google.charts.load('current', {
packages: ['line']
}).then(function () {
var data = new google.visualization.DataTable();data.addColumn('string','Year');
data.addColumn('number','Current Trend');
data.addColumn('number','2015 Projection');
data.addColumn('number','2016 Projection');
data.addColumn('number','2017 Projection');
data.addColumn('number','2018 Projection');
data.addRows([
['2015',250,250,null,null,null],['2016',200,300,200,null,null],['2017',200,310,230,200,null],['2018',290,340,320,280,290],['2019',null,370,350,360,290],['2020',null,null,430,470,390],['2021',null,null,null,520,440],['2022',null,null,null,null,450]
]);
var options = {
chart: {
title: 'Capacity',
subtitle: 'in weight'
},
width: 850,
height: 450,
vAxis: {
viewWindowMode: 'explicit',
viewWindow: {
//max: 8000,
min: 0,
},
gridlines: {
count: 18, //set kind of step (max-min)/count
}
}
};
var chart = new google.charts.Line(document.getElementById('thelinechart'));
chart.draw(data, google.charts.Line.convertOptions(options));
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="thelinechart"></div>
NOTE: there are also several options that are not supported by material charts,
see --> Tracking Issue for Material Chart Feature Parity

How to save Google bar chart as image without using getImageURI() since this is not available with 'packages': ['bar'] [duplicate]

This is my sample material bar graph and i want the image uri for the plotted graph
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Galaxy', 'Distance', 'Brightness'],
['Canis Major Dwarf', 8000, 23.3],
['Sagittarius Dwarf', 24000, 4.5],
['Ursa Major II Dwarf', 30000, 14.3],
['Lg. Magellanic Cloud', 50000, 0.9],
['Bootes I', 60000, 13.1]
]);
var options = {
width: 800,
chart: {
title: 'Nearby galaxies',
subtitle: 'distance on the left, brightness on the right'
},
bars: 'vertical', // Required for Material Bar Charts.
series: {
0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
},
axes: {
x: {
distance: {label: 'parsecs'}, // Bottom x-axis.
brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis.
}
}
};
var chart = new google.charts.Bar(document.getElementById('dual_x_div'));
chart.draw(data, options);
console.log(chart.getImageURI());
};
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dual_x_div" style="width: 900px; height: 500px;"></div>
But the console giving me error like
chart.getImageURI is not a function
you can use html2canvas
you'll need the following two files from the build
<script src="html2canvas.js"></script>
<script src="html2canvas.svg.js"></script>
then on the chart's 'ready' event...
google.visualization.events.addListener(chart, 'ready', function () {
// add svg namespace to chart
$(chartContainer).find('svg').attr('xmlns', 'http://www.w3.org/2000/svg');
// get image uri
html2canvas(chartContainer, {
allowTaint: true,
taintTest: false
}).then(function(canvas) {
console.log(canvas.toDataURL('image/png'));
});
});
UPDATE
another method is to convert the svg to an image and draw it on a canvas,
then pull the uri from the canvas...
google.charts.load('current', {
packages:['bar']
}).then(function () {
var data = new google.visualization.arrayToDataTable([
['Galaxy', 'Distance', 'Brightness'],
['Canis Major Dwarf', 8000, 23.3],
['Sagittarius Dwarf', 24000, 4.5],
['Ursa Major II Dwarf', 30000, 14.3],
['Lg. Magellanic Cloud', 50000, 0.9],
['Bootes I', 60000, 13.1]
]);
var options = {
width: 800,
chart: {
title: 'Nearby galaxies',
subtitle: 'distance on the left, brightness on the right'
},
bars: 'vertical', // Required for Material Bar Charts.
series: {
0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
},
axes: {
x: {
distance: {label: 'parsecs'}, // Bottom x-axis.
brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis.
}
}
};
var chartContainer = document.getElementById('dual_x_div');
var chart = new google.charts.Bar(chartContainer);
google.visualization.events.addListener(chart, 'ready', function () {
var canvas;
var domURL;
var imageNode;
var imageURL;
var svgParent;
// add svg namespace to chart
domURL = window.URL || window.webkitURL || window;
svgParent = chartContainer.getElementsByTagName('svg')[0];
svgParent.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
imageNode = chartContainer.cloneNode(true);
imageURL = domURL.createObjectURL(new Blob([svgParent.outerHTML], {type: 'image/svg+xml'}));
image = new Image();
image.onload = function() {
canvas = document.getElementById('canvas');
canvas.setAttribute('width', parseFloat(svgParent.getAttribute('width')));
canvas.setAttribute('height', parseFloat(svgParent.getAttribute('height')));
canvas.getContext('2d').drawImage(image, 0, 0);
console.log(canvas.toDataURL('image/png'));
}
image.src = imageURL;
});
chart.draw(data, options);
});
.hidden {
display: none;
visibility: hidden;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dual_x_div"></div>
<canvas class="hidden" id="canvas"></canvas>
I noticed this question was posted three years ago. Google Charts probably have had quite a few updates since then. According to Google Charts though, getImageURI should work for all core charts and geocharts. The chart in question is a bar chart, which is one of the core charts of Google Charts. So, getImageURI should work. Looking at your first line of codes, you specify bar as the packages. You need to change it to say corechart. So, you will have like the following line
google.charts.load('current', {packages: ['corechart']});
And then further down, change the chart definition to var chart = new google.visualization.BarChart(document.getElementById('dual_x_div'));
After making these changes, chart.getImageURI() should return what you want. I recently did a bar chart myself and that's how I got mine to work.

Google charts, Column chart two different colors per column

Let's say I have a datatable like this:
drivingData.addColumn('string', 'VehicleGroup');
drivingData.addColumn('number', 'TimeType');
drivingData.addColumn('number', 'TimeTarget');
drivingData.addColumn('number', 'TimeUsed');
then I add 4 rows like this:
drivingData.addRow(['Trucks-S',0, 1000, 1200])
drivingData.addRow(['Trucks-F',1, 300, 500])
drivingData.addRow(['Trailer-S',0, 1200, 1500])
drivingData.addRow(['Trailer-F',1, 100, 500])
I would like to have a 'stacked' column chart. First one shows Trucks-S with TimeType 0 with yellow and orange colors.
Second would show Trucks-F with TimeType 1 with grey and light-grey colors.
Third would then again be yellow and orange and fourth grey and light-grey and so on...
Is this possible?
Something like this:
https://imgur.com/a/oNOiP
the requested chart is only available as a Material bar chart
Material --> google.charts.Bar -- packages: ['bar']
Classic --> google.visualization.ColumnChart -- packages: ['corechart']
you can break Material bar charts into multiple stacks,
by assigning a group of series to a different y-axis
this is accomplished by using the series option
series: {
2: {
targetAxisIndex: 1
},
3: {
targetAxisIndex: 1
}
},
this will create a second axis on the right side of the chart,
which will have a different scale by default
to keep both y-axis in sync, assign a specific view window
vAxis: {
viewWindow: {
min: 0,
max: 3000
}
}
see following working snippet...
google.charts.load('current', {
packages: ['bar']
}).then(function () {
var drivingData = new google.visualization.DataTable();
drivingData.addColumn('string', 'VehicleGroup');
drivingData.addColumn('number', 'TimeTarget');
drivingData.addColumn('number', 'TimeUsed');
drivingData.addColumn('number', 'TimeTarget');
drivingData.addColumn('number', 'TimeUsed');
drivingData.addRow(['Trucks-S', 1000, 1200, 600, 800])
drivingData.addRow(['Trucks-F', 300, 500, 700, 900])
drivingData.addRow(['Trailer-S', 1200, 1500, 800, 1000])
drivingData.addRow(['Trailer-F', 100, 500, 600, 1000])
var container = document.getElementById('chart_div');
var chart = new google.charts.Bar(container);
var options = google.charts.Bar.convertOptions({
colors: ['#fbc02d', '#616161'],
height: 400,
isStacked: true,
series: {
2: {
targetAxisIndex: 1
},
3: {
targetAxisIndex: 1
}
},
vAxis: {
viewWindow: {
min: 0,
max: 3000
}
}
});
chart.draw(drivingData, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
note: just keep in mind,
there are several configuration options that are not supported by Material charts
see --> Tracking Issue for Material Chart Feature Parity
EDIT
isStacked: 'percent' is currently not support by Material charts
to work around this issue, convert the data manually, before drawing the chart
see following working snippet,
y-axis columns will be converted in groups of two...
google.charts.load('current', {
packages: ['bar']
}).then(function () {
var drivingData = new google.visualization.DataTable();
drivingData.addColumn('string', 'VehicleGroup');
drivingData.addColumn('number', 'TimeTarget');
drivingData.addColumn('number', 'TimeUsed');
drivingData.addColumn('number', 'TimeTarget');
drivingData.addColumn('number', 'TimeUsed');
drivingData.addRow(['Trucks-S', 1000, 1200, 600, 800])
drivingData.addRow(['Trucks-F', 300, 500, 700, 900])
drivingData.addRow(['Trailer-S', 1200, 1500, 800, 1000])
drivingData.addRow(['Trailer-F', 100, 500, 600, 1000])
// convert data to percent
var percentData = new google.visualization.DataTable();
for (var col = 0; col < drivingData.getNumberOfColumns(); col++) {
percentData.addColumn(drivingData.getColumnType(col), drivingData.getColumnLabel(col));
}
for (var row = 0; row < drivingData.getNumberOfRows(); row++) {
var newRow = percentData.addRow();
percentData.setValue(newRow, 0, drivingData.getValue(row, 0));
for (var col = 1; col < drivingData.getNumberOfColumns(); col++) {
if ((col % 2) !== 0) {
var rowTotal = drivingData.getValue(row, col) + drivingData.getValue(row, (col + 1));
percentData.setValue(newRow, col, (drivingData.getValue(row, col) / rowTotal));
percentData.setValue(newRow, (col + 1), (drivingData.getValue(row, (col + 1)) / rowTotal));
}
}
}
var container = document.getElementById('chart_div');
var chart = new google.charts.Bar(container);
var options = google.charts.Bar.convertOptions({
colors: ['#fbc02d', '#616161'],
height: 400,
isStacked: true,
series: {
2: {
targetAxisIndex: 1
},
3: {
targetAxisIndex: 1
}
},
vAxis: {
format: '0%',
viewWindow: {
min: 0,
max: 1
}
}
});
chart.draw(percentData, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

how to get imageUri for google chart

This is my sample material bar graph and i want the image uri for the plotted graph
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Galaxy', 'Distance', 'Brightness'],
['Canis Major Dwarf', 8000, 23.3],
['Sagittarius Dwarf', 24000, 4.5],
['Ursa Major II Dwarf', 30000, 14.3],
['Lg. Magellanic Cloud', 50000, 0.9],
['Bootes I', 60000, 13.1]
]);
var options = {
width: 800,
chart: {
title: 'Nearby galaxies',
subtitle: 'distance on the left, brightness on the right'
},
bars: 'vertical', // Required for Material Bar Charts.
series: {
0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
},
axes: {
x: {
distance: {label: 'parsecs'}, // Bottom x-axis.
brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis.
}
}
};
var chart = new google.charts.Bar(document.getElementById('dual_x_div'));
chart.draw(data, options);
console.log(chart.getImageURI());
};
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dual_x_div" style="width: 900px; height: 500px;"></div>
But the console giving me error like
chart.getImageURI is not a function
you can use html2canvas
you'll need the following two files from the build
<script src="html2canvas.js"></script>
<script src="html2canvas.svg.js"></script>
then on the chart's 'ready' event...
google.visualization.events.addListener(chart, 'ready', function () {
// add svg namespace to chart
$(chartContainer).find('svg').attr('xmlns', 'http://www.w3.org/2000/svg');
// get image uri
html2canvas(chartContainer, {
allowTaint: true,
taintTest: false
}).then(function(canvas) {
console.log(canvas.toDataURL('image/png'));
});
});
UPDATE
another method is to convert the svg to an image and draw it on a canvas,
then pull the uri from the canvas...
google.charts.load('current', {
packages:['bar']
}).then(function () {
var data = new google.visualization.arrayToDataTable([
['Galaxy', 'Distance', 'Brightness'],
['Canis Major Dwarf', 8000, 23.3],
['Sagittarius Dwarf', 24000, 4.5],
['Ursa Major II Dwarf', 30000, 14.3],
['Lg. Magellanic Cloud', 50000, 0.9],
['Bootes I', 60000, 13.1]
]);
var options = {
width: 800,
chart: {
title: 'Nearby galaxies',
subtitle: 'distance on the left, brightness on the right'
},
bars: 'vertical', // Required for Material Bar Charts.
series: {
0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
},
axes: {
x: {
distance: {label: 'parsecs'}, // Bottom x-axis.
brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis.
}
}
};
var chartContainer = document.getElementById('dual_x_div');
var chart = new google.charts.Bar(chartContainer);
google.visualization.events.addListener(chart, 'ready', function () {
var canvas;
var domURL;
var imageNode;
var imageURL;
var svgParent;
// add svg namespace to chart
domURL = window.URL || window.webkitURL || window;
svgParent = chartContainer.getElementsByTagName('svg')[0];
svgParent.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
imageNode = chartContainer.cloneNode(true);
imageURL = domURL.createObjectURL(new Blob([svgParent.outerHTML], {type: 'image/svg+xml'}));
image = new Image();
image.onload = function() {
canvas = document.getElementById('canvas');
canvas.setAttribute('width', parseFloat(svgParent.getAttribute('width')));
canvas.setAttribute('height', parseFloat(svgParent.getAttribute('height')));
canvas.getContext('2d').drawImage(image, 0, 0);
console.log(canvas.toDataURL('image/png'));
}
image.src = imageURL;
});
chart.draw(data, options);
});
.hidden {
display: none;
visibility: hidden;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dual_x_div"></div>
<canvas class="hidden" id="canvas"></canvas>
I noticed this question was posted three years ago. Google Charts probably have had quite a few updates since then. According to Google Charts though, getImageURI should work for all core charts and geocharts. The chart in question is a bar chart, which is one of the core charts of Google Charts. So, getImageURI should work. Looking at your first line of codes, you specify bar as the packages. You need to change it to say corechart. So, you will have like the following line
google.charts.load('current', {packages: ['corechart']});
And then further down, change the chart definition to var chart = new google.visualization.BarChart(document.getElementById('dual_x_div'));
After making these changes, chart.getImageURI() should return what you want. I recently did a bar chart myself and that's how I got mine to work.