how to export kendo chart to JPG, PNG, BMP, GIF - kendo-ui

Is there any way to export the kendo chart to the JPG, PNG, BMP, GIF.With the format type selection using drop downlist.
function createChart() {
$("#chart").kendoChart({
theme: $(document).data("kendoSkin") || "default",
title: {
text: "Internet Users"
},
legend: {
position: "bottom"
},
chartArea: {
//It's important that your background NOT be transparent for proper exporting
//of some file types - most noticeably Jpeg
background: "white"
},
seriesDefaults: {
type: "bar"
},
series: [{
name: "World",
data: [15.7, 16.7, 20, 23.5, 26.6]
}, {
name: "United States",
data: [67.96, 68.93, 75, 74, 78]
}],
valueAxis: {
labels: {
format: "{0}%"
}
},
categoryAxis: {
categories: [2005, 2006, 2007, 2008, 2009]
},
tooltip: {
visible: true,
format: "{0}%"
}
});
}
$(document).ready(function () {
setTimeout(function () {
// Initialize the chart with a delay to make sure
// the initial animation is visible
createChart();
}, 400);
});

this might help.
http://www.kendoui.com/code-library/dataviz/chart/kendo-ui-chart-export.aspx
found this on kendo site itself

To my knowledge Kendo doesn't offer the possibility to export the chart to a file, you need to use a third-party solution.
Server-side
If you can use a server for the export, you can choose from many tools that can export svg to bitmap.
For example if you use PHP, see this question for a detailed discussion.
Or install Inkscape on your server and than call inkscape inputfile.svg --export-png=exportfile.png, independent of what language or framework you use on the server (it need to have the possibility to execute external programs, however).
In both cases, all you need to send to the server is the actual SVG markup of the chart (note that SVG is actually a XML document). This you can get from the containing HTML element with Javascript.
If you are using the ASP.NET MVC the best course of action for you is to go with the link provided by vinbhai4u which can simplify matters considerably.
Browser-side
If you don't want or can't use the server, there is the Javascript (https://github.com/eligrey/FileSaver.js) library (Demo: http://eligrey.com/demos/FileSaver.js/ ). I think that the library can only export to PNG, though, and has some browser version limitations. Further reading: http://eligrey.com/blog/post/saving-generated-files-on-the-client-side.

Related

Highstock dataGrouping not working with live data

I am currently working on a project for my company, where I need to plot highstock charts, which show energy-data of our main buildings.
Since it is live data, new datapoints come per Websocket every few-or-so seconds. However, the graph should only show one datapoint every hour. I wanted to clear this with the highstock dataGrouping, but it does not really work. It groups the points yes, but it still shows the „transmission“, the graph-line, between them. Thus making the whole graph completely irreadable.
In an other Version of the project, the graph only shows the latest datapoint of each group (as specified in the „approximate“ object in the chart options), but also does not start a new group after the chosen Interval runs through.
I've been sitting on this problem for about 3 days now and have not found any proper completely working solution yet.
Unfortunately, due company policy and due to hooks and components necessary, which are only used here in the company, I'm not able to give you a jsfilddle or similar, even though I'd really love to. What I can do is give you the config, mabye you find something wrong there?
const options = {
plotOptions: {
series: {
dataGrouping: {
anchor: 'end',
approximation: function (groupData: unknown[]) {
return groupData[groupData.length - 1];
},
enabled: true,
forced: true,
units: [['second', [15]]],
},
marker: {
enabled: false,
radius: 2.5,
},
pointInterval: minutesToMilliseconds(30),
pointStart: currentWeekTraversed?.[0]?.[0],
},
},
}
This would be the plotOptions.
If you need any more information, let me know. I'll see then, what and how I can send it to you.
Thank you for helping. ^^
This is example how dataGrouping works with live data,
try to recreate your case in addition or use another demo from official Highcharts React wrapper page.
rangeSelector: {
allButtonsEnabled: true,
buttons: [{
type: 'minute',
count: 15,
text: '15S',
preserveDataGrouping: true,
dataGrouping: {
forced: true,
units: [
['second', [15]]
]
}
}, {
type: 'hour',
count: 1,
text: '1M',
preserveDataGrouping: true,
dataGrouping: {
forced: true,
units: [
['minute', [1]]
]
}
}
},
Demo: https://jsfiddle.net/BlackLabel/sr3oLkvu/

MS Teams - composeExtension set width for sign in action

I am not sure how to set the width of a messaging extension response when using composeExtension property. For a task I understand I can use a width/height property, but this doesn't seem to be the case.
I've been looking at MessagingExtensionActionResponse but the MessagingExtensionResult type doesn't seem to have a place to set the width/height.
I am using the following (taken straight from MS samples)
return {
composeExtension: {
type: 'auth',
suggestedActions: {
actions: [
{
type: 'openUrl',
value: signInLink,
title: 'Bot Service OAuth'
},
],
},
},
};
This is what it outputs (I am looking to reduce the width)
This feature is not available at present.

Placing Markers on Harp-GL globe

I try to build a globe with markers (like the markers on google maps) with HERE and harp.gl. These markers are SVG-Images and need to be loaded from their file.
They also need to be clickable with some metadata attached like an ID.
So my questions are:
what is the best way to display these markers?
how can I make them clickable? (raycasting?)
is there a way to attach some metadata?
thanks in advance!
Edit:
To clarify, the Markers are SVG-Images stored in SVG-Files which need to be loaded and displayed as Markers.
The Data is provided by an API and therefore I tried adding it as Point of it's own like the Cube-Example and also tried to translate it to GeoJSON and FeatureSets:
const geojsonPoints: {type: "FeatureCollection", features: Feature[]} = { type: "FeatureCollection",
features: [
]
};
for(let i = 0; i < locationdata.length; i++) {
geojsonPoints.features.push({
type: "Feature",
id: i.toString(),
geometry: {
type: "Point",
coordinates: [locationdata[i]["lonlat"][1], locationdata[i]["lonlat"][0]]
},
properties: locationdata[i]
})
}
const features: MapViewFeature[] = [];
for(let i = 0; i < locationdata.length; i++) {
features.push(new MapViewPointFeature([locationdata[i]["lonlat"][1], locationdata[i]["lonlat"][0]], locationdata[i]))
}
When I try adding a GeoJSON-Layer I get an error that the decoder.min.js couldn't be loaded but I configured it like that:
const mapView = new MapView({
canvas: this.canvas,
projection: sphereProjection,
theme: {
extends: pluginpath + "/js/harp.gl-example/dist/resources/berlin_tilezen_base_globe.json",
styles: {
geojson: this.getStyleSet()
}
},
decoderUrl: pluginpath + "/js/harp.gl-example/dist/decoder.bundle.js"
});
pluginpath is a variable containing prefix since the js-folder isn't directly in the root-directory like in all the examples.
To sum it all up:
I need to display the data provided by the API as markers. The markers should be the SVG-Images mentioned earlier and these markers should be clickable.
Edit 2:
I tried modifying this example to display the SVG-Markers.
The first step worked where I just displayed the cubes from the example at the needed locations, but I couldn't replace the cube with markers. I used these two documentations from three.js website but they didn't work for me:
https://threejs.org/docs/#examples/en/renderers/SVGRenderer
https://threejs.org/docs/#examples/en/loaders/SVGLoader
I didn't get any error the SVGs just didn't show up.
Just a quick note that in general, it's better to ask one question at a time. I'm going to focus on your first one about adding markers. Our tutorial has a section on adding markers, https://developer.here.com/tutorials/harpgl/#add-data. In the example, it assumes GeoJSON data. You didn't mention what kind of file you had so I don't know if it's GeoJSON or not.
I'd say - begin by describing what kind of file you have, how the data looks. Then look at the example I linked to in terms of adding markers. Then - share with us what you tried.
Loading SVGs directly is not supported but you could use base64 encoded svg images, e.g.:
const imageString =
"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHdpZHRoPSI0OHB4IiBoZWlnaHQ9IjQ4cHgiIHZlcnNpb249IjEuMSIgaWQ9Imx1aS1pY29uLWRlc3RpbmF0aW9ucGluLW9uZGFyay1zb2xpZC1sYXJnZSIKCSB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ4IDQ4IgoJIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ4IDQ4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0ibHVpLWljb24tZGVzdGluYXRpb25waW4tb25kYXJrLXNvbGlkLWxhcmdlLWJvdW5kaW5nLWJveCIgb3BhY2l0eT0iMCI+CgkJPHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTQ3LDF2NDZIMVYxSDQ3IE00OCwwSDB2NDhoNDhWMEw0OCwweiIvPgoJPC9nPgoJPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNmZmZmZmYiIGQ9Ik0yNCwyQzEzLjg3MDgsMiw1LjY2NjcsMTAuMTU4NCw1LjY2NjcsMjAuMjIzMwoJCWMwLDUuMDMyNSwyLjA1MzMsOS41ODg0LDUuMzcxNywxMi44ODgzTDI0LDQ2bDEyLjk2MTctMTIuODg4M2MzLjMxODMtMy4zLDUuMzcxNy03Ljg1NTgsNS4zNzE3LTEyLjg4ODMKCQlDNDIuMzMzMywxMC4xNTg0LDM0LjEyOTIsMiwyNCwyeiBNMjQsMjVjLTIuNzY1LDAtNS0yLjIzNS01LTVzMi4yMzUtNSw1LTVzNSwyLjIzNSw1LDVTMjYuNzY1LDI1LDI0LDI1eiIvPgo8L2c+Cjwvc3ZnPgo=";
This image can then be used in the style definition like this:
styles: {
geojson: [
{
when: ["==", ["geometry-type"], "Point"],
technique: "labeled-icon",
attr: {
text: ["get", "text"],
textMayOverlap: true,
size: 14,
imageTexture: "custom-icon",
screenHeight: 32,
iconScale: 0.5,
distanceScale: 1,
iconYOffset: 20
}
}
]
},
images: {
"custom-icon": {
url: imageString,
preload: true
}
},
imageTextures: [
{
name: "custom-icon",
image: "custom-icon"
}
]

Add Points from Added Source to Mapbox Label

I am trying to take the data from an added layer and add it as the country-label on a stock map (in this case, Dark V 10).
Here is the code that allows me to add the data (EatPlace) from my added layer as a SEPARATE label (Works, but NOT what I want):
map.on('load', function() {
map.addSource('CEVectorSource', { //The link to your tileset
'type': 'vector',
'url': 'mapbox://xxxxx.xxxxxxxxxxxxxxxxxxx'
});
map.addLayer({
"id": "CountriesEatenNames",
"type": "symbol",
"source": "CEVectorSource",
"source-layer": "CEVectorsTileset",
"filter": ["all",["match", ["geometry-type"], ["Point"], true, false]],
"layout": {
"text-field": ['format',
['upcase', ['get', 'EatPlace']], { 'font-scale': .8 },
'\n', {},
['get', 'EatDate'], { 'font-scale': .6 }],
"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
"text-offset": [0, 0.6],
//"text-allow-overlap": true,
"text-variable-anchor": ['top', 'bottom', 'left', 'right']
},
"paint": {
"text-color" : 'rgb(255, 221, 153)' // Text Color
}
});
});
Here is the code that lets me modify the labels I want to modify:
map.setLayoutProperty('country-label', 'text-field',
['get', 'name_en'])
Here is what has NOT worked:
map.setLayoutProperty('country-label', 'text-field',
['get', 'EatPlace'])
I have no luck combining these concepts. Any help would be divine.
If I understand you correctly, you have a country tileset of points, a places tileset of points, and you want to display for each country point a piece of text deriving from the places tileset.
That isn't going to work. How would Mapbox-GL-JS know which country point to associate with a given place point? You will need to find some way to combine them into one layer first.

KendoUI - Chart data labels

Is is possible to for the KendoUI Chart (Area) to have multiple data labels or even a concatenation of two? I need to display both a value and a percentage for each data point. Is this something that would need to be handled on the data source side or is it on the view?
Thanks for any help.
You can use templates to format both labels and tooltips; see labels.template and tooltip.template.
The key is to reference the Property you want using dataItem ex:
dataItem.TotalDollars
template: "${ category } - #= kendo.format('{0:C}', dataItem.TotalDollars)#"
The answer above wont really help unless you have a strong understanding of the Kendo UI framework. I was having a similar issue and before I found my answer I found this question. I circled back because the answer is simple and some simple example code is really simple. Lets save everyone some clicks.
DATA RESPONSE FROM REMOTE DATA (copy and past for local binding):
[
{
"ProgramName":"Amarr Garage Doors",
"PercentageShare":50.12,
"TotalDollars":5440.000000
},
{
"ProgramName":"Monarch Egress Thermal Hinge C",
"PercentageShare":4.64,
"TotalDollars":504.000000
},
{
"ProgramName":"Monarch Egress Window Wells",
"PercentageShare":15.73,
"TotalDollars":1707.000000
},
{
"ProgramName":"Monarch Premier V Egress Windo",
"PercentageShare":16.25,
"TotalDollars":1764.000000
},
{
"ProgramName":"Organized Living Shelftech Ven",
"PercentageShare":13.27,
"TotalDollars":1440.000000
}
]
**Chart Generation Code: **
function createChart() {
$("#SubmissionSummaryByProgramChart").kendoChart({
title: {
text: "Breakdown by Program"
},
legend: {
position: "right"
},
dataSource: {
transport: {
read: {
url: "GetFooData",
dataType: "json",
data: {
Year : 2014,
Quarter : 1,
}
}
}
},
series: [{
type: "pie",
field: "PercentageShare",
categoryField: "ProgramName"
}],
tooltip: {
visible: true,
template: "${ category } - #= kendo.format('{0:C}', dataItem.TotalDollars)#"
}
});
};
$(document).ready(createChart);

Resources