How to add click handler on morris donut chart

Question

5.00/5 (1 vote)

See more:

Hi I am making charts by using this Morris js http://www.oesmith.co.uk/morris.js/donuts.html[^]

I am able to bind these charts but i am able to add click handler on it

i want achieve some thing like this
http://www.jqueryscript.net/demo/Morris-Good-looking-Charts-Plugin/examples/donut.html[^]

C#

Morris.Donut({element: 'dvTestData',data: [ { label:  "platelets", value: 16.70 }, { label:  "Serum test", value: 50.00 }, { label:  "serum testing", value: 16.70 }, { label:  "Whole blood test", value: 16.70 }],formatter: function (x) { return x + ' % '}});

so when i will click it i can call a fucntion which will bind grid

Posted 3-Feb-14 18:12pm

surajemo

Updated 3-Feb-14 19:03pm

Sampath Lokuge

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sampath Lokuge · Accepted Answer · 2014-02-03T18:42:00

Solution 1

Try is as below.

$("svg rect.bar-1").on 'click', -> console.log("clicked the first bar of bar chart")

Please check below mentioned link for more info.

Added support for handling click events

UPDATE

C#

Morris.Donut({
  element: 'donut-example',
  data: [
    {label: "Download Sales", value: 12},
    {label: "In-Store Sales", value: 30},
    {label: "Mail-Order Sales", value: 20}
  ]
});

$( "#donut-example" ).click(function() {
  alert( "Handler for .click() called." );
});

LIVE DEMO : JSBin

Color for each segments :

C#

Morris.Donut({
  element: 'donut-example',
  data: [
    {label: "Download Sales", value: 12 },
    {label: "In-Store Sales", value: 30},
    {label: "Mail-Order Sales", value: 20}
  ],
  colors:['#FF0000',"#00FF00","#FFFF00"]
});

Color Demo : JsBin

Posted 3-Feb-14 18:42pm

Sampath Lokuge

Updated 3-Feb-14 20:57pm

v4

Comments

surajemo 4-Feb-14 0:54am

how do i write it i am using pie chart that is for rectangle how do i implement it using this
http://www.jqueryscript.net/demo/Morris-Good-looking-Charts-Plugin/examples/donut.html[^]

Sampath Lokuge 4-Feb-14 0:56am

Can you put your code snippet ?

surajemo 4-Feb-14 1:00am

Morris.Donut({element: 'dvTestData',data: [ { label: "platelets", value: 16.70 }, { label: "Serum test", value: 50.00 }, { label: "serum testing", value: 16.70 }, { label: "Whole blood test", value: 16.70 }],formatter: function (x) { return x + ' % '}});

I am genreating this dynamically

surajemo 4-Feb-14 1:19am

http://www.jqueryscript.net/demo/Morris-Good-looking-Charts-Plugin/examples/donut.html
check out this example and see in the console

Sampath Lokuge 4-Feb-14 1:37am

Please check my 'UPDATE' section.

surajemo 4-Feb-14 1:43am

i tried like this
<pre>
Morris.Donut({element: 'dvTestData',data: [ { label: "platelets", value: 16.70 }, { label: "Serum test", value: 50.00 }, { label: "serum testing", value: 16.70 }, { label: "Whole blood test", value: 16.70 }],formatter: function (x) { return x + ' % '}}).on('click', function(i, row){alert(i);alert(row.label);console.log(i, row);});
</pre>

Sampath Lokuge 4-Feb-14 1:45am

Is it working ?

surajemo 4-Feb-14 2:12am

yes

surajemo 4-Feb-14 2:13am

now i want to bind this to a hidden variable and secretly call a button click event so that i can bind the grid

Sampath Lokuge 4-Feb-14 2:16am

Your requirement is not clear ?

surajemo 4-Feb-14 2:34am

when i click the pie chart i will get the test name now i want to send this test name to server side

but i can't bcoz this chart is client side
that is the problem now i want to bind the grid based on the test name
i can't call server side event which binds the grid

Sampath Lokuge 4-Feb-14 2:39am

Just use the Hidden filed for that.By using ajax method send that hidden field's value as a query string.That's it.

surajemo 4-Feb-14 2:43am

ok cool can i apply different colors on the donut chart

Sampath Lokuge 4-Feb-14 2:58am

Yep,It's pretty easy.Please check the 'Color for each segments' section on above answer.

surajemo 4-Feb-14 3:20am

ok

surajemo 4-Feb-14 3:32am

yes it works but in example you have added only 3 values
{label: "Download Sales", value: 12 },
{label: "In-Store Sales", value: 30},
{label: "Mail-Order Sales", value: 20}

if this count increase it is getting the same color is it possible to give different colors i can directly add color those color are being shown is there any way without specifying any color i want to display color
it will dynamically add color

Sampath Lokuge 4-Feb-14 3:37am

If you need to add colors dynamically then you have to use jQuery for that.An array of strings containing HTML-style hex colors for each of the donut segments. Note: if there are fewer colors than segments, the colors will cycle back to the start of the array when exhausted.

surajemo 4-Feb-14 4:44am

but i am generating this scripts dynamically from code behind
Morris.Donut({
element: 'donut-example',
data: [
{label: "Download Sales", value: 12 },
{label: "In-Store Sales", value: 30},
{label: "Mail-Order Sales", value: 20}
],
colors:['#FF0000',"#00FF00","#FFFF00"]
});