The chart.colors option not picking color

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 BGupta on 11th January 2013
Hi,

I am trying to draw a minimum of 0 and maximum of 25 lines on same canvas depending on user input.

So I am looping over

for(var d = 0;d<allCounts.length;d++){
             drawGraph(allCounts[d],allDates[d],tickMarks[d],lineColour[d],keys,lineColour)
         }

function drawGraph(countData, dateTimeData,ticks,color,keys,lineColour) {
         var myChart = new RGraph.Line('cvs', countData);
         myChart.Set('chart.colors', color);
         myChart.Set('chart.linewidth', 1.5);
         myChart.Set('chart.tickmarks', ticks);
         myChart.Set('chart.hmargin', 10);
         myChart.Set('chart.text.angle',90);
         myChart.Set('chart.labels', dateTimeData);
....

But I am not able to show anything on the graph by picking data from function parameters.

Any help how to resolve this?
Posted by RGraph support on 11th January 2013
Hi,

Check your console for an error message.

Richard, RGraph Support
Posted by BGupta on 11th January 2013
Thanks for responding Richard.

Console shows nothing am afraid.

Also I am using the RGraph in grails (gsp)

Posted by RGraph support on 11th January 2013
Hi,

Try describing your issue more - in what way is the "wrong colour" being shown?

Richard, RGraph Support
Posted by BGupta on 11th January 2013
The line does not get drawn.

My colors and ticks array passed are

var tickMarks = ['circle','filledcircle','endcircle','square','endsquare','filledsquare','filledendsquare','tick','halftick','endtick',
            'cross','dot','borderedcircle','arrow','filledarrow','triangle','filledtriangle','plus','diamond',hexagon,star,exclaim,tickM,info,house];
         var lineColour = ['red','green','blue','#FF00FF','#61380B','#13919F','#660F8B','#848B0F','#0F368B','#D53366','#151B8D','#F778A1','#F87431',
            '#20E42D','#F6A40C','#4079CA','#40CA93','#DDE469','#979F0F','#C4522C','#29BA7C','#4B29BA','#4A3A72','#00FFFF','#808000'];

And for the custom ticks I have defined functions as


function hexagon (obj, data, value, index, x, y, color, prevX, prevY)
     {
         // Create the image
         var img = new Image();
         img.src = "${resource(dir: 'images', file: 'hexagon.png')}";

         // Draw the image on to the canvas when it has loaded
         img.onload = function ()
         {
             // Keep in mind that "this" refers to the image
             obj.context.drawImage(this, x - (this.width / 2), y - (this.height / 2));
         }
     }

     function star (obj, data, value, index, x, y, color, prevX, prevY)
     {
         // Create the image
         var img = new Image();
         img.src = "${resource(dir: 'images', file: 'star.png')}";

         // Draw the image on to the canvas when it has loaded
         img.onload = function ()
         {
             // Keep in mind that "this" refers to the image
             obj.context.drawImage(this, x - (this.width / 2), y - (this.height / 2));
         }
     }

     function exclaim (obj, data, value, index, x, y, color, prevX, prevY)
     {
         // Create the image
         var img = new Image();
         img.src = "${resource(dir: 'images', file: 'yellow_exclamation2.png')}";

         // Draw the image on to the canvas when it has loaded
         img.onload = function ()
         {
             // Keep in mind that "this" refers to the image
             obj.context.drawImage(this, x - (this.width / 2), y - (this.height / 2));
         }
     }

     function info (obj, data, value, index, x, y, color, prevX, prevY)
     {
         // Create the image
         var img = new Image();
         img.src = "${resource(dir: 'images', file: 'information.png')}";

         // Draw the image on to the canvas when it has loaded
         img.onload = function ()
         {
             // Keep in mind that "this" refers to the image
             obj.context.drawImage(this, x - (this.width / 2), y - (this.height / 2));
         }
     }

     function tickM (obj, data, value, index, x, y, color, prevX, prevY)
     {
         // Create the image
         var img = new Image();
         img.src = "${resource(dir: 'images', file: 'tickmark.png')}";

         // Draw the image on to the canvas when it has loaded
         img.onload = function ()
         {
             // Keep in mind that "this" refers to the image
             obj.context.drawImage(this, x - (this.width / 2), y - (this.height / 2));
         }
     }

     function house (obj, data, value, index, x, y, color, prevX, prevY)
     {
         // Create the image
         var img = new Image();
         img.src = "${resource(dir: 'images', file: 'house.png')}";

         // Draw the image on to the canvas when it has loaded
         img.onload = function ()
         {
             // Keep in mind that "this" refers to the image
             obj.context.drawImage(this, x - (this.width / 2), y - (this.height / 2));
         }
     }


Please let me know what other information I can provide.
Posted by RGraph support on 11th January 2013
Hi,

You still haven't described the problem. Keep in mind that if you create a new line chart each time for every line only the first colour of your set will be used.

Richard, RGraph Support
Posted by BGupta on 11th January 2013
Hi,

The line itself does not get drawn, but the axes are drawn. Also as mentioned in above code, I am looping over the color array and picking one each time and then sending to the drawGraph() method.

  var lineColour = ['red','green','blue','#FF00FF','#61380B','#13919F','#660F8B','#848B0F','#0F368B','#D53366','#151B8D','#F778A1','#F87431',
            '#20E42D','#F6A40C','#4079CA','#40CA93','#DDE469','#979F0F','#C4522C','#29BA7C','#4B29BA','#4A3A72','#00FFFF','#808000'];


for(var d = 0;d<allCounts.length;d++){
              drawGraph(allCounts[d],allDates[d],tickMarks[d],lineColour[d],keys,lineColour)
          }

function drawGraph(countData, dateTimeData,ticks,color,keys,lineColour) {
          var myChart = new RGraph.Line('cvs', countData);
          myChart.Set('chart.colors', color);

Hope it makes sense.
Posted by RGraph support on 11th January 2013
Hi,

This line could be your problem:

myChart.Set('chart.colors', color);

It needs to be an array, not a string. So try this:

myChart.Set('chart.colors', [color]);


PS Could you link to the RGraph website - thanks.

Richard, RGraph Support
Posted by BGupta on 11th January 2013
That works!

Many thanks for your time.

But the function argument lineColour is the full array passed to drawGraph, still the last drawn line colour is shown only for first key.

myChart.Set('chart.key.color',lineColour);

How can I resolve this?
Posted by BGupta on 11th January 2013
Hi Richard,

Somehow my last message got deleted.

Many thanks for your kin efforts and time, the line of different colors can be seen now.

But the key color is every time shown os the last line drawn rather than being picked from the array lineColour.

         myChart.Set('chart.key.color',lineColour);
Posted by RGraph support on 11th January 2013
Hi,

The property name that you're using is wrong - it should be:

chart.key.colors

Richard, RGraph Support
Posted by BGupta on 11th January 2013
Thanks once again!

How did I miss that :-(

Will link to this amazing site definitely

Regards,
BGupta

Add a reply




« Back to message list