can we import third js lib in this plugin

[xycloud]

can we import third js lib in this plugin, such as highcharts and so on

[PhaedrusTheGreek]

It is possible to import a library like this:

Javascript:

({
 import_some_lib: function() {
    $.getScript( "/path/to/script.js", function( data, textStatus, jqxhr ) {
        console.log("Import Complete");
    }); 
 }
})

Mustache:

{{meta.import_some_lib}}

When I tested this, it worked, but there were some issues with resource paths that had to be hacked out.

[xycloud]

yes, if we can import third party js lib in this plugin, which is really awesome

[PhaedrusTheGreek]

I recently pushed some changes so that this is also possible by using a <script> tag inside the template like this:

<script src="http://www.site.com/some.min.js"/>
<script src="/path/to/some.js"/>
<script>
        $('.myButton').doSomethingNew();
</script>
<a href=# class="myButton">Do It</a>

EDIT: This won't work anymore due to tighter security around XSS control. Use this method instead

[xycloud]

awesome, which bring with more imagination for this plugin

[YanekR]

@PhaedrusTheGreek Would you be able to create a small manual how to, as for me above solution does not work for both d3.js & chart.js lib's.

[PhaedrusTheGreek]

@YanekR I'll see if I can figure it out.

[PhaedrusTheGreek]

This is now possible as of some changes in 6.2.2. I added an after_render function that is executed after the HTML is rendered, so that D3 might be able to select an element at that point.

I posted an example in the Javascript section of the docs

Also note that D3 is already included in the Kibana distrbution so it doesn't need to be imported. If it was necessary to import a library, you could use this method

[PhaedrusTheGreek]

I'll be supplying a more realistic example shortly

[PhaedrusTheGreek]

OK here we have a complete working example using ES data. There was a variable binding bug that had to be fixed to get this to work, so 6.2.2 was re-released:

https://github.com/PhaedrusTheGreek/transform_vis/blob/master/RECIPES.md#custom-d3

[YanekR]

@PhaedrusTheGreek could you please clarify how can I refer to the outcome of one function in other one? example below:
({
function_one: function() {
var object_one = [];
return object;
}

function_two: function() {
	var object_two = function_one();
	return object_two
}

})

Mustache Syntax example:

{{meta.function_one}} is equal to {{meta.function_one}}

Will appreciate your help,
Yanek_R

[guanghaofan]

It is possible to import a library like this:

Javascript:

({
 import_some_lib: function() {
    $.getScript( "/path/to/script.js", function( data, textStatus, jqxhr ) {
        console.log("Import Complete");
    }); 
 }
})

Mustache:

{{meta.import_some_lib}}

When I tested this, it worked, but there were some issues with resource paths that had to be hacked out.

what I found it it will throw exception and says can not found the lib...something like this while log out and re-login Kibana:

TypeError: $(...).CanvasJSChart is not a function (http://tdexample01:6789/bundles/commons.bundle.js line 22 > eval:42)

Version: 6.4.4-SNAPSHOT
Build: 18067

Error: TypeError: $(...).CanvasJSChart is not a function (http://tdexample01:6789/bundles/commons.bundle.js line 22 > eval:42)
window.onerror@http://tdexample01:6789/bundles/commons.bundle.js:12:869171

[guanghaofan]

now my solution is just add the third party js lib into the project dependency and declare it in the response handler js code.
I have successed to add plotly.js as my js lib, then we never need to manual import it in the js template.