Iterating through a set Morris Donuts in ASP.NET application using jQuery and move text outside

Question

TL;DR: 1. Iterate through all donuts within a Div. 2. Move label text outside the donut on mouseOver.

I came across this and this questions that got me half way there, but I am trying to iterate through several donuts. I'm new to jQuery and I've tried a few options, but I just don't have a complete understanding.

Here's my code. Any help would be appreciated:

HTML

    `<div class="dials">
<div class="row">
        <div class="col-md-4">
            <asp:Label ID="lblSurvey1" Text="" runat="server" CssClass="page-subheader" />
            <div id="divSurvey1"></div><span id="morrisDonutChartSpan"></span>
        </div>
        <div class="col-md-4">
            <asp:Label ID="lblSurvey2" Text="" runat="server" CssClass="page-subheader" />
            <div id="divSurvey2"></div><span id="morrisDonutChartSpan"></span>
        </div>
    </div>
</div>`

Donut script:

`

Morris.Donut({
    element: 'divSurvey1',
    colors: ['#2299DE', '#97C240', '#2c594f', '#002D40', '#BC0D20', '#FF8922', '#f0b71e', '#9369d2'],
    labelColor: '#B5B5B5',
    resize: false,
    data: [
      <asp:Literal id="litSurvey1Data" runat="server"></asp:Literal>
]
});

Morris.Donut({
    element: 'divSurvey2',
    colors: ['#2299DE', '#97C240', '#2c594f', '#002D40', '#BC0D20', '#FF8922', '#f0b71e', '#9369d2'],
    labelColor: '#B5B5B5',
    resize: false,
    data: [
      <asp:Literal id="litSurvey2Data" runat="server"></asp:Literal>
]
});

    $( ".dial" ).mouseover(function() {
        prepareMorrisDonutChart();
    });

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

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

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

`

I'ts not very clear for me what you want to achieve. You want to move text outside the donut: the value (number)? The label? Both? When? On page load? On some action (for example mouseover)? Please explain a little more what exactly do you want to change from a "normal" use of a Morris Donut chart. — krlzlx, Nov 26 '16 at 22:27
Thanks for pointing that out. Just edited my question to provide those answers (label text and mouseover). — megamaiku, Nov 28 '16 at 17:03

megamaiku · Answer 1 · 2016-12-03T00:01:16.297

Maybe a bit overkill, but I got it to work. Thought I'd share the code and make someone happy out there lol.

HTML

<!DOCTYPE html>
<html>

<head>
    <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>
    <meta charset=utf-8 />
    <title>Morris.js Donut Chart Example</title>
</head>

<body>
    <div ID="donut_holder"></div>
    <span id="morrisDonutSpan"></span>

    <div ID="donut_holder2"></div>
    <span id="morrisDonutSpan2"></span>

    <div ID="donut_holder3"></div>
    <span id="morrisDonutSpan3"></span>

</body>

</html>

JavaScript

    $(function() {

    var morrisElementArray = [
  {morrisElement: "donut_holder", morrisSpan: "morrisDonutSpan"},
  {morrisElement: "donut_holder2", morrisSpan: "morrisDonutSpan2"},
  {morrisElement: "donut_holder3", morrisSpan: "morrisDonutSpan3"}
        ];

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

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

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


$(document).ready(function() {

    morrisElementArray.forEach(function(element, index) {

        prepareMorrisDonutChart(element.morrisElement, element.morrisSpan);
        $(this).mouseover(function() {
            prepareMorrisDonutChart(element.morrisElement, element.morrisSpan);
        });
    });
});


function prepareMorrisDonutChart(morrisEle, morrisSpa) {
    //hides description from donut
    $("#" + morrisEle + " tspan:first").css("display", "none");
    // increases number text size
    $("#" + morrisEle + " tspan:nth-child(1)").css("font-size", "40px");

    // gets html description from donut
    var isi = $("#" + morrisEle + " tspan:first").html();
    // assigns html description to span
    $("#" + morrisSpa).text(isi);
    }

});

Iterating through a set Morris Donuts in ASP.NET application using jQuery and move text outside

1 Answers1

Linked