Our team is using chart.js to present the result of benchmark test per each Github commit.
You can see the attached graph for your information.
We are thinking if it is possible to change those commit hash into HTML link, so that users can click on it and redirect to corresponding Github commit.
We have tried to pass HTML tag into label attribute as below but it still doesn't work.
$.each(data, function (key, val) {
barChartData.labels.push('<a href={github_link}>'+key+'</a>');
...
})
new Chart(ctx, {
type: 'bar',
data: barChartData,
options: { ... }
})
Does anyone know how to make it into a link in x-axis instead of displaying those commit hashes as plain text?
Related
I have a form which has a select field (your color). In front of the select field, I have a button that produces a popup which allows users to create new color before they submit. I am submitting that color form via Ajax. After adding a new color to the database, the popup closes.
I want the newly added color to show in the select list without reloading the page.
Is this possible?
I think you can do this by the same ajax where the success triggers. Code below may help a little :
$(".submit").click(function () {
$.ajax({
url: 'url where your view waits',
data: {
'post': "your data on post",
},
type: 'post',
cache: false,
success: function (data) {
// here you can do DOM manipulation add new object to the list.
// You can also get data from backend in json format an then
// add it to your DOM.
},
});
});
I hope this helps.
I need to have SKU in product list in admin panel "OC3.0.2.0" and if that possible to have it in filter at same place. Is here anybody can show me the way to solve this small problem.
Thanks a lot for your time.
You need to modify controller, language, model and template files to add SKU filter in admin product list page, where its lengthy process.
I just modified this pages but can paste the whole code here because code is more than 30000 characters. I created a zip file with modified files.
If you are using default theme please download this files from this link and replace the default files with new files
If you are using a customized theme you can download the extension from this link.
Note: If SKU is not Mandatory then please remove the autocomplete from the product list. Otherwise, it creates displays empty fields in its column.
Please Open product_list.twig from admin/view/template/catalog
and remove the following code from it
$('input[name=\'filter_sku\']').autocomplete({
'source': function(request, response) {
$.ajax({
url: 'index.php?route=catalog/product/autocomplete&user_token={{ user_token }}&filter_sku=' + encodeURIComponent(request),
dataType: 'json',
success: function(json) {
response($.map(json, function(item) {
return {
label: item['sku'],
value: item['product_id']
}
}));
}
});
},
'select': function(item) {
$('input[name=\'filter_sku\']').val(item['label']);
}
});
Hope this helps you
I created a free extension for this to help the community. Here is the link:
https://www.opencart.com/index.php?route=marketplace/extension/info&extension_id=38074
Designed to work for Opencart 3.x version.
I'm using Pjax in a site that I'm building, and after searching all over, I haven't been able to find a way to save custom data, for retrieving later.
This is my code:
var myData = {
tst1: "some value",
tst2: "some other value"
};
$(document).pjax('a[pjax]', '#content', { //id to be loaded into
fragment: '#content', //id to be loaded
timeout: 3000,
data: myData
});
When I try to log event.state.data on a "pjax:popstate" event, I get undefined.
$(document).bind("pjax:popstate", function(event) {
console.log(event.state.data);
});
Can someone tell me what I'm doing wrong please?
What are you actually trying to achieve here? pjax:popstate is a browser event for the forward/back button as per: https://github.com/defunkt/jquery-pjax#events and does not accept any options.
Syntax for options: $(document).pjax(delegation selector, container selector, options object).
Events under PJAX fire like this: fire('pjax:end', [xhr, options]), so accessing an option should work with options.option in your case:
$(document).bind("pjax_event", function(xhr, options) {
console.log(options.data);
});
Not tested, though. Would require more info.
I'm creating an app with some custom gauges using Rally SDK 2.0. This requires some custom HTML. I took a rake-compiled app.html file from the examples as a starting point. Using JustGage for my gauges. Here is my launch function.
launch: function () {
var info = this.getStoriesForProject(); //Gets some aggregate info
$('#header label').html(info.Title);
var g = new JustGage({
id: "devgauge",
value: info.DevPercent,
levelColors: ['#f80404', '#f8f804', '#50ed0e'],
min: 0,
max: 100,
title: "Dev %"
});
this.add('foo');
},
Then I added some custom HTML in app.html.
Now, if i run this without the code "this.add('foo')", the app adds a new div in the body with class="x-container" and puts my custom HTML outside that div effectively hiding it.
If i use the "this.add('foo') it does NOT create the div class=x-container and it shows my widget just fine.
What is the PROPER way to accomplish what I'm attempting using the 2.0 sdk? I realize the add method is for adding Ext components, but somehow calling this is causing my HTML to render ok. Looking at some apps we developed in the old SDK, using the custom HTML worked just fine in those.
Ext likes to know what is going on layout-wise and often gets confused if you're manually manipulating the dom beneath it without its knowledge. Usually if we have some known set of initial layout we add those via the items collection on the app:
Ext.define('My.App', {
extend: 'Rally.app.App',
items: [
{
xtype: 'container',
itemId: 'header'
},
{
xtype: 'container',
itemId: 'devguage'
}
]
});
Then inside of launch you can add content to those like so:
this.down('#devguage').add({
//some other component
});
You can always just drop all the way down to the element level though as well:
this.down('#header').getEl().dom //the raw html element
By default apps use an auto layout, so any items should flow as you would expect with normal html.
Or, instead of using itemId, you can set the id of the container's element using its id property:
Ext.define('My.App', {
extend: 'Rally.app.App',
items: [
{
xtype: 'container',
id: 'header'
},
{
xtype: 'container',
id: 'devguage'
}
]
});
The resulting html elements will use those ids, which allows you to target them directly with your own custom rendering.
I'm a newbie to all the Sencha Touch stuff, but until now I'm very enthousiastic about it's capabilities. There is one problem, i somehow can't solve.
I would like to use a Tpl (XTemplate) for a calender view. The idea is to create a div element for every appointment, which i can place within containers to layout them. Somehow i can't get the dataview to work.
I've stripped down my code to the bare minimum: a panel containing a DataView. When i use the itemTpl, everything works fine. But when I use the tpl (with or without the XTemplate) i don't see anything. I checked if it was just a display malfunction (searched for the XXX from the template), but that's not the case.
This is my code:
Ext.define('InfoApp.view.CalendarDay', {
extend: 'Ext.Panel',
xtype: 'calendarday',
requires: [ 'InfoApp.store.sAppointments'],
config: {
title: 'Dag',
layout: 'fit',
items: [
{
xtype: 'dataview',
store: 'appointmentStore',
//itemTpl: [ 'XXX {day} {course}' ] --> Works
tpl: new Ext.XTemplate('<tpl for=".">XXX {day} {course}</tpl>')--> Doesn't Work...
}
]
}
});
Thanks in advance for any suggestions or improvements!
Assuming ST2 and not ST1
From http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-cfg-tpl and the comments on the tpl: config in the docs, it appears there's a bug when using a remote store. Even if your store has data it. tpl: apparently only works right now if your data is hardcoded in data:[]
you can use itemTpl: new XTemplate(), or itemTpl: XTemplate.from('someid') or you can defer specifying until afterwards, grab your dataview and go dv.setItemTpl(new XTemplate()), etc.
Tanks #brink for your answer.
It took me a couple of days, but this worked for me:
// Load the store
var store = Ext.getStore('appointmentStore');
// Get the current range of the store
var data = store.getRange();
// Create a custom template
var tpl = new Ext.XTemplate(<tpl for=".">{day} {course}</tpl>);
// Loop through the data array
var showData = array();
for(var i=0;i<data.length;i++){
showData.push(data[i].data);
}
// Get the panel by ID and push the html template
var panel = Ext.getCmp('appointmentspanel');
panel.updateHtml(tpl.applyTemplate(showData));