I've tried to use the Highcharts export feature as exampled on their site: http://jsfiddle.net/highcharts/cqjvD/ but I would like to be able to download the csv file instead of alerting/displaying it.
Here is my chart: http://jsfiddle.net/uF4H7/10/
The code for displaying the csv is simple, you just add:
$('#getcsv').click(function () {
alert(chart.getCSV());
});
Can this be done in html/js/highcharts?
Check the following http://jsfiddle.net/uF4H7/11/
$('#getcsv').click(function () {
var chart = $('#container').highcharts();
alert(chart.getCSV());
window.open();
//this line was added to your code to download the CSV
window.open("data:text/csv;charset=utf-8," + escape(chart.getCSV()));
});
The following line tells browser to open the data in the new window - browsers do not recognize text/csv mime it so they ask you to download the CSV file
window.open("data:text/csv;charset=utf-8," + escape(chart.getCSV()));
Or you could use the new feature of HTML - the link which forces to download with download attribute. In your case add this code to javascript:
$('#getcsvAnchor').click(function() {
var chart = $('#container').highcharts();
$(this).attr('href', 'data:text/csv;charset=utf-8,'+escape(chart.getCSV()));
$(this).attr('download', "data-visualisation.csv");
});
And this to your HTML - link to download:
<a id="getcsvAnchor" href="#">download</a>
The javascript gets the CSV content and puts it as anchor href, then adds the download attribute to anchor where the value is filename.
You could check preview here http://jsfiddle.net/uF4H7/12/ (click "download" next to "Alert CSV")
exporting: {
buttons: {
contextButton: {
menuItems: [{
textKey: 'downloadXLS',
onclick: function () {
this.downloadXLS();
}
}, {
textKey: 'downloadCSV',
onclick: function () {
this.downloadCSV();
}
}]
}
}
},
You can add this options directly when you are creating highchart.
Asiya Shaikh's suggestion only worked for me once I added the following Highcharts plugin:
<script src="http://highcharts.github.io/export-csv/export-csv.js"></script>
Which is a little weird considering how the plugin home page mentions nothing of the downloadXLS(); function.
If that doesn't work, you should also try using:
<script src="http://code.highcharts.com/modules/exporting.js"></script>
You can use the EXPORT-CSV plugin homepage as a reference, but as I said it doesn't mention downloadXLS().
Related
I have implemented a custom math plugin and integrated it into ck5. this plugin will convert math latex to image equation and I'm able to render the converted math equation image into a ck5 editor using the below code.
editor.model.change(writer => {
const imageElement = writer.createElement('image', {
src: data.detail.imgURL
});
editor.model.insertContent(imageElement, selection);
});
Still here everything is working fine. when i'm trying to store original latex equation value in image tag as custom attribute (attribute name is data-mathml ). It strips out custom attributes.
So I have gone through the documentation and tried but was not able to add the custom attribute.
Below is my code :
class InsertImage extends Plugin {
init() {
const editor = this.editor;
const view = editor.editing.view;
const viewDocument = view.document;
// Somewhere in your plugin's init() callback:
view.addObserver( ClickObserver );
editor.ui.componentFactory.add('insertImage', locale => {
const view = new ButtonView(locale);
view.set({
label: 'Add Equations',
withText: true,
tooltip: true
});
// Callback executed once the image is clicked.
this.listenTo(view, 'execute', () => {
openModel();
});
return view;
});
window.addEventListener('setDatatoCK', function(data){
const selection = editor.model.document.selection;
editor.model.change( writer => {
const imageElement = writer.createElement( 'image', {
src: data.detail.imgURL,
'data-mthml': data.detail.latexFrmla,
} );
editor.model.insertContent( imageElement, selection );
} );
})
this.listenTo( editor.editing.view.document, 'click', ( evt, data ) => {
if ( data.domEvent.detail == 2 ) {
editorToPopupdoubleClickHandler( data.domTarget, data.domEvent );
evt.stop();
}
}, { priority: 'highest' } );
}
};
I want to add multiple attributes to the image tag. What should I do to add multiple attributes?
(Note: I'm able to create a new custom tag (tag named "math") with multiple attributes but not for image tag)
Please help me with this. this blocker for me.
Methods tried:
In order to achieve this, I have created one custom tag with multiple attributes and append image tags under this custom tag. It's working fine as expected but I want to add multiple attributes to image tag not with the custom tag.
✔️ Expected result
❌ Actual result
📃 Other details
Browser: Google Chrome Version 78.0.3904.108 (Official Build) (64-bit)
OS: macOS Mojave 10.14.6
CKEditor version: CKEditor 5
Installed CKEditor plugins: ckeditor5-editor-classic,ckeditor5-image,ckeditor5-essentials,ckeditor5-basic-styles,ckeditor5-core,ckeditor5-ui
Hope you've already found a solution to this answer. After spending several hours on searching a solution to a similar problem, I've made it working. See below:
// you have to import the insertImage fn to be able to override default imageinsert fn
import { insertImage } from '#ckeditor/ckeditor5-image/src/image/utils.js'
// this method HAVE to be automatically called when ckeditor is onready.
// You can add custom eventlistener or on the html tag just define listener:
// in Vue2 we used to do like this: <ckeditor #ready="someFnOnCkEditorReadyState()" />
someFnOnCkEditorReadyState() {
// as for img tag the options supported by ckeditor is very limited, we must define our properties to extend the used schema
editor.model.schema.extend('image', { allowAttributes: ['data-mathml'] })
// add conversion for downcast
editor.conversion.for('downcast').add(modelToViewAttributeConverter('data-mathml'))
// add conversion for upcast
editor.conversion.for('upcast').attributeToAttribute({
view: {
name: 'image',
key: 'data-mathml',
},
model: 'data-mathml',
})
}
// then you have to implement your custom image insert method
// from now on this will be your default insertImage fn
// this modification might require other modifications for example to add a custom image browser button to the toolbar
otherFnToInsertImg() {
insertImage(editor.model, {
src: image.url,
'data-mathml': 'here comes the magic',
})
}
Hope it helps someone to save some hours. ;)
We have an application running that currently works with both 3D and 2D files, and do not experience any issues when loading 3D files and DWG.
But when trying to load a PDF neither my "onItemLoadSuccess" or "onItemLoadFail" gets run
Autodesk.Viewing.Initializer(options, function onInitialized() {
// Select the container for the viewer
viewerApp = new Autodesk.Viewing.ViewingApplication(container);
// Load settings, i.e extension manager
viewerApp.registerViewer(viewerApp.k3D,
Autodesk.Viewing.Private.GuiViewer3D, { extensions: [ 'ExtensionManager'] });
// Select model to load defined by URN
viewerApp.loadDocument(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
});
}
function onDocumentLoadSuccess(doc) {
var viewables = viewerApp.bubble.search({ 'type': 'geometry' });
if (viewables.length === 0) {
console.error('Document contains no viewables.');
return;
}
// Choose any of the avialble viewables
viewerApp.selectItem(viewables[0], onItemLoadSuccess, onItemLoadFail);
}
function onItemLoadSuccess(viewer, item) {
console.log('onItemLoadSuccess()!');
}
function onItemLoadFail(errorCode) {
console.error('onItemLoadFail() - errorCode:' + errorCode);
}
The PDF file will still open and load, so I am wondering if there might be a different way to run an onItemLoadSuccess function, or we have to do something a bit differently to ensure that our PDF's also gets loaded correctly.
Any help is highly appreciated!
Starting from Viewer v6.3 you can load PDF directly with Autodesk.PDF and pass in callbacks to loadModel like you do other models:
Autodesk.Viewing.Initializer(options, function() {
viewer.start()
viewer.loadExtension('Autodesk.PDF').then(function() {
viewer.loadModel('/path/to/pdf', { page: 1 }, onLoadSuccess, onLoadFail);
});
});
See release notes here: https://forge.autodesk.com/blog/viewer-release-notes-v-63
(Adding to Bryan's answer...)
I wrote a blog post about this. Take a look at the DEMO and sample code to help answer your question about 'onItemLoadSuccess / onItemLoadFail' events.
BLOG: https://forge.autodesk.com/blog/fast-pdf-viewingmarkup-inside-forge-viewer
DEMO: https://wallabyway.github.io/offline-pdf-markup/
Hope that helps!
I am using SCEditor and I am trying to set my own custom emoticons according to the emoticons option specified on this page.
So I called it like so:
$(document).ready(function() {
$(".sceditor").sceditor({
// Other options
emoticons: $.getJSON('../../images/emoticons/default/emoticons.json'),
emoticonsRoot: '../../images/emoticons/default/'
});
})
Then in my emoticons.json file I have this:
{
dropdown: {
':)': 'emoticons/smile.png',
':angel:': 'emoticons/angel.png',
':angry:': 'emoticons/angry.png'
}
}
However it is not working. I have checked the NET panel in my browser and I have confirmed it is fetching the .json file fine, however when I click to open the smiley window in the editor it is blank (all I see is the "more" link).
Am I doing something wrong here?
Json lint show above text in json file is invalid.
Try putting this in your json file
{
"dropdown": {
":)": "emoticons/smile.png",
":angel:": "emoticons/angel.png",
":angry:": "emoticons/angry.png"
}
}
I tried this in php
$a = '{
"dropdown": {
":)": "emoticons/smile.png",
":angel:": "emoticons/angel.png",
":angry:": "emoticons/angry.png"
}
}' ;
print_r(json_decode($a));
Output
Array
(
[dropdown] => Array
(
[:)] => emoticons/smile.png
[:angel:] => emoticons/angel.png
[:angry:] => emoticons/angry.png
)
)
I have tried by your link.
The follows is my code:
$(function() {
// Replace all textarea's
// with SCEditor
$("textarea").sceditor({
plugins: "bbcode",
style: "plugins/SCEditor/development/jquery.sceditor.default.css",
emoticons: {
// Emoticons to be included in the dropdown
dropdown: {
":)": "emoticons/smile.png",
":angel:": "emoticons/angel.png"
},
// Emoticons to be included in the more section
more: {
":alien:": "emoticons/alien.png",
":blink:": "emoticons/blink.png"
},
// Emoticons that are not shown in the dropdown but will still
// be converted. Can be used for things like aliases
hidden: {
":aliasforalien:": "emoticons/alien.png",
":aliasforblink:": "emoticons/blink.png"
}
},
emoticonsRoot: "plugins/SCEditor/"
});
});
Above this, you may kown why your code is wrong.
Accross from jQuery.getJSON, $.getJSON returns JQXHR,not a Json object. So, It is not possible to show your emoticons.
As per WhiteWater's answer the reason it wasn't working was because it was returning a JQXHR object and not a JSON object, so I had to work out how to get it to return a JSON object whilst the editor loading not being dependent on the emoticons existence.
So we have the solution below with credit to jeremysawesome for his answer to this question:
// create a variable to store the results
var emoticons = false;
$.getJSON('../../images/emoticons/default/emoticons.json')
.done(function(result){
emoticons = result;
})
.always(function(){
// always initialize the sceditor
$('.my-selector').sceditor({emoticons: emoticons});
});
This will load the emoticons but will always load the sceditor instance, even if the emoticons fail for some reason.
I has question about Localization,
I create key in Labels.js file, code :
Ext.define('Portal.Labels', {
singleton: true,
title: ''
});
And in event click of button, I using:
var main = Ext.getCmp('main'); // Get main (container) and destroy it.
main.destroy();
// Sure main is destroyed.
// Get url of local.
var url = Ext.util.Format.format('ext/packages/ext-locale/overrides/vn/ext-locale-vn.js');
// Sure url is loaded.
// Load script local file.
Ext.Loader.loadScript({
url: url,
scope: this
}
);
// Create main and show it.
main = Ext.create('main');
main.show();
In ext-locale-vn.js, I add :
Ext.define("Portal.locale.vn.Labels", {
override: "Portal.Labels",
title: "DASHBOARD"
});
In main container, I create lable:
xtype: 'label',
text:Portal.Labels.title
But when I click button, text of label still not change to "DASHBOARD", I don't know where I was wrong, please help me.
I wanted to hide some issue link outward & inwards strings of Link type from the Link Issues Popup Window using java script.
I have tried using java script but I am not getting the popup screen from the java script.
Please see the screenshot below :
Can anyone tell me how can I get this popup screen in the java script?
Is there any other method to hide this?
Thanks & Regards,
Renuka.
To hide the clone issue link every page:
edit the file system-webresources-plugin.xml (should be at /atlassian-jira/WEB-INF/classes/), and add to <web-resource key="jira-fields"> this code:
<resource type="download" name="myScript.js" location="/includes/jira/field/script.js">
<param name="source" value="webContextStatic"/>
</resource>
than, on /includes/jira/field/myScript.js write this:
AJS.$(document).ready(function() {
if (AJS.$("#link-type option[value*='clon']").size() > 0) {
// will work even when right clicking on More
// Actions->Link & open it into a new window
AJS.$("#link-type option[value*='clon']").remove()
} else if (AJS.$("#link-issue").size() > 0) {
// will work in case the link menu showing via popup
AJS.$("#link-issue").click(function(){
// wait for the popup to show, and remove the clone options
setTimeout(function (){
AJS.$("#link-type option[value*='clon']").remove();
}, 300);
});
}
});
restart Jira and it that it!
The script attaches a function to the link-menu opening, than gives the menu 0.3 seconds to load, and removes the unwanted items. If it doesn't work well for you, try to raise the timeout from 300 to 500-1000.
On jira 4, run instead:
AJS.$("#issue-link-link-type option[value*='clon']").remove();
The previous solution has an issue:
It will only work when clicking the "Link Issue"-Menu-Item.
When I use the Point (.)-Shortcut-Menu, it won't remove the issue types.
I have established the following solution:
JS-Binding-Part:
AJS.$(document).ready(function() {
JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function(e, context, reason) {
hideIssueLinkTypes();
});
});
JS-Backing-Function:
function hideIssueLinkTypes() {
var apiURL = "/rest/scriptrunner/latest/custom/getHiddenLinkTypes"
$.getJSON( apiURL, {
}).done(function( objectData ) {
$.each( objectData, function( i, item ) {
var issueLinkType = item.issueLinkType[0];
AJS.$("#link-type option[value='"+issueLinkType.inwardDescription+"']").remove();
AJS.$("#link-type option[value='"+issueLinkType.outwardDescription+"']").remove();
});
});
}
Scriptrunner-REST-Endpoint:
import com.onresolve.scriptrunner.runner.rest.common.CustomEndpointDelegate
import groovy.json.JsonBuilder
import groovy.transform.BaseScript
import com.atlassian.jira.issue.link.DefaultIssueLinkTypeManager
import com.atlassian.jira.issue.link.IssueLinkTypeManager
import com.atlassian.jira.issue.link.IssueLinkType
import com.atlassian.jira.component.ComponentAccessor
import com.atlassian.jira.config.properties.ApplicationProperties
import javax.ws.rs.core.MultivaluedMap
import javax.ws.rs.core.Response
#BaseScript CustomEndpointDelegate delegate
String HIDDEN_IDENT="[hidden]"
getHiddenLinkTypes(httpMethod: "GET") { MultivaluedMap queryParams, String body ->
def appProperties = ((ApplicationProperties) ComponentAccessor.getComponentOfType(ApplicationProperties.class));
def appClonersLinkTypeName = appProperties.getDefaultBackedText("jira.clone.linktype.name");
def jsBuilder=new JsonBuilder();
def issueLinkTypes = ((IssueLinkTypeManager) ComponentAccessor.getComponentOfType(IssueLinkTypeManager.class)).getIssueLinkTypes();
jsBuilder issueLinkTypes.findAll({it.getName().contains(HIDDEN_IDENT) || it.getName()==appClonersLinkTypeName }),
{ IssueLinkType linkType ->
issueLinkType linkType.getId(),
name: linkType.getName(),
inwardDescription: linkType.getInward(),
outwardDescription: linkType.getOutward()
}
return Response.ok(jsBuilder.toString()).build();
}
What you can do then ist just annotate and Link-Type with putting [hidden] in the link name and it will disappear for all users (It can still be programmatically added though or created by cloning).
If you don't have Scriptrunner or don't need the dynamic nature of the implementation, you can still hard-code the values as Kuf described in the answer above in hideIssueTypes() like this:
AJS.$("#issue-link-link-type option[value*='clon']").remove();