Iterating Through A Set Morris Donuts In Asp.net Application Using Jquery And Move Text Outside
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><scriptsrc="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script><scriptsrc="http://code.jquery.com/jquery-1.8.2.min.js"></script><scriptsrc="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script><metacharset=utf-8 /><title>Morris.js Donut Chart Example</title></head><body><divID="donut_holder"></div><spanid="morrisDonutSpan"></span><divID="donut_holder2"></div><spanid="morrisDonutSpan2"></span><divID="donut_holder3"></div><spanid="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);
});
});
});
functionprepareMorrisDonutChart(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 donutvar 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"