I have a spatial field in my Django model. I want to display this field on a map. How to do it? It works just fine in Django Admin with Django built-in OSMWidget and OpenLayers.
If I try to access the spatial field in my template it is of this format:
SRID=4326;GEOMETRYCOLLECTION (POLYGON ((54.57842969715517 23.34800720214843, 54.53144199643833 23.29547882080078, 54.52964902093564 23.38096618652343, 54.57444978782305 23.40499877929688, 54.57842969715517 23.34800720214843)))
The format is WKT (Well Known Text), and with OL you just need to use ol.format.WKT to read all or individual features (OL API - WKT format).
I put this example for you, based on OL example OL Examples - WKT. I wanted to show a particularity or GEOMETRYCOLLECTION that it can contain different types of geometry, witch is not always wanted.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.3.1/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.3.1/build/ol.js"></script>
<title>WKT Geometry</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
const wkt = 'GEOMETRYCOLLECTION('+
'MULTIPOINT(-2 3 , -2 2),'+
'LINESTRING(5 5 ,10 10),'+
'POLYGON((-7 4.2,-7.1 5,-7.1 4.3,-7 4.2)))';
const format = new ol.format.WKT();
const features = format.readFeatures(wkt, {
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857'
});
const vector = new ol.layer.Vector({
source: new ol.source.Vector({
features
}),
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: '#ff3333',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ff3333'
})
})
})
});
const map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vector
],
view: new ol.View({
center: ol.proj.fromLonLat([0, 5]),
zoom: 5
})
});
</script>
</body>
</html>
Related
The legend labels are not in the DOM when using time series data.
I have around 1500 data points. Here is reduced it to 3 because it seems like the amount of data points is not the cause of the issue.
Is this a bug or did I misconfigure something?
I also tried using a separate div for the legend (like described here but it seems to have no effect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AmCharts</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="http://cdn.date-fns.org/v2.0.0-alpha0/date_fns.min.js"></script>
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<style>
html, body {
font-size: 16px;
}
#chartdiv,
#legenddiv {
width: 100%;
height: 500px;
border: 1px dotted #c99;
margin: 1em 0;
}
#legenddiv {
height: 150px;
}
</style>
</head>
<body>
<div id="chartdiv"></div>
Legend:
<div id="legenddiv"></div>
<script src="./main.js"></script>
</body>
</html>
am4core.ready(function () {
am4core.useTheme(am4themes_animated); // theming
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.data = [{
"date": 1574861644000,
"value": 13505
},
{
"date": 1574861645000,
"value": 13505
},
{
"date": 1574861645000,
"value": 13492
}];
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.baseInterval = { timeUnit: "second", count: 1 };
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "value";
series.dataFields.dateX = "date";
series.tooltipText = "{value}";
series.tooltip.pointerOrientation = "vertical";
chart.cursor = new am4charts.XYCursor();
chart.cursor.snapToSeries = series;
chart.cursor.xAxis = dateAxis;
// create a legend for the sensors
chart.legend = new am4charts.Legend();
let legendContainer = am4core.create("legenddiv", am4core.Container);
legendContainer.width = am4core.percent(100);
legendContainer.height = am4core.percent(100);
chart.legend.parent = legendContainer;
}); // end am4core.ready()
By default the legend will look at the series' name property to use as the legend label as documented here. Adding this to your series will fix the problem, e.g. series.name = "Series #1"
I just can't figure out why is there allways at least one category missing from my chart:
This does not happen when I switch chart type to type:'pie'.
Please find my code below:
<!DOCTYPE html>
<html>
<body>
<div style="width: 40%;">
<canvas id="polarAreaChart " width="400" height="400"></canvas>
</div>
<script>
var ctx = document.getElementById("polarAreaChart ");
var polarAreaChart = new Chart(ctx, {
type: 'polarArea',
options: {
legend: {
display: true,
position: 'bottom',
}
},
data: {
labels: ["D1","D2","D3"],
datasets: [{
label: 'Dimensiones',
data: [40, 20, 40],
backgroundColor: [
"#f8b195",
"#c06c84",
"#6c5b7b"
]
}]
}
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script>
</body>
</html>
Any comments will help.
Cheers!
Apparently it was just a bug.
Solved it by using a more recent version of Chartjs:
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js
I'm new here, referred by a friend. I'm working with Google Charts, connecting to a Google sheet. I've got the chart working fine. The next step is adding a toolbar to the bottom of it. BUT, I cannot get the code to work, no matter what. I've even tried copying and pasting Google's example code into a blank page just to test, but I can't even get their example to show. Is there something missing from the documentation that's preventing this?
Here's my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!-- datasheet link https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/edit?usp=sharing
https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/pubhtml
-->
<!--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 piechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawAll() {drawChart(); drawToolbar();}
function drawChart() {
var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:E5");
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
var data = response.getDataTable();
var options = {
'title':'College Readiness',
'titleTextStyle': {fontSize: '24', color: 'teal'},
//'width':800,
'height':600,
hAxis: {'title': 'Academic Year', 'textStyle': {bold: true, fontSize: '16'}},
vAxis: {'title': 'Percent of Students Ready', 'format': 'percent','textStyle': {color: 'gray', fontSize: '9'}},
legend: {'position': 'top'},
series: {
0: {pointsVisible: true, color: 'orange'},
1: {pointsVisible: true, color: 'blue'},
2: {pointsVisible: true, color: 'black'},
3: {pointsVisible: true, pointShape: 'square', pointSize: '14', color: 'maroon'}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
//chart.draw(data, options);
function drawToolbar() {
var components = [
{type: 'html', datasource: 'https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:E5'},
{type: 'csv', datasource: 'https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:E5'}
];
var container = document.getElementById('toolbar_div');
google.visualization.drawToolbar(container, components);
};
google.charts.setOnLoadCallback(drawAll);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
<div id="toolbar_div"></div>
</body>
</html>
Seems to work here, with a couple minor adjustments.
Typically, setOnLoadCallback should only be called once per page.
Which was most likely the problem.
Here, I have defined the callback in the load statement.
// Load the Visualization API and the piechart package.
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:E5");
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
var data = response.getDataTable();
var options = {
'title':'College Readiness',
'titleTextStyle': {fontSize: '24', color: 'teal'},
//'width':800,
'height':600,
hAxis: {'title': 'Academic Year', 'textStyle': {bold: true, fontSize: '16'}},
vAxis: {'title': 'Percent of Students Ready', 'format': 'percent','textStyle': {color: 'gray', fontSize: '9'}},
legend: {'position': 'top'},
series: {
0: {pointsVisible: true, color: 'orange'},
1: {pointsVisible: true, color: 'blue'},
2: {pointsVisible: true, color: 'black'},
3: {pointsVisible: true, pointShape: 'square', pointSize: '14', color: 'maroon'}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
var components = [
{type: 'html', datasource: 'https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:E5'},
{type: 'csv', datasource: 'https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:E5'}
];
var container = document.getElementById('toolbar_div');
google.visualization.drawToolbar(container, components);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="toolbar_div"></div>
<div id="chart_div"></div>
I did compare my code to the example code from Google and I couldn't find anything different. I have no idea why my chart only display 2 data columns instead of 3. Is it because of my browser (I'm using Chrome) ? I tried with IE and had the same problem.
Google's example code:Example
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Chart</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('visualization', '1', {packages: ['corechart']});</script>
<script type="text/javascript">
function drawVisualization2() {
var data = google.visualization.arrayToDataTable([
['Day', 'V5161.198', 'V5161.200', 'V5161.202'],
['27/09/2013', 4.0, 9.0, 4.0],
['29/09/2013', 5.0, 8.0, 4.0]
]);
var options = {title : 'Daily usage of heaters',
vAxis: {title: "Minutes"},
hAxis: {title: "day"},
seriesType: "bars",
series: {2: {type: "line"}} // This is not the root of the problem. If I change it to 3, the chart can be displayed normally but it will not have the average line anymore.
};
var chart = new google.visualization.ComboChart(document.getElementById('chart2_div'));chart.draw(data, options);}google.setOnLoadCallback(drawVisualization2);
</script>
</head>
<body>
<div id="chart2_div" style="width: 1100px; height: 500px;"></div>
</body>
</html>
Can anyone give me an advise ?
Thank you very much.
You say in the comments of your code on this line: series: {2: {type: "line"}}
This is not the root of the problem. If I change it to 3, the chart can be displayed normally but it will not have the average line anymore.
The Orange Line is not an average of the values of the three fields. It is the third column of data formatted as a line (not a bar). If you want to have an average line, this code works:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Chart</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('visualization', '1', {packages: ['corechart']});</script>
<script type="text/javascript">
function drawVisualization2() {
var data = google.visualization.arrayToDataTable([
['Day', 'V5161.198', 'V5161.200', 'V5161.202'],
['27/09/2013', 4.0, 9.0, 4.0],
['29/09/2013', 5.0, 8.0, 4.0]
]);
data.addColumn('number', 'Average');
var average = 0;
for (var i = 0; i < data.getNumberOfRows(); i++){
average = 0;
for (var j = 1; j < data.getNumberOfColumns(); j++){
average = average + data.getValue(i, j);
}
average = average / 3;
data.setValue(i,4,average);
}
var options = {title : 'Daily usage of heaters',
vAxis: {title: "Minutes"},
hAxis: {title: "day"},
seriesType: "bars",
series: {3: {type: "line"}} // This is not the root of the problem. If I change it to 3, the chart can be displayed normally but it will not have the average line anymore.
};
var chart = new google.visualization.ComboChart(document.getElementById('chart2_div'));chart.draw(data, options);}google.setOnLoadCallback(drawVisualization2);
</script>
</head>
<body>
<div id="chart2_div" style="width: 1100px; height: 500px;"></div>
</body>
</html>
I'm trying to implment this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <base href="http://<?=$_SERVER['HTTP_HOST'];?>/" /> </head> </html> <body> <script language="javascript" type="text/javascript" src="http://www.google.com/jsapi"></script> <script type='text/javascript'> google.load('visualization', '1', { 'packages': ['geochart'] }); var dataRows; var mapOptions = { colors: ['#FF6F28', '#FFD7C4'], backgroundColor: {
stroke: '#ffffff',
strokeWidth: 0,
fill: '#ffffff' }, width: 500, height: 312, region: 'US', resolution: 'provinces' }; dataRows = [['UT',0],['Texas',1],['California',2],['New York',3]];
function initGlobalMap() { var mapData = new google.visualization.DataTable(); mapData.addColumn('string', 'Region'); mapData.addColumn('number', 'ID'); mapData.addRows(dataRows); var geochart = new google.visualization.GeoChart(document.getElementById('chart_geo2')); google.visualization.events.addListener(geochart, 'select', function () {
var selection = geochart.getSelection();
var id = mapData.getValue(selection[0].row, 1);
window.location = '/uploadedFiles/Code/GoogleGeoChartApi.aspx?id=' + id; }); geochart.draw(mapData, mapOptions); } google.setOnLoadCallback(initGlobalMap); </script> <div id='chart_geo2'></div> </body>
With firefox 10, doesn't works tooltips.
The problem is base tag, if I remove base tag it works fine.
But i need the base tag.
Any solution?
Place the chart into iframe without base tag.