I'm having trouble updating a cell in Google DataTable and having the display reflect the change. Right now, my solution is to redraw the table but it messes up the page scrolling and where the user was at in the table.
Any idea what I'm missing? Thanks for the help.
Have you used the setCell function? The following code below provides a button to change one of the names in the table. If a user clicks on a row to highlight it, it does not change the scroll position or which row is highlighted.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["table"]});
google.setOnLoadCallback(drawTable);
var table;
var data;
function drawTable() {
data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, true],
['Jim', {v:8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Bob', {v: 7000, f: '$7,000'}, true],
['Mike', {v: 10000, f: '$10,000'}, true],
['Jim', {v:8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Bob', {v: 7000, f: '$7,000'}, true],
['Mike', {v: 10000, f: '$10,000'}, true],
['Jim', {v:8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Bob', {v: 7000, f: '$7,000'}, true],
['Mike', {v: 10000, f: '$10,000'}, true],
['Jim', {v:8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Bob', {v: 7000, f: '$7,000'}, true]
]);
table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: true});
}
function changeCell() {
data.setCell(1, 0, 'Changed Name');
table.draw(data, {showRowNumber: true});
}
</script>
</head>
<body>
<div id="table_div"></div>
<button onclick="changeCell()">Change</button>
</body>
</html>
Related
Is it possible to create a chart like this?
[![enter image description here][1]][1]
Thanks in advance
this is possible by adding the property pointRadius in your dataset object and give it an array for the radius of each point
Working example (with text on the Y axes as seems you want, to get the desired result each line will need to be a different dataset): https://jsfiddle.net/Leelenaleee/2gtndc3h/1/
dataset example:
{
label: '# of Votes',
data: ['', 'Request Added', 'Request Added', 'Request Added', 'Request Viewed', 'Request Viewed', 'Request Viewed'],
borderWidth: 1,
lineTension: 0,
pointRadius: [2, 4, 6, 18, 0, 12, 20],
}
I'm making a linear graph and the pan and zoom functionality are not working.
I'm using:
"chart.js": "Chart-js#v2.5.0",
"chartjs-plugin-zoom": "Chart.Zoom.js#v0.7.0",
"hammerjs": "v2.0.8"
and added them in this orden in the html:
<script src="~/lib/hammerjs/hammer.min.js"></script>
<script src="~/lib/chart.js/dist/Chart.min.js"></script>
<script src="~/lib/chartjs-plugin-zoom/dist/chartjs-plugin-zoom.min.js"></script>
I'm using chart.js 2.5.0 because i needed it to work on IE11 and read somewhere that it was better to use that version, but I'm not sure about that.
I copied a working code from snippets online, but it's still now working.
<canvas id="canvas" height="180"></canvas>
<script>
var ctx = document.getElementById("canvas").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 0, 5, 9, 4, 11]
}]
},
options: {
pan: {
enabled: true,
mode: 'x',
},
zoom: {
enabled: true,
mode: 'x',
}
}
});
</script>
The graph shows but I'm not getting the functionalities and in the console there are no errors.
Thanks in advance.
Try to use the latest version of ChartJS, at the moment 3.7.1.
If your downloaded scripts don't load, it could be a bug with IE11.
For me zooming works, but panning doesn't. (It is already an issue here
I'm using Google Visualization to display a target vs performance chart. The chart is split into a few months, and within each month, I have several departments, each with their own targets. The actual performance will be displayed using bar (column) charts, while I'm intending to have the targets displayed as a line. For now, I've chosen to use a stepped area chart with 0 opacity and disconnected lines for the targets, as recommended by this comment.
The issue now is that the stepped area chart displays across the entire category, but I need it to display only across a single column. Currently what I have is (copy and paste the code in the Google Code Playground to see the results):
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
['2004/05', 165, 938, 522, 998, 450, 614.6],
['2005/06', 135, 1120, 599, 1268, 288, 682],
['2006/07', 157, 1167, 587, 807, 397, 623],
['2007/08', 139, 1110, 615, 968, 215, 609.4],
['2008/09', 136, 691, 629, 1026, 366, 569.6]
]);
// Create and draw the visualization.
var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
ac.draw(data, {
title : 'Monthly Coffee Production by Country',
width: 600,
height: 400,
vAxis: {title: "Cups"},
hAxis: {title: "Month"},
seriesType: "bars",
connectSteps: false,
series: {3: {type: "steppedArea", areaOpacity: 0}}
});
}
I'm also open to other possible ideas of how to display a target vs performance chart, so other solutions that can also create such a chart would be greatly appreciated. Thanks.
Use the "interval" column role to add a small horizontal line in line with the column:
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month');
data.addColumn('number', 'Y1');
data.addColumn({type: 'number', label: 'Y1 Target', role: 'interval'});
data.addColumn('number', 'Y2');
data.addColumn({type: 'number', label: 'Y1 Target', role: 'interval'});
data.addRows([
['Jan', 5, 7, 4, 10],
['Feb', 3, 4, 8, 6],
['Mar', 6, 3, 6, 8],
['Apr', 2, 5, 3, 6]
]);
see example at http://jsfiddle.net/asgallant/M7YTG/2/
I want to use google geochart with coordinates (longtitute, latitute). But I cant find any example about this topic. There are a lot of example with region and city example. But with coordinates I Cant find.
Please, code example, link, tutorial any thing else?
Thanks.
You can check an example here:
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {var data = new google.visualization.DataTable();
data.addColumn('number', 'Lat');
data.addColumn('number', 'Long');
data.addColumn('number', 'Value');
data.addColumn({type:'string', role:'tooltip'});
data.addRows([[41.151636,-8.569336,0,'tooltip']]);
data.addRows([[ 39.059575,-98.789062,0,'tooltip']]);
var options = {
colorAxis: {minValue: 0, maxValue: 0, colors: ['#6699CC']},
legend: 'none',
backgroundColor: {fill:'transparent',stroke:'#FFF' ,strokeWidth:0 },
datalessRegionColor: '#f5f5f5',
displayMode: 'markers',
enableRegionInteractivity: 'true',
resolution: 'countries',
sizeAxis: {minValue: 1, maxValue:1,minSize:5, maxSize: 5},
region:'world',
keepAspectRatio: true,
width:400,
height:300,
tooltip: {textStyle: {color: '#444444'}}
};
var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
chart.draw(data, options);
}
<script src="https://www.google.com/jsapi?fake=.js"></script>
<div id="visualization"></div>
There are many ways to do it, this is just one.
data.addColumn('number', 'Lat');
data.addColumn('number', 'Long');
data.addColumn('number', 'Value');
data.addColumn({type:'string', role:'tooltip'});
data.addRows([[41.151636,-8.569336,0,'tooltip']]);
data.addRows([[ 39.059575,-98.789062,0,'tooltip']]);
As said in the documentation:
Marker location [Required] The first column is a specific string
address (for example, "1600 Pennsylvania Ave"). OR The first two
columns are numeric, where the first column is the latitude, and the
second column is the longitude.
You need to define first two columns of your data set as numeric values representing latitude and longitude.
I can insert annotations on specific datasets on the graph but I wish to have multiple lines on the graph without associating the annotation with a specific line, but with a date instead.
Here is an example of what I want to do. Notice the bubbles appended to the x-axis and not a specific line on the graph.
I've read through the API and can't see an option like this but wondering if someone knows a way.
Thanks.
No experience, but my instant reaction was that you might try a series with the annotations attached with all zeros as the data - and exclude it from the legend?
If you don't mind using an SVG Line Chart with Annotations you can recreate this as well with more flexibility. If you set the Annotation column to immediately follow the X-axis values, the annotations will appear at the very bottom of the chart (on the axis) and not be attached to any category. Here is a sample:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('number','Day');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn({type: 'string', role: 'annotationText'});
data.addColumn('number', '.DJI');
data.addColumn('number', '.INX');
data.addColumn('number', '.INIC');
data.addRows([
[1, null, null, 1000, 400, 300],
[2, 'A', 'did stuff', 1170, 460, 400],
[3, 'B', 'did more stuff', 660, 1120, 540],
[4, null, null, 1030, 540, 620],
[5, 'C', 'stopped stuff', 1070, 600, 700]
]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {focusTarget: 'category',
width: 500, height: 400,
vAxis: {maxValue: 10},}
);
}
This ends up looking like this: