Search code examples
javascriptgoogle-visualizationgooglevis

Google Charts ChartEditor or ChartWrapper ignoring height and width option

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/

enter image description here

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;
}
Solution

  • 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>