Google Charts ChartEditor or ChartWrapper ignoring height and width option
1
I'm trying to use the ChartEditor and the ChartWrapper class from Google Charts and run it with my own options. It mostly works, there is just one problem - it ignores my width and height declarations...
Does anybody know why it ignores my height & width (instead of height: 600 and width: 900 it takes height: 371 and width: 600)?
JSFiddle here: https://jsfiddle.net/mt085nec/
google.charts.load("current", {packages:['charteditor', 'corechart']});
google.charts.setOnLoadCallback(initializeData);
google.charts.setOnLoadCallback(loadEditor);
var optionsColumn = {
annotations: {
alwaysOutside: true,
textStyle: {
fontSize: 10
}
},
height: 600,
width: 900,
isStacked: true,
colors: colors,
chartArea: {
left: "10%",
top: 30
},
vAxis: {
gridlines: {
color: 'transparent'
},
textPosition: "none",
viewWindow: {
max: maxValCol + (maxValCol *0.2),
min: -5000,
}
},
legend: {
position: 'top',
alignment: "center",
maxLines: 3
},
bar: {
groupWidth: '70%'
},
};
function loadEditor() {
// Create the chart to edit.
var wrapper = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'dataTable': view
});
chartEditor = new google.visualization.ChartEditor();
google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
chartEditor.openDialog(wrapper,{});
}
function redrawChart(){
var wrapperTemp = new google.visualization.ChartWrapper({
'dataTable': view
});
console.log(JSON.stringify(chartEditor.getChartWrapper().getChartType()));
if(chartEditor.getChartWrapper().getChartType() == "BarChart") {
wrapperTemp.setChartType('BarChart');
wrapperTemp.setOptions(optionsBar);
console.log(JSON.stringify(chartEditor.setChartWrapper(wrapperTemp)));
chartEditor.getChartWrapper().setChartType("BarChart");
} else {
wrapperTemp.setChartType('ColumnChart');
wrapperTemp.setOptions(optionsColumn);
console.log(JSON.stringify(chartEditor.setChartWrapper(wrapperTemp)));
}
chartEditor.getChartWrapper().draw(document.getElementById('columnchart_values'));
}
function getDataView(dataTable) {
var dataView;
var viewColumns = ;
for (var i = 0; i < dataTable.getNumberOfColumns(); i++) {
addViewColumn(i);
}
function addViewColumn(index) {
viewColumns.push(index);
if (index == (dataTable.getNumberOfColumns() - 1)) {
viewColumns.push({
calc: function(dt, row) {
for (var e = 0; e < dt.getNumberOfRows(); e++) {
var value = 0;
for (var u = 1; u < dt.getNumberOfColumns(); u++) {
value += dt.getValue(row, u);
}
return formatter.formatValue(value).toString();
}
},
type: 'string',
role: 'annotation',
});
}
}
dataView = new google.visualization.DataView(dataTable);
dataView.setColumns(viewColumns);
return dataView;
}
javascript google-visualization googlevis
asked Nov 20 at 19:40
RyuHayabusa
366
add a comment |
1
I'm trying to use the ChartEditor and the ChartWrapper class from Google Charts and run it with my own options. It mostly works, there is just one problem - it ignores my width and height declarations...
Does anybody know why it ignores my height & width (instead of height: 600 and width: 900 it takes height: 371 and width: 600)?
JSFiddle here: https://jsfiddle.net/mt085nec/
google.charts.load("current", {packages:['charteditor', 'corechart']});
google.charts.setOnLoadCallback(initializeData);
google.charts.setOnLoadCallback(loadEditor);
var optionsColumn = {
annotations: {
alwaysOutside: true,
textStyle: {
fontSize: 10
}
},
height: 600,
width: 900,
isStacked: true,
colors: colors,
chartArea: {
left: "10%",
top: 30
},
vAxis: {
gridlines: {
color: 'transparent'
},
textPosition: "none",
viewWindow: {
max: maxValCol + (maxValCol *0.2),
min: -5000,
}
},
legend: {
position: 'top',
alignment: "center",
maxLines: 3
},
bar: {
groupWidth: '70%'
},
};
function loadEditor() {
// Create the chart to edit.
var wrapper = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'dataTable': view
});
chartEditor = new google.visualization.ChartEditor();
google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
chartEditor.openDialog(wrapper,{});
}
function redrawChart(){
var wrapperTemp = new google.visualization.ChartWrapper({
'dataTable': view
});
console.log(JSON.stringify(chartEditor.getChartWrapper().getChartType()));
if(chartEditor.getChartWrapper().getChartType() == "BarChart") {
wrapperTemp.setChartType('BarChart');
wrapperTemp.setOptions(optionsBar);
console.log(JSON.stringify(chartEditor.setChartWrapper(wrapperTemp)));
chartEditor.getChartWrapper().setChartType("BarChart");
} else {
wrapperTemp.setChartType('ColumnChart');
wrapperTemp.setOptions(optionsColumn);
console.log(JSON.stringify(chartEditor.setChartWrapper(wrapperTemp)));
}
chartEditor.getChartWrapper().draw(document.getElementById('columnchart_values'));
}
function getDataView(dataTable) {
var dataView;
var viewColumns = ;
for (var i = 0; i < dataTable.getNumberOfColumns(); i++) {
addViewColumn(i);
}
function addViewColumn(index) {
viewColumns.push(index);
if (index == (dataTable.getNumberOfColumns() - 1)) {
viewColumns.push({
calc: function(dt, row) {
for (var e = 0; e < dt.getNumberOfRows(); e++) {
var value = 0;
for (var u = 1; u < dt.getNumberOfColumns(); u++) {
value += dt.getValue(row, u);
}
return formatter.formatValue(value).toString();
}
},
type: 'string',
role: 'annotation',
});
}
}
dataView = new google.visualization.DataView(dataTable);
dataView.setColumns(viewColumns);
return dataView;
}
javascript google-visualization googlevis
asked Nov 20 at 19:40
RyuHayabusa
366
add a comment |
1
1
1
I'm trying to use the ChartEditor and the ChartWrapper class from Google Charts and run it with my own options. It mostly works, there is just one problem - it ignores my width and height declarations...
Does anybody know why it ignores my height & width (instead of height: 600 and width: 900 it takes height: 371 and width: 600)?
JSFiddle here: https://jsfiddle.net/mt085nec/
google.charts.load("current", {packages:['charteditor', 'corechart']});
google.charts.setOnLoadCallback(initializeData);
google.charts.setOnLoadCallback(loadEditor);
var optionsColumn = {
annotations: {
alwaysOutside: true,
textStyle: {
fontSize: 10
}
},
height: 600,
width: 900,
isStacked: true,
colors: colors,
chartArea: {
left: "10%",
top: 30
},
vAxis: {
gridlines: {
color: 'transparent'
},
textPosition: "none",
viewWindow: {
max: maxValCol + (maxValCol *0.2),
min: -5000,
}
},
legend: {
position: 'top',
alignment: "center",
maxLines: 3
},
bar: {
groupWidth: '70%'
},
};
function loadEditor() {
// Create the chart to edit.
var wrapper = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'dataTable': view
});
chartEditor = new google.visualization.ChartEditor();
google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
chartEditor.openDialog(wrapper,{});
}
function redrawChart(){
var wrapperTemp = new google.visualization.ChartWrapper({
'dataTable': view
});
console.log(JSON.stringify(chartEditor.getChartWrapper().getChartType()));
if(chartEditor.getChartWrapper().getChartType() == "BarChart") {
wrapperTemp.setChartType('BarChart');
wrapperTemp.setOptions(optionsBar);
console.log(JSON.stringify(chartEditor.setChartWrapper(wrapperTemp)));
chartEditor.getChartWrapper().setChartType("BarChart");
} else {
wrapperTemp.setChartType('ColumnChart');
wrapperTemp.setOptions(optionsColumn);
console.log(JSON.stringify(chartEditor.setChartWrapper(wrapperTemp)));
}
chartEditor.getChartWrapper().draw(document.getElementById('columnchart_values'));
}
function getDataView(dataTable) {
var dataView;
var viewColumns = ;
for (var i = 0; i < dataTable.getNumberOfColumns(); i++) {
addViewColumn(i);
}
function addViewColumn(index) {
viewColumns.push(index);
if (index == (dataTable.getNumberOfColumns() - 1)) {
viewColumns.push({
calc: function(dt, row) {
for (var e = 0; e < dt.getNumberOfRows(); e++) {
var value = 0;
for (var u = 1; u < dt.getNumberOfColumns(); u++) {
value += dt.getValue(row, u);
}
return formatter.formatValue(value).toString();
}
},
type: 'string',
role: 'annotation',
});
}
}
dataView = new google.visualization.DataView(dataTable);
dataView.setColumns(viewColumns);
return dataView;
}
javascript google-visualization googlevis
asked Nov 20 at 19:40
RyuHayabusa
366
I'm trying to use the ChartEditor and the ChartWrapper class from Google Charts and run it with my own options. It mostly works, there is just one problem - it ignores my width and height declarations...
Does anybody know why it ignores my height & width (instead of height: 600 and width: 900 it takes height: 371 and width: 600)?
JSFiddle here: https://jsfiddle.net/mt085nec/
google.charts.load("current", {packages:['charteditor', 'corechart']});
google.charts.setOnLoadCallback(initializeData);
google.charts.setOnLoadCallback(loadEditor);
var optionsColumn = {
annotations: {
alwaysOutside: true,
textStyle: {
fontSize: 10
}
},
height: 600,
width: 900,
isStacked: true,
colors: colors,
chartArea: {
left: "10%",
top: 30
},
vAxis: {
gridlines: {
color: 'transparent'
},
textPosition: "none",
viewWindow: {
max: maxValCol + (maxValCol *0.2),
min: -5000,
}
},
legend: {
position: 'top',
alignment: "center",
maxLines: 3
},
bar: {
groupWidth: '70%'
},
};
function loadEditor() {
// Create the chart to edit.
var wrapper = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'dataTable': view
});
chartEditor = new google.visualization.ChartEditor();
google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
chartEditor.openDialog(wrapper,{});
}
function redrawChart(){
var wrapperTemp = new google.visualization.ChartWrapper({
'dataTable': view
});
console.log(JSON.stringify(chartEditor.getChartWrapper().getChartType()));
if(chartEditor.getChartWrapper().getChartType() == "BarChart") {
wrapperTemp.setChartType('BarChart');
wrapperTemp.setOptions(optionsBar);
console.log(JSON.stringify(chartEditor.setChartWrapper(wrapperTemp)));
chartEditor.getChartWrapper().setChartType("BarChart");
} else {
wrapperTemp.setChartType('ColumnChart');
wrapperTemp.setOptions(optionsColumn);
console.log(JSON.stringify(chartEditor.setChartWrapper(wrapperTemp)));
}
chartEditor.getChartWrapper().draw(document.getElementById('columnchart_values'));
}
function getDataView(dataTable) {
var dataView;
var viewColumns = ;
for (var i = 0; i < dataTable.getNumberOfColumns(); i++) {
addViewColumn(i);
}
function addViewColumn(index) {
viewColumns.push(index);
if (index == (dataTable.getNumberOfColumns() - 1)) {
viewColumns.push({
calc: function(dt, row) {
for (var e = 0; e < dt.getNumberOfRows(); e++) {
var value = 0;
for (var u = 1; u < dt.getNumberOfColumns(); u++) {
value += dt.getValue(row, u);
}
return formatter.formatValue(value).toString();
}
},
type: 'string',
role: 'annotation',
});
}
}
dataView = new google.visualization.DataView(dataTable);
dataView.setColumns(viewColumns);
return dataView;
}
javascript google-visualization googlevis
javascript google-visualization googlevis
asked Nov 20 at 19:40
RyuHayabusa
366
asked Nov 20 at 19:40
RyuHayabusa
366
edited Nov 20 at 19:48
asked Nov 20 at 19:40
RyuHayabusa
366
asked Nov 20 at 19:40
RyuHayabusa
366
asked Nov 20 at 19:40
RyuHayabusa
366
366
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
the size options are being changed when the chart wrapper in the chart editor is updated, here...
console.log(JSON.stringify(chartEditor.setChartWrapper(wrapperTemp)));
this is so the chart will fit inside the editor.
to correct the size issue,
remove the above lines, and draw the new wrapper, rather than the editor wrapper.
wrapperTemp.draw(document.getElementById('columnchart_values'));
instead of...
chartEditor.getChartWrapper().draw(document.getElementById('columnchart_values'));
see following working snippet...
google.charts.load("current", {packages:['charteditor', 'corechart']});
google.charts.setOnLoadCallback(initializeData);
google.charts.setOnLoadCallback(loadEditor);
var view;
var maxValCol;
var data;
var chartEditor;
var formatter;
var colors = ["#D3D3D3", "#A9A9A9", "#888888", "#686868", "#484848", "#282828", "#000000"];
var optionsBar = {
annotations: {
alwaysOutside: true,
textStyle: {
fontSize: 10
}
},
height: 600,
width: 900,
isStacked: true,
colors: colors,
chartArea: {
left: "25%",
top: "10%"
},
hAxis: {
gridlines: {
color: 'transparent'
},
textPosition: "none",
viewWindow: {
max: maxValCol + (maxValCol *0.2),
min: 0
}
},
legend: {
position: 'top',
alignment: "center",
maxLines: 4
},
bar: {
groupWidth: '70%'
}
};
var optionsColumn = {
annotations: {
alwaysOutside: true,
textStyle: {
fontSize: 10
}
},
height: 600,
width: 900,
isStacked: true,
colors: colors,
chartArea: {
left: "10%",
top: 30
},
vAxis: {
gridlines: {
color: 'transparent'
},
textPosition: "none",
viewWindow: {
max: maxValCol + (maxValCol *0.2),
min: -5000,
}
},
legend: {
position: 'top',
alignment: "center",
maxLines: 3
},
bar: {
groupWidth: '70%'
},
};
function loadEditor() {
// Create the chart to edit.
var wrapper = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'dataTable': view
});
chartEditor = new google.visualization.ChartEditor();
google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
chartEditor.openDialog(wrapper,{});
}
function redrawChart(){
var wrapperTemp = new google.visualization.ChartWrapper({
'dataTable': view
});
if(chartEditor.getChartWrapper().getChartType() == "BarChart") {
wrapperTemp.setChartType('BarChart');
wrapperTemp.setOptions(optionsBar);
chartEditor.getChartWrapper().setChartType("BarChart");
} else {
wrapperTemp.setChartType('ColumnChart');
wrapperTemp.setOptions(optionsColumn);
}
wrapperTemp.draw(document.getElementById('columnchart_values'));
}
function initializeData() {
data = new google.visualization.DataTable({
cols:[
{id:"","label":"Products","pattern":"","type":"string"},
{id:"","label":"Water","pattern":"","type":"number"},
{id:"","label":"Cola","pattern":"","type":"number"},
{id:"","label":"Fanta","pattern":"","type":"number"},
{id:"","label":"Tonic Water","pattern":"","type":"number"}],
rows:[
{c:[{v:"2008"},{v:870883.521900001},{v:1128581.9856},{v:1177332.008},{v:3922057.50240001}]},
{c:[{v:"2009"},{v:-566.5377},{v:-217.3444},{v:-865.114},{v:356870.886599999}]},
{c:[{v:"2010"},{v:-1270.7287},{v:-4486.0961},{v:-1019.4662},{v:3763827.8335}]},
{c:[{v:"2011"},{v:145543.985},{v:2108039.5802},{v:266392.5277},{v:6006566.18690001}]},
{c:[{v:"2012"},{v:1723781.2686},{v:4435404.56789999},{v:7060065.3164},{v:17514581.1763}]},
{c:[{v:"2013"},{v:7800243.0557997},{v:4759320.6768999},{v:4383260.9528002},{v:16150254.021496}]},
{c:[{v:"2014"},{v:10507117.0145001},{v:8059953.41120002},{v:14103816.4604002},{v:34676509.4036004}]},
{c:[{v:"2015"},{v:2373067.7893},{v:-53954.2187},{v:30783391.8722},{v:37288122.5537999}]},
{c:[{v:"2016"},{v:86583.2876},{v:71082.0195},{v:79813.2918},{v:22959813.0499999}]},
{c:[{v:"2017"},{v:12479599.4709999},{v:22650137.9890997},{v:17562381.7794999},{v:25589299.8099997}]},
{c:[{v:"2018"},{v:null},{v:-59.1},{v:282.7517},{v:1461239.6186}]}]
});
formatter = new google.visualization.NumberFormat({
pattern: 'short'
});
for (var i = 1; i < data.getNumberOfColumns(); i++) {
formatter.format(data, i);
}
view = getDataView(data);
maxValCol = view.getColumnRange(view.getNumberOfColumns()-1).max;
}
function getDataView(dataTable) {
var dataView;
var viewColumns = ;
for (var i = 0; i < dataTable.getNumberOfColumns(); i++) {
addViewColumn(i);
}
function addViewColumn(index) {
viewColumns.push(index);
if (index == (dataTable.getNumberOfColumns() - 1)) {
viewColumns.push({
calc: function(dt, row) {
for (var e = 0; e < dt.getNumberOfRows(); e++) {
var value = 0;
for (var u = 1; u < dt.getNumberOfColumns(); u++) {
value += dt.getValue(row, u);
}
return formatter.formatValue(value).toString();
}
},
type: 'string',
role: 'annotation',
});
}
}
dataView = new google.visualization.DataView(dataTable);
dataView.setColumns(viewColumns);
return dataView;
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_values"></div>answered Nov 20 at 20:41
WhiteHat
35.6k61475
don't follow exactly what you're trying to achieve, it appears the chart editor is only being used to choose the chart type. if not, further adjustments may be needed...
– WhiteHat
Nov 20 at 20:41
Hey, thanks very much for your help! Yes the ChartEditor is only being used for choosing the chart type and I thought I had to do it that way, to implement my charts.
– RyuHayabusa
Nov 20 at 21:25
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53400395%2fgoogle-charts-charteditor-or-chartwrapper-ignoring-height-and-width-option%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
the size options are being changed when the chart wrapper in the chart editor is updated, here...
console.log(JSON.stringify(chartEditor.setChartWrapper(wrapperTemp)));
this is so the chart will fit inside the editor.
to correct the size issue,
remove the above lines, and draw the new wrapper, rather than the editor wrapper.
wrapperTemp.draw(document.getElementById('columnchart_values'));
instead of...
chartEditor.getChartWrapper().draw(document.getElementById('columnchart_values'));
see following working snippet...
google.charts.load("current", {packages:['charteditor', 'corechart']});
google.charts.setOnLoadCallback(initializeData);
google.charts.setOnLoadCallback(loadEditor);
var view;
var maxValCol;
var data;
var chartEditor;
var formatter;
var colors = ["#D3D3D3", "#A9A9A9", "#888888", "#686868", "#484848", "#282828", "#000000"];
var optionsBar = {
annotations: {
alwaysOutside: true,
textStyle: {
fontSize: 10
}
},
height: 600,
width: 900,
isStacked: true,
colors: colors,
chartArea: {
left: "25%",
top: "10%"
},
hAxis: {
gridlines: {
color: 'transparent'
},
textPosition: "none",
viewWindow: {
max: maxValCol + (maxValCol *0.2),
min: 0
}
},
legend: {
position: 'top',
alignment: "center",
maxLines: 4
},
bar: {
groupWidth: '70%'
}
};
var optionsColumn = {
annotations: {
alwaysOutside: true,
textStyle: {
fontSize: 10
}
},
height: 600,
width: 900,
isStacked: true,
colors: colors,
chartArea: {
left: "10%",
top: 30
},
vAxis: {
gridlines: {
color: 'transparent'
},
textPosition: "none",
viewWindow: {
max: maxValCol + (maxValCol *0.2),
min: -5000,
}
},
legend: {
position: 'top',
alignment: "center",
maxLines: 3
},
bar: {
groupWidth: '70%'
},
};
function loadEditor() {
// Create the chart to edit.
var wrapper = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'dataTable': view
});
chartEditor = new google.visualization.ChartEditor();
google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
chartEditor.openDialog(wrapper,{});
}
function redrawChart(){
var wrapperTemp = new google.visualization.ChartWrapper({
'dataTable': view
});
if(chartEditor.getChartWrapper().getChartType() == "BarChart") {
wrapperTemp.setChartType('BarChart');
wrapperTemp.setOptions(optionsBar);
chartEditor.getChartWrapper().setChartType("BarChart");
} else {
wrapperTemp.setChartType('ColumnChart');
wrapperTemp.setOptions(optionsColumn);
}
wrapperTemp.draw(document.getElementById('columnchart_values'));
}
function initializeData() {
data = new google.visualization.DataTable({
cols:[
{id:"","label":"Products","pattern":"","type":"string"},
{id:"","label":"Water","pattern":"","type":"number"},
{id:"","label":"Cola","pattern":"","type":"number"},
{id:"","label":"Fanta","pattern":"","type":"number"},
{id:"","label":"Tonic Water","pattern":"","type":"number"}],
rows:[
{c:[{v:"2008"},{v:870883.521900001},{v:1128581.9856},{v:1177332.008},{v:3922057.50240001}]},
{c:[{v:"2009"},{v:-566.5377},{v:-217.3444},{v:-865.114},{v:356870.886599999}]},
{c:[{v:"2010"},{v:-1270.7287},{v:-4486.0961},{v:-1019.4662},{v:3763827.8335}]},
{c:[{v:"2011"},{v:145543.985},{v:2108039.5802},{v:266392.5277},{v:6006566.18690001}]},
{c:[{v:"2012"},{v:1723781.2686},{v:4435404.56789999},{v:7060065.3164},{v:17514581.1763}]},
{c:[{v:"2013"},{v:7800243.0557997},{v:4759320.6768999},{v:4383260.9528002},{v:16150254.021496}]},
{c:[{v:"2014"},{v:10507117.0145001},{v:8059953.41120002},{v:14103816.4604002},{v:34676509.4036004}]},
{c:[{v:"2015"},{v:2373067.7893},{v:-53954.2187},{v:30783391.8722},{v:37288122.5537999}]},
{c:[{v:"2016"},{v:86583.2876},{v:71082.0195},{v:79813.2918},{v:22959813.0499999}]},
{c:[{v:"2017"},{v:12479599.4709999},{v:22650137.9890997},{v:17562381.7794999},{v:25589299.8099997}]},
{c:[{v:"2018"},{v:null},{v:-59.1},{v:282.7517},{v:1461239.6186}]}]
});
formatter = new google.visualization.NumberFormat({
pattern: 'short'
});
for (var i = 1; i < data.getNumberOfColumns(); i++) {
formatter.format(data, i);
}
view = getDataView(data);
maxValCol = view.getColumnRange(view.getNumberOfColumns()-1).max;
}
function getDataView(dataTable) {
var dataView;
var viewColumns = ;
for (var i = 0; i < dataTable.getNumberOfColumns(); i++) {
addViewColumn(i);
}
function addViewColumn(index) {
viewColumns.push(index);
if (index == (dataTable.getNumberOfColumns() - 1)) {
viewColumns.push({
calc: function(dt, row) {
for (var e = 0; e < dt.getNumberOfRows(); e++) {
var value = 0;
for (var u = 1; u < dt.getNumberOfColumns(); u++) {
value += dt.getValue(row, u);
}
return formatter.formatValue(value).toString();
}
},
type: 'string',
role: 'annotation',
});
}
}
dataView = new google.visualization.DataView(dataTable);
dataView.setColumns(viewColumns);
return dataView;
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_values"></div>answered Nov 20 at 20:41
WhiteHat
35.6k61475
don't follow exactly what you're trying to achieve, it appears the chart editor is only being used to choose the chart type. if not, further adjustments may be needed...
– WhiteHat
Nov 20 at 20:41
Hey, thanks very much for your help! Yes the ChartEditor is only being used for choosing the chart type and I thought I had to do it that way, to implement my charts.
– RyuHayabusa
Nov 20 at 21:25
add a comment |
1
the size options are being changed when the chart wrapper in the chart editor is updated, here...
console.log(JSON.stringify(chartEditor.setChartWrapper(wrapperTemp)));
this is so the chart will fit inside the editor.
to correct the size issue,
remove the above lines, and draw the new wrapper, rather than the editor wrapper.
wrapperTemp.draw(document.getElementById('columnchart_values'));
instead of...
chartEditor.getChartWrapper().draw(document.getElementById('columnchart_values'));
see following working snippet...
google.charts.load("current", {packages:['charteditor', 'corechart']});
google.charts.setOnLoadCallback(initializeData);
google.charts.setOnLoadCallback(loadEditor);
var view;
var maxValCol;
var data;
var chartEditor;
var formatter;
var colors = ["#D3D3D3", "#A9A9A9", "#888888", "#686868", "#484848", "#282828", "#000000"];
var optionsBar = {
annotations: {
alwaysOutside: true,
textStyle: {
fontSize: 10
}
},
height: 600,
width: 900,
isStacked: true,
colors: colors,
chartArea: {
left: "25%",
top: "10%"
},
hAxis: {
gridlines: {
color: 'transparent'
},
textPosition: "none",
viewWindow: {
max: maxValCol + (maxValCol *0.2),
min: 0
}
},
legend: {
position: 'top',
alignment: "center",
maxLines: 4
},
bar: {
groupWidth: '70%'
}
};
var optionsColumn = {
annotations: {
alwaysOutside: true,
textStyle: {
fontSize: 10
}
},
height: 600,
width: 900,
isStacked: true,
colors: colors,
chartArea: {
left: "10%",
top: 30
},
vAxis: {
gridlines: {
color: 'transparent'
},
textPosition: "none",
viewWindow: {
max: maxValCol + (maxValCol *0.2),
min: -5000,
}
},
legend: {
position: 'top',
alignment: "center",
maxLines: 3
},
bar: {
groupWidth: '70%'
},
};
function loadEditor() {
// Create the chart to edit.
var wrapper = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'dataTable': view
});
chartEditor = new google.visualization.ChartEditor();
google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
chartEditor.openDialog(wrapper,{});
}
function redrawChart(){
var wrapperTemp = new google.visualization.ChartWrapper({
'dataTable': view
});
if(chartEditor.getChartWrapper().getChartType() == "BarChart") {
wrapperTemp.setChartType('BarChart');
wrapperTemp.setOptions(optionsBar);
chartEditor.getChartWrapper().setChartType("BarChart");
} else {
wrapperTemp.setChartType('ColumnChart');
wrapperTemp.setOptions(optionsColumn);
}
wrapperTemp.draw(document.getElementById('columnchart_values'));
}
function initializeData() {
data = new google.visualization.DataTable({
cols:[
{id:"","label":"Products","pattern":"","type":"string"},
{id:"","label":"Water","pattern":"","type":"number"},
{id:"","label":"Cola","pattern":"","type":"number"},
{id:"","label":"Fanta","pattern":"","type":"number"},
{id:"","label":"Tonic Water","pattern":"","type":"number"}],
rows:[
{c:[{v:"2008"},{v:870883.521900001},{v:1128581.9856},{v:1177332.008},{v:3922057.50240001}]},
{c:[{v:"2009"},{v:-566.5377},{v:-217.3444},{v:-865.114},{v:356870.886599999}]},
{c:[{v:"2010"},{v:-1270.7287},{v:-4486.0961},{v:-1019.4662},{v:3763827.8335}]},
{c:[{v:"2011"},{v:145543.985},{v:2108039.5802},{v:266392.5277},{v:6006566.18690001}]},
{c:[{v:"2012"},{v:1723781.2686},{v:4435404.56789999},{v:7060065.3164},{v:17514581.1763}]},
{c:[{v:"2013"},{v:7800243.0557997},{v:4759320.6768999},{v:4383260.9528002},{v:16150254.021496}]},
{c:[{v:"2014"},{v:10507117.0145001},{v:8059953.41120002},{v:14103816.4604002},{v:34676509.4036004}]},
{c:[{v:"2015"},{v:2373067.7893},{v:-53954.2187},{v:30783391.8722},{v:37288122.5537999}]},
{c:[{v:"2016"},{v:86583.2876},{v:71082.0195},{v:79813.2918},{v:22959813.0499999}]},
{c:[{v:"2017"},{v:12479599.4709999},{v:22650137.9890997},{v:17562381.7794999},{v:25589299.8099997}]},
{c:[{v:"2018"},{v:null},{v:-59.1},{v:282.7517},{v:1461239.6186}]}]
});
formatter = new google.visualization.NumberFormat({
pattern: 'short'
});
for (var i = 1; i < data.getNumberOfColumns(); i++) {
formatter.format(data, i);
}
view = getDataView(data);
maxValCol = view.getColumnRange(view.getNumberOfColumns()-1).max;
}
function getDataView(dataTable) {
var dataView;
var viewColumns = ;
for (var i = 0; i < dataTable.getNumberOfColumns(); i++) {
addViewColumn(i);
}
function addViewColumn(index) {
viewColumns.push(index);
if (index == (dataTable.getNumberOfColumns() - 1)) {
viewColumns.push({
calc: function(dt, row) {
for (var e = 0; e < dt.getNumberOfRows(); e++) {
var value = 0;
for (var u = 1; u < dt.getNumberOfColumns(); u++) {
value += dt.getValue(row, u);
}
return formatter.formatValue(value).toString();
}
},
type: 'string',
role: 'annotation',
});
}
}
dataView = new google.visualization.DataView(dataTable);
dataView.setColumns(viewColumns);
return dataView;
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_values"></div>answered Nov 20 at 20:41
WhiteHat
35.6k61475
don't follow exactly what you're trying to achieve, it appears the chart editor is only being used to choose the chart type. if not, further adjustments may be needed...
– WhiteHat
Nov 20 at 20:41
Hey, thanks very much for your help! Yes the ChartEditor is only being used for choosing the chart type and I thought I had to do it that way, to implement my charts.
– RyuHayabusa
Nov 20 at 21:25
add a comment |
1
1
1
the size options are being changed when the chart wrapper in the chart editor is updated, here...
console.log(JSON.stringify(chartEditor.setChartWrapper(wrapperTemp)));
this is so the chart will fit inside the editor.
to correct the size issue,
remove the above lines, and draw the new wrapper, rather than the editor wrapper.
wrapperTemp.draw(document.getElementById('columnchart_values'));
instead of...
chartEditor.getChartWrapper().draw(document.getElementById('columnchart_values'));
see following working snippet...
google.charts.load("current", {packages:['charteditor', 'corechart']});
google.charts.setOnLoadCallback(initializeData);
google.charts.setOnLoadCallback(loadEditor);
var view;
var maxValCol;
var data;
var chartEditor;
var formatter;
var colors = ["#D3D3D3", "#A9A9A9", "#888888", "#686868", "#484848", "#282828", "#000000"];
var optionsBar = {
annotations: {
alwaysOutside: true,
textStyle: {
fontSize: 10
}
},
height: 600,
width: 900,
isStacked: true,
colors: colors,
chartArea: {
left: "25%",
top: "10%"
},
hAxis: {
gridlines: {
color: 'transparent'
},
textPosition: "none",
viewWindow: {
max: maxValCol + (maxValCol *0.2),
min: 0
}
},
legend: {
position: 'top',
alignment: "center",
maxLines: 4
},
bar: {
groupWidth: '70%'
}
};
var optionsColumn = {
annotations: {
alwaysOutside: true,
textStyle: {
fontSize: 10
}
},
height: 600,
width: 900,
isStacked: true,
colors: colors,
chartArea: {
left: "10%",
top: 30
},
vAxis: {
gridlines: {
color: 'transparent'
},
textPosition: "none",
viewWindow: {
max: maxValCol + (maxValCol *0.2),
min: -5000,
}
},
legend: {
position: 'top',
alignment: "center",
maxLines: 3
},
bar: {
groupWidth: '70%'
},
};
function loadEditor() {
// Create the chart to edit.
var wrapper = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'dataTable': view
});
chartEditor = new google.visualization.ChartEditor();
google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
chartEditor.openDialog(wrapper,{});
}
function redrawChart(){
var wrapperTemp = new google.visualization.ChartWrapper({
'dataTable': view
});
if(chartEditor.getChartWrapper().getChartType() == "BarChart") {
wrapperTemp.setChartType('BarChart');
wrapperTemp.setOptions(optionsBar);
chartEditor.getChartWrapper().setChartType("BarChart");
} else {
wrapperTemp.setChartType('ColumnChart');
wrapperTemp.setOptions(optionsColumn);
}
wrapperTemp.draw(document.getElementById('columnchart_values'));
}
function initializeData() {
data = new google.visualization.DataTable({
cols:[
{id:"","label":"Products","pattern":"","type":"string"},
{id:"","label":"Water","pattern":"","type":"number"},
{id:"","label":"Cola","pattern":"","type":"number"},
{id:"","label":"Fanta","pattern":"","type":"number"},
{id:"","label":"Tonic Water","pattern":"","type":"number"}],
rows:[
{c:[{v:"2008"},{v:870883.521900001},{v:1128581.9856},{v:1177332.008},{v:3922057.50240001}]},
{c:[{v:"2009"},{v:-566.5377},{v:-217.3444},{v:-865.114},{v:356870.886599999}]},
{c:[{v:"2010"},{v:-1270.7287},{v:-4486.0961},{v:-1019.4662},{v:3763827.8335}]},
{c:[{v:"2011"},{v:145543.985},{v:2108039.5802},{v:266392.5277},{v:6006566.18690001}]},
{c:[{v:"2012"},{v:1723781.2686},{v:4435404.56789999},{v:7060065.3164},{v:17514581.1763}]},
{c:[{v:"2013"},{v:7800243.0557997},{v:4759320.6768999},{v:4383260.9528002},{v:16150254.021496}]},
{c:[{v:"2014"},{v:10507117.0145001},{v:8059953.41120002},{v:14103816.4604002},{v:34676509.4036004}]},
{c:[{v:"2015"},{v:2373067.7893},{v:-53954.2187},{v:30783391.8722},{v:37288122.5537999}]},
{c:[{v:"2016"},{v:86583.2876},{v:71082.0195},{v:79813.2918},{v:22959813.0499999}]},
{c:[{v:"2017"},{v:12479599.4709999},{v:22650137.9890997},{v:17562381.7794999},{v:25589299.8099997}]},
{c:[{v:"2018"},{v:null},{v:-59.1},{v:282.7517},{v:1461239.6186}]}]
});
formatter = new google.visualization.NumberFormat({
pattern: 'short'
});
for (var i = 1; i < data.getNumberOfColumns(); i++) {
formatter.format(data, i);
}
view = getDataView(data);
maxValCol = view.getColumnRange(view.getNumberOfColumns()-1).max;
}
function getDataView(dataTable) {
var dataView;
var viewColumns = ;
for (var i = 0; i < dataTable.getNumberOfColumns(); i++) {
addViewColumn(i);
}
function addViewColumn(index) {
viewColumns.push(index);
if (index == (dataTable.getNumberOfColumns() - 1)) {
viewColumns.push({
calc: function(dt, row) {
for (var e = 0; e < dt.getNumberOfRows(); e++) {
var value = 0;
for (var u = 1; u < dt.getNumberOfColumns(); u++) {
value += dt.getValue(row, u);
}
return formatter.formatValue(value).toString();
}
},
type: 'string',
role: 'annotation',
});
}
}
dataView = new google.visualization.DataView(dataTable);
dataView.setColumns(viewColumns);
return dataView;
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_values"></div>answered Nov 20 at 20:41
WhiteHat
35.6k61475
the size options are being changed when the chart wrapper in the chart editor is updated, here...
console.log(JSON.stringify(chartEditor.setChartWrapper(wrapperTemp)));
this is so the chart will fit inside the editor.
to correct the size issue,
remove the above lines, and draw the new wrapper, rather than the editor wrapper.
wrapperTemp.draw(document.getElementById('columnchart_values'));
instead of...
chartEditor.getChartWrapper().draw(document.getElementById('columnchart_values'));
see following working snippet...
google.charts.load("current", {packages:['charteditor', 'corechart']});
google.charts.setOnLoadCallback(initializeData);
google.charts.setOnLoadCallback(loadEditor);
var view;
var maxValCol;
var data;
var chartEditor;
var formatter;
var colors = ["#D3D3D3", "#A9A9A9", "#888888", "#686868", "#484848", "#282828", "#000000"];
var optionsBar = {
annotations: {
alwaysOutside: true,
textStyle: {
fontSize: 10
}
},
height: 600,
width: 900,
isStacked: true,
colors: colors,
chartArea: {
left: "25%",
top: "10%"
},
hAxis: {
gridlines: {
color: 'transparent'
},
textPosition: "none",
viewWindow: {
max: maxValCol + (maxValCol *0.2),
min: 0
}
},
legend: {
position: 'top',
alignment: "center",
maxLines: 4
},
bar: {
groupWidth: '70%'
}
};
var optionsColumn = {
annotations: {
alwaysOutside: true,
textStyle: {
fontSize: 10
}
},
height: 600,
width: 900,
isStacked: true,
colors: colors,
chartArea: {
left: "10%",
top: 30
},
vAxis: {
gridlines: {
color: 'transparent'
},
textPosition: "none",
viewWindow: {
max: maxValCol + (maxValCol *0.2),
min: -5000,
}
},
legend: {
position: 'top',
alignment: "center",
maxLines: 3
},
bar: {
groupWidth: '70%'
},
};
function loadEditor() {
// Create the chart to edit.
var wrapper = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'dataTable': view
});
chartEditor = new google.visualization.ChartEditor();
google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
chartEditor.openDialog(wrapper,{});
}
function redrawChart(){
var wrapperTemp = new google.visualization.ChartWrapper({
'dataTable': view
});
if(chartEditor.getChartWrapper().getChartType() == "BarChart") {
wrapperTemp.setChartType('BarChart');
wrapperTemp.setOptions(optionsBar);
chartEditor.getChartWrapper().setChartType("BarChart");
} else {
wrapperTemp.setChartType('ColumnChart');
wrapperTemp.setOptions(optionsColumn);
}
wrapperTemp.draw(document.getElementById('columnchart_values'));
}
function initializeData() {
data = new google.visualization.DataTable({
cols:[
{id:"","label":"Products","pattern":"","type":"string"},
{id:"","label":"Water","pattern":"","type":"number"},
{id:"","label":"Cola","pattern":"","type":"number"},
{id:"","label":"Fanta","pattern":"","type":"number"},
{id:"","label":"Tonic Water","pattern":"","type":"number"}],
rows:[
{c:[{v:"2008"},{v:870883.521900001},{v:1128581.9856},{v:1177332.008},{v:3922057.50240001}]},
{c:[{v:"2009"},{v:-566.5377},{v:-217.3444},{v:-865.114},{v:356870.886599999}]},
{c:[{v:"2010"},{v:-1270.7287},{v:-4486.0961},{v:-1019.4662},{v:3763827.8335}]},
{c:[{v:"2011"},{v:145543.985},{v:2108039.5802},{v:266392.5277},{v:6006566.18690001}]},
{c:[{v:"2012"},{v:1723781.2686},{v:4435404.56789999},{v:7060065.3164},{v:17514581.1763}]},
{c:[{v:"2013"},{v:7800243.0557997},{v:4759320.6768999},{v:4383260.9528002},{v:16150254.021496}]},
{c:[{v:"2014"},{v:10507117.0145001},{v:8059953.41120002},{v:14103816.4604002},{v:34676509.4036004}]},
{c:[{v:"2015"},{v:2373067.7893},{v:-53954.2187},{v:30783391.8722},{v:37288122.5537999}]},
{c:[{v:"2016"},{v:86583.2876},{v:71082.0195},{v:79813.2918},{v:22959813.0499999}]},
{c:[{v:"2017"},{v:12479599.4709999},{v:22650137.9890997},{v:17562381.7794999},{v:25589299.8099997}]},
{c:[{v:"2018"},{v:null},{v:-59.1},{v:282.7517},{v:1461239.6186}]}]
});
formatter = new google.visualization.NumberFormat({
pattern: 'short'
});
for (var i = 1; i < data.getNumberOfColumns(); i++) {
formatter.format(data, i);
}
view = getDataView(data);
maxValCol = view.getColumnRange(view.getNumberOfColumns()-1).max;
}
function getDataView(dataTable) {
var dataView;
var viewColumns = ;
for (var i = 0; i < dataTable.getNumberOfColumns(); i++) {
addViewColumn(i);
}
function addViewColumn(index) {
viewColumns.push(index);
if (index == (dataTable.getNumberOfColumns() - 1)) {
viewColumns.push({
calc: function(dt, row) {
for (var e = 0; e < dt.getNumberOfRows(); e++) {
var value = 0;
for (var u = 1; u < dt.getNumberOfColumns(); u++) {
value += dt.getValue(row, u);
}
return formatter.formatValue(value).toString();
}
},
type: 'string',
role: 'annotation',
});
}
}
dataView = new google.visualization.DataView(dataTable);
dataView.setColumns(viewColumns);
return dataView;
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_values"></div>google.charts.load("current", {packages:['charteditor', 'corechart']});
google.charts.setOnLoadCallback(initializeData);
google.charts.setOnLoadCallback(loadEditor);
var view;
var maxValCol;
var data;
var chartEditor;
var formatter;
var colors = ["#D3D3D3", "#A9A9A9", "#888888", "#686868", "#484848", "#282828", "#000000"];
var optionsBar = {
annotations: {
alwaysOutside: true,
textStyle: {
fontSize: 10
}
},
height: 600,
width: 900,
isStacked: true,
colors: colors,
chartArea: {
left: "25%",
top: "10%"
},
hAxis: {
gridlines: {
color: 'transparent'
},
textPosition: "none",
viewWindow: {
max: maxValCol + (maxValCol *0.2),
min: 0
}
},
legend: {
position: 'top',
alignment: "center",
maxLines: 4
},
bar: {
groupWidth: '70%'
}
};
var optionsColumn = {
annotations: {
alwaysOutside: true,
textStyle: {
fontSize: 10
}
},
height: 600,
width: 900,
isStacked: true,
colors: colors,
chartArea: {
left: "10%",
top: 30
},
vAxis: {
gridlines: {
color: 'transparent'
},
textPosition: "none",
viewWindow: {
max: maxValCol + (maxValCol *0.2),
min: -5000,
}
},
legend: {
position: 'top',
alignment: "center",
maxLines: 3
},
bar: {
groupWidth: '70%'
},
};
function loadEditor() {
// Create the chart to edit.
var wrapper = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'dataTable': view
});
chartEditor = new google.visualization.ChartEditor();
google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
chartEditor.openDialog(wrapper,{});
}
function redrawChart(){
var wrapperTemp = new google.visualization.ChartWrapper({
'dataTable': view
});
if(chartEditor.getChartWrapper().getChartType() == "BarChart") {
wrapperTemp.setChartType('BarChart');
wrapperTemp.setOptions(optionsBar);
chartEditor.getChartWrapper().setChartType("BarChart");
} else {
wrapperTemp.setChartType('ColumnChart');
wrapperTemp.setOptions(optionsColumn);
}
wrapperTemp.draw(document.getElementById('columnchart_values'));
}
function initializeData() {
data = new google.visualization.DataTable({
cols:[
{id:"","label":"Products","pattern":"","type":"string"},
{id:"","label":"Water","pattern":"","type":"number"},
{id:"","label":"Cola","pattern":"","type":"number"},
{id:"","label":"Fanta","pattern":"","type":"number"},
{id:"","label":"Tonic Water","pattern":"","type":"number"}],
rows:[
{c:[{v:"2008"},{v:870883.521900001},{v:1128581.9856},{v:1177332.008},{v:3922057.50240001}]},
{c:[{v:"2009"},{v:-566.5377},{v:-217.3444},{v:-865.114},{v:356870.886599999}]},
{c:[{v:"2010"},{v:-1270.7287},{v:-4486.0961},{v:-1019.4662},{v:3763827.8335}]},
{c:[{v:"2011"},{v:145543.985},{v:2108039.5802},{v:266392.5277},{v:6006566.18690001}]},
{c:[{v:"2012"},{v:1723781.2686},{v:4435404.56789999},{v:7060065.3164},{v:17514581.1763}]},
{c:[{v:"2013"},{v:7800243.0557997},{v:4759320.6768999},{v:4383260.9528002},{v:16150254.021496}]},
{c:[{v:"2014"},{v:10507117.0145001},{v:8059953.41120002},{v:14103816.4604002},{v:34676509.4036004}]},
{c:[{v:"2015"},{v:2373067.7893},{v:-53954.2187},{v:30783391.8722},{v:37288122.5537999}]},
{c:[{v:"2016"},{v:86583.2876},{v:71082.0195},{v:79813.2918},{v:22959813.0499999}]},
{c:[{v:"2017"},{v:12479599.4709999},{v:22650137.9890997},{v:17562381.7794999},{v:25589299.8099997}]},
{c:[{v:"2018"},{v:null},{v:-59.1},{v:282.7517},{v:1461239.6186}]}]
});
formatter = new google.visualization.NumberFormat({
pattern: 'short'
});
for (var i = 1; i < data.getNumberOfColumns(); i++) {
formatter.format(data, i);
}
view = getDataView(data);
maxValCol = view.getColumnRange(view.getNumberOfColumns()-1).max;
}
function getDataView(dataTable) {
var dataView;
var viewColumns = ;
for (var i = 0; i < dataTable.getNumberOfColumns(); i++) {
addViewColumn(i);
}
function addViewColumn(index) {
viewColumns.push(index);
if (index == (dataTable.getNumberOfColumns() - 1)) {
viewColumns.push({
calc: function(dt, row) {
for (var e = 0; e < dt.getNumberOfRows(); e++) {
var value = 0;
for (var u = 1; u < dt.getNumberOfColumns(); u++) {
value += dt.getValue(row, u);
}
return formatter.formatValue(value).toString();
}
},
type: 'string',
role: 'annotation',
});
}
}
dataView = new google.visualization.DataView(dataTable);
dataView.setColumns(viewColumns);
return dataView;
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_values"></div>google.charts.load("current", {packages:['charteditor', 'corechart']});
google.charts.setOnLoadCallback(initializeData);
google.charts.setOnLoadCallback(loadEditor);
var view;
var maxValCol;
var data;
var chartEditor;
var formatter;
var colors = ["#D3D3D3", "#A9A9A9", "#888888", "#686868", "#484848", "#282828", "#000000"];
var optionsBar = {
annotations: {
alwaysOutside: true,
textStyle: {
fontSize: 10
}
},
height: 600,
width: 900,
isStacked: true,
colors: colors,
chartArea: {
left: "25%",
top: "10%"
},
hAxis: {
gridlines: {
color: 'transparent'
},
textPosition: "none",
viewWindow: {
max: maxValCol + (maxValCol *0.2),
min: 0
}
},
legend: {
position: 'top',
alignment: "center",
maxLines: 4
},
bar: {
groupWidth: '70%'
}
};
var optionsColumn = {
annotations: {
alwaysOutside: true,
textStyle: {
fontSize: 10
}
},
height: 600,
width: 900,
isStacked: true,
colors: colors,
chartArea: {
left: "10%",
top: 30
},
vAxis: {
gridlines: {
color: 'transparent'
},
textPosition: "none",
viewWindow: {
max: maxValCol + (maxValCol *0.2),
min: -5000,
}
},
legend: {
position: 'top',
alignment: "center",
maxLines: 3
},
bar: {
groupWidth: '70%'
},
};
function loadEditor() {
// Create the chart to edit.
var wrapper = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'dataTable': view
});
chartEditor = new google.visualization.ChartEditor();
google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
chartEditor.openDialog(wrapper,{});
}
function redrawChart(){
var wrapperTemp = new google.visualization.ChartWrapper({
'dataTable': view
});
if(chartEditor.getChartWrapper().getChartType() == "BarChart") {
wrapperTemp.setChartType('BarChart');
wrapperTemp.setOptions(optionsBar);
chartEditor.getChartWrapper().setChartType("BarChart");
} else {
wrapperTemp.setChartType('ColumnChart');
wrapperTemp.setOptions(optionsColumn);
}
wrapperTemp.draw(document.getElementById('columnchart_values'));
}
function initializeData() {
data = new google.visualization.DataTable({
cols:[
{id:"","label":"Products","pattern":"","type":"string"},
{id:"","label":"Water","pattern":"","type":"number"},
{id:"","label":"Cola","pattern":"","type":"number"},
{id:"","label":"Fanta","pattern":"","type":"number"},
{id:"","label":"Tonic Water","pattern":"","type":"number"}],
rows:[
{c:[{v:"2008"},{v:870883.521900001},{v:1128581.9856},{v:1177332.008},{v:3922057.50240001}]},
{c:[{v:"2009"},{v:-566.5377},{v:-217.3444},{v:-865.114},{v:356870.886599999}]},
{c:[{v:"2010"},{v:-1270.7287},{v:-4486.0961},{v:-1019.4662},{v:3763827.8335}]},
{c:[{v:"2011"},{v:145543.985},{v:2108039.5802},{v:266392.5277},{v:6006566.18690001}]},
{c:[{v:"2012"},{v:1723781.2686},{v:4435404.56789999},{v:7060065.3164},{v:17514581.1763}]},
{c:[{v:"2013"},{v:7800243.0557997},{v:4759320.6768999},{v:4383260.9528002},{v:16150254.021496}]},
{c:[{v:"2014"},{v:10507117.0145001},{v:8059953.41120002},{v:14103816.4604002},{v:34676509.4036004}]},
{c:[{v:"2015"},{v:2373067.7893},{v:-53954.2187},{v:30783391.8722},{v:37288122.5537999}]},
{c:[{v:"2016"},{v:86583.2876},{v:71082.0195},{v:79813.2918},{v:22959813.0499999}]},
{c:[{v:"2017"},{v:12479599.4709999},{v:22650137.9890997},{v:17562381.7794999},{v:25589299.8099997}]},
{c:[{v:"2018"},{v:null},{v:-59.1},{v:282.7517},{v:1461239.6186}]}]
});
formatter = new google.visualization.NumberFormat({
pattern: 'short'
});
for (var i = 1; i < data.getNumberOfColumns(); i++) {
formatter.format(data, i);
}
view = getDataView(data);
maxValCol = view.getColumnRange(view.getNumberOfColumns()-1).max;
}
function getDataView(dataTable) {
var dataView;
var viewColumns = ;
for (var i = 0; i < dataTable.getNumberOfColumns(); i++) {
addViewColumn(i);
}
function addViewColumn(index) {
viewColumns.push(index);
if (index == (dataTable.getNumberOfColumns() - 1)) {
viewColumns.push({
calc: function(dt, row) {
for (var e = 0; e < dt.getNumberOfRows(); e++) {
var value = 0;
for (var u = 1; u < dt.getNumberOfColumns(); u++) {
value += dt.getValue(row, u);
}
return formatter.formatValue(value).toString();
}
},
type: 'string',
role: 'annotation',
});
}
}
dataView = new google.visualization.DataView(dataTable);
dataView.setColumns(viewColumns);
return dataView;
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_values"></div>answered Nov 20 at 20:41
WhiteHat
35.6k61475
answered Nov 20 at 20:41
WhiteHat
35.6k61475
answered Nov 20 at 20:41
WhiteHat
35.6k61475
answered Nov 20 at 20:41
WhiteHat
35.6k61475
35.6k61475
don't follow exactly what you're trying to achieve, it appears the chart editor is only being used to choose the chart type. if not, further adjustments may be needed...
– WhiteHat
Nov 20 at 20:41
Hey, thanks very much for your help! Yes the ChartEditor is only being used for choosing the chart type and I thought I had to do it that way, to implement my charts.
– RyuHayabusa
Nov 20 at 21:25
add a comment |
don't follow exactly what you're trying to achieve, it appears the chart editor is only being used to choose the chart type. if not, further adjustments may be needed...
– WhiteHat
Nov 20 at 20:41
Hey, thanks very much for your help! Yes the ChartEditor is only being used for choosing the chart type and I thought I had to do it that way, to implement my charts.
– RyuHayabusa
Nov 20 at 21:25
don't follow exactly what you're trying to achieve, it appears the chart editor is only being used to choose the chart type. if not, further adjustments may be needed...
– WhiteHat
Nov 20 at 20:41
don't follow exactly what you're trying to achieve, it appears the chart editor is only being used to choose the chart type. if not, further adjustments may be needed...
– WhiteHat
Nov 20 at 20:41
Hey, thanks very much for your help! Yes the ChartEditor is only being used for choosing the chart type and I thought I had to do it that way, to implement my charts.
– RyuHayabusa
Nov 20 at 21:25
Hey, thanks very much for your help! Yes the ChartEditor is only being used for choosing the chart type and I thought I had to do it that way, to implement my charts.
– RyuHayabusa
Nov 20 at 21:25
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53400395%2fgoogle-charts-charteditor-or-chartwrapper-ignoring-height-and-width-option%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
