How do I make my Scatter chart points disappear and reappear?


« 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 Jarrod on 1st December 2017
Morning , I would like to remove scatter points data from my graph after i have drawn the graph,
I have a button that used to remove a line from a line graph but now i have a scatter graph and i want to remove the scatter points in data1 and redraw the graph ,

// The datasets as shown on the chart. Each point is an array, described below.
     data1 = [ [0,40,'red'],[1,-10],[2,-5,'red'],[3,26],[4,22],[5,23],[6,12],[7,40,'red'],[8,26],[9,35],[10,32],[11,23],[12,40,'red'],[13,26],[14,35],[15,44],[16,38],[17,40,'red'],[18,26],[19,35],[20,49],[21,49],[22,49],[23,49]];
     var data2 = [ [1,-8,'green'],[24,40,'green'] ];
   


     // Create the Scatter chart.
      scatter = new RGraph.Scatter({

         id: 'cvs',
         data: [ data1 , data2 ],
         options: {
         line: true,
         linelinewidth: 2,
         ticksize: 10,
         ymin:-20,
         ymax:60 ,
Posted by Richard on 1st December 2017
Hi there,

You could do something like this:

// 1st dataset, 1st point, X coordinate
scatter.data[0][0][0] = null;

// 1st dataset, 1st point, Y coordinate
scatter.data[0][0][1] = null;

RGraph.redraw();

And that should get rid of the point entirely.

Richard
Posted by Jarrod on 1st December 2017
Thanks that works for individual points ,

Just another Question , if I wanted to remove a series lets say { data1 } , how would I access each series and set that to null , I would like to use data1 , data5 = null and series 1 and 5 would disappear from the canvas , and if I wanted to I should store the value because then I could toggle the series on and off , bu setting the value or making it null , Is that correct ,

<Pre> thanks :)
Posted by Richard on 1st December 2017
Hi there,

Well I was just having a play in the browsers console and you could do this:


// Copy the dataset
var tmp = RGraph.arrayClone(scatter.data[0]);

// Remove it from the Scatter chart
scatter.data[0] = [];

// Adjust this number depending on your data
scatter.set({ymax: 100});

RGraph.redraw();


// Now put it back
scatter.data[0] = RGraph.arrayClone(tmp);

RGraph.redraw();

Richard
Posted by Jarrod on 1st December 2017
Hi thanks that helped a lot ,

please remind ( all your Viewers ) --- In Javascript when passing an array[value] it passes it by reference not pure value so when coping the array make sure you use Slice as it takes the pure value and puts it in your new array, If you dont when you change the original array it messes with your copy and its hopeless to try keep values of the original in an array that also changes when you change the original ,
( when you want to copy, array data use Slice[index] )

  var keepdata=[];

  if (scatter.data[graphlinenum] == "[]") {
     
   //alert(keepdata[graphlinenum]);

   scatter.data[graphlinenum] = keepdata[graphlinenum] ;
 
  //alert(scatter.data[graphlinenum]);

       
  } else { // there is data remove it to toggle
  
   keepdata[graphlinenum] = scatter.data[graphlinenum].slice(0);
   scatter.data[graphlinenum] = "[]";

   } ;

    RGraph.redraw();
Posted by Jarrod on 2nd December 2017
Yes Even better ,
Now I have taken a few step forward , and I cant find how I place my x axis labels on the tick marks and not in the middle of the ticks so I have the x axis as

| | | | |
    0 1 2 3

and the labels are in the middle of the vertical not at the start so my scatter graph point is out of sync to the x axis   ?

I id see it in the docs but i cant find it again ( would be nice to have a search function on the Rgraph site)

Thanks ( for all, and other help you provide )
Posted by Richard on 2nd December 2017
Hi there,
I think you'll need to turn off the Scatter chart X axis (I think the noxaxis=true option will do that) and use the drawing API X axis object for that:

www.rgraph.net/canvas/docs/drawing-api-xaxis.html

And regarding a search option - you c an use Google - simply put this in the search box:

site:rgraph.net "scatter chart x axis"

Though I don't think on this occasion it would have helped.

Richard
Posted by Jarrod on 6th December 2017
Morning , Richard,

I have data and labels starting now and going into the past ,

How do I get my Graph to start drawing points from Now most left on the graph to past on right of Graph

<script>

scatter = new RGraph.Scatter({
         id: 'cvs1',
         data: [ [['2017-12-06 03:00:15',2.18,'#e01616'],['2017-12-06 02:00:14',2.17,'#e01616'],['2017-12-06 01:00:14',2.23,'#e01616'],['2017-12-06 00:00:04',2.31,'#e01616'],['2017-12-05 23:00:04',2.40,'#e01616'],['2017-12-05 22:00:04',2.52,'#e01616'],['2017-12-05 21:00:24',2.73,'#e01616'],['2017-12-05 20:00:24',2.84,'#e01616'],['2017-12-05 19:00:24',2.85,'#e01616'],['2017-12-05 18:00:26',5.14,'#e01616'],['2017-12-05 17:00:26',2.37,'#e01616'],['2017-12-05 16:00:17',2.16,'#e01616'],['2017-12-05 15:00:17',2.03,'#e01616'],['2017-12-05 14:00:17',2.13,'#e01616'],['2017-12-05 13:00:07',2.58,'#e01616'],['2017-12-05 12:00:08',1.95,'#e01616'],['2017-12-05 11:00:07',1.79,'#e01616'],['2017-12-05 10:00:07',2.25,'#e01616'],['2017-12-05 09:00:30',1.80,'#e01616'],['2017-12-05 08:00:18',1.58,'#e01616'],['2017-12-05 07:00:18',1.07,'#e01616'],['2017-12-05 06:00:18',0.86,'#e01616'],['2017-12-05 05:00:09',0.92,'#e01616'],['2017-12-05 04:00:09',0.97,'#e01616'],['2017-12-05 03:00:09',1.04,'#e01616'],['2017-12-05 02:00:09',1.09,'#e01616'],['2017-12-05 01:00:00',1.13,'#e01616'],['2017-12-05 00:00:30',0.95,'#e01616']] ]

     })
             scatter.Set('chart.line', true);
             scatter.Set('chart.fill', true);
             scatter.Set('chart.lineLinewidth',3);
             scatter.Set('chart.backgroundColor',['rgba(63, 182, 191, .4)']);
             scatter.Set('chart.title', 'Temperature Averages');
             scatter.Set('chart.tooltips.hotspot', 25);
            
            scatter.Set('chart.scaleZerostart', false);
            
             scatter.Set('chart.labels', [['2017-12-06 03:00:00','2017-12-06 03:00:00'],['2017-12-06 02:00:00','2017-12-06 02:00:00'],['2017-12-06 01:00:00','2017-12-06 01:00:00'],['2017-12-06 00:00:00','2017-12-06 00:00:00'],['2017-12-05 23:00:00','2017-12-05 23:00:00'],['2017-12-05 22:00:00','2017-12-05 22:00:00'],['2017-12-05 21:00:00','2017-12-05 21:00:00'],['2017-12-05 20:00:00','2017-12-05 20:00:00'],['2017-12-05 19:00:00','2017-12-05 19:00:00'],['2017-12-05 18:00:00','2017-12-05 18:00:00'],['2017-12-05 17:00:00','2017-12-05 17:00:00'],['2017-12-05 16:00:00','2017-12-05 16:00:00'],['2017-12-05 15:00:00','2017-12-05 15:00:00'],['2017-12-05 14:00:00','2017-12-05 14:00:00'],['2017-12-05 13:00:00','2017-12-05 13:00:00'],['2017-12-05 12:00:00','2017-12-05 12:00:00'],['2017-12-05 11:00:00','2017-12-05 11:00:00'],['2017-12-05 10:00:00','2017-12-05 10:00:00'],['2017-12-05 09:00:00','2017-12-05 09:00:00'],['2017-12-05 08:00:00','2017-12-05 08:00:00'],['2017-12-05 07:00:00','2017-12-05 07:00:00'],['2017-12-05 06:00:00','2017-12-05 06:00:00'],['2017-12-05 05:00:00','2017-12-05 05:00:00'],['2017-12-05 04:00:00','2017-12-05 04:00:00'],['2017-12-05 03:00:00','2017-12-05 03:00:00'],['2017-12-05 02:00:00','2017-12-05 02:00:00'],['2017-12-05 01:00:00','2017-12-05 01:00:00'],['2017-12-05 00:00:00','2017-12-05 00:00:00'], ]);

             scatter.Set('chart.xmin', RGraph.parseDate('2017-12-05 00:00:30'));
             scatter.Set('chart.xmax',RGraph.parseDate('2017-12-06 07:00:00'));
            
             scatter.Set('tooltips.coords.page', true);
             scatter.Set('chart.backgroundBarcolor1','rgba(63, 182, 191, .3)');
             scatter.Set('chart.backgroundBarcolor2','rgba(255, 182, 191, .3)');
           
             scatter.Set('chart.labelsAbove',false);
             scatter.Set('chart.textAngle',45);
             scatter.Set('chart.gutterBottom',50);
             scatter.Set('chart.gutterTop',40);
          
             scatter.Set('chart.numxticks', 23);
             scatter.Set('chart.key', [3640791]);
             scatter.Set('chart.keyPosition', 'gutter');
             scatter.Set('chart.keyInteractive', true);
             scatter.Set('chart.keyColors',[ '#e01616',]);
             scatter.Set('chart.keyMargin', 5);
             scatter.Set('chart.keyLabelsAxes', 'n');

             scatter.Set('chart.lineColors', ['#e01616',]);
             scatter.Set('chart.ymin',0);
             scatter.Set('chart.ymax',10) ;
             scatter.Set('chart.labels.below', true);
             scatter.Set('chart.tickmarks','circle');
             scatter.Set('chart.ticksize',8);
            
             scatter.Set('chart.textAccessible',true);
            

         scatter.Set('chart.tooltips', ['<b>Winner!</b><br />John', 'Fred', 'Jane', 'Lou', 'Pete', 'Kev']);
         scatter.Set('chart.tooltips.effect', 'expand');
        
         scatter.Set('chart.linewidth', 2);
         scatter.Set('chart.shadow', true);
         scatter.Set('chart.shadow.offsetx', 0);
         scatter.Set('chart.shadow.offsety', 0);
         scatter.Set('chart.shadow.color', 'green');
         scatter.Set('chart.shadow.blur', 25);
            

scatter.Set('chart.textSize', 14);
            

  scatter.Draw();




             };
         </script>
Posted by Richard on 6th December 2017
Hi there,

If you mean a scrolling chart then you could separate out the data into an array then on each iteration add an entry to it, take the first entry out, and redraw the chart.

There are examples of scrolling charts in the demos but using the Line chart instead. But the principle is the same.

Instead of recreating a new Scatter chart each time you could also try manipulating the .data array. The first dataset in that case would be the variable:

scatter.data[0]

So again, take one off the front and add one to the end and then redraw.

Richard

Add a reply




« Back to message list