Object doesn't support property or method 'trim'

Share RGraph:   To help my Google visibility (it can't get much worse!), if you like and use RGraph I'd appreciate it if you could link to me

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Ravi Singh on 26th September 2016
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 2016
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 2016
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 2016
$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 2016
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 2016
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 2016
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 2016
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
Hi there,

This demo does this:

www.rgraph.net/demos/bar-adjustable-limited.html




Richard

Add a reply




« Back to message list