is it possible to set the width and height of a chart when using the google visualization ChartEditor?
I require the chart to be 100% the width of the page and then set the height in pixels, currently when I set the width and height in the options they are being ignored.
the code that I have worked on so far is below:
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart", "controls", "charteditor"] });
google.setOnLoadCallback(loadEditor);
var chartEditor = null;
window.onresize = function() {
loadEditor();
};
function loadEditor() {
var data = google.visualization.arrayToDataTable([#Html.Raw(#ViewBag.ChartData)]);
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
var rangeSlider = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'VAR1',
'ui': {
'label': 'Years'
}
}
});
var wrapper = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'chart_div',
dataTable: data
});
chartEditor = new google.visualization.ChartEditor();
google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
chartEditor.openDialog(wrapper, {});
dashboard.bind(rangeSlider, wrapper);
dashboard.draw(data);
}
function redrawChart() {
chartEditor.getChartWrapper().draw(document.getElementById('chart_div'));
}
</script>
the chart also incorporates a CategoryFilter linked with a dashboard is required to work with the chart displayed.
Currently when the chart is rendered it is fairly small.
Something like this should work, I switched out the data and modified the slider to get the snippet to work.
google.load("visualization", "1", { packages: ["corechart", "controls", "charteditor"] });
google.setOnLoadCallback(loadEditor);
window.addEventListener('resize', redrawChart, false);
var chartEditor;
var data;
var dashboard;
var rangeSlider;
var wrapper;
function loadEditor() {
data = google.visualization.arrayToDataTable([
['Element', 'Density'],
['Copper', 8.94],
['Silver', 10.49],
['Gold', 19.30],
['Platinum', 21.45]
]);
dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
rangeSlider = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Density',
'ui': {
'label': 'Density'
}
}
});
wrapper = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'chart_div',
dataTable: data
});
chartEditor = new google.visualization.ChartEditor();
google.visualization.events.addListener(chartEditor, 'ok', drawChart);
chartEditor.openDialog(wrapper, {});
}
function drawChart() {
wrapper = chartEditor.getChartWrapper();
redrawChart();
}
function redrawChart() {
var height;
var width;
height = '200px';
width = Math.min(document.documentElement.clientWidth, window.innerWidth || 0) + 'px';
wrapper.setOption('height', height);
wrapper.setOption('width', width);
dashboard.bind(rangeSlider, wrapper);
dashboard.draw(data);
}
<script src="https://www.google.com/jsapi"></script>
<div id="dashboard_div">
<div id="filter_div"></div>
<div id="chart_div"></div>
</div>
Related
See the following data.DataTable
How do I input this data into Google Line Charts with filter for each Column AND filter for the Dates.
I would like my graph to have x-axis of dates and y-axis with the percentage. Also each row of data is its own line in the line graph. Is this possible?
Below is a snippet part of my code:
var data = google.visualization.arrayToDataTable(response,false);
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard-div'));
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table-div',
'options': {'backgroundColor': 'lightgrey'}
});
var numCol = [3];
for (var i = 10; i < data.getNumberOfColumns(); i++) {
numCol.push(i);
}
var line = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'linechart-div',
'view': {'columns': numCol},
'options': {'backgroundColor': 'lightgrey', 'title': 'InterCarrier Trunk Capacity Graph', 'explorer': {
'actions': ['dragToZoom', 'rightClickToReset'],
'axis': 'horizontal',
}}
});
var Slider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'slider-div1',
'options': {
'filterColumnLabel': '3/1/2020'
}
});
var Slider2 = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'slider-div2',
'options': {
'filterColumnLabel': '3/2/2020'
}
});
var Slider3 = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'slider-div3',
'options': {
'filterColumnLabel': '3/3/2020'
}
});
var Slider4 = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'slider-div4',
'options': {
'filterColumnLabel': '3/4/2020'
}
});
Chart Here
I am trying to use Google Dashboard, Charts and Wrapper class in my website. I wrote a simple test app for it which I bring it below;
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the controls package.
google.charts.load('current', {'packages':['corechart', 'controls','charteditor']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawDashboard);
// Callback that creates and populates a data table,
// instantiates a dashboard, a range slider and a pie chart,
// passes in the data and draws it.
function drawDashboard() {
// Create our data table.
var data = google.visualization.arrayToDataTable([
['Name', 'Donuts eaten'],
['Michael' , 5],
['Elisa', 7],
['Robert', 3],
['John', 2],
['Jessica', 6],
['Aaron', 1],
['Margareth', 8]
]);
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Create a range slider, passing some options
var donutRangeSlider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Donuts eaten'
}
});
// Create a pie chart, passing some options
var wrapper = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart_div',
'dataTable': data,
'options': {
'width': 300,
'height': 300,
'pieSliceText': 'value',
'legend': 'right'
}
});
var chartEditor = new google.visualization.ChartEditor();
google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
// On "OK" save the chart to a <div> on the page.
function redrawChart(){
chartEditor.getChartWrapper().draw(document.getElementById('chart_div'));
dashboard.bind(donutRangeSlider, chartEditor.getChartWrapper());
}
// Establish dependencies, declaring that 'filter' drives 'pieChart',
// so that the pie chart will only display entries that are let through
// given the chosen slider range.
dashboard.bind(donutRangeSlider, wrapper);
// Draw the dashboard.
dashboard.draw(data);
var button = document.createElement('button');
button.textContent = "Edit me";
button.onclick = () => chartEditor.openDialog(wrapper, {});
document.body.appendChild(button);
setInterval(updateChart, 5000);
function updateChart()
{
let rand = Math.floor(Math.random()*10);
/************* THE FOLLOWING TWO LINES IS WORKING ****************************/
data.addRow(['Reza' + rand, rand]);
dashboard.draw(data);
/************* THE FOLLOWING TWO LINES IS NOT WORKING ****************************/
//wrapper.getDataTable().addRow(['Reza' + rand, rand]);
//dashboard.draw(wrapper.getDataTable());
}
}
</script>
</head>
<body>
<!--Div that will hold the dashboard-->
<div id="dashboard_div">
<!--Divs that will hold each control and chart-->
<div id="filter_div"></div>
<div id="chart_div"></div>
</div>
</body>
</html>
My problem is that the "getDataTable" function of my chart wrapper does not have a "addRow" function. It seems that it returns a DataView instead of DataTable. I don't want to keep a reference of my data because it should be in the wrapper! Anyway, Any help would be welcomed.
when you draw the dashboard, it appears to override the data table on the wrapper with a data view
this can easily be changed back to a normal data table using method --> toDataTable()
var wrapperData = wrapper.getDataTable().toDataTable();
wrapperData.addRow(['Reza' + rand, rand]);
dashboard.draw(wrapperData);
see following working snippet...
google.charts.load('current', {
packages: ['corechart', 'controls', 'charteditor']
}).then(drawDashboard);
function drawDashboard() {
var data = google.visualization.arrayToDataTable([
['Name', 'Donuts eaten'],
['Michael' , 5],
['Elisa', 7],
['Robert', 3],
['John', 2],
['Jessica', 6],
['Aaron', 1],
['Margareth', 8]
]);
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div')
);
var donutRangeSlider = new google.visualization.ControlWrapper({
controlType: 'NumberRangeFilter',
containerId: 'filter_div',
options: {
filterColumnLabel: 'Donuts eaten'
}
});
var wrapper = new google.visualization.ChartWrapper({
chartType: 'PieChart',
containerId: 'chart_div',
options: {
width: 300,
height: 300,
pieSliceText: 'value',
legend: 'right'
}
});
var chartEditor = new google.visualization.ChartEditor();
google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
function redrawChart(){
chartEditor.getChartWrapper().draw(document.getElementById('chart_div'));
dashboard.bind(donutRangeSlider, chartEditor.getChartWrapper());
}
dashboard.bind(donutRangeSlider, wrapper);
dashboard.draw(data);
var button = document.createElement('button');
button.textContent = "Edit me";
button.onclick = () => chartEditor.openDialog(wrapper, {});
document.body.appendChild(button);
setInterval(updateChart, 5000);
function updateChart() {
let rand = Math.floor(Math.random()*10);
var wrapperData = wrapper.getDataTable().toDataTable();
wrapperData.addRow(['Reza' + rand, rand]);
dashboard.draw(wrapperData);
}
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div">
<div id="filter_div"></div>
<div id="chart_div"></div>
</div>
I'm having trouble displaying google sheets info on the dashboard. The x and y-axis labels show up like Generalxxx . The data is from here .
var laptimeChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart_div',
'width': '500',
'height': '500',
'view': { 'columns': [1,2] }
});
the chart seems to be using the "General" format by default
to correct, set a specific format for each axis...
options: {
hAxis: {
format: '0'
},
vAxis: {
format: '#,##0'
}
},
see following working snippet...
google.charts.load('current', {
packages: ['controls', 'corechart', 'table']
}).then(function () {
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1PlT8k6qXsCkOCEEJFn7apKYgDunLi1Lzmnmo_AKQBXc/edit#gid=0');
query.send(handleQueryResponse);
function handleQueryResponse(response) {
if (response.isError()) {
console.log('Error: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var control = new google.visualization.ControlWrapper({
controlType: 'NumberRangeFilter',
containerId: 'control',
options: {
filterColumnIndex: 1,
ui: {
format: {
pattern: '0'
}
}
}
});
var chart = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'chart',
options: {
hAxis: {
format: '0'
},
vAxis: {
format: '#,##0'
}
},
view: {
columns: [1, 2]
}
});
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
dashboard.bind(control, chart);
dashboard.draw(data);
}
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
<div id="control"></div>
<div id="chart"></div>
</div>
I am creating a chart using a while loop to get the variables from a mysql query.
I am attempting to add html to the first column and it is causing the following issue: [object Object] does not fit either the Control or Visualization specification.
So, the table displays correctly but my category filters are now throwing this error. Can someone take a look at my code and see what i am missing? Thanks!
Here is my code:
echo "<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<body>
<br><br>
<div id='dashboard'>
<div style='float:left;' id='control1'></div>
<div style='float:left;' id='control2'></div>
<div style='float:left;' id='control4'></div>
<br><br>
<div style='float:left;' id='control3'></div>
<div style='float:left;' id='control5'></div>
<br><br>
<div id='table'></div>
</div>
</body>";
echo "<script>
google.load('visualization', '1.0', {packages:['corechart', 'table', 'controls']});
google.setOnLoadCallback(drawChart);
function drawChart()
{
var data = new google.visualization.DataTable();
data.addColumn('string', 'Save');
data.addColumn('string', 'School');
data.addColumn('string', 'State');
data.addColumn('string', 'Scholarship Type');
data.addColumn('string', 'Scholarship Amount');
data.addColumn('string', 'For International');";
while ($schools = mysql_fetch_row($schoolsearch)) {
$schoolnames = str_replace(array('.', ',', "'"), '' , $schools[2]);
echo "data.addRows([
['<input type=\"checkbox\">', '$schoolnames', '$schools[1]', '$schools[6]', '$schools[5]', '$schools[7]'],
]);";
}
echo "var name_filter = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'School',
}
});
var state_filter = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'State',
}
});
var scholarshiptype_filter = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control3',
'options': {
'filterColumnLabel': 'Scholarship Type',
}
});
var scholarshipamount_filter = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control4',
'options': {
'filterColumnLabel': 'Scholarship Amount',
}
});
var international_filter = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control5',
'options': {
'filterColumnLabel': 'For International',
}
});
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table',
});
var table = new google.visualization.Table(document.getElementById('table'));
table.draw(data, {
allowHtml:true,
});
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
dashboard.bind([name_filter, state_filter, scholarshiptype_filter, scholarshipamount_filter, international_filter], [table]);
dashboard.draw(data);
}
</script>
I was able to fix this by placing the allowHtml in the options like this:
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table',
options: {
allowHtml: true
},
});
another option, which may work better, depending on if you want the filter to work on the html or the value it represents...
each cell in a DataTable has a value (v:) and a formatted value (f:)
you can use the formatted value for the html
where you have...
echo "data.addRows([
['<input type=\"checkbox\">', '$schoolnames', '$schools[1]', '$schools[6]', '$schools[5]', '$schools[7]'],
]);";
try...
echo "data.addRows([
[{v: '', f: '<input type=\"checkbox\">'}, '$schoolnames', '$schools[1]', '$schools[6]', '$schools[5]', '$schools[7]'],
]);";
<script type="text/javascript">
function drawVisualization1(dataValues, chartTitle, columnNames, categoryCaption) {
if (dataValues.length < 1)
return;
var data = new google.visualization.DataTable();
data.addColumn('string', columnNames.split(',')[0]);
data.addColumn('string', columnNames.split(',')[1]);
data.addColumn('string', columnNames.split(',')[2]);
data.addColumn('string', columnNames.split(',')[3]);
data.addColumn('string', columnNames.split(',')[4]);
data.addColumn('string', columnNames.split(',')[5]);
data.addColumn('number', columnNames.split(',')[6]);
data.addColumn('number', columnNames.split(',')[7]);
for (var i = 0; i < dataValues.length; i++) {
data.addRow([dataValues[i].Value1, dataValues[i].Value2, dataValues[i].Value3, dataValues[i].Value4, dataValues[i].Value5, dataValues[i].Value6,( dataValues[i].Value7)/100, (dataValues[i].Value8)/100]);
}
var formatter = new google.visualization.NumberFormat({ pattern: '####%' });
formatter.format(data, 6);
var formatter = new google.visualization.NumberFormat({ pattern: '####%' });
formatter.format(data, 7);
var categoryPicker1 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'Container',
'options': {
'filterColumnLabel': columnNames.split(',')[2],
'ui': {
'labelStacking': 'horizontal',
'allowTyping': false,
'allowMultiple': false,
'caption': categoryCaption,
'label': columnNames.split(',')[2]
}
}
});
var slider1 = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'Slider',
'options': {
'filterColumnLabel': columnNames.split(',')[6],
'ui': { 'labelStacking': 'horizontal' },
'ui.format': { 'pattern':'####%' }
}
});
var table1 = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'TableContainer1',
'options': {
'width': '895px',
'page': 'enable',
'pageSize': 5
}
});
new google.visualization.Dashboard(document.getElementById('PieChartExample')).bind([categoryPicker1, slider1], [table1]).draw(data);
}
</script>
Script code to generate google chart my problem is i am not able to show the slider for percentage values;i am converting that table values into percentage and i want to show in the slider value.can anyone help me to resolve.
var slider1 = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'Slider',
'options': {
'filterColumnLabel': columnNames.split(',')[6],
'ui': { 'labelStacking': 'horizontal',
'format': { 'pattern':'####%' } }
}
});