2

I have very long labels on my morris donut graphs. Because of their long it's very hard to read.

I would like to have some kind of popup with label when I hover on that text. But there are no css classes to bind a handler.

js code:

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

I've tried formatter, but it is not a solution.

Please give me some help.

Here is example

masterdany88
  • 5,041
  • 11
  • 58
  • 132

1 Answers1

2

After a long time without any answer I decide to post my own solution. I doesn't do exactly what I've asked for, but supply readable solution.

It was done with label below the donut, instead of inside donut circle.

Here is working solution on JS Bin

Below You can see a screenshot of working in app:

enter image description here

Here is the code:

JS:

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


$( "#morrisDonutChart" ).mouseover(function() {
    prepareMorrisDonutChart();
});

$( document ).ready(function() {
    prepareMorrisDonutChart();
});

function prepareMorrisDonutChart() {
    $("#morrisDonutChart tspan:first").css("display","none");
    $("#morrisDonutChart tspan:nth-child(1)").css("font-size","40px");

    var isi = $("#morrisDonutChart tspan:first").html();
    $('#morrisDonutChartSpan').text(isi);
}

HTML head:

<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.5.0/mootools-yui-compressed.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>

HTML body:

  <div id="morrisDonutChart"></div>
  <div class="alert alert-info" role="alert">
    <span id="morrisDonutChartSpan"></span>
  </div>

I hope this will help someone.

masterdany88
  • 5,041
  • 11
  • 58
  • 132
  • Hi masterdany88. How would you iterate through several donuts? I've been trying to implement your method on a page that has about 10 donuts, but I can't get the logic to iterate through all of them. Would you know? Thanks a lot! – megamaiku Dec 02 '16 at 18:02
  • Managed to get it to work with help from your answer, Here's the link http://stackoverflow.com/questions/40810160/iterating-through-a-set-morris-donuts-in-asp-net-application-using-jquery-and-mo/40942562#40942562 – megamaiku Dec 02 '16 at 23:53