Object doesn't support property or method 'trim'

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