0

I'm currently running into a problem using the morris donut chart. In general, my project is required to be available on both touch devices as well as standard devices. We have set the donut chart up so that clicking on one section links you to another page which filters content based on which section you clicked. This one is working like a charm - but not on mobile devices.

As hovering brings up the description of the section (in our case a priority plus how many items with that specific priority exist) and hovering is not possible on touch devices, we can't display what's behind the section.

Thus: Is there any possibility to get the description that appears when hovering over an item into the specific item?

Thank you and kind regards

To clarify my issue I've created a professional illustration:

Click me


I have my HTML code:

<div id="morris-donut-chart"></div> <div id="morris-label"></div>

And my Javascript code to initialize the donut chart:

$(function() {
        // Donut Chart
        Morris.Donut({
            element : 'morris-donut-chart',
            data : [{
                label : "Niedrig",
                value : 5
            }, {
                label : "Normal",
                value : 1
            }, {
                label : "Hoch",
                value : 5
            }, {
                label : "Kritisch",
                value : 11
            }],
            resize : true,
            colors : ['#fff', '#fff', '#fff', '#fff']
        }).on('click', function(i, row){           
            window.location = "/";
        });
    });

and my functions to "outsource" the text:

function outsourceMorrisDonutChartLabel() {
        //$("#morris-donut-chart tspan:first").css("display","none");
        //$("#morris-donut-chart tspan:nth-child(1)").css("font-size","40px");

        var lab = $("#morris-donut-chart tspan:first").html();
        var val = $("#morris-donut-chart tspan:last").html();
        $('#morris-label').text(lab + ": " + val);
    }

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

    $("#morris-donut-chart").mouseover(function() {
        outsourceMorrisDonutChartLabel();
    });

The main problem now is to get the outsourced text which currently is inserted into the div with the id "morris-label" into the morris sections as shown in the image

Tekumi
  • 55
  • 1
  • 7
  • Hi, thank you! The morris chart is used to display jobs categorized by their priority (low, normal, high, critical). As mentioned, I want the center text to always be displayed in the chart items, so that hovering only emphasizes the item. I've searched through the web and found solutions for bar charts only, nothing for morris chart so far. – Tekumi Nov 05 '15 at 09:35
  • I have added the existing code to the first post. – Tekumi Nov 05 '15 at 11:25

0 Answers0