Trying to generate charts when a bar is selected

Share RGraph:   Share or Like RGraph on Facebook!

« 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 Jhon on 30th April 2017
Hi Richard,
  Apologies pasted code here i can't provide the link..

  I am drawing bar chart with these config options select a single bar i am calling one method(generate_all_charts) mentioned below in that method generates 4 bar charts based on the selected bar data with different canvas id's here i facing one problem with on draw function when a bar is on selected mode i.e highlighted with border the reaming charts generated but when i click on any canvas the i.e (remaining 4 chart canvases) it' also calling the same method's how can i solve these problem.
var state = {
selected: []
};
             var bar = new RGraph.Bar({
             id: canvas,
             data : data,
             options: {
                 variant : '2d',
                 variantThreedAngle : 0.1,
                 colors : colors,
                 chartColorsSequential : true,
                 tooltipsHighlight: false,
              }
         }).draw().on('click', function (e, shape)
      {
          state.selected[shape.index] = state.selected[shape.index] ? false : true;
          bar.draw();
      }).on('draw', function (obj)
      {
         for (var i=0; i<obj.data.length; ++i) {
             if (state.selected[i]) {
                 var coords = obj.coords[i];
                 RGraph.path2(
                     obj.context,
                     'lw 3 b r % % % % f rgba(255,255,255,0.8) s #a00 lw 1',
                     coords[0],
                     coords[1],
                     coords[2],
                     coords[3]
                 );
             }
         }
         var selected=[],tool_tips=[];
         selected = state.selected;
         var tooltips = obj.properties['chart.tooltips'];
         for (var i=0; i<selected.length; i++) {
           if(selected[i] == true || selected[i] == "true"){
            tool_tips.push(tooltips[i])
           }
         }
             console.log("tool_tips",tool_tips)
         dashboard.view_table_data={};
         if(tool_tips.length > 0){
          for(var t in tool_tips)
           generate_all_charts(tool_tips[t],obj.id);
         }
     });
}

Thank you
Jhon
Posted by Richard on 30th April 2017
Hi there,

I appears you have the code to generate the charts in the ondraw event. The charts can be redrawn multiple times and it's not tracked nor guaranteed.

I would therefore suggest that you put the code to generate you charts in the onclick event, after the state variable has been updated. and the draw() function has been called.
Maybe before - try each and see if it makes a difference and hence which you prefer.


Richard
Posted by Jhon on 30th April 2017
Hi Richard,

  thank you for your suggestion finally i solved it,can i change the colour of particular bar if i am selected on bar for this i am used the following code(Forget about previous example this is new problem)
co.strokeStyle = 'black';
co.fillStyle = 'black';
co.strokeRect(top, left, width, height);
co.fillRect(top, left, width, height);
but when i click on canvas the filled colour is gone away
Posted by Richard on 30th April 2017
Hi there,

Instead of "top" and "left" variable names you would be better off using "x" and "y". So the line would a little like this:

co.fillRect(x, y, width, height);

Not sure about the issue - though the chart may be being redrawn - so anything that you add (the fillRect) is being lost. Perhaps if you do this so that there's a little delay before the fillrect call happens:

setTimeout(function ()
{
     co.fillRect(x, y, width, height);
}, 250);


Richard
Posted by on 6th May 2017
Hi Richard,

    I am drawing bar chart like this,when i clicked on bar it's showing with highlighted border that's ok.
here how can i remove the selected border whatever applied when click on a bar because of i am drawing multiple bar charts like this example if selected i am generate immediate next charts so the previous highlighted border in previous bar chart still in on selected mode (applied with border and stroke)
so i need to remove it dynamically when i clicked next chart.can you please assume problem i need this solution i don't have any other way...

<script>
          state = {
              selected: []
          };

          bar = new RGraph.Bar({
              id: 'cvs',
              data: [4,8,6,3,5,6,8,9],
              options: {
              }
          }).draw().on('mousemove', function (e, shape)
          {
              return true;
          }).draw().on('click', function (e, shape)
          {
              state.selected[shape.index] = state.selected[shape.index] ? false : true;
              RGraph.redraw();
          }).on('draw', function (obj)
          {
            console.log("click event fires on canvas");
              for (var i=0; i<obj.data.length; ++i) {
                  if (state.selected[i]) {
                 
                      var coords = obj.coords[i];
                 
                      RGraph.path2(
                          obj.context,
                          'lw 3 b r % % % % f rgba(255,255,255,0.8) s #a00 lw 1',
                          coords[0],
                          coords[1],
                          coords[2],
                          coords[3]
                      );
                  }
              }
          });
      </script>
Posted by Richard on 6th May 2017
Hi there,

If I understand you correctly you should be able to redraw the chart:



function clearSelection ()
{
     // Reset the global
     state = {
         selected: []
     };

     RGraph.redraw();
}



Richard
Posted by Enter your name... on 6th May 2017
Hi Richard,

    I used this function Rgraph .redraw() but the borders are not removing i think it's drawing same chart how can i solve this issue
Posted by Enter your name... on 6th May 2017
Hi Richard,

    I set state object as global then used this function Rgraph .redraw() it's removing but i am clicking on another canvas the border is applying for the previous canvas also...
Posted by Richard on 6th May 2017
Hi there,

well the RGraph.redraw() function should redraw all the (RGraph) canvas tags on the page. You could do it manually though:

function clearSelection ()
{
     state = {selection: []};

     // Assume that "bar" refers to the RGraph bar chart object
     RGraph.clear(bar.canvas);
     bar.draw();
}


Richard
Posted by Sudarshan on 7th May 2017
Hi Richard,

    I am using the following code to clear and redraw the canvas

    state.selected=[];
    var previous_bar=ds.previous_bar;
    RGraph.clear(previous_bar.canvas);
    previous_bar.draw();

here i am storing the the previous bar object then clear the prevoius bar and draw the previous bar object it's drawn successfully the border selections are gone away but i am clicking on next generated bar chart canvas i am drawing next bar chart also like the same in on click action to border selection and click on same bar it's removing the border but i am clicked on next generated chart i am click on thi bar it's alo filling the previous bar charts also how can i solve this issue.
Posted by Richard on 7th May 2017
Hi there,

I can't tell what you saying - you'll need to send me a URL to an example page that I can look at.


Richard

Add a reply




« Back to message list