Label y-axis ticks with musical note name - javascript

I have a chart data table with series values as numbers (these are MIDI note numbers - e.g. 60 is middle C, 61 is Db).
But for the user, the chart y-axis ticks should be the note names.
How can I do that please?


using object notation, you can provide the value (v:) and the formatted value (f:) for each tick
{v: 60, f: 'C4 (middle C)'}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
[1, 60],
[2, 61]
], true);
var options = {
vAxis: {
ticks: [
{v: 60, f: 'C4 (middle C)'},
{v: 61, f: 'C#4/Db4'},
]
}
};
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>

Related

Remove empty space in between hAxis on Google Charts

I have a "vertical" material designed bar chart that receives values like this:
[1, 10],
[580, 12],
[10000, 1]
So it renders the xAxis like this:
Is there any way for me to remove the empty values of the hAxis and just leave the numbers that have values (i.e. 5000, 10000 and the smaller ones).

try using string values for the x-axis, instead of numbers...
['1', 10],
['580', 12],
['10000', 1]
see following working snippet...
google.charts.load('current', {
packages:['bar']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['1', 10],
['580', 12],
['10000', 1]
], true);
var options = {
bars: 'vertical',
chart: {
title: 'Number of payments by amount',
},
hAxis: {
title: 'Amount'
}
};
var chart = new google.charts.Bar(document.getElementById('chart'));
chart.draw(data, google.charts.Bar.convertOptions(options));
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

Google Charts: Plotting mutiple "Y" values on same "X" value

I am using scatter plot of Google Charts.
This is what I currently have:
I am plotting values against named entities (On X axis). The entities can have multiple Blue/Red values. Referring to the screenshot above, I would like the blue dot to plot above A1, instead of A1 getting duplicated.
Can this be done?
Here is my code:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Blue Value');
data.addColumn('number', 'Red Value');
data.addRows([
['A1', 3500, 4500],
['A1', 4000, null],
['A2', 3700, 4100],
['A3', 3110, 4200],
['A4', 3600, 4300]
]);
// Set chart options
var options = {'title':'My Title',
'width':800,
'height':500};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

by default, a discrete axis (string values) will show all x-axis values,
even if they repeat
to get the desired chart, you could use a continuous axis (number values),
and use object notation to format the values and the axis labels (ticks)
object notation allows you to provide both the value (v:) and the formatted value (f:)
{v: 1, f: 'A1'}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Name');
data.addColumn('number', 'Blue Value');
data.addColumn('number', 'Red Value');
data.addRows([
[{v: 1, f: 'A1'}, 3500, 4500],
[{v: 1, f: 'A1'}, 4000, null],
[{v: 2, f: 'A2'}, 3700, 4100],
[{v: 3, f: 'A3'}, 3110, 4200],
[{v: 4, f: 'A4'}, 3600, 4300]
]);
var options = {
title: 'My Title',
width: 800,
height: 500,
hAxis: {
gridlines: {
color: 'transparent'
},
ticks: [
{v: 0.5, f: ''},
{v: 1, f: 'A1'},
{v: 2, f: 'A2'},
{v: 3, f: 'A3'},
{v: 4, f: 'A4'}
]
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

How to "group by" columns in Google charts? [duplicate]

I am trying to create a google chart from the below data.
Year Product Value
2015 A 10
2015 B 20
2016 C 30
2016 D 40
Is this the right data for my google chart, using arrayToDataTable function, but not getting the desired output.
I want Product as the legends, Year as the xAxis value and the value should define the bars.
Thanks

each chart type has a specific data format you can check
typically, for most chart types, all columns after the first should be a number
unless you're using annotations, tooltips, or some other role
as such, the data would need to look similar to...
['Year', 'A', 'B', 'C', 'D'],
['2015', 10, 20, null, null],
['2016', null, null, 30, 40],
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Year', 'A', 'B', 'C', 'D'],
['2015', 10, 20, null, null],
['2016', null, null, 30, 40],
]);
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
EDIT
to transpose the data from sql server into the format preferred by the chart,
first create a data view, with calculated columns for each unique product
then aggregate the view, grouping on year, using the group() method
use the aggregated data table to draw the chart
see following working snippet...
google.charts.load('current', {
callback: function () {
// raw table data
var data = google.visualization.arrayToDataTable([
['Year', 'Product', 'Value'],
[2015, 'A', 10],
[2015, 'B', 20],
[2016, 'C', 30],
[2016, 'D', 40]
]);
// format year as string
var formatYear = new google.visualization.NumberFormat({
pattern: '0000'
});
formatYear.format(data, 0);
// create data view
var view = new google.visualization.DataView(data);
// init column arrays
var aggColumns = [];
// use formatted year as first column
var viewColumns = [{
calc: function (dt, row) {
return dt.getFormattedValue(row, 0);
},
label: data.getColumnLabel(0),
type: 'string'
}];
// build view & agg column for each product
data.getDistinctValues(1).forEach(function (product, index) {
// add view column
viewColumns.push({
calc: function (dt, row) {
if (dt.getValue(row, 1) === product) {
return dt.getValue(row, 2);
}
return null;
},
label: product,
type: 'number'
});
// add agg column
aggColumns.push({
aggregation: google.visualization.data.sum,
column: index + 1,
label: product,
type: 'number'
});
});
// set view columns
view.setColumns(viewColumns);
// agg view by year
var group = google.visualization.data.group(
view,
[0],
aggColumns
);
// draw chart
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(group);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Google Bar Chart data preparation -- Group by Column

I am trying to create a google chart from the below data.
Year Product Value
2015 A 10
2015 B 20
2016 C 30
2016 D 40
Is this the right data for my google chart, using arrayToDataTable function, but not getting the desired output.
I want Product as the legends, Year as the xAxis value and the value should define the bars.
Thanks

each chart type has a specific data format you can check
typically, for most chart types, all columns after the first should be a number
unless you're using annotations, tooltips, or some other role
as such, the data would need to look similar to...
['Year', 'A', 'B', 'C', 'D'],
['2015', 10, 20, null, null],
['2016', null, null, 30, 40],
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Year', 'A', 'B', 'C', 'D'],
['2015', 10, 20, null, null],
['2016', null, null, 30, 40],
]);
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
EDIT
to transpose the data from sql server into the format preferred by the chart,
first create a data view, with calculated columns for each unique product
then aggregate the view, grouping on year, using the group() method
use the aggregated data table to draw the chart
see following working snippet...
google.charts.load('current', {
callback: function () {
// raw table data
var data = google.visualization.arrayToDataTable([
['Year', 'Product', 'Value'],
[2015, 'A', 10],
[2015, 'B', 20],
[2016, 'C', 30],
[2016, 'D', 40]
]);
// format year as string
var formatYear = new google.visualization.NumberFormat({
pattern: '0000'
});
formatYear.format(data, 0);
// create data view
var view = new google.visualization.DataView(data);
// init column arrays
var aggColumns = [];
// use formatted year as first column
var viewColumns = [{
calc: function (dt, row) {
return dt.getFormattedValue(row, 0);
},
label: data.getColumnLabel(0),
type: 'string'
}];
// build view & agg column for each product
data.getDistinctValues(1).forEach(function (product, index) {
// add view column
viewColumns.push({
calc: function (dt, row) {
if (dt.getValue(row, 1) === product) {
return dt.getValue(row, 2);
}
return null;
},
label: product,
type: 'number'
});
// add agg column
aggColumns.push({
aggregation: google.visualization.data.sum,
column: index + 1,
label: product,
type: 'number'
});
});
// set view columns
view.setColumns(viewColumns);
// agg view by year
var group = google.visualization.data.group(
view,
[0],
aggColumns
);
// draw chart
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(group);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Uncaught Error: Invalid value in 0,0

I'm having a really weird issue while trying to visualize this scatter plot using the google visualization API.
Basically, if I put the first data point as [0,0] everything will be fine, but if remove [0,0] as the first point, the chart won't produce. I checked the console and this is what it said:
"Uncaught SyntaxError: Unexpected token <
Uncaught Error: Invalid value in 0,0"
Why exactly does the first point need to be [0,0]?
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Camera','Avg Rating'],
[ {v:6000, f: 'Canon EOS-1Ds Mark III'}, 60],
[ {v:5000, f: 'Canon EOS-1Ds Mark II'}, 50],
[ {v:4000, f: 'Canon EOS-1D Mark IV'}, 40]
]);
var options = {
title: 'Breakdown of Camera Models by Price, Photo Rating and Brand',
hAxis: {title: 'Price (USD)', minValue: 0, maxValue: 7500},
vAxis: {title: 'Avg Rating (at peak)', minValue: 0, maxValue: 55},
legend: 'none'
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 1000px; height: 1000px;"></div>
</body>
</html>

The problem here is that the {v: value, f: 'formatted value'} syntax is not valid for use with the arrayToDataTable method (as documented here(https://developers.google.com/chart/interactive/docs/reference#google.visualization.arraytodatatable) ). If you want to use that syntax, you will have to define your DataTable manually, and then use the #addRows method

Not sure why I had the error, but I found a way to get around it. It started working when I used the DataTable constructor:
var data = new google.visualization.DataTable();
data.addColumn('number', 'Price');
data.addColumn('number', 'Canon');
data.addColumn('number', 'Nikon');
data.addColumn('number', 'Other');
data.addRows([
[{v:6000, f: 'Canon EOS-1Ds Mark III'}, 60 ,null ,null],
[{v:5000, f: 'Canon EOS-1Ds Mark II'}, 50 ,null ,null],
Instead of the arraytoDataTable constructor:
var data = google.visualization.arrayToDataTable([
['Camera','Avg Rating'],
[ {v:6000, f: 'Canon EOS-1Ds Mark III'}, 60],
[ {v:5000, f: 'Canon EOS-1Ds Mark II'}, 50],
[ {v:4000, f: 'Canon EOS-1D Mark IV'}, 40]
]);
Hope that helps anybody who also runs into this.

Categories