Here is my code :
I need to make a spiderweb graph with a legend in blue here.
3 axys
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"></script>
<script>
dojo.require("dojox.charting.Chart2D");
dojo.require("dojox.charting.axis2d.Default");
dojo.require("dojox.charting.plot2d.Default");
dojo.require("dojox.charting.plot2d.Spider");
dojo.require("dojox.charting.axis2d.Base");
dojo.require("dojox.charting.widget.Legend");
dojo.ready(
function(Chart, Default, Default, Spider, Base,Legend){
var chart1 = new dojox.charting.Chart("chart1");
chart1.addPlot("default", {
type: "Spider",
labelOffset: -10,
seriesFillAlpha: 0.2,
markerSize: 3,
precision: 0,
divisions: 11,
spiderType: "polygon"
});
var data= [ {"J":0,"S":0,"I":0},
{"J":10,"S":10,"I":10},
{"J":7,"S":4,"I":8} ];
chart1.addSeries("min", {data: data[0] }, { fill: "blue" });
chart1.addSeries("max", {data: data[1] }, { fill: "blue" });
chart1.addSeries("Test", {data: data[2] }, { fill: "blue",text: "Test" });
chart1.render();
chart1.removeSeries("min");
chart1.removeSeries("max");
var legendTwo = new Legend({chart: chart1}, "legendTwo");
});
</script>
</head>
<body>
<div id="chart1" style="width: 600px; height: 600px;"> </div>
<div id="legendTwo"></div>
</body>
</html>
And i don't understand why the label and the legend doesn't print.
The remove is due to a bug of dojox.
Regards
Bussiere
I may be misunderstanding your issue, but since you are using the old module loading style (dojo.require), you need the full name of the Legend class:
var legendTwo = new dojox.charting.widget.Legend({chart: chart1}, "legendTwo");
Related
I want to find out buildings inside a runtime-drawed polygon.
And fill with green color.
I try to archive it with feature state and case expression. When I find out those features that inside the polygon in some way, I still can't execute the map.setFeatureState, cause the first parameter need (feature object) need a specified id, however, the feature that created by composite source hasn't set id, also looks there is no way to set 'generateId:true'.
Is there any alternate way to achieve the purpose?
in the follow snippet,there is a polygon draw tool on the top-right,draw a polygon and double click to end of draw, then you will find the error alerted in the console.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css" rel="stylesheet" />
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.0/mapbox-gl-draw.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#turf/turf#5/turf.min.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.0/mapbox-gl-draw.css" type="text/css" />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken =
"pk.eyJ1IjoibWluem9qaWFuIiwiYSI6ImNrbGFsem92MjAxaHAycG1sbGg3MXFsODAifQ.Kclz1IBxyU0iDiVgIjhSYQ";
var map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mapbox/streets-v11"
});
var map = new mapboxgl.Map({
style: "mapbox://styles/mapbox/light-v10",
center: [-73.991, 40.735],
zoom: 15.5,
pitch: 45,
bearing: -17.6,
container: "map",
antialias: true
});
var draw = new MapboxDraw({
displayControlsDefault: false,
controls: {
polygon: true,
trash: true
}
});
map.addControl(draw);
map.on("draw.create", updateArea);
map.on("draw.delete", updateArea);
map.on("draw.update", updateArea);
function updateArea(e) {
if (map.getLayer("maine")) map.removeLayer("maine");
if (map.getSource("data-area")) map.removeSource("data-area");
map.addSource("data-area", {
type: "geojson",
data: draw.getAll()
});
//get features in polygon
lastInAreaFeatures = map
.queryRenderedFeatures({
layers: ["3d-buildings"]
})
.filter(function(t) {
return turf.booleanContains(
turf.polygon(draw.getAll().features[0].geometry.coordinates),
t.geometry.type == "MultiPolygon" ?
turf.polygon([t.geometry.coordinates[0][0]]) :
turf.polygon([t.geometry.coordinates[0]])
);
});
//try to update state,and set in-area equals true. so that the condition paint logic will work in the bellow "3d-buildings" layer
//////however,the follow code can't work because the id of feature is undefined
///// 'Error: The feature id parameter must be provided.' will alerted in console
lastInAreaFeatures.forEach(function(f) {
map.setFeatureState(f, {
"in-area": true
});
});
console.log(lastInAreaFeatures);
draw.deleteAll();
}
var lastInAreaFeatures;
// The 'building' layer in the mapbox-streets vector source contains building-height
// data from OpenStreetMap.
map.on("load", function() {
map.addLayer({
id: "3d-buildings",
source: "composite",
"source-layer": "building",
filter: ["==", "extrude", "true"],
type: "fill-extrusion",
minzoom: 15,
paint: {
"fill-extrusion-color": [
"case", ["==", ["feature-state", "in-area"], true],
"green",
"#aaa"
],
"fill-extrusion-height": [
"interpolate", ["linear"],
["zoom"],
15,
0,
15.05, ["get", "height"]
],
"fill-extrusion-base": [
"interpolate", ["linear"],
["zoom"],
15,
0,
15.05, ["get", "min_height"]
],
"fill-extrusion-opacity": 0.6
}
});
});
</script>
</body>
</html>
I want to place a TextView SAPUI5 control in the status div followed by the salesorder div. Initially the TextView placement is commented. When I uncomment it the following salesorder table is not visible anymore and the TexView control still shows the initial value ("status").
This is the app.js:
var ODataModel = sap.ui.model.odata.ODataModel,
TextView = sap.ui.commons.TextView,
Label = sap.ui.commons.Label,
DataTable = sap.ui.table.DataTable,
Toolbar = sap.ui.commons.Toolbar,
Button = sap.ui.commons.Button,
Column = sap.ui.table.Column,
Right = sap.ui.commons.layout.HAlign.Right,
Begin = sap.ui.commons.layout.HAlign.Begin,
SelectionMode = sap.ui.table.SelectionMode;
var salesOrderService =
"/sap/opu/odata/sap/ZGW100_00_SO_SRV",
asJson = false,
salesOrderModel = new ODataModel(salesOrderService, asJson),
salesOrderCollection = "SalesOrderCollection";
var oTextView = new sap.ui.commons.TextView();
oTextView.setText("A simple text to be displayed.");
oTextView.setTooltip("Some Tooltip");
//oTextView.placeAt("status");
var salesOrders = new DataTable({
title: "title",
width: "600px",
visibleRowCount: 20,
toolbar: toolbar,
selectionMode: SelectionMode.None,
editable: false
});
var salesOrderColumns = [
{ header: "Sales Order ID", value: "{SalesOrderID}", width: '100px' },
{ header: "Customer Name", value: "{CustomerName}", width: '100%' },
{ header: "Net", value: "{NetSum}", width: '100px', hAlign: Right },
{ header: "Tax", value: "{Tax}", width: '100px', hAlign: Right },
{ header: "Total", value: "{TotalSum}", width: '100px', hAlign: Right }
];
salesOrderColumns.forEach(function (options) {
var label = new Label({ text: options.header }),
template = new TextView({ text: options.value }),
column = new Column({
label: label,
template: template,
width: options.width,
hAlign: options.hAlign || Begin
});
salesOrders.addColumn(column);
});
salesOrders.setModel(salesOrderModel);
salesOrders.bindRows(salesOrderCollection);
salesOrders.placeAt("salesorders");
This is the index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<title>Node.js calling SAP Gateway</title>
<script id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_goldreflection"
data-sap-ui-libs="sap.ui.commons, sap.ui.table"></script>
<script src="app.js"></script>
</head>
<body class="sapUiBody">
<img src="images/watson.png" />
<div class=”main-container”>
<div id=”status”>status</div>
<div id="salesorders"></div>
</div>
</body>
</html>
I'm using google chart in my page but the legend text is Overlapped, as the image bellow:
This is my code:
var dataTable = new google.visualization.DataTable();
dataTable.addColumn("date", "Data");
dataTable.addColumn("number", "Ton./Hora");
dataTable.addColumn("number", "Ton./Hora Equiv.");
dataTable.addColumn("number", "Peso (Ton.)");
for (var i = 0; i < dados.length; i++) {
var temp = new Date(dados[i].DT_FIM);
dataTable.addRow([new Date(temp.getFullYear(), temp.getMonth())
,dados[i].TON_HORA
,dados[i].TON_HORA_EQUIV
,dados[i].PES_LIQUI_UNMET]);
}
var date_formatter = new google.visualization.DateFormat({
pattern: "MMM/yyyy"
});
date_formatter.format(dataTable, 0);
var options = {
hAxis: {title: 'Período (mês/ano)'},
series: {0: {type: 'line', targetAxisIndex:0},
1: {type: 'line', targetAxisIndex:0},
2: { type: 'bars', targetAxisIndex: 1 }
},
legend: { position: "top", textStyle: { fontSize: 14 } },
width: 1200,
height: 500
};
var chart = new google.visualization.ComboChart(document.getElementById("div-Equipamento-Produtividade"));
chart.draw(dataTable, options);
My charts is on bootstrap tab nav:
<div id="div-Graficos" class="panel-collapse in">
<div class="panel-body">
<ul id="tab-Graficos" class="nav nav nav-tabs nav-justified" role="tablist">
<li role="presentation" class="active">Equipamento - OEE</li>
<li role="presentation">Equipamento - T2</li>
<li role="presentation">Equipamento - Produtividade</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="div-Grafico-OEE">
<div id="div-Equipamento-OEE" style="width: 900px; height: 500px"></div>
</div>
<div role="tabpanel" class="tab-pane fade" id="div-Grafico-T2">
<div id="div-Equipamento-T2" style="width: 900px; height: 500px"></div>
</div>
<div role="tabpanel" class="tab-pane fade" id="div-Grafico-Produtividade">
<div id="div-Equipamento-Produtividade" style="width: 1200px; height: 500px"></div>
</div>
</div>
</div>
</div>
I tried to change the position to "bottom" but the problem continue
What i'm making wrong?
check that the chart is not being drawn while hidden
see the following snippet, the chart is hidden by default,
then shown once the chart's 'ready' event fires
notice, it produces the same result as posted in the question...
google.charts.load('current', {
callback: function () {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn("date", "Data");
dataTable.addColumn("number", "Ton./Hora");
dataTable.addColumn("number", "Ton./Hora Equiv.");
dataTable.addColumn("number", "Peso (Ton.)");
for (var i = 0; i < 12; i++) {
var temp = new Date();
dataTable.addRow([new Date(temp.getFullYear(), i)
,(i + 2) * 6
,(i + 1) * 12
,(i + 0) * 18]);
}
var date_formatter = new google.visualization.DateFormat({
pattern: "MMM/yyyy"
});
date_formatter.format(dataTable, 0);
var options = {
hAxis: {title: 'Período (mês/ano)'},
series: {0: {type: 'line', targetAxisIndex:0},
1: {type: 'line', targetAxisIndex:0},
2: { type: 'bars', targetAxisIndex: 1 }
},
legend: { position: "top", textStyle: { fontSize: 14 } },
width: 1200,
height: 500
};
var container = document.getElementById("div-Equipamento-Produtividade");
var chart = new google.visualization.ComboChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
container.style.display = null;
});
chart.draw(dataTable, options);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="div-Equipamento-Produtividade" style="display: none;"></div>
however, if the container is shown before drawing the chart,
the legend turns out nicely...
google.charts.load('current', {
callback: function () {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn("date", "Data");
dataTable.addColumn("number", "Ton./Hora");
dataTable.addColumn("number", "Ton./Hora Equiv.");
dataTable.addColumn("number", "Peso (Ton.)");
for (var i = 0; i < 12; i++) {
var temp = new Date();
dataTable.addRow([new Date(temp.getFullYear(), i)
,(i + 2) * 6
,(i + 1) * 12
,(i + 0) * 18]);
}
var date_formatter = new google.visualization.DateFormat({
pattern: "MMM/yyyy"
});
date_formatter.format(dataTable, 0);
var options = {
hAxis: {title: 'Período (mês/ano)'},
series: {0: {type: 'line', targetAxisIndex:0},
1: {type: 'line', targetAxisIndex:0},
2: { type: 'bars', targetAxisIndex: 1 }
},
legend: { position: "top", textStyle: { fontSize: 14 } },
width: 1200,
height: 500
};
var container = document.getElementById("div-Equipamento-Produtividade");
container.style.display = null;
var chart = new google.visualization.ComboChart(container);
chart.draw(dataTable, options);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="div-Equipamento-Produtividade" style="display: none;"></div>
Every framework or code that hides the chart DIV using "display: none" will make legends to overlap when the chart is draw inside an inactive DIV.
Hidding the chart DIV with "visibility: hidden" works fine, with no overlapping.
I had this issue and only solved it coding the NAV features by myself, without using Bootstrap/JQuery/etc...
I have a google spreadsheet with with 5 columns in it. column 0 is the title column and the other four have the values.
I want to do a different column chart (using google charts API) for each of the four value columns, but I can't hide the other columns. When I use
chartview1.setColumns([ 0, 1 ]);
it works fine! But when I do
chartview2.setColumns([0, 2 ]);
I get the error:
Invalid column index 2. Should be an integer in the range [0-1]
Similarly, when I do tableview2.setColumns([ 0, 2]); and then implement the dataView as a table (rather than a columnChart)
it works fine and hides the other columns.
Can anyone tell me what I am doing wrong? I can provide the full code if necessary.
I tried using the method outlined here :
how to hide column in google charts table
but this doesn't work for me.
Thanks
UPDATE: Here is the full code:
<html>
<head>
<meta charset="UTF-8">
<title>Service Desk Performance (Weekly)</title>
<style>
h2 {
font-family:"helvetica",arial, sans-serif;
}
.tableHeader {
background:transparent;
}
.tableHeader th {
background-image:none !important;
background:#ccc !important;
color:#fff !important;
border-bottom:2px solid #222 !important;
}
.tableRow {
background:#e9e9e9;
}
</style>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart", "table"]});
function initialize() {
var opts = {sendMethod: 'auto'};
// Replace the data source URL on next line with your data source URL.
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1c6r2xi4eY4iGcgWCRQcPce8A79OhDN4v5khkkC2WFVM/edit?usp=sharing', opts);
-
// Optional request to return only column C and the sum of column B, grouped by C members.
//query.setQuery('select C, sum(B) group by C');
// Send the query with a callback function.
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var chartview1 = new google.visualization.DataView(data);
var tableview1 = new google.visualization.DataView(data);
var chartview2 = new google.visualization.DataView(data);
var tableview2 = new google.visualization.DataView(data);
var chartview3 = new google.visualization.DataView(data);
var tableview3 = new google.visualization.DataView(data);
var chartview4 = new google.visualization.DataView(data);
var tableview4 = new google.visualization.DataView(data);
chartview1.setColumns([ 0, 1 ]);
tableview1.setColumns([ 0, 1 ]);
chartview2.setColumns([ 0, 2 ]);
tableview2.setColumns([ 0, 2 ]);
chartview3.setColumns([ 0, 3 ]);
tableview3.setColumns([ 0, 3 ]);
chartview4.setColumns([ 0, 4 ]);
tableview4.setColumns([ 0, 4 ]);
var test= chartview2.getNumberOfColumns();
console.log(test);
var chartOptions = {
vAxis: {
title: 'Requests',
gridlines: {color: 'transparent'},
baseline:0
},
chartArea: {
left:100,
top:40,
width:"100%"
},
hAxis: { title: 'Assignee Group' },
colors: [ '#00ccff', '#afafaf' ],
animation: {
startup: true,
duration: 500,
easing: 'in'
},
legend: {position:'none'}
};
var tableOptions = {
showRowNumber: false,
right:100,
top:40,
width: '100%',
alternatingRowStyle: false,
cssClassNames: {
headerRow: 'tableHeader',
tableRow: 'tableRow',
tableCell: 'tableCell'
}
};
var chart1 = new google.visualization.ColumnChart(document.getElementById('chart1'));
var table1 = new google.visualization.Table(document.getElementById('table1'));
chart1.draw(chartview1, chartOptions);
table1.draw(tableview1, tableOptions);
var chart2 = new google.visualization.ColumnChart(document.getElementById('chart2'));
var table2 = new google.visualization.Table(document.getElementById('table2'));
chart2.draw(chartview2, chartOptions);
table2.draw(tableview2, tableOptions);
var chart3 = new google.visualization.ColumnChart(document.getElementById('chart3'));
var table3 = new google.visualization.Table(document.getElementById('table3'));
chart3.draw(chartview3, chartOptions);
table3.draw(tableview3, tableOptions);
var chart4 = new google.visualization.ColumnChart(document.getElementById('chart4'));
var table4 = new google.visualization.Table(document.getElementById('table4'));
chart4.draw(chartview4, chartOptions);
table4.draw(tableview4, tableOptions);
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<h2>Week 1</h2>
<div class="row">
<div style="float:left;width:70%;">
<div id="chart1" style="width:100%; height:600px;position:relative;"></div>
</div>
<div style="float:right;width:30%;">
<div id="table1" style="width:100%;margin:10px 40px 0 0;"></div>
</div>
<div style="clear:both"></div>
</div>
<hr>
<h2>Week 2</h2>
<div class="row">
<div style="float:left;width:70%;">
<div id="chart2" style="width:100%; height:600px;position:relative;"></div>
</div>
<div style="float:right;width:30%;">
<div id="table2" style="width:100%;margin:10px 40px 0 0;"></div>
</div>
<div style="clear:both"></div>
</div>
<h2>Week 3</h2>
<div class="row">
<div style="float:left;width:70%;">
<div id="chart3" style="width:100%; height:600px;position:relative;"></div>
</div>
<div style="float:right;width:30%;">
<div id="table3" style="width:100%;margin:10px 40px 0 0;"></div>
</div>
<div style="clear:both"></div>
</div>
<hr>
<h2>Week 4</h2>
<div class="row">
<div style="float:left;width:70%;">
<div id="chart4" style="width:100%; height:600px;position:relative;"></div>
</div>
<div style="float:right;width:30%;">
<div id="table4" style="width:100%;margin:10px 40px 0 0;"></div>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>
I have had very similar issues to this - I create a 5 column DataTable from an array of analytic data and then dynamically construct a DataView in order to hide different sets of columns as and when the user chooses options on the page and finally display as an AreaChart. I found that hiding the last 2 columns using either view.hideColumns([3,4]) or view.setColumns([0,1,2]) works ok, but any attempt to hide a column that results in a non-contiguous set of column indices results in a failure of the AreaChart to display the result - it sounds like your ColumnChart has exactly the same issue.
The only solution I've discovered thus far is to make a copy of the view after the columns have been hidden. This creates a new view which has contiguous column indices and which will correctly populate the chart. It shouldn't be necessary, but I can't find any other way around the issue so far.
So in your case:
// create view and hide unwanted columns as before
var chartview2 = new google.visualization.DataView(data);
chartview2.setColumns([ 0, 2 ]);
// make a copy of the view to create contiguous index set
var chartview2_copy = new google.visualization.DataView(chartview2);
// use the view copy with the ColumnChart
var chart2 = new google.visualization.ColumnChart(document.getElementById('chart2'));
chart2.draw(chartview2_copy, chartOptions);
This isn't pretty, but it worked for me, so perhaps the same will solve your issues also.
Good day, I have a google column chart and work perfectly but when I re size my browser the column chart overflowed and wont re size. my website is responsive and I dont want to put my bar chart like that. how to get my column chart responsive?
I got this column chart from developers.google.com/chart/interactive/docs/gallery/columnchart
here is the code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title><?php echo $title;?></title>
<!-- Load Google chart api -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
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',
},
bars: 'vertical',
vAxis: {format: 'decimal'},
height: 400,
colors: ['#1b9e77', '#d95f02', '#7570b3']
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
var btns = document.getElementById('btn-group');
btns.onclick = function (e) {
if (e.target.tagName === 'BUTTON') {
options.vAxis.format = e.target.id === 'none' ? '' : e.target.id;
chart.draw(data, google.charts.Bar.convertOptions(options));
}
}
}
</script>
</head>
<body>
<div id="chart_div" style="width:100%;"></div>
<br/>
<div id="btn-group">
<button class="button button-blue" id="none">No Format</button>
<button class="button button-blue" id="scientific">Scientific Notation</button>
<button class="button button-blue" id="decimal">Decimal</button>
<button class="button button-blue" id="short">Short</button>
</div>
</body>
</html>
I tried also to add width="100%" from div but its doesn't work at all.
Currently, the problem with Google Charts is that it doesn't have a responsive feature.
From previous explorations over the web, the best solution that I found and implemented was:
$(window).resize(function () {
drawChart();
});
This piece of code calls the drawChart() function each time the browser window is resized. Therefore, this means that the Chart is redrawn each time. This may not be the best or efficient solution, but for me it did the job.
In order to allow the .resize() function, you will require the jQuery Library. More information for this is available here.