Related
Using the locally downloaded version of jqGrid 4.15.5 the paginator images are not visible and the table colors are gray.
Using version with links http://cdnjs... of jqGrid 4.15.5 the paginator images are visible and the table colors are ok.
Html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<!--link rel="stylesheet" type="text/css" href="jquery-ui-1.12.1.min.css"/>
<link rel="stylesheet" type="text/css" href="ui.jqgrid.min.css"/>
<link rel="stylesheet" type="text/css" href="ui.multiselect.min.css"/>
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.12.1.min.js"></script>
<script type="text/javascript" src="jquery.jqgrid.min.js"></script>
<script type="text/javascript" src="ui.multiselect.js"></script-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script>
<script>
$(document).ready(function(){
'use strict';
$("#jqgrid").jqGrid({
colModel: [
{
name: 'Code',
width: 15
},
{
name: 'Description',
width: 70
}
],
sortname: 'Code',
sortorder: 'asc',
width: $(window).width() - 50,
height: 130,
rowNum: 5,
rownumbers: true,
pager: "#jqGridPager",
viewrecords: true,
data: [
{Code: 'Code1', Description: 'Description1'},
{Code: 'Code1', Description: 'Description1'},
{Code: 'Code1', Description: 'Description1'},
{Code: 'Code1', Description: 'Description1'},
{Code: 'Code1', Description: 'Description1'},
{Code: 'Code1', Description: 'Description1'},
{Code: 'Code1', Description: 'Description1'},
{Code: 'Code1', Description: 'Description1'},
{Code: 'Code1', Description: 'Description1'},
{Code: 'Code1', Description: 'Description1'},
{Code: 'Code1', Description: 'Description1'},
{Code: 'Code1', Description: 'Description1'},
{Code: 'Code1', Description: 'Description1'},
{Code: 'Code1', Description: 'Description1'}
],
onSelectRow:{
}
});
$('#jqgrid').jqGrid('filterToolbar',{
stringResult: true,
searchOperators: true
});
$(window).resize(function() {
$('#jqgrid').jqGrid('setGridWidth', parseInt($(window).width()) - 50);
});
});
</script>
</head>
<body>
<div>
<table id="jqgrid"></table>
<div id="jqGridPager"></div>
</div>
</body>
</html>
Plugins locally downloaded are:
jquery-3.5.1.min.js
jquery-ui-1.12.1.min.js
jquery-ui-1.12.1.min.css
jquery.jqgrid.min.js
ui.jqgrid.min.css
ui.multiselect.js
ui.multiselect.min.css
So, what am I doing wrong?
Thanks.
Hi I want to generate a heatmap from a .geojson file with this plugin
How can I manage that? I'm very new to json, leaflet and web development.
The geoJSON file I have looks something like this (with more points ofc):
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "testmarker",
"description": "This is a test description"
},
"geometry": {
"type": "Point",
"coordinates": [
-33.134766,
-60.326948
]
}
},
{
"type": "Feature",
"properties": {
"name": "testmarker2"
},
"geometry": {
"type": "Point",
"coordinates": [
-41.220703,
-62.552857
]
}
}
]
}
And here is what my index.html looks like right now.
<!DOCTYPE html>
<html = style="height: 100%;">
<head>
<title>Test Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="scripts/leaflet.css">
<script src="scripts/leaflet.js"></script>
<script src="scripts/leaflet.ajax.min.js"></script>
<script src="scripts/leaflet-heat.js"></script>
</head>
<body style="height: 100%;margin: 0;">
<div id="map" style="width: 100%; height: 100%; background: #000000;"></div>
<!-- Workaround for 1px lines appearing in some browsers due to fractional transforms
and resulting anti-aliasing.-->
<style>
.leaflet-tile-container img {
width: 256.5px !important;
height: 256.5px !important;
}
</style>
<script type="text/javascript">
// Creating the Map
var map = L.map('map').setView([58.602611, 50.350342], 4);
L.tileLayer('maps/mymap/{z}/{x}/{y}.png', {
continuousWorld: false,
noWrap: true,
minZoom: 2,
maxZoom: 6,
zoomControl: false,
minNativeZoom: 2,
maxNativeZoom: 6,
updateInterval: 200,
}).addTo(map);
// Remove old zoomControl and add new one in order to move it to bottomright
map.zoomControl.remove();
L.control.zoom({
position: 'bottomright'
}).addTo(map);
// Binds tooltip on all markers and also a popup on click if the markers has a description
function oef(feature, layer) {
if (feature.properties && feature.properties.name) {
layer.bindTooltip(feature.properties.name);
}
if (feature.properties && feature.properties.name && feature.properties.description) {
layer.bindPopup("<center><b> " + feature.properties.name + "</center></b><br>" + feature.properties.description);
}
}
var geojsonMarkers = new L.GeoJSON.AJAX(["https://raw.githubusercontent.com/***/test.geojson"],{onEachFeature:oef});
var mapOverlays={
"Test" : geojsonMarkers,
//"Test - Heat Map" : geojsonMarkersHeat,
}
var layerControl = L.control.layers(null, mapOverlays, {position:'topleft'}).addTo(map);
</script>
</body>
</html>
As you can see from above I want the heatmap to be toggleable via the mapOverlays but I don't really know how to proceed.
I want to add a png icon to a mapbox map from any publicly available online source.
I'm trying to use this example here from mapbox.com, which uses a png from wikimedia:
https://docs.mapbox.com/mapbox-gl-js/example/add-image/
This is the png they use:
https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png
I can swap it out from anything at Wikimedia, but not anything else. For example, swap the link out with this one, and it doesn't appear:
https://www.thenittygritty.org/coronavirus/circle1.png
What am I missing here??
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Add an icon to the map</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css" rel="stylesheet" />
<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.eyJ1Ijoibml0dHlqZWUiLCJhIjoid1RmLXpycyJ9.NFk875-Fe6hoRCkGciG8yQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11'
});
map.on('load', function() {
map.loadImage(
'https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png',
function(error, image) {
if (error) throw error;
map.addImage('cat', image);
map.addSource('point', {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [0, 0]
}
}
]
}
});
map.addLayer({
'id': 'points',
'type': 'symbol',
'source': 'point',
'layout': {
'icon-image': 'cat',
'icon-size': 0.25
}
});
}
);
});
</script>
</body>
</html>
The problem lies with the CORS settings of your browser. When I allow CORS, the image loads just fine.
Error:
Access to fetch at
'https://www.thenittygritty.org/coronavirus/circle1.png' from origin
'null' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource. If an opaque response serves your needs, set the request's
mode to 'no-cors' to fetch the resource with CORS disabled.
What is CORS: https://en.wikipedia.org/wiki/Cross-origin_resource_sharing
You can try this Chrome extension to allow CORS:
https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en
PDF Outputs
I am new to DOJO charts and in one of the requirement, we have to convert Dojo Chart to PDF.
To achieve this we have used "JSPDF" and "html2canvas" libraries.
It is working fine in Google Chrome and not in IE11.
Kindly suggest.
Regards,
Byreddy
Here is my code....
PDF Test
<div data-dojo-type="dojox.charting.widget.Chart" id="chart1" style="width: 600px; height: 400px; background-color:white;"></div>
<div id="chart1SelectableLegend"></div>
<button id="pdfButton" onclick="convertPDF()">DownloadPDF</button>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js" data-dojo-config="isDebug:true, async:true"></script>
<script>
require(["dojox/charting/Chart",
"dojox/charting/plot2d/Lines",
"dojox/charting/axis2d/Default",
"dojox/charting/plot2d/StackedColumns",
"dojox/charting/action2d/Tooltip",
"dojo/ready",
"dojox/charting/widget/SelectableLegend", "dojox/gfx/utils",
],
function (Chart, Lines, Default, StackedColumns, Tooltip, ready, SelectableLegend, Utils) {
var chart1 = new Chart("chart1");
chart1.title = "stacked chart";
chart1.addPlot("stackedColumnsPlot", {
type: StackedColumns,
gap: 6,
lines: true,
areas: true,
markers: true,
labels: true,
labelStyle: "inside",
tension: "2"
});
chart1.addAxis("x", {
dropLabels: false,
labelSizeChange: true,
rotation: -20,
majorTicks: true,
majorTickStep: 1,
minorTicks: false,
font: "normal normal bold 12px Tahoma",
fontColor: "black",
labels: [{ "value": 1, "text": "A" }, { "value": 2, "text": "B" }, { "value": 3, "text": "C" }, { "value": 4, "text": "D" }, { "value": 5, "text": "E" }, { "value": 6, "text": "F" }]
});
chart1.addAxis("y", {
title: "Cost",
fixLower: "major",
fixUpper: "major",
includeZero: true,
majorTickStep: 500,
max: 1500,
vertical: true
});
chart1.addSeries("AC", [300, 500, 500, 600, 300, 280],
{
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF",
},
fill: "#FFAEAE "
});
chart1.addSeries("TV", [244, 301, 699, 620, 820, 837], {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#FFEC94"
});
chart1.addSeries("ACCE", [500, 100, 100, 100, 200, 250], {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#B4D8E7"
});
chart1.addSeries("OTHER", [100, 150, 100, 700, 700, 0, 800, 300, 300], {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#56BAEC"
});
chart1.render();
new SelectableLegend({
chart: chart1,
horizontal: true,
align: top
}, "chart1SelectableLegend");
});
</script>
<script>
function convertPDF() {
var pdf = new jsPDF('l', 'pt', 'letter');
html2canvas(document.getElementById('chart1'), {
//proxy: "https://html2canvas.appspot.com/query",
//useCORS: true,
onrendered: function (canvas) {
var img = canvas.toDataURL("image/jpeg");
pdf.addImage(canvas, 'JPEG', 15, 15);
pdf.save('PDFTest.pdf');
}
});
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script>
<script async="" src="https://cdn.rawgit.com/eligrey/FileSaver.js/62d219a0fac54b94cd4f230e7bfc55aa3f8dcfa4/FileSaver.js"></script>
<script src="JSRefs/html2canvas_0.5.0-alpha1.js"></script>
Here is the working sample, make a note of the listed important things in the code, which made the difference.
gfxRenderer: "canvas"
htmlLabels: false,
Below is the working code along with Tooltip functionality.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
<script>
dojoConfig = {
parseOnLoad: true, // enables declarative chart creation
gfxRenderer: "canvas" // canvas is first priority
};
</script>
<script src="https://js.arcgis.com/3.16/"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script>
<script src="html2canvas.js"></script>
<script>
function convertPDF() {
var pdf = new jsPDF('l', 'pt', 'letter');
html2canvas(document.getElementById('chart1'), {
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png");
pdf.addImage(img, 'PNG', 15, 15);
pdf.save('PDFTest.pdf');
}
});
}
</script>
<script>
require([
"dojox/charting/Chart",
"dojox/charting/plot2d/Lines",
"dojox/charting/axis2d/Default",
"dojox/charting/plot2d/StackedColumns",
"dojox/charting/action2d/Tooltip",
"dojox/charting/widget/SelectableLegend",
"dojox/gfx/utils",
"dojo/ready",
"dojo/domReady!"
], function (
Chart,
Lines,
Default,
StackedColumns,
Tooltip,
SelectableLegend,
Utils,
ready
) {
var chart1 = new Chart("chart1");
chart1.htmlLabels = false;
chart1.title = "Stacked Chart";
chart1.addPlot("stackedColumnsPlot", {
htmlLabels: false,
type: StackedColumns,
gap: 5,
lines: true,
areas: true,
markers: true,
labels: true,
labelOffset: -10,
labelStyle: "default",
tension: "2"
});
chart1.addAxis("x", {
dropLabels: false,
labelSizeChange: true,
rotation: -20,
majorTicks: true,
majorTickStep: 1,
minorTicks: false,
font: "normal normal bold 12px Tahoma",
fontColor: "black",
labels: [
{ "value": 1, "text": "A" },
{ "value": 2, "text": "B" },
{ "value": 3, "text": "C" },
{ "value": 4, "text": "D" },
{ "value": 5, "text": "E" },
{ "value": 6, "text": "F" }
]
});
chart1.addAxis("y", {
title: "Cost",
fixLower: "major",
fixUpper: "major",
includeZero: true,
majorTickStep: 500,
max: 1500,
vertical: true
});
chart1.addSeries("AC", [300, 500, 500, 600, 300, 280], {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#FFAEAE "
});
chart1.addSeries("TV", [244, 301, 699, 620, 820, 837], {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#FFEC94"
});
chart1.addSeries("ACCE", [500, 100, 100, 100, 200, 250], {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#B4D8E7"
});
chart1.addSeries("OTHER", [100, 150, 100, 700, 700, 80], {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#56BAEC"
});
new Tooltip(chart1, "stackedColumnsPlot", {
text: function(chartItem) {
// console.debug(chartItem);
//return "Rating: " + chartItem.run.data[chartItem.index] + "; Total Value: " + chartItem.y;
// return "Comparision Rating: " + chartItem.y;
return "Value: " + chartItem.run.data[chartItem.index] + "; Stacked Value: " + chartItem.y;
}
});
chart1.render();
new SelectableLegend({
chart: chart1,
horizontal: true,
align: top
}, "chart1SelectableLegend");
});
</script>
</head>
<body class="claro">
<div id="chart1" style="width: 600px; height: 400px;"></div>
<div id="chart1SelectableLegend"></div>
<button id="pdfButton" onclick="convertPDF()">DownloadPDF</button>
</body>
</html>
I want to draw a line chart with Chart.js, I followed the 'Getting started' section of Chart.js but I still am not able to draw even the example chart. What is wrong with my code? According to NetBeans it's all ok ..
Here's the code:
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Become a member</title>
<script type="text/javascript" src="Chart.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
window.onLoad = function() {
init();
};
function init() {
var ctx = $("#myChart").get(0).getContext("2d");
var myNewChart = new Chart(ctx).Line(data, options);
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: [65, 59, 90, 81, 56, 55, 40]
},
{
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
data: [28, 48, 40, 19, 96, 27, 100]
}
]
}
}
</script>
<div>
<section>
<article>
<canvas id="myChart" width="400" height="400">
</canvas>
</article>
</section>
</div>
</body>
</html>
Any help is more than welcome!
Link to the plug-in -> http://www.chartjs.org/docs/
Kind regards
Glenn
It's been I while since you asked this question. I hope you have found the answer. If not, I am attaching a sample code to generate a simple "Line chart" using Chart.js. If you run this code snippet you will get a line chart.
If any body else fumbled on getting this working, it might help them too. My reference point was chart.js offical page.
This the line where I give the path to Chart.js:
I hope this helps!
Thanks,
Kay
<!DOCTYPE HTML>
<html>
<head></head>
<body>
<canvas id="c" width="500" height="500"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<script>
var ctx = document.getElementById("c").getContext("2d");
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
}, {
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}]
};
var MyNewChart = new Chart(ctx).Line(data);
</script>
</body>
</html>
You need to place this line:
var myNewChart = new Chart(ctx).Line(data, options);
Beneath your declaration. Additionally, you're not defining your options so you need to also remove that from the call.
Completed, it should look like:
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Become a member</title>
<script type="text/javascript" src="Chart.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
init();
};
function init() {
var ctx = $("#myChart").get(0).getContext("2d");
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: [65, 59, 90, 81, 56, 55, 40]
},
{
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
data: [28, 48, 40, 19, 96, 27, 100]
}
]
}
var myNewChart = new Chart(ctx).Line(data);
}
</script>
<div>
<section>
<article>
<canvas id="myChart" width="400" height="400">
</canvas>
</article>
</section>
</div>
</body>
</html>
According to the new version of chartjs, version 2.8.0.
official documentation
This is a working code example
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45]
}]
},
// Configuration options go here
options: {}
});
</script>
</body>
</html>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45]
}]
},
// Configuration options go here
options: {}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<canvas id="myChart"></canvas>