Object doesn't support property or method 'trim'
« Back to message list
This gives me error (Object doesn't support property or method 'trim'):
in windows server2k8r2 internet explorer : 8 & 11
nothing shows up other than a Error
Works fine in Google Chrome Though
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
body{
background-color:lightblue;
}
</style>
<script src="Scripts/RGraph.common.core.js"></script>
<script src="Scripts/RGraph.common.dynamic.js"></script>
<script src="Scripts/RGraph.semicircularprogress.js"></script>
<script src="Scripts/RGraph.common.csv.js"></script>
<script src="Scripts/RGraph.bar.js"></script>
<script>
function myfunct($id,$used,$title)
{
var canvas = document.getElementById($id);
RGraph.Reset(canvas);
canvas.width = 250;
canvas.height = 120;
new RGraph.SemiCircularProgress({
id: $id,
min: 0,
max: 100,
value: $used,
options: {
gutterTop: 5,
gutterLeft: 5,
gutterRight: 5,
adjustable: false,
title: $title,
unitsPost: '%',
textAccessiblePointerevents: false,
colors: ['Gradient(aqua:blue:red)']
}
}).grow({ frames: 30 });
}
window.onload = function () {
var csv = new RGraph.CSV('Input/TextFile.csv', function (csv) {
// Get the first column which becomes the labels
var labels = csv.getCol(1);
var servers = csv.getCol(0);
// Get the number of rows in the CSV
var numrows = csv.numrows;
console.log('total rows in csv file ' + numrows);
// Get the number of cols in the CSV
var numcols = csv.numcols;
document.getElementById("IDEASME").innerHTML = "";
for (var i = 0; i < numrows; i++) {
console.log("Label : " + servers[i]);
document.getElementById("IDEASME").innerHTML += "<canvas id='sme" + i + "' height='0' width='0'></canvas>";
console.log('inner html added\n' + "<canvas id='sme" + i + "' height='0' width='0'></canvas>");
}
// Get the 3rd column which becomes the data
var data = csv.getCol(2);
for (var i = 0; i < numrows; i++) {
myfunct("sme"+ i, data[i], labels[i]);
console.log('id : sme' + i + '\ndata : ' + data[i] + '\nLabel : ' + servers[i]);
}
});
};
</script>
</head>
<body id="theBody">
<h3 align="center">Server1</h3><div id="IDEASME"></div><hr />
<h3 align="center">Server1</h3><div id="IDEASME"></div><hr />
<h3 align="center">Server1</h3><div id="IDEASME"></div><hr />
<h3 align="center">Server1</h3><div id="IDEASME"></div><hr />
<h3 align="center">Server1</h3><div id="IDEASME"></div><hr />
</body>
</html>
----------------------------------------------------
Here is the input csv file
----------------------------------------------------
"IDEASME","D","85"
"IDEASME","I","25"
"IDEASME","E","33"
"IDEASME","H","99"
Posted by Richard on 26th September 2016in windows server2k8r2 internet explorer : 8 & 11
nothing shows up other than a Error
Works fine in Google Chrome Though
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
body{
background-color:lightblue;
}
</style>
<script src="Scripts/RGraph.common.core.js"></script>
<script src="Scripts/RGraph.common.dynamic.js"></script>
<script src="Scripts/RGraph.semicircularprogress.js"></script>
<script src="Scripts/RGraph.common.csv.js"></script>
<script src="Scripts/RGraph.bar.js"></script>
<script>
function myfunct($id,$used,$title)
{
var canvas = document.getElementById($id);
RGraph.Reset(canvas);
canvas.width = 250;
canvas.height = 120;
new RGraph.SemiCircularProgress({
id: $id,
min: 0,
max: 100,
value: $used,
options: {
gutterTop: 5,
gutterLeft: 5,
gutterRight: 5,
adjustable: false,
title: $title,
unitsPost: '%',
textAccessiblePointerevents: false,
colors: ['Gradient(aqua:blue:red)']
}
}).grow({ frames: 30 });
}
window.onload = function () {
var csv = new RGraph.CSV('Input/TextFile.csv', function (csv) {
// Get the first column which becomes the labels
var labels = csv.getCol(1);
var servers = csv.getCol(0);
// Get the number of rows in the CSV
var numrows = csv.numrows;
console.log('total rows in csv file ' + numrows);
// Get the number of cols in the CSV
var numcols = csv.numcols;
document.getElementById("IDEASME").innerHTML = "";
for (var i = 0; i < numrows; i++) {
console.log("Label : " + servers[i]);
document.getElementById("IDEASME").innerHTML += "<canvas id='sme" + i + "' height='0' width='0'></canvas>";
console.log('inner html added\n' + "<canvas id='sme" + i + "' height='0' width='0'></canvas>");
}
// Get the 3rd column which becomes the data
var data = csv.getCol(2);
for (var i = 0; i < numrows; i++) {
myfunct("sme"+ i, data[i], labels[i]);
console.log('id : sme' + i + '\ndata : ' + data[i] + '\nLabel : ' + servers[i]);
}
});
};
</script>
</head>
<body id="theBody">
<h3 align="center">Server1</h3><div id="IDEASME"></div><hr />
<h3 align="center">Server1</h3><div id="IDEASME"></div><hr />
<h3 align="center">Server1</h3><div id="IDEASME"></div><hr />
<h3 align="center">Server1</h3><div id="IDEASME"></div><hr />
<h3 align="center">Server1</h3><div id="IDEASME"></div><hr />
</body>
</html>
----------------------------------------------------
Here is the input csv file
----------------------------------------------------
"IDEASME","D","85"
"IDEASME","I","25"
"IDEASME","E","33"
"IDEASME","H","99"
Hi there,
Well IE8 probably won't work at all and isn't supported anyway - as far as IE11 on that OS, I haven't tested with that. So maybe the browser doesn't support the .trim() method (though that's hard to imagine).
Start by cutting the script down to the bare bones and build it up step-by-step - ie start by just drawing a basic chart:
new RGraph.SemiCircularProgress({
id: 'cvs',
min: 0,
max: 100,
value: 56,
options: {
}
}).grow({ frames: 30 });
As you start adding to the script test it in both IE11 and Chrome too.
Richard
Posted by Ravi Singh on 26th September 2016Well IE8 probably won't work at all and isn't supported anyway - as far as IE11 on that OS, I haven't tested with that. So maybe the browser doesn't support the .trim() method (though that's hard to imagine).
Start by cutting the script down to the bare bones and build it up step-by-step - ie start by just drawing a basic chart:
new RGraph.SemiCircularProgress({
id: 'cvs',
min: 0,
max: 100,
value: 56,
options: {
}
}).grow({ frames: 30 });
As you start adding to the script test it in both IE11 and Chrome too.
Richard
Hi Richard,
Thanks for taking time and replying my message.
initially it was my plan to do so (i.e step-by-step) , but since i just happen to start using javascript from Yesterday itself, I thought i should ask here first ..
BTW i love the simplicity of your RGraph. Will definitely recommend to My friends & colleagues
Thanks
Ravi Singh
Posted by Ravi Singh on 10th October 2016Thanks for taking time and replying my message.
initially it was my plan to do so (i.e step-by-step) , but since i just happen to start using javascript from Yesterday itself, I thought i should ask here first ..
BTW i love the simplicity of your RGraph. Will definitely recommend to My friends & colleagues
Thanks
Ravi Singh
$Fallow Up :
I have given up on using SemiCircular and started using HBar which is more convinient and is perfect for the job i wanna do.
However, Is it possible to have lable withing idividual bars inside a HBar.
Thanks
Ravi S
Posted by Richard on 10th October 2016I have given up on using SemiCircular and started using HBar which is more convinient and is perfect for the job i wanna do.
However, Is it possible to have lable withing idividual bars inside a HBar.
Thanks
Ravi S
Hi there,
With a little bit of custom code yes. There's an example here:
www.rgraph.net/fiddle/view.html/hbar-with-ingraph-labels
Richard
Posted by Ravi Singh on 11th October 2016With a little bit of custom code yes. There's an example here:
www.rgraph.net/fiddle/view.html/hbar-with-ingraph-labels
Richard
Hi,
One more thing..
Is it possible to change the fill color of the individual Bars?
.on('draw', function (obj)
{
var co = obj.context,
labels = ['Jim','Hoolio','Paul','Jack','Lucy','Gary','Fred','Olga'],
coords = obj.coords;
for (var i=0; i<obj.coords.length; ++i) {
RGraph.text2(obj, {
//some thing like this
//if(size>85){obj[i].fillcolor:'green';}else{obj[i].fillcolor:'Red';}
x: coords[i][0] + 10,
y: coords[i][1] + (coords[i][3] / 2),
text: labels[i],
valign: 'center',
size: 26,
bounding: true,
boundingFill: 'white'
});
}
}).draw();
Posted by Richard on 11th October 2016One more thing..
Is it possible to change the fill color of the individual Bars?
.on('draw', function (obj)
{
var co = obj.context,
labels = ['Jim','Hoolio','Paul','Jack','Lucy','Gary','Fred','Olga'],
coords = obj.coords;
for (var i=0; i<obj.coords.length; ++i) {
RGraph.text2(obj, {
//some thing like this
//if(size>85){obj[i].fillcolor:'green';}else{obj[i].fillcolor:'Red';}
x: coords[i][0] + 10,
y: coords[i][1] + (coords[i][3] / 2),
text: labels[i],
valign: 'center',
size: 26,
bounding: true,
boundingFill: 'white'
});
}
}).draw();
Hi there,
The color of the text? Yes - I've updated the example to show this:
www.rgraph.net/fiddle/view.html/hbar-with-ingraph-labels
If you were referring to the colors of the bars then you can set the colorsSequential option to true.
Richard
Posted by Ravi Singh on 12th October 2016The color of the text? Yes - I've updated the example to show this:
www.rgraph.net/fiddle/view.html/hbar-with-ingraph-labels
If you were referring to the colors of the bars then you can set the colorsSequential option to true.
Richard
Hi,
What i meant was to change the bar colors based on conditions.
se my below result, i wanted to chenge the bar color itslelf rahter than the Inner label color,
But since you mentioned colorsSequential option, i can prepare the color array dynamically based on my conditions and then pass the same to graph .
Thanks again for the Help.
Ravi S
a83i.imgup.net/Capture01d9.PNG
Posted by Richard on 12th October 2016 What i meant was to change the bar colors based on conditions.
se my below result, i wanted to chenge the bar color itslelf rahter than the Inner label color,
But since you mentioned colorsSequential option, i can prepare the color array dynamically based on my conditions and then pass the same to graph .
Thanks again for the Help.
Ravi S
a83i.imgup.net/Capture01d9.PNG
Add a reply
« Back to message list