I am having a problem getting Chart.js to display a Chart when using the Chart.min.js file that was installed as a result of using:
npm install chart.js --save (However, if use the CDN supplied file - the chart will display)
To avoid putting paths into my code, I copied the Chart.min.js file from the install directory: ./node_modules/chart_js/dist/Chart.min.js to the directory where my web page is. Was this the right file to copy? Anyways, when I reload the App into the Browser, I get a blank display. There are no error messages at all.
However, if I instead use the CDN supplied file: <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js" type="text/javascript"></script>
Everything works. The Chart fully displays.
Here is the HTML file:
<html>
<head>
<meta charset="utf-8"/>
<title>Chart.js demo</title>
<script src="Chart.min.js" </script>
</head>
<body>
<h1>Chart.js Sample</h1>
<canvas id="countries" width="600" height="400"></canvas>
<script>
var pieData = [
{
value: 20,
color:"#878BB6"
},
{
value : 40,
color : "#4ACAB4"
},
{
value : 10,
color : "#FF8153"
},
{
value : 30,
color : "#FFEA88"
}
];
// Get the context of the canvas element we want to select
var countries= document.getElementById("countries").getContext("2d");
new Chart(countries).Pie(pieData);
</script>
</body>
</html>
So, what am I doing wrong? Is there an issue with the download?
Appreciate any help with this!
I am running on Mac OS X 10.10.5
I have tried this using both the Safari and FireFox browsers,
and have the same issue of the local Chart.min.js file not working.
You better use the latest syntax for creating your chart, instead of old one.
also, this is the correct directory where chart.js file resides, when installed through npm :
./node_modules/chart.js/dist/Chart.min.js
Here is the full code that works perfectly on Chrome, Firefox and Safari :
<html>
<head>
<meta charset="utf-8" />
<title>Chart.js demo</title>
<script src="./node_modules/chart.js/dist/Chart.min.js"></script>
</head>
<body>
<h1>Chart.js Sample</h1>
<div class="chart-container" style="width: 600px; height: 400px">
<canvas id="countries"></canvas>
</div>
<script>
var pieData = {
datasets: [{
data: [20, 40, 10, 30],
backgroundColor: ["#878BB6", "#4ACAB4", "#FF8153", "#FFEA88"]
}]
};
// Get the context of the canvas element we want to select
var countries = document.getElementById("countries").getContext("2d");
new Chart(countries, {
type: 'pie',
data: pieData
});
</script>
</body>
</html>
I think the problem must be the improper closing of the script tag. See below.
Before:
<script src="Chart.min.js" </script>
After:
<script src="Chart.min.js"></script>
Here is a demo with a local Chart.min.js File for your reference!
JSFiddle Demo
Related
I'm playing with OpenLayers to display COG files uploaded on GCS.
Using the NodeJS, an index.html and a main.js files, then building with Parcel (or others), everything works fine.
When I tried to skip using NodeJS, coding an HTML files with the CDN imports, and the inline JavaScript, it looks like OpenLayers is not able to retrieve all the needed dependencies. In particular in the network request/response, I have:
Request URL: https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.14.1/build/231.ol.js
Request Method: GET
Status Code: 403
Remote Address: 151.101.241.229:443
Referrer Policy: strict-origin-when-cross-origin
and if I try to hit directly the URL in the Browser:
https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.14.1/build/231.ol.js
I got:
Package size exceeded the configured limit of 50 MB. Try https://github.com/openlayers/openlayers.github.io/tree/master/en/v6.14.1/build/231.ol.js instead.
Why?
Below the content of the HTML file I stored on GCS (layer styling omitted),
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>COG on Google Cloud Storage</title>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.14.0/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.14.0/css/ol.css">
<style>
html, body {
margin: 0;
height: 100%;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var cogSource = new ol.source.GeoTIFF (
{
normalize: true,
sources: [
{
url: 'https://storage.googleapis.com/fao-gismgr-cache/TEST/L1_AETI_21.tif',
min: -9999,
max: 16000
}
],
transition: 0
}
);
var cogLayer = new ol.layer.WebGLTile (
{
source: cogSource
}
);
var cogView = new ol.View (
{
projection: 'EPSG:4326',
minZoom: 0,
maxZoom: 12,
center: [0,0],
zoom: 4
}
);
var map = new ol.Map({
target: 'map',
maxTilesLoading: 32,
layers: [cogLayer],
view: cogView
});
</script>
</body>
</html>
The COG and HTML file are on a public GCS bucket.
To test, I use Chrome with web-security disabled (CORS policies)
open -na Google\ Chrome --args --user-data-dir=/tmp/temporary-chrome-profile-dir --disable-web-security --disable-site-isolation-trials
Could you help me?
Thanks in advance,
Davide
Thanks #Mike, I was having the same problem and tried your solution both with local and remote files and it worked without any problem.
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.12.0/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.12.0/css/ol.css">
I am using Datamaps to create a map of Canada and USA. I saw the tutorial and/or examples in its website and I saw a "USA map only" example. And I did that:
<script>
var addUSA = new Datamap({
scope: 'usa',
element: document.getElementById('usa-map'),
geographyConfig: {
highlightOnHover: false,
borderColor: '#006298',
borderWidth: 0.8,
popupTemplate: function(geography, data) {
return "<div class='hoverinfo'><strong>" + data.info + "</strong></div>";
}
},
dataUrl: 'data.json',
dataType: 'json',
data: {},
fills: {
defaultFill: '#FFFFFF'
}
});
addUSA.labels();
</script>
So I assume that you can also create a "Canada map only". But the problem is, I don't know how to combine two countries.
I aim for labels, the hover-info and json that's why I'm using Datamaps.
So I've found this URL entitled Custom Map Data in Datamaps by Mark DiMarco and I used and tried copying what he had done. On that link, he created a map of Afghanistan which was not included in his main examples on Datamaps website. But instead of one country, we will combine two countries custom map using Datamaps. This is an experiment I've made but I hope this will be the answer to your problem
First, he created a custom topo json for Afghanistan. He published a tutorial on how to create custom map data but I think I don't have an access 'cause I'm getting 404 or he took it down. Going back, the code he used for that custom topo json can also be found in his other works located at "More Versions" link in Datamaps website. You just need to look for the country/ies you need to make a custom topo json. On your end, look for datamaps.afg.js and datamaps.usa.js; and get the json.
I only have 1 reputation and I am limit with two URLs. Just visit this GitHub site where I put those two custom topo json for Canada and USA.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Canada and USA</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://rawgithub.com/markmarkoh/datamaps/master/dist/datamaps.none.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<!-- CANADA -->
<h1>CANADA</h1>
<div id="canada"></div>
<!-- USA -->
<h1>USA</h1>
<div id="usa"></div>
</body>
</html>
CSS
#canada {
border: 1px solid #000000;
height: 450px;
width: 400px;
}
#usa {
border: 2px solid #EDA552;
height: 400px;
width: 500px;
}
JQUERY
$(function() {
var canadaMap = new Datamap({
element: document.getElementById('canada'),
geographyConfig: {
dataUrl: 'canada.topo.json'
},
scope: 'canada',
fills: {
defaultFill: '#bada55'
},
setProjection: function(element) {
var projection = d3.geo.mercator()
.center([-95, 71])
.scale(200)
.translate([element.offsetWidth / 2, element.offsetHeight / 2]);
var path = d3.geo.path().projection(projection);
return {path: path, projection: projection};
}
});
var USAmap = new Datamap({
element: document.getElementById('usa'),
geographyConfig: {
dataUrl: 'usa.topo.json'
},
scope: 'usa',
fills: {
defaultFill: '#bada55'
},
setProjection: function(element) {
var projection = d3.geo.mercator()
.center([-120, 54])
.scale(250)
.translate([element.offsetWidth / 2, element.offsetHeight / 2]);
var path = d3.geo.path().projection(projection);
return {path: path, projection: projection};
}
});
});
Working code here => JS FIDDLE
I have my app using gmaps4rails working for a while after Google moved to GIT.
Here is what I am using in the application.htm.erb
<script src="https://maps.google.com/maps/api/js?v=3.23&libraries=geometry;&key=AIzaSyAncOJnAgKEjrv2PY__Z0gYy3zJyTznUQ0" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/googlemaps/js-rich-marker/gh-pages/src/richmarker-compiled.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox_packed.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer_packed.js" type="text/javascript"></script>
And in the Gemfile I have these lines
gem 'geocoder'
gem 'gmaps4rails'
gem 'underscore-rails'
In the application.js I have this line
//= require gmaps/google
Here is the page supposed to render the map.
<div class="row-fluid">
<div id="map" style='width: 100%; height: 500px; border: 1px solid black;'></div>
</div>
<script type="text/javascript">
buildMap (<%=raw #hash.to_json %>);
</script>
And the associated coffee script is
class RichMarkerBuilder extends Gmaps.Google.Builders.Marker #inherit from builtin builder
#override create_marker method
create_marker: ->
options = _.extend #marker_options(), #rich_marker_options()
#serviceObject = new RichMarker options #assign marker to #serviceObject
rich_marker_options: ->
marker = document.createElement("div")
marker.setAttribute 'class', 'marker_container'
marker.innerHTML = #args.title
_.extend(#marker_options(), { content: marker })
infobox: (boxText)->
content: boxText
pixelOffset: new google.maps.Size(-140, 0)
boxStyle:
width: "400px"
# override method
create_infowindow: ->
return null unless _.isString #args.infowindow
boxText = document.createElement("div")
boxText.setAttribute("class", 'marker_info_box') #to customize
boxText.innerHTML = #args.infowindow
#infowindow = new InfoBox(#infobox(boxText))
#buildMap = (markers)->
handler = Gmaps.build 'Google', { builders: { Marker: RichMarkerBuilder} } #dependency injection
#then standard use
handler.buildMap { provider: {}, internal: {id: 'map'} }, ->
markers = handler.addMarkers(markers)
handler.bounds.extendWith(markers)
handler.fitMapToBounds()
None of this code was recently changed (in the last week or so).
I only executed a bundle update today that upgraded the gems jbuilder from 2.4.1 to 2.5.0 and autoprefixer from 6.3.6.1 to 6.3.6.2.
The app was working having the map rendered until now when the map is not shown anymore.
I reverted these two gems to the previous versions but still no map rendered.
Don't know how to make it working again?
I just changed the order of the scripts to be loaded and now the map is rendered again, here is the code:
<script src="//maps.google.com/maps/api/js?v=3.23&libraries=geometry;&key=AIzaSyAncOJnAgKEjrv2PY__Z0gYy3zJyTznUQ0" type="text/javascript"></script>
<script src="//cdn.rawgit.com/googlemaps/js-rich-marker/gh-pages/src/richmarker-compiled.js" type="text/javascript"></script>
<script src="//cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox_packed.js" type="text/javascript"></script>
<script src="//cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js" type="text/javascript"></script>
<script src="//cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer_packed.js" type="text/javascript"></script>
Problem solved.
I am trying to make the background transparent for some charts I have made with google charts. They work perfectly in everything except IE7 and 8, I get a white backgound.
I have tried every combination I can find for the color attribute to change it but nothing works.
The only thing left to try was a suggesting that someone made on here a few months ago for someone else with the same issue. Their suggestion was...
For a transparent background, use chf=bg,s,FFFFFF00
But I have no idea how to implement this?
chf=bg,s,FFFFFF00
is a code for the old Google Image Charts.
Those codes will only work with the non-SVG versions of charts. Google Image Charts have been deprecated (as you can see from their help pages), so unless you want to implement the old-style charts, you won't be able to implement the above code on your new, fancy, interactive SVG charts.
For the new fancy SVG charts, I have luck with
backgroundColor: "transparent"
Copy-paste this in to Google Playground to test:
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Year', 'Austria', 'Bulgaria', 'Denmark', 'Greece'],
['2003', 1336060, 400361, 1001582, 997974],
['2004', 1538156, 366849, 1119450, 941795],
['2005', 1576579, 440514, 993360, 930593],
['2006', 1600652, 434552, 1004163, 897127],
['2007', 1968113, 393032, 979198, 1080887],
['2008', 1901067, 517206, 916965, 1056036]
]);
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
vAxis: {title: "Year"},
hAxis: {title: "Cups"},
backgroundColor: "transparent"}
);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;" bgcolor="#E6E6FA">
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>
This is just the standard bar chart example with two things added:
bgcolor="#E6E6FA" to the body element (make it blue so we can tell if transparent)
backgroundColor="transparent" to the options (make it transparent)
This works in FireFox. I don't know if it works in IE7 (no testing environment). Let us know if it works.
change as appropriate in the config file that the pie chart is located on.
I had this chart under a donate.php as example:
FROM
$chartURL = 'http://chart.apis.google.com/chart?chf=bg,s,f9faf7&cht=p&chd=t:'.$percent.',-'.(100-$percent).'&chs=200x200&chco=639600&chp=1.57';
TO
$chartURL = 'http://chart.apis.google.com/chart?chf=bg,s,FFFFFF00&cht=p&chd=t:'.$percent.',-'.(100-$percent).'&chs=200x200&chco=639600&chp=1.57';
that code let me have transparency when it was a white background! thank you.
this is my code:
<html>
<title>report</title>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
function soso(){
var data_flow = new google.visualization.DataTable();
data_flow.addColumn('string', 'Version');
data_flow.addColumn('number','flow');
data_flow.addRows([['20120125',466.0],['20120130',173.0],['20120203',160.0],['20120208',529.0],['20120213',210.0]]);
var options = {width: 2200, height: 540,title: ''};
var chart_flow= new google.visualization.LineChart(document.getElementById('checkin-column'));
chart_flow.draw(data_flow, options);
}
function loveu()
{
var data_flow_1 = new google.visualization.DataTable();
data_flow_1.addColumn('string', 'Version');
data_flow_1.addColumn('number','flow');
data_flow_1.addRows([['20120125',466.0],['20120130',173.0],['20120203',160.0],['20120208',529.0],['20120213',210.0]]);
var options5 = {width: 2200, height: 540,title: ''};
var chart_flow_1= new google.visualization.LineChart(document.getElementById('redemption-table'));
chart_flow_1.draw(data_flow_1, options5);
}
function drawChart() {
soso();
loveu();
}
google.setOnLoadCallback(drawChart);
</script>
</head>
<body>
<h4>dfs</h4><br>
<br><br>
<div id="checkin-column"></div>
<p></p>
<div id="redemption-table"></div>
</body>
</HTML>
When I delete: "< h4 > dfs < / h4 >" I get the charts working fine in iexplorer, but when I don't delete it, the first chart work fine but the second one the axis of it doesn't appear!! Try it and you will see that (on Internet Explorer).
I need a help in solving this issued, I am facing strange behavior of these charts when there is more than one in the same page
Problem: I have 3 charts on a page but the axis for the 3rd chart are not showing in IE
Resolution: I have the 3 divs as separate rows in a table and all 3 charts are now showing their axis!
Hope this helps.
Cheers