Morris donut graphs. Very long and small labels - label

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

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:
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.

Related

KendoUI forcePageBreak does not display long Partial Views

I'm currently trying to save a PDF for a web application with many pages. I call the partial views into one main page and use KendoUI to save the DOM into the PDF. Because some of these pages are very long and are variant depending on user input, I need the data to display over multiple pages. Whenever forcePageBreak is not called, KendoUI naturally does this by displaying all the data over multiple pages. Although when I turn on forcePageBreak and set page breaks at the beginning of each Partial in the main page, each Partial will only display one page in the pdf, and the rest of the data is cut off.
Here is an example of the main page's code:
<div class="myCanvas" id="myCanvas">
<div class="page-break">#{Html.RenderPartial("_Page1", Model._VM_Page1);}</div>
<div class="page-break">#{Html.RenderPartial("_Page2", Model._VM_Page2);}</div>
<div class="page-break">#{Html.RenderPartial("_Page3", Model._VM_Page3);}</div>
<div class="page-break">#{Html.RenderPartial("_Page4", Model._VM_Page4);}</div>
<div class="page-break">#{Html.RenderPartial("_Page5", Model._VM_Page5);}</div>
<div class="page-break">#{Html.RenderPartial("_Page6", Model._VM_Page6);}</div>
</div>
<script>
function ExportPdf() {
kendo.drawing
.drawDOM("#myCanvas",
{
forcePageBreak: ".page-break",
paperSize: "A4",
margin: { top: "1cm", bottom: "1cm" },
scale: 0.6,
height: 500,
multiPage: true
})
.then(function (group) {
kendo.drawing.pdf.saveAs(group, "exportFile.pdf");
});
}
I've tried putting page breaks within the beginning of each partial, to no avail. I've looked into trying to set groups, but I'm not exactly sure I understand if that will solve my problem. And CSS page-break-before: always isn't working. I'm unsure what to do.
The answer seems to be dive deeper for the lowest possible class that can have a page break before.
I generally solved this issue by putting the page breaks on the header classes within each Partial View. For example:
function ExportPdf() {
kendo.drawing
.drawDOM("#myCanvas",
{
forcePageBreak: ".page-header",
paperSize: "A4",
margin: { top: "1cm", bottom: "1cm" },
scale: 0.6,
height: 500,
multiPage: true
})
.then(function (group) {
kendo.drawing.pdf.saveAs(group, "exportFile.pdf");
});
}
Where the logic of my code would be similar to:
<div class="main">
<div class="page-header>
Header
</div>
<div class="ContentContainer">
Content
</div>
</div>
It was weird because I had set the page breaks at the global level where the partials were being called and also at the local level where main was being called, but I needed to dive even deeper to the page-header items to get it to work.
Here is my example working properly
Step 1: All CDNs
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js"></script>
Step 2: Add div to data div which you have created
<div data-uid="#= uid #" class="#= (id%10 == 0 ? 'page-break' : '') #">
</div>
Step 3: JS code
kendo.drawing.drawDOM("#downloadPDF", {
paperSize: "A4",
margin: {
left: "1cm",
top: "1cm",
right: "1cm",
bottom: "1cm"
},
scale: 0.8,
forcePageBreak: ".page-break"
})
.then(function(group) {
kendo.drawing.pdf.saveAs(group, "plagiarism.pdf")
});

Datepicker control is not displayed correctly inside of kendo ui template

I have a kendo ui template with a datepicker control
<script type="text/x-kendo-template" id="tmplStep1">
<form>
Date: <input id="datepicker" maxlength="10"/>
<i>(mm/dd/yyyy)</i><br />
</form>
</script>
I'm using a Windows Popup to display the template in this way
var detailsTemplate = kendo.template($("#tmplStep1").html());
dataItem = this.dataItem(e);
var wnd = $("#winDate")
.kendoWindow({
title: "Form",
modal: true,
visible: false,
resizable: false,
width: 100,
appendTo: "form#frm"
}).data("kendoWindow");
wnd.content(detailsTemplate(dataItem));
wnd.center().open();
I know, I need to initialize the datepicker, but I don't know how to do it. I put the below instruction outside of the template, but obviously it is not working, the control displayed is a simple textbox.
<script>
$("#datepicker").kendoDatePicker();
</script>
Does anyone know how to resolve it?
call $("#datepicker").kendoDatePicker(); right after you set template as window content, because before that temlate is not a part of DOM yet:
...
wnd.content(detailsTemplate(dataItem));
$("#datepicker").kendoDatePicker();
wnd.center().open();

paper-dropdown-menu overlay not working

I've a paper-dropdown-menu element. How can I show a different selected label, than valueattr is targeting at?
<link rel="import" href="components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="components/paper-item/paper-item.html">
<polymer-element name="my-dropdown-element" attributes="selectedModus">
<template>
<paper-dropdown-menu label="Modus" on-core-select="{{modusSelect}}">
<paper-dropdown class="dropdown">
<core-menu class="menu" selected="{{selectedModus}}" valueattr="val">
<template repeat="{{d in data}}">
<paper-item val="{{d.val}}">{{d.text}}</paper-item>
</template>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
</template>
<script>
Polymer('my-dropdown-element', {
data: [],
ready: function() {
this.data = [];
var entry = {
val: 0,
text: 'Aus'
};
this.data.push(entry);
entry = {
val: 1,
text: 'Ein'
};
this.data.push(entry);
entry = {
val: 2,
text: 'Auto'
};
this.data.push(entry);
entry = {
val: 3,
text: 'Auto (Absenken)'
};
this.data.push(entry);
}
});
</script>
</polymer-element>
When I set selectedModus = 2, the highlighted Item in the opened dropdown is auto. This is correct. But in the dropdown label there is always 0, 1, 2, 3 and not the text representation of the dropdown.
Please help me
Thanks.
edit:
I've deleted all Polymer components from my project. Then I've updated all dependencies via bower from the master's branch of each component.
Now the correct label is showing in the closed dropdown. But clicking on the arrows, doesn't open the drop down menu. I'm getting an error in the timinig-utilities.js which can be traced back to paper-dropdown-transistion.html line 152.
Very strange.
Ok i've found the answer to my problem. It seems to be a bug in the current core-animation\web-animations.html. The change mentioned here
https://github.com/zenorocha/core-animation/commit/0d047ce11e5e6b25c02f1d89b2e7aa53588d7316 worked for me.

Show two edit fields for column in jqgrid add/edit form

I have a request from the client to have a drop down and a text field for mobile number column in jqgrid add / edit form.
Like this
Mobile number <countrycode drop down> <mobile number text field>
I want to know can this be done in jqgrid add/edit form? If yes, then how?
#UPDATE:
Here is how i want the output in add / edit form (you will need to create a html file with below code and see the output in browser). Sorry can't upload image, do not have that many reputations :(...
<html>
<body>
<table>
<tr>
<td>Phone#</td>
<td>:</td>
<td>
<select><option value=1>1</option></select>
<input type="text"/>
</td>
</tr>
</table>
</body>
</html>
This is certainly possible using jqgrid. I think you'll find this question relevant to what you're trying to accomplish. Particularly of interest will be the way that the edittype within the colModel is set up for the field you're interested in making a select. The text input will be the default format of the field in the edit modal.
All that being said, I'm assuming you're not using the paid version of jqGrid, which in the case that you are, you'll need to set your edit options a little differently. You can read a little more about doing it in the paid version here.
Although it has been 5 years, but no one answer, I having the same problem, and I has been find out solution. It easy but I has a lot of time to do it. Just like this:
In ColModel set formoptions: { rowpos: x, colpos: y }:
colModel: [
{ name: "CategId", index: "CategId", label: arrTool.CategId, width: 100, editable: true, formoptions: { rowpos: 1, colpos: 1 } },
{ name: "Category", index: "Category", label: arrTool.Category, width: 100, editable: true, formoptions: { rowpos: 1, colpos: 2 } }
]
Result:

jqplot and legend option issue

I have the following in my code. Having the option
legend: {show:true}
messes up the chart badly. The legend section is so long
and there is no chart.
I have pasted the image here of how the chart looks :
http://tinypic.com/view.php?pic=2eqgbgy&s=7
It shows fine without the legend option though, but chart is of course without the legend.
In Chrome I see the following exception
Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1
<script type="text/javascript">
line2 = [['Living Expenses',1000], ['Loans',2000], ['Credit
Card',500]];
$j(document).ready(function() {
$j.jqplot.config.enablePlugins = true;
$j.jqplot('piechartdiv', [line2], {
title: 'Where is my money going?',
seriesDefaults:{renderer:$j.jqplot.PieRenderer,
rendererOptions:{sliceMargin:8}}, legend:{show:true}
});
});
</script>
<div style="width: 450px;margin: 0px auto;">
<div id='piechartdiv'></div>
</div>
Any help appreciated.
Are you using Bootstrap or some other CSS reset library?
If you go into firebug, and select the <table class="jqplot-table-legend" ...> element, you'll probably see that there is a width:100% default property set the table elements. You can fix it in your CSS layout:
#piechartdiv table.jqplot-table-legend {
width:auto;
}
The only thing that seems weird to me is this:
$j.jqplot
Why are there some J's on your code?, besides that, everything seems to be fine, maybe try putting a location on the legend to see if that fix the issue, here is an example:
plot = $.jqplot('chart2', [arr], {
grid: {
drawBorder: true,
drawGridlines: false,
background: '#FFFFFF',
shadow: true
},
seriesDefaults: {
renderer: $.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true
}
},
legend: {
show: true,
location: 'e'
}
});
Have you included the jqplot.css file in your code.
Make sure that it is included in the code, and that the file is also present in the directory you are referring to.
Thank you
I came across something similar.
try checking css property text-align:left
<div id='piechartdiv' style="text-align:left;"></div>
I'm afraid I don't know why but these fixed the error for me

Resources