The onclick event and alignment

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 prosenjit on 19th September 2013
Hi
I have created a bar chart with some very pleasing effects. However I want to align it according to my convenience and also I have included the onclick function which would take me to a new graph. I am not sure how to achieve that. Please refer to my code below and help me out.

<!DOCTYPE html>
<html>
<head>
<title>RGraph: Power Outage</title>
<script src="d:/RGraph/libraries/RGraph.common.core.js" ></script>
<script src="d:/RGraph/libraries/RGraph.bar.js" ></script>
<script src="d:/RGraph/libraries/RGraph.common.key.js" ></script>
<script src="d:/RGraph/libraries/RGraph.common.effects.js" ></script>
<script src="d:/RGraph/libraries/RGraph.drawing.rect.js" ></script>
<script src="d:/RGraph/libraries/RGraph.common.dynamic.js" ></script>
</head>

<h1>Power Outage</h1>
<p><b>
Region Name vs Events</b>
</p>
<body>

<!-- This is the canvas that the graph is drawn on -->
<canvas id="myBar" width="500" height="500">[No canvas support]</canvas>
 
<!--This creates and displays the graph.We can call this from the window.onload event,
allowing you to put it in your pages header. -->

<script>

window.onload = function ()
{

  function myMousemove (e, bar)
             {
                 e.target.style.cursor = 'pointer';
             }

  function myClick (e, bar)
             {
                
   alert("A bar was clicked");
  
  
             }


var bar = new RGraph.Bar('myBar', [[20,5,3,200,100,2],[5,50,49,50,50,0]]);
  bar.Set('events.mousemove', myMousemove)
  bar.Set('events.click', myClick)


//bar.Set('grouping', 'stacked')


bar.Set('colors', ['red','black','yellow','blue','#0f0','gray'])


bar.Set('key', ['Substations count','Total Incidents','Total Incident reported through calls','Total circuits','Affected circuits count','False Alert'])
bar.Set('key.interactive', true);

bar.Set('chart.labels', ['Irwindale','Westlake village']);

bar.Set('chart.title.yaxis',['Count']);

//bar.Set('chart.gutter', 25);
//bar.Get('chart.gutter');

  bar.Set('variant', '3d')
  bar.Set('strokestyle', 'transparent')
  bar.Set('hmargin.grouped', 0)
  bar.Set('scale.round', true)



bar.Draw();
RGraph.Effects.Bar.Grow(bar);


}
</script>

</body>
</html>

Thanks
Prosenjit
Posted by RGraph support on 19th September 2013
Hi there,

What is it that you want to do and what's the issue?




Richard, RGraph Support
Posted by prosenjit on 20th September 2013
Hi Richard,
I want my chart in such a way that whenever I click on a bar, it should redirect me to a fresh bar chart. I have created a function "myclick" which gives an alert message. Also I want to do something with mouse over functionality such that when I move the cursor around it should give me the corresponding Y axis values like graphs prepared uing Jquery.

Regards,
Prosenjit
Posted by RGraph support on 20th September 2013
Hi there,

> I want my chart in such a way that whenever I click on a bar, it should redirect me to a fresh bar chart.

There's no redirect involved - just use the RGraph.Reset(canvas) function and draw a new chart. There's an example here that may be of some use:

www.rgraph.net/demos/bar-drilldown.html

To show the Y value you will need to use the API - specifically the obj.getYCoord(e) function in the onmousemove event listener. That will give you the Y value, then you can draw that on the canvas.


Richard, RGraph Support
Posted by prosenjit on 20th September 2013
Hi
Thanks a lot for the quick response. It was a great help. I would also suggest you to include some video tutorials in the home page.

Thanks and Regards,
Prosenjit
Posted by prosenjit on 25th September 2013
Hi,
Please provide a sample chart demonstrating the mouse over functionality such that when the cursor is moved over the chart, it shows the corresponding y axis value.

Regards,
Prosenjit
Posted by RGraph support on 25th September 2013
Hi there,

You will need to use the associated charts (I'm assuming the Bar or Line chart) getValue(e) function in your event handler. You can find out on the relevant charts API docs page.



Richard, RGraph Support

Add a reply




« Back to message list