I added kendo chart on a page according to the documentation.
But started to get next error 5 times per each kendo ui chart
Error: <g> attribute transform: Expected number, "matrix(NaN,NaN,NaN,NaN,…".
Charts are drawn but those errors break pdf export. When I use same datasource as in my app on kendo ui dojo.telerik editor there is no error.
I know there might be dozens of possible reasons but I'm a bit locked with that for next few days. So I decided to try luck on stackoverflow in case anyone had anything similar.
Any ideas?
I had the same error, and for me it was related to the <kendo-chart-series-item-labels> component.
I had as property rotation="auto" but the rotation property should be only a number. Removing the property solved it.
<kendo-chart [chartArea]="{ height: 300 }">
<kendo-chart-series>
<kendo-chart-series-item
type="column"
colorField="color"
[gap]="1"
[spacing]="0.25"
[color]="barColor"
[data]="chartData"
[stack]="true"
field="TotalSum"
categoryField="TransactionType"
[tooltip]="{ visible: false }"
>
<kendo-chart-series-item-labels
font="bold 16px unity-medi"
color="#3c3c3c"
rotation="auto"
[margin]="30"
></kendo-chart-series-item-labels>
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
solution: remove rotation property inside the kendo-chart-series-itme-labels component
Kendo API documentation for this component here: https://www.telerik.com/kendo-angular-ui/components/charts/api/SeriesLabelsComponent/
Of course, in your case, it may come from a different component.
Maybe double check if you have a property inside a kendo-chart or one of its child component that requires only numbers while you may be passing a string or something else to it?
Related
Lets say I am creating a bar chart using Recharts, how would i create a custom component for each of the following Recharts components:
XAxis, YAxis, Tooltip, Legend, CartesianGrid, Cell, and Bar
The reason for this s because i am planning to create a chart with a lot of props and wish to separate all the default props and customization in their own individual component for the list component above.
I have tried just putting the CartesianGrid in a react component and the grid will not show
Any ideas?
It seems that you want to wrap the existing Recharts provided components in a custom component for better organization of your code.
This is currently not supported directly by Recharts, as they check for the type of element that you are rendering and if it does not match one of the allowed types it does not get rendered.
For ex:
<LineChart>
<Line></Line>
</LineChart>
would display a line correctly,
But
function MyLine(props) {
return <Line></Line>
}
<LineChart>
<MyLine />
<LineChart>
would not render the line.
This is because, recharts figures out that the MyLine component is not allowed and hence would not be displayed.
This is a big problem as it does not allow us to reuse or compose components.
But there are some workarounds, one of them being calling your custom component as a function directly:
<LineChart>
{
MyLine({})
}
</LineChart>
It also seems like there are no plans to provide such an api in future. All such issues on their github are already closed, without providing a solution.
https://github.com/recharts/recharts/issues/412
https://github.com/recharts/recharts/issues/41
https://github.com/recharts/recharts/issues/1470
I am creating a mobile site using Kendoui mobile and using KendoValidation.
The problem is that by default the error messages block the input area's due to the small display area.
One thought I have is to just change the color of the prompt to red when a input is invalid and, if needed, a tooltip that will display when the input as focus.
Is there a way to stop the messages and get perform this action?
Thanks, George
I found my own solution:
Instantiated the validator using:
var validator=$('#mt-New-Reservation').kendoValidator({ errorTemplate: "" }).data('kendoValidator');
and added the following css:
.k-invalid {background-color: lightpink !important;}
The errorTemplate: "" causes the error message to not display.
The validator adds a class k-invalid to any item that is not valid, so the css changes the background color of the input area.
For my application, most of the inputs as self-explanatory and do not need a detailed message (most of the time the 'required' rule is what's making it invalid). So just changing the background color draws the used's attention to the item that needs to be fixed.
-George
Please see jsfiddle for example, blank out First Name field to have validation tooltip show. In a normal form the validation tooltip positions correctly to the right of each element. But in the popup editor for the grid it still trying to position the tooltip below the element as if it where editing inline. I have tried <span class="k-invalid-msg" data-for="FirstName"></span>but it doesn't change anything. Is there a setting I am missing to get this working in popupeditor? I guess I could manually modify the .k-tooltip but I am hoping for something more built in that handles the positioning correctly, because I am not very good at css.
As you've discovered, the error template for the grid is different to that provided by the kendo validator when applied to standard inputs.
Unfortunately, the validator that is created internally by the grid does not pass along any errorTemplate that you might define in the options object and by the time the "edit" event fires, the validator has already been created and the error template compiled, hence why setting the errorTemplate in the manner you describe does not work. Really, I think the Kendo grid should respect any user defined errorTemplate option but until it does we have to hack a little bit.
The key is to define a custom template and to apply it in the edit event, but instead of using the options object, set the private instance directly. Not ideal, but it works:
edit: function (e) {
e.sender.editable.validatable._errorTemplate =
kendo.template($('#tooltip-template').html());
}
See this updated fiddle for an example of what I think you might be looking to achieve.
http://jsfiddle.net/nukefusion/eQ2j7/10/
(I would post this as a comment but not enough reputation yet...)
I'm successfully using nukefusion's solution. I, too, fought with the syntax error from jQuery for a long time and discovered through debugging that how you define the template is important. In particular, it appears that the template has to be written on a single line without any formatting, as in:
<script id="tooltip-template" type="text/x-kendo-template"><span class="k-widget k-tooltip k-tooltip-validation"><span class="k-icon k-warning"></span>#=message#</span></script>
If you try to make it "pretty" and format the html in the template, you get the syntax error. I don't know where the real bug is, as this sort of thing shouldn't cause an error. But it does and I stopped worrying about it once I got it to work correctly.
So I have a page using GalleryView 1.1 here. I like the behaviors just fine except that the left-most item's onclick event won't fire for some reason.
I also grabbed the 2.1 version from the GoogleCode page; the author's page at http://spaceforaname.com/ has gone. So here is a page implementing 2.1.
Since 2.1 has a bunch of behaviors I hate and seems to completely prevent my onclick events I would like to sort out the issue with the left-most item's onclick in the v1 page.
I have read through the code but failed to find what is interfering.
The function looks like this:
$('.myslides').click(function() {
//alert($(this).attr('alt'));
$('#big_pic').attr("src", $(this).attr('alt'));
return false;
});
and the items like this
<li><img src='g/weddings/slides/1.jpg' width='165' height='110' alt='/g/weddings/slides/1_big.jpg' class='myslides'/></li>
I have tried moving the class attribute to the LI, and also adding an anchor around the image and giving it the class but neither of these had a visible effect.
// Edit
The page validates and yes I know the big pics are blurry. Don't have them from GD so did best I could stretching thumbs.
Does anyone have an idea of how I should pursue debugging this?
So when inspecting the elements in question I found that the working thumbnails were all image elements but the non working first thumbnail was a div with id "pointer".
Since the author's site with the docs has evaporated I can say what function #pointer has in my filmstrip slides but in jquery.galleryview-1.1.js on line 319 I changed its width to 1px in the JS CSS and this resolved the issue of the obstructed onclick. #pointer may have a function I am not employing here. At any rate the issue is resolved.
Width was previously set to
'width':opts.frame_width-pointer_width+'px',
Now set to
pointer.attr('id','pointer').appendTo(j_gallery).css({
'position':'absolute',
'zIndex':'1000',
'cursor':'pointer',
'top':getPos(j_frames[0]).top-(pointer_width/2)+'px',
'left':getPos(j_frames[0]).left-(pointer_width/2)+'px',
'height':opts.frame_height-pointer_width+'px',
'1px',
'border':(has_panels?pointer_width+'px solid '+(opts.nav_theme=='dark'?'black':'white'):'none')
});
Also tried adding display:none but this resulted in jerky animation.
I am using richfaces's component extendedDataTable and I need to extend the grid height to show all the rows without using a scroller. To do so I have added a java script method to run on page load. This method aims to resize the grid.
The reason that I couldn't do this in code isI dont know the height of each row as it is not fixed beacuse word wrapping is allowed.
My problem is , When an ajax action occurs and the extendedDataTable rendered the onLoad is not executed again. So How I can execute a javascript method after the completion of an ajax request ?
Thanks
Are you explicitly setting the "height" attribute for the extendedDataTable or for the div that encloses it.
Well, I have done a similar kind of application ,in which extendedDataTable size should not exceed some fixed bounds(say 600px X 600px).Similar is case with individual columns, which are of fixed width(say 60px). This I am doing by explicitly setting the "width" property for rich:extendedDatatable and rich:column to fixed dimension.
So if the no of rows exceeds,the scroll bar appears.
Now I want my data(which is a very very long string) in each cell to be wrapped, and not exceed the given column width(60px), but not able to do that ? Currently, extendedDataTable trims the string for first 60px and puts... after that !!
It would be great if you can provide some insight on this.
Regards,
KB
Instead of trying to listen for the data table being reRendered, wrap the table and your JavaScript in another component, such as an h:panelGroup. Give the h:panelGroup an id and reRender it instead of the rich:dataTable.
Use style="height:auto;", like:
<rich:extendedDataTable id="tableId" value="#{someModel.someValues}" var="someVar" style="height:auto;">
<!-- ... -->
</rich:extendedDataTable>