Google Charts Tools - Scatter and Table Combo Interaction, why unidirectional? - api

This is my first question on stack overflow. I made a google chart tools scatter chart/table combination that is based on their examples. When I click a row in the table, the corresponding point in the scatter is selected (that's good). But it is not working in reverse. I cannot select a point in the scatter and have it select the corresponding row in the table. Does anyone know why this does not work as expected? my code is provided below:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart", "table"]});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Age', 'Weight'],
[ 8, 12],
[ 4, 5.5],
[ 11, 14],
[ 4, 5],
[ 3, 3.5],
[ 6.5, 7],
[ 6.5, 7]
]);
var options = {
title: 'Age vs. Weight comparison',
hAxis: {title: 'Age', minValue: 0, maxValue: 15},
vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
legend: 'none'
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
var table = new google.visualization.Table(document.getElementById('table_div'));
chart.draw(data, options);
table.draw(data);
google.visualization.events.addListener(chart, 'select', function() {
table.setSelection(chart.getSelection());});
google.visualization.events.addListener(table, 'select', function() {
chart.setSelection(table.getSelection());});
}
google.setOnLoadCallback(drawChart);
</script>
</head>
<body>
<div id="chart_div" style="width: 500px; height: 500px;"></div>
<div id="table_div" style="width: 500px; height: 500px;"></div>
</body>
</html>


Because getSelection() returns both the column and row for the scatter graph and just row for the table, there's a bit of a conflict. Turns out, if you just pass the row information from the scatter graph, you can indeed select the table row, you just need the following:
table.setSelection([{row: chart.getSelection()[0].row}]);
That takes the first item you've clicked on and passes an object with just row data.
Inspiration from here and working example here.

Related

Find min and max values of a field (column) in a feature layer on ArcGIS in a Nuxt/Vuejs application

I am using ArcGIS API for Javascript in a Nuxt application and I would like to find the max and min values of a field in a feature layer hosted on ArcGIS. How to do that ?? Here is the code. The values for the stops for the visualVariables are hard coded and I would like them to be dynamic and take the min and max values of the field.
buildRenderer(fieldName) {
this.renderer = {
type: 'simple', // autocasts as new SimpleRenderer()
symbol: {
type: 'simple-line', // autocasts as new SimpleFillSymbol()
width: '1px',
},
label: 'GIMM',
visualVariables: [
{
type: 'color',
valueExpression: `$feature.${fieldName}`,
legendOptions: {
title: '% KBA stuff',
},
stops: [
{
value: 10,
color: '#bef264',
label: 'minimum',
},
{
value: 600000,
color: '#881337',
label: 'maximum',
},
],
},
],
}

You can make an statistic query requesting min and max of the field you need.
Look at this example I put for you,
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>
Intro to FeatureLayer | Sample | ArcGIS API for JavaScript 4.23
</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.23/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/rest/support/Query"
], (
Map,
MapView,
FeatureLayer,
Query
) => {
const featureLayer = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/subway_tcl_stations_center_wgs84/FeatureServer/0"
});
const minXCoord = {
onStatisticField: "XCoord",
outStatisticFieldName: "minXCoord",
statisticType: "min"
};
const maxXCoord = {
onStatisticField: "XCoord",
outStatisticFieldName: "maxXCoord",
statisticType: "max"
};
let query = featureLayer.createQuery();
query.outStatistics = [ minXCoord, maxXCoord ];
featureLayer.queryFeatures(query)
.then(function (response) {
const stats = response.features[0].attributes;
console.log(stats);
document.getElementById("response").innerText =
`X Coord (min, max): ${stats.minXCoord}, ${stats.maxXCoord}`;
});
});
</script>
</head>
<body>
<div id="response"></div>
</body>
</html>

ZingChart Scale-Y Marker, Can it be drawn on top?

When adding a scale marker to a ZingChart plot, by default the marker is drawn beneath the other plotted data, which isn't always so easy to see (e.g., a line marker beneath a series of bars).
var chartConfig = {
type: 'bar',
title: { text: 'Scale-Y Marker' },
scaleY: {
markers: [
{
type: 'line',
range: [40],
lineColor: '#DE7DA9',
label:{
text: 'Marker',
backgroundColor: 'white',
alpha: 0.7,
textAlpha: 1,
offsetX: 10,
offsetY: -1
}
}
]
},
series: [
{
values: [50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75],
backgroundColor: '#B7D977'
}
]
};
zingchart.render({
id : 'chartCanvas',
data : chartConfig,
height: 400,
width: '750'
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scale-Y Marker</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id='chartCanvas'></div>
</body>
</html>
With no z-index-like attribute currently available for scale-y markers (v2.6.8), is there a way to draw Scale-Y Markers on top of the plotted data?

You can use the placement attribute and set it equal to 'top'.
var chartConfig = {
type: 'bar',
title: { text: 'Scale-Y Marker On Top' },
scaleY: {
markers: [
{
type: 'line',
range: [40],
lineColor: '#DE7DA9',
placement: 'top',
label:{
text: 'Marker',
backgroundColor: 'white',
alpha: 0.7,
textAlpha: 1,
offsetX: 10,
offsetY: -1
}
}
]
},
series: [
{
values: [50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75],
backgroundColor: '#B7D977'
}
]
};
zingchart.render({
id : 'chartCanvas',
data : chartConfig,
height: 400,
width: '750'
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scale-Y Marker On Top</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id='chartCanvas'></div>
</body>
</html>

Chart.js pie chart in table shows weird behavior on page resize

There are chart.js pie charts in a html table.
The issue: on zoom-out and then zoom-in, the cells do not resize to their initial size.
The layout looks something like this:
__________________________
| inner div | inner div |
|_____________|____________|
| | |
| Pie1 | Pie2 |
|_____________|____________|
I have referred the documentation on resizing and this link to add responsive and maintainAspectRatio fields in options object.
On setting responsive:true, the diagram is enabled to resize on zoom.
Setting maintainAspectRatio:false, to fix previous irregular zoom issue where the multiple charts do not resize proportionally since they take table cell's width.
Just for reference there is a blurry text issue with chart.js zoom mentioned at
github here.
Sourcecode of issue on JS fiddle: http://jsfiddle.net/rfaLvuho/.
Use zoom-out and zoom-in back to reproduce.

You can switch to <div> elements for the layout to fix this. I used float in the snippet below but it should work with flex or grid layout as well.
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(201, 203, 207)'
};
var config = {
type: 'pie',
data: {
datasets: [{
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
],
backgroundColor: [
chartColors.red,
chartColors.orange,
chartColors.yellow,
chartColors.green,
chartColors.blue,
],
label: 'Dataset 1'
}],
labels: [
'Red',
'Orange',
'Yellow',
'Green',
'Blue'
]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: false
}
};
var myPie1 = new Chart('chart-area1', config);
var myPie2 = new Chart('chart-area2', config);
.canvas-holder {
width: 50%;
float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<div class="canvas-holder">
<canvas id="chart-area1"></canvas>
</div>
<div class="canvas-holder">
<canvas id="chart-area2"></canvas>
</div>

cant print jspdf on column chart

a good day to all. I was trying to make a pdf file out of my column chart ( google charts), im using jspdf. when i try to make a pdf file out of bar and pie chart seems the code works fine
But when i try to code it on a column chart it wont print pdf
I tried to search on my code but it seems good
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
}
};
var chart = new
google.charts.Bar(document.getElementById('columnchart_material'));
var btnSave = document.getElementById('save-pdf');
google.visualization.events.addListener(chart, 'ready', function () {
btnSave.disabled = false;
});
btnSave.addEventListener('click', function () {
var doc = new jsPDF();
doc.addImage(chcolumnchart_material.getImageURI(), 10, 10, 180, 150);
doc.save('chart.pdf');
}, false);
chart.draw(data, google.charts.Bar.convertOptions(options));
}
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js">
</script>
<input id="save-pdf" type="button" value="Save as PDF" disabled />
<div id="columnchart_material" style="width: 800px; height: 500px;"></div>

chart method getImageURI() is not supported by material charts.
material --> google.charts.Bar -- packages: ['bar']
you'll need to use a classic chart.
classic --> google.visualization.BarChart -- packages: ['corechart']
or --> google.visualization.ColumnChart
note: there is a config option to style classic charts similar to material charts...
theme: 'material'

dojox.Grid row background color

I have a Grid and I would like to change the background color, do you know how to do it ?
Thanks for your help, have a nice day.
Here is my code :
var jsonStore = new dojo.data.ItemFileReadStore({url: "..." ?>"});
var model = new dojox.grid.data.DojoData(null,jsonStore,{jsId: 'model', rowsPerPage: 20, query: { date: '*' }});
var view1 = {
cells: [[
{name: 'x', width: "80px", field: "date"},
{name: 'y', width: "50px", field: "weight"},
{name: 'z', width: "100px", field: "nurse"}
]]
};
var layout = [ view1 ];
<div id="gridWeight" dojoType="dojox.Grid" model="model" structure="layout" autoWidth="true" style="height: 150px"></div>

You can either use the onStyleRow event or adapt the CSS directly - in your case:
.tundra #gridWeight .dojoxGridRow,
.tundra #gridWeight .dojoxGridRowOdd {
background: red;
}