I stripped down my code to a simple page including the flog plugin and jquery files, but am still unable to get the flot graphs to render in IE 7 and 8. I may be missing something, but I am using flot 8.1(7.0 worked fine).
I cut it down to a simple page with the what I assume are the necessary scripts. Thank you for any help you can provide!
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type='text/javascript' src='js/plugins/jquery/jquery-1.9.1.min.js'></script>
<script type='text/javascript' src='js/plugins/jquery/jquery-ui-1.10.1.custom.min.js'></script>
<script type='text/javascript' src='js/plugins/jquery/jquery-migrate-1.1.1.min.js'></script>
<script type='text/javascript' src='js/plugins/other/excanvas.js'></script>
<script type='text/javascript' src='js/plugins/flot/jquery.flot.js'></script>
<script type='text/javascript' src='js/plugins/flot/jquery.flot.stack.js'></script>
<script type='text/javascript' src='js/plugins/flot/jquery.flot.pie.js'></script>
<script type='text/javascript' src='js/plugins/flot/jquery.flot.resize.js'></script>
</head>
<body class="smw ssDark">
<div class="header">
<div id="chart_activity" style="height:500px;" >
</div>
</div>
<script>
$("document").ready(function(){
if($("#chart_activity").length > 0){
var stuff = [], contacts = [];
for (var i = 0; i < 7; i += 1) {
stuff.push([i, parseInt(Math.random() * 30)]);
contacts.push([i, parseInt(Math.random() * 30)]);
}
$.plot($("#chart_activity"), [ { data: stuff, label: "stuff"}, { data: contacts, label: "contacts"}], {xaxis: {show: true}, yaxis: { show: true}});
}
});
</script>
</body>
</html>
Edit: Forgot to mention, I get the following error in IE console:
SCRIPT5007: Unable to get property 'fillStyle' of undefined or null reference
excanvas.js, line 230 character 5
Sorry for coming back with the answer slowly. Apparently the downloaded version of excanvas that I had, was somehow different from the one the came with Flot. Once I switched them out everything worked fine in IE 7/8.
Related
I recently started working on this project last few days from CodingTrain, however I kept running into this 'split' error. I've tried looking around how to fix it but I'm very new to JS. If anyone can help I would greatly appreciate it.
Sketch.js
let brain;
function setup() {
createCanvas(640, 480);
let options = {
inputs: 34,
outputs: 4,
task: 'classification',
debug: true
}
brain = ml5.neuralNetwork(options);
brain.loadData('ymca.json', dataReady);
}
function dataReady() {
brain.normalizeData();
brain.train({epochs: 50}, finished);
}
function finished() {
console.log('model trained');
brain.save();
}
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>
<script src="https://unpkg.com/ml5#0.5.0/dist/ml5.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
Split is reserved for strings so at some point looks like P5 is expecting a string but not getting it. You should be able to follow the error stack in your dev tools console and see what line of your code the error is coming from.
Recently, I encounter a problem when implement my web app on SharePoint with IE8.
Since the default broswer for my SharePoint is IE8 and this is unchangeable for my situration.
Please click the following link with my look on my flow of application
The flow >> Select server and date > Show figure in chart with highchart.js > Click the plot on chart > Show table with datatable.js
what my problem pop-up is when I clicked the plot of the line
sp.core.js?rev=7ByNlH%2BvcgRJg%2BRCctdC0w%3D%3D:2 Uncaught TypeError: a.indexOf is not a function(…)
Although chrome is encounter this error as well, it worked well if you ignore the error. But IE8 will stop me immediately.
What I found on google, the way of handling indexOf() in IE8 is adding following script in my HTML
if (!Array.prototype.indexOf)
{
Array.prototype.indexOf = function(elt /*, from*/)
{
var len = this.length >>> 0;
var from = Number(arguments[1]) || 0;
from = (from < 0)
? Math.ceil(from)
: Math.floor(from);
if (from < 0)
from += len;
for (; from < len; from++)
{
if (from in this &&
this[from] === elt)
return from;
}
return -1;
};
}
But where should I add? before the or after loaded all JS library?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5;IE=8">
<link rel="stylesheet" href="SiteAssets/css/appLog/rome.css">
<link rel="stylesheet" href="SiteAssets/css/appLog/responsive.dataTables.min.css">
<link rel="stylesheet" href="SiteAssets/css/appLog/jquery.dataTables.min.css">
<link rel="stylesheet" href="SiteAssets/css/appLog/bootstrap.min1.css">
<!-- jQuery library -->
<script src="SiteAssets/javascript/appLog/jquery-1.8.min.js" charset="UTF-8" type="text/javascript"></script>
<script src="SiteAssets/javascript/appLog/bootstrap.min.js" type="text/javascript"></script>
<script src="SiteAssets/javascript/appLog/rome.js" charset="UTF-8" type="text/javascript"></script>
<script src="SiteAssets/javascript/appLog/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="SiteAssets/javascript/appLog/dataTables.responsive.min.js" type="text/javascript"></script>
<script src="SiteAssets/javascript/appLog/highcharts.js" type="text/javascript"></script>
<script src="SiteAssets/javascript/appLog/data.js" type="text/javascript"></script>
<script src="SiteAssets/javascript/appLog/exporting.js" type="text/javascript"></script>
Is there any way that I can do it without edit any code in the sharepoint core javascript?
I am trying to parse some form data to produce JSON data to send in an ajax request. The following HTML is an oversimplified version of my code. I'm using APS.Net MVC4 and my rendered view produces the following HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="test-class" data-my-attribute="1"></div>
<div class="test-class" data-my-attribute="2"></div>
<div class="test-class" data-my-attribute="3"></div>
<script src="/Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () {
jsonObj = [];
$(".test-class").each(function () {
var myAttribute = $(this).data('my-attribute');
item = {}
item["MyAttribute"] = myAttribute;
jsonObj.push(item);
});
var data = { SomeOtherData: 1234, MyAttribs: jsonObj };
console.log(JSON.stringify(data));
});
</script>
</body>
</html>
In Chrome the output in the console is output as expected ...
{
"SomeOtherData": 1234,
"MyAttribs": [{
"MyAttribute": 1
}, {
"MyAttribute": 2
}, {
"MyAttribute": 3
}]
}
... but in IE the objects come out as null ...
{
"SomeOtherData": 1234,
"MyAttribs": [null, null, null]
}
I've had a look around and found some other questions that recommend checking that the page has <!DOCTYPE html> in it (which it does) and that doesn't seem to have any effect. I've also read that this should work in from IE8 onward so not sure what's happening.
Does anyone know why the objects are appearing as nulls in IE?
What is the best cross-browser solution to this?
Thanks,
Gavin
The only weird thing I see is that:
item = {}
Should be:
var item = {}; // 'var' and semicolon
Sometimes IE is quite strict..
on my case use as #palvo sayed console.dir(obj)
other alternative is JSON2 from douglascrockford
I'm trying to get the jQuery template feature working but have finally come to a dead end. From all my investigation the code listing below should work and I expect to get:
file1.txt, 123456, 2012-01-01
file2.txt, 234567, 2012-01-02
file3.txt, 345678, 2012-01-03
but instead I get
, ,
, ,
, ,
Clearly the library is loading and the code is running but for some reason it will not pick up the data elements. The code behaves the same regardless of the browser. I've tried compiling the template and not, each with the same results.
I'm sure that I'm missing something simple, but I've been pulling my hair out for about 8 hours staring at examples (and I've not that much hair left!). Thanks in advance for any assistance.
<html lang="en">
<head>
<title>jQuery Template Test</title>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script src="inc/jquery.tmpl.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var exampleData = [
{ name: "file1.txt", size: "123456", date: "2012-01-01" },
{ name: "file2.txt", size: "234567", date: "2012-01-02" },
{ name: "file3.txt", size: "345678", date: "2012-01-03" }
];
var markup = "<li>${name}, ${size}, ${date}</li>";
$.template( "exampleTemplate", markup );
$.tmpl("exampleTemplate", exampleData).appendTo("#target");
});
</script>
</head>
<body>
<ul id="target"></ul>
</body>
</html>
I had the same problem with JSP: Use \$ to escape EL expression
I'm very new to HTML and Javascript (less than a week of experience) and am stuck in the following situation. I created 6 google map visualizations using the googleVis package for R (simple stuff--just markers on a map). I've extracted the Javascript out of the googleVis objects in R and have included them in a simple site that contains 6 divs for each of the 6 different maps.
Each Javascript file includes a function to create a JSON object, a function to draw the map, and a function to display the map:
//define JSON
function gvisDataWest ()
{
var data = new google.visualization.DataTable();
var datajson =
[
[
33.5313,
-112.1774,
"<p>2005-2009 Poverty Rate: 40.7%</p> <p>2000 Poverty Rate: 34.3%</p> <p>Significant difference: 0.0 points </p>"
],
... many rows of data ...
];
data.addColumn('number','Latitude');
data.addColumn('number','Longitude');
data.addColumn('string','tip');
data.addRows(datajson);
return(data);
}
//draw chart
function drawChartWest() {
var data = gvisDataWest();
var options = {};
options["showTip"] = true;
options["enableScrollWheel"] = true;
options["width"] = 400;
var chart = new google.visualization.Map(
document.getElementById('West')
);
chart.draw(data,options);
}
//display chart
function displayChartWest()
{
google.load("visualization", "1", { packages:["map"] });
google.setOnLoadCallback(drawChartWest);
}
Each javascript file includes functions and data for a different region of the country (e.g. there would be definitions for gvisDataMidwest(), givsDataSouthEast(), etc.).
Here's roughly what my HTML looks like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/xml; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="../povscripts/map1.js" type="text/javascript"></script>
<script src="../povscripts/map2.js" type="text/javascript"></script>
<script src="../povscripts/map3.js" type="text/javascript"></script>
<script src="../povscripts/map4.js" type="text/javascript"></script>
<script src="../povscripts/map5.js" type="text/javascript"></script>
<script src="../povscripts/map6.js" type="text/javascript"></script>
</head>
<body>
...a bunch of divs, headers, <p>'s, etc...
...then six divs like this, each with an appropriate id:
<div class="anncdiv">
<div class="bannertitle">
<p class="btxt">West</p>
</div>
<div class="anncdivIn" id="West">
<script type="text/javascript"> displayChartWest() </script>
</div>
</div>
<div class="anncdiv">
<div class="bannertitle">
<p class="btxt">Midwest</p>
</div>
<div class="anncdivIn" id="Midwest">
<script type="text/javascript"> displayChartMidwest() </script>
</div>
</div>
THE PROBLEM: With the way I've currently cobbled this site together, if there are two dsplayChart**() functions being called anywhere on the site (as in this example, with displayChartWest() and displayChartMidwest()) all divs appear blank. But, if I were to just include one of these function calls, then the map displays fine in the appropriate div. Somehow calling two or more of these functions results in a conflict, though I just don't know why. Your help is GREATLY appreciated. Cheers, AR
I think you might need to wait until the DOM is loaded before firing up your charts. Without using a library like jQuery, you could do it using the body onload event:
<body onload="displayCharts()">
...page source...
<script type="text/javascript">
function displayCharts() {
displayChartWest();
displayChartMidwest();
}
</script>
</body>
Instead of doing this:
google.load("visualization", "1", { packages:["map"] });
google.setOnLoadCallback(drawChartWest);
try this instead:
google.load("visualization", "1", { packages:["map"],callback: drawChartWest});