
Hi,
I have a line chart with a x-axis based on time. Since there are multiple measures for each month, I'm just showing the label for the first day of each month. But I'm having trouble with the majorGridLines property. If I set it to true, all the lines are shown (attached figure 1). Another possibility is to show the grid lines in steps of 30, but of course, since each month has a different number of days, some values are shown in the wrong x-axis label...
Is there a way to align the majorGridLines with the custom labels?
Here is my code:
samples.forEach((s:any) => s.date = s.date.toDate()); this.panes.push({ clip: false, name: 'samples' }); this.categoryAxis.push({ name: 'samples', pane: 'samples', labels: { visible: true, template: "#= value.getDate() == 1 ? kendo.toString(value, 'MMMM') : '' #", step: 1 }, majorGridLines: { visible: true, //step: 30 }, majorTicks: { visible: false }, minorGridLines: { visible: false }, justified: true, baseUnit: 'days' }); this.valueAxis.push({ name: 'samples', pane: 'samples', visible: true }); let variables = Helpers.distinctInArray(samples, (i: MonitorSample) => i.variable); variables.forEach(v => { let filteredSamples = samples.filter(s => s.variable == v); this.series.push({ name: v, type: 'line', line: { style: 'smooth' }, field: 'value', categoryField: 'date', axis: 'samples', categoryAxis: 'samples', data: filteredSamples, tooltip: { visible: true, template: '#=value# #=category#' } }) });
Hello.
Is there any way to export Chart component as a pdf file?
I haven't found any method on the Cart itself. There's nothing close to "saveAsPDF".
I tried following way:
import { ChartComponent } from '@progress/kendo-angular-charts';
import { drawDOM, exportPDF, pdf } from '@progress/kendo-drawing';
drawDOM(kendoChart.element.nativeElement, {
paperSize: 'auto',
margin: { left: '1cm', top: '1cm', right: '1cm', bottom: '1cm' }
})
.then(function (group) {
pdf.saveAs(group, 'SomeFile.pdf');
});
When I render a chart as a canvas, it works fine, but the chart itself doesn't look great in the browser. When I render the chart in svg mode, I get an empty pdf document.
Could you give me a hint on how to resolve this problem? I need svg Chart exported to .pdf.
I tried to hide the content with absolute position outside the screen. But the A4 size pdf has no content. I have tried dojo with this example and also nothing is printed. What have I missed? PDF has content only when it is not off screen. Thanks.
<div id="content" style="position: absolute;left: -100000px;top:0;width:800px;">
This is <a href="a'>http://www.telerik.com">a non-clickable link</a>.
</div>
<script>
var draw = kendo.drawing;
draw.drawDOM($("#content"), {
avoidLinks: true,
paperSize: "A4"
})
.then(function(root) {
return draw.exportPDF(root);
})
.done(function(data) {
kendo.saveAs({
dataURI: data,
fileName: "avoid-links.pdf"
});
});
</script>
Hello, I'm having trouble binding my JSON data to my grid when using the transport / schema method. I am able to bind my data to the grid when doing a JSON.parse (data) and manually selecting the datasource.data = data in my grid.
The code I am having trouble with is:
function listView(card) {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/Personnel/GetPersonnel",
dataType: "json",
type: "GET",
contentType: "application/json"
}
},
schema: {
model: {
id: "id",
fields: {
firstName: { editable: false },
lastName: { editable: true }
}
}
}
});
$(card).find('.kendo-grid').kendoGrid({
dataSource: dataSource
});
dataSource.read();
}
I have been successful with the following implementation:
function kendoDataAsync(card) {
$(card).find('.kendo-grid').each(function (i, ele) {
var route = "/Personnel/GetPersonnel";
$.getJSON(route).done(function (json) {
var datas = new kendo.data.DataSource({ data: JSON.parse(json) });
var grid = $(ele).data('kendoGrid');
datas.read();
grid.setDataSource(datas);
});
});
}
My JSON data looks like this BEFORE I do JSON.parse, which is where I believe my issue may lie:
"[{\"firstName\":\"Ron\",\"lastName\":\"Roles\",\"id\":\"1\"}]
AFTER a JSON.parse my data is a bit more familiar:
[ {
"firstName":"Ron",
"lastName":"Roles",
"id":1
} ]
Is my schema wrong? Am I not binding correctly?
I am using Kendo Grid MVC and I need to be able to hook into the Read, Create, Update and Destroy events so that if my controller code returns an error of some sort, I can redirect to another page to handle the error. Are there any examples of the JavaScript and Controller code I need to have in place to do this?
Thanks very much!

Loading a spreadsheet using the method fromJSON
spreadsheet.fromJSON({
sheets: sheet
});
throws the error Uncaught RangeError: Maximum call stack size exceeded
Its a spreadsheet with 830 rows and 22 columns.
Is this error caused by to many cells or caused by to many formulars in the cells ? or perhaps some formular error ?
