Skip to content Skip to sidebar Skip to footer
Home / Asp.net / C# / Javascript / Jquery / Morris.js

Iterating Through A Set Morris Donuts In ASP.NET Application Using JQuery And Move Text Outside

Post a Comment
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 try

Solution 1:

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);
    }

});

Post a Comment for "Iterating Through A Set Morris Donuts In ASP.NET Application Using JQuery And Move Text Outside"