Google Sheets Chart of one line with two values - charts

Question

My data looks like this:
A B
3 5000
2 6218
4 9435
I need to create a chart where A is the number of points/block size and B is the Value of each point.
For example, the date above will create a line graph where the 2 first points will have the value of 5000, the next 2 points will have the value of 6218, and the next 4 points will have the value of 9435.
The graph I need will look like the automatic one that will be generated for this data:
5000
5000
5000
6218
6218
9435
9435
9435
9435

Answer 1

use the original data table to build a new data table.
for each row in the original table, add a row to the new table however many times 'A' represents.
var x = 0;
for (var row = 0; row < rawData.getNumberOfRows(); row++) {
for (var a = 0; a < rawData.getValue(row, 0); a++) {
chartData.addRow([x, rawData.getValue(row, 1)]);
x++;
}
}
see following working snippet...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var rawData = google.visualization.arrayToDataTable([
['A', 'B'],
[3, 5000],
[2, 6218],
[4, 9435]
]);
var chartData = new google.visualization.DataTable();
chartData.addColumn('number', 'X');
chartData.addColumn('number', 'Y');
var x = 0;
for (var row = 0; row < rawData.getNumberOfRows(); row++) {
for (var a = 0; a < rawData.getValue(row, 0); a++) {
chartData.addRow([x, rawData.getValue(row, 1)]);
x++;
}
}
var container = document.getElementById('chart_div');
var chart = new google.visualization.LineChart(container);
chart.draw(chartData, {
height: 288,
pointSize: 4,
vAxis: {
minValue: 0
}
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>