Highchart.js: use bootstrap glyphicons instead of symbols on contextbutton - javascript

How can i use bootstrap glyphicons instead of "regular" symbols in the contextbuttons of Highcharts. Going to exporting > buttons > contextButton.
I have added some glyphicon in the className propery, but the symbol shows up instead. Is there any way to override this?
Here is an example JSON object for Highcharts:
{
"chart": {
"type": "column",
"renderTo": "periodChart"
},
"title": {
"text": "Verkoop per periode"
},
"xAxis": {
"categories": ["2015", "2016", "2017"]
},
"yAxis": {
"title": {
"text": "Aantal verkochte producten"
}
},
"exporting": {
"buttons": {
"contextButton": {
"align": "right",
"symbol": "menu",
"height": 22,
"width": 24,
"y": 0,
"x": 0,
"className": "glyphicon glyphicon-print",
"enabled": true
}
}
},
"series": [{
"borderColor": "#555",
"data": [{
"name": "2015",
"y": 6121.0
}, {
"name": "2016",
"y": 6172.0
}, {
"name": "2017",
"y": 4943.0
}],
"name": "Aantallen per jaar (P/s)"
}]
}
I have added the following packages to my html, along with bootstrap and jquery:
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
Edit: when i leave the symbol property empty ("") then nothing shows up. Not using the property at all will result in the default "menu" symbol.

EDIT
The post before the edit contained only the information how to add a regular image as a background to the context button which wasn't the actual answer for this question.
Here I used glyphicon as a charcter in the text of te button: http://jsfiddle.net/kkulig/LoLtm8bn/
I haven't found a way to completely disable the symbol in the context button. The workaround for this is to hide it but the space reserved for it still remains there.
I ended up using the approach from Full text button example in this API record: https://api.highcharts.com/highcharts/exporting.buttons.contextButton.text (contextButton disabled, exportButton used instead).
Live demo: http://jsfiddle.net/kkulig/np80zf58/
END OF EDIT
Context button is an SVG element so you need to use defspattern for this:
JS:
events: {
load: function() {
var chart = this,
renderer = chart.renderer;
var pattern = renderer.createElement('pattern').add(renderer.defs).attr({
width: 1,
height: 1,
id: "image1",
patternContentUnits: 'userSpaceOnUse'
});
renderer.image('https://www.highcharts.com/samples/graphics/sun.png', 0, 0, 24, 24).add(pattern);
}
}
CSS:
// hide the default symbol
.highcharts-button-symbol {
display: none
}
// use a new one
.highcharts-button-box {
fill: url(#image1)
}
Live working example: http://jsfiddle.net/kkulig/2cpvuydd/
SO related question: Fill SVG path element with a background-image
Highcharts docs reference: https://www.highcharts.com/docs/chart-design-and-style/gradients-shadows-and-patterns
Highcharts API reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer

Related

How to use font-awesome icon in Symbol Layer of Mapbox?

I want to use font-awesome icons into symbol layer of Mapbox. I have tried to use text-font of layer
https://github.com/openmaptiles/fonts/pull/9
map.on('load', function() {
map.addSource('markers', {
type: 'geojson',
data: './data/data.geojson'
});
map.addLayer({
'id': 'markers',
"interactive": true,
"type": "symbol",
"source": "markers",
"layout": {
'text-line-height': 1, // this is to avoid any padding around the "icon"
'text-padding': 0,
'text-anchor': 'center',
'text-allow-overlap': true,
'text-field': String.fromCharCode(62405),
'icon-optional': true, // since we're not using an icon, only text.
'text-font': ['Font Awesome 5 Free Solid'],
'text-size': 25
},
"paint": {
'text-translate-anchor': 'viewport', // up to you to change this -- see the docs
'text-color': '#67A48E' // whatever you want -- can even be data driven using a `{featureProperty}`,
}
});
});
I use but font-awesome fonts are not available for me.
I am not sure. where I am doing the wrong thing.

Tradingview Simple Moving Average widget configure

I am using trading view simple moving average (20,44,100,200) using below code.
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<div id="tradingview_e2cd6"></div>
<div class="tradingview-widget-copyright"><span class="blue-text">BTCUSDT Chart</span> by TradingView</div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"autosize": true,
"symbol": "BINANCE:BTCUSDT",
"interval": "D",
"timezone": "Asia/Kolkata",
"theme": "dark",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"withdateranges": true,
"hide_side_toolbar": false,
"allow_symbol_change": true,
"studies": [
{
id: "MASimple#tv-basicstudies",
inputs: {
length: 20
}
},
{
id: "MASimple#tv-basicstudies",
inputs: {
length: 100
}
},
{
id: "MASimple#tv-basicstudies",
inputs: {
length: 44
}
},
{
id: "MASimple#tv-basicstudies",
inputs: {
length: 200
}
}
],
"container_id": "tradingview_e2cd6"
}
);
</script>
</div>
<!-- TradingView Widget END -->
However i want to change moving average line color and line width for different average, so i tried with studies_overrides function with different inputs but it seems its not working.
Example: I want to change line color to white for 20 days moving average so i tried below code
"studies_overrides": {
"moving average.lineStyle.color.0": "#ffffff", //Not working
"simple moving average.lineStyle.color.0": "#ffffff", //Not working
"MASimple#tv-basicstudies.lineStyle.color.0": "#ffffff", //Not working
}, //Same on 'lineWidth: 2' not working
any one know how to change color and line width properly?
Ref: https://static.kancloud.cn/isung/tradingview/972246, https://static.kancloud.cn/isung/tradingview/972244
Try like this,
You should use the names of the studies in the Insert Study dialog as they are but using lower case letters.
"studies_overrides": {
"moving average.ma.color": "#2A2E39",
"moving average.ma.linewidth": 2,
},

Infragistics dropdown in row with value selected

I have a datasource which contains a status column. I also have an array, PART_STATUS, which contains all the possible statuses.
Is it possible to display a dropdown menu in that column with all the PART_STATUS statuses and have the correct option be selected?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js"></script>
<script src="http://cdn-na.infragistics.com/jquery/20122/latest/js/infragistics.loader.js"></script>
<script type="text/javascript">
var data = [
{"ProductID":1,"ECName":"EC4532","PRIORITY":"1","ECID":"21026120061","STATUS":"Out For Refurb"},
{"ProductID":2,"ECName":"EC4522","PRIORITY":"1","ECID":"21026120034","STATUS":"Out For Cleaning"},
{"ProductID":3,"ECName":"EC4524","PRIORITY":"1","ECID":"21026120022","STATUS":"Out For Repair"},
{"ProductID":4,"ECName":"EC4232","PRIORITY":"1","ECID":"21026120061","STATUS":"Removed"},
{"ProductID":5,"ECName":"EC4222","PRIORITY":"2","ECID":"21026120034","STATUS":"Need Refurb"},
{"ProductID":6,"ECName":"EC2224","PRIORITY":"2","ECID":"21026120342","STATUS":"Need Refurb"},
{"ProductID":7,"ECName":"EC5532","PRIORITY":"2","ECID":"21026177061","STATUS":"Need Refurb"}
];
$.ig.loader({
scriptPath: "http://cdn-na.infragistics.com/jquery/20122/latest/js/",
cssPath: "http://cdn-na.infragistics.com/jquery/20122/latest/css/",
resources: "igGrid.Paging.Updating"
});
var PART_STATUS = [
"Out For Cleaning",
"Out For Repair",
"Out For Refurb",
"Need Cleaning",
"Need Repair",
"Need Refurb",
"Removed",
"Cleaned",
"Repaired",
"Refurbished"
];
$.ig.loader(function () {
$("#grid1").igGrid({
height: 500,
width: 1700,
columns: [
{ headerText: "Product ID", key: "ProductID", dataType: "number" },
{ headerText: "EC Name", key: "ECName", dataType: "string" },
{ headerText: "PRIORITY", key: "PRIORITY", dataType: "string" },
{ headerText: "ECID", key: "ECID", dataType: "number" },
{ key: "STATUS", headerText: "Status", dataType: "string", width: "200px" }
],
primaryKey: "ProductID",
autoGenerateColumns: false,
autoCommit: true,
dataSource: data
});
});
</script>
</head>
<body>
<table id="grid1"></table>
</body>
</html>
Possible solution #1
You can use the Updating feature and specify in the columnSettings for the STATUS column to be used combo editor. The PART_STATUS will act as data source for combo editor in the STATUS cell.
For example you can add:
$.ig.loader({
//...
resources: "igGrid.Paging.Updating,igCombo"
});
//...
$("#grid1").igGrid({
//...
features: [
{
name: "Updating",
editMode: "cell",
columnSettings: [
{
columnKey: "STATUS",
editorType: "combo",
editorOptions: {
dataSource: PART_STATUS
}
}
]
}
]
});
Possible solution #2
Another way to do things so the combos are visible initially would be without Updating but creating a template for the Status column and create a new combo on each row in the column.
Since Updating wouldn't be present it would mean that it would be needed to save the data manually.
Coloring can also be achieved and i have included how it could be implemented. It would be the used on each combo.
//...
var PART_STATUS = [
{"Name": "Out For Cleaning", "TextColor": "black", "BackgroundColor": "white"},
{"Name": "Out For Repair", "TextColor": "white", "BackgroundColor": "red"},
{"Name": "Out For Refurb", "TextColor": "black", "BackgroundColor": "white"},
{"Name": "Need Cleaning", "TextColor": "black", "BackgroundColor": "white"},
{"Name": "Need Repair", "TextColor": "black", "BackgroundColor": "white"},
{"Name": "Need Refurb", "TextColor": "white", "BackgroundColor": "blue"},
{"Name": "Removed", "TextColor": "black", "BackgroundColor": "white"},
{"Name": "Cleaned", "TextColor": "white", "BackgroundColor": "green"},
{"Name": "Repaired", "TextColor": "black", "BackgroundColor": "yellow"},
{"Name": "Refurbished", "TextColor": "black", "BackgroundColor": "white"}
];
$.ig.loader(function () {
$("#grid1").igGrid({
//...
columns: [
//...
{ headerText: "Status", key: "STATUS", dataType: "string", width: "200px", template: "<input class='combo' value='${STATUS}'/>"}
],
rowsRendered: function () {
$(".combo").igCombo({
dataSource: PART_STATUS,
width: "100%",
enableClearButton : false,
//Template for the dropdown items when clicking on the arrow so they have colors as well:
itemTemplate: "<div style='color: ${TextColor}; background-color:${BackgroundColor};' title='${Name}'>${Name}</div>",
//Assign text color and background color for the initially selected value:
create: function(evt, ui) {
var inTextColor = $(evt.target).data("igCombo").options.dataSource[$(evt.target).data("igCombo").selectedIndex()].TextColor;
var inBgColor = $(evt.target).data("igCombo").options.dataSource[$(evt.target).data("igCombo").selectedIndex()].BackgroundColor;
$(evt.target).css({ 'color': inTextColor, 'background-color': inBgColor});
},
selectionChanged: function (evt, ui) {
//Update data source, so the new selected value would be saved
var rowId = parseInt(ui.owner.element.closest("tr").attr("data-id"));
$("#grid1").data("igGrid").dataSource.setCellValue(rowId, "STATUS", ui.items[0].value, true);
//Update text color and background color when changing a new value
var newTextColor = ui.owner.options.dataSource[ui.owner._activeID].TextColor;
var newBgColor = ui.owner.options.dataSource[ui.owner._activeID].BackgroundColor;
ui.owner.element.css({ 'color': newTextColor, 'background-color': newBgColor});
}
});
}
});
});
For more information and a full samples you can look at the following response on the Infragistics forum:
http://www.infragistics.com/community/forums/p/103087/490162.aspx#490162

amCharts - document.getElementsByClassName(...)[0] is undefined

I'm using amCharts to display a map. I'm aiming to change the color of a specify country using Javascript.
I do use the following line to change the color inside my web browser :
document.getElementsByClassName("amcharts-map-area-FR")[0].setAttribute("fill", color);
But when I use it inside my html page, this does not work.
Here is the full html page :
<!DOCTYPE html>
<html>
<head>
<title>map created with amCharts | amCharts</title>
<meta name="description" content="map created using amCharts pixel map generator" />
<!--
This map was created using Pixel Map Generator by amCharts and is licensed under the Creative Commons Attribution 4.0 International License.
You may use this map the way you see fit as long as proper attribution to the name of amCharts is given in the form of link to http://pixelmap.amcharts.com/
To view a copy of this license, visit http://creativecommons.org/licenses/by/4.0/
If you would like to use this map without any attribution, you can acquire a commercial license for the JavaScript Maps - a tool that was used to produce this map.
To do so, visit amCharts Online Store: http://www.amcharts.com/online-store/
-->
<!-- amCharts javascript sources -->
<script type="text/javascript" src="http://www.amcharts.com/lib/3/ammap.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<!-- amCharts javascript code -->
<script type="text/javascript">
AmCharts.makeChart("map",{
"type": "map",
"pathToImages": "http://www.amcharts.com/lib/3/images/",
"addClassNames": true,
"fontSize": 15,
"color": "#FFFFFF",
"backgroundAlpha": 1,
"backgroundColor": "rgba(80,80,80,1)",
"dataProvider": {
"map": "worldLow",
"getAreasFromMap": true,
"images": [
{
"top": 40,
"left": 60,
"width": 80,
"height": 40,
"pixelMapperLogo": true,
"imageURL": "http://pixelmap.amcharts.com/static/img/logo.svg",
"url": "http://www.amcharts.com"
}
]
},
"balloon": {
"horizontalPadding": 15,
"borderAlpha": 0,
"borderThickness": 1,
"verticalPadding": 15
},
"areasSettings": {
"color": "rgba(129,129,129,1)",
"outlineColor": "rgba(80,80,80,1)",
"rollOverOutlineColor": "rgba(80,80,80,1)",
"rollOverBrightness": 20,
"selectedBrightness": 20,
"selectable": true,
"unlistedAreasAlpha": 0,
"unlistedAreasOutlineAlpha": 0
},
"imagesSettings": {
"alpha": 1,
"color": "rgba(129,129,129,1)",
"outlineAlpha": 0,
"rollOverOutlineAlpha": 0,
"outlineColor": "rgba(80,80,80,1)",
"rollOverBrightness": 20,
"selectedBrightness": 20,
"selectable": true
},
"linesSettings": {
"color": "rgba(129,129,129,1)",
"selectable": true,
"rollOverBrightness": 20,
"selectedBrightness": 20
},
"zoomControl": {
"zoomControlEnabled": true,
"homeButtonEnabled": false,
"panControlEnabled": false,
"right": 38,
"bottom": 30,
"minZoomLevel": 0.25,
"gridHeight": 100,
"gridAlpha": 0.1,
"gridBackgroundAlpha": 0,
"gridColor": "#FFFFFF",
"draggerAlpha": 1,
"buttonCornerRadius": 2
}
});
</script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$( document ).ready(function() {
console.log( "document loaded" );
color = "#000000";
document.getElementsByClassName("amcharts-map-area-FR")[0].setAttribute("fill", color);
}
);
$( window ).load(function() {
console.log( "window loaded" );
});
</script>
</head>
<body style="margin: 0;background-color: rgba(80,80,80,1);">
<div id="map" style="width: 100%; height: 767px;"></div>
</body>
</html>
Hope this problem can be solved !
Thanks !
Your code to manipulate fill color of the area is correct. However, it executes immediately on page load. At that point the map is still initializing, meaning there's no such element yet, hence it not working.
There are a number of ways to go about it.
If you just need to load the map with certain areas (countries) colored, you could do that with map's config:
"dataProvider": {
"map": "worldLow",
"getAreasFromMap": true,
"areas": [ {
"id": "FR",
"color": "#00FF00"
} ],
"images": [ {
"top": 40,
"left": 60,
"width": 80,
"height": 40,
"pixelMapperLogo": true,
"imageURL": "http://pixelmap.amcharts.com/static/img/logo.svg",
"url": "http://www.amcharts.com"
} ]
}
If that is not acceptable, or if you need to manipulate the map after it's built, I suggest you use map's API functions (getObjectById() to get area object, then validate() to refresh it) to manipulate area colors, rather than CSS.
You would also need to ensure that map is initialized before doing so. We can use init event for that.
Consider the following code:
AmCharts.makeChart("map", {
"type": "map",
// ...
"listeners": [{
"event": "init",
"method": function(event) {
var area = event.chart.getObjectById("FR");
area.color = "#000000";
area.validate();
}
}]
});
Here's a working example.
You could use the same event to manipulate color of the area using your CSS code, however I strongly suggest using API functions. While manipulating CSS directly may work, the changes might be reset when there's something going on on the map, such as when you hover the area.

Converting a createLabel function into a Table View with JSON data

Using Titanium for a class. I have a function that extracts my JSON data and creates labels and eventListeners. I need to make this project into a table opposed to just labels but I'm having a tough time doing so and can't quite figure it out. Here's my working code with labels. This is only my second coding class so any patience and insider tips and tricks will be greatly appreciated!
Thanks guys
Ti.UI.setBackgroundImage("347.png");
var bands = {
"sevenfold": {
"headTitle": "Avenged Sevenfold",
"footTitle": "Orange County Metal Band",
"members": [
{
"name": "M. Shadows",
"info": "Lead Singer. Known for his raspy yet powerful vocals"
},
{
"name": "Synyster Gates",
"info": "Lead guitarist and backup vocalist. Known for technical solos and melodic riffs."
},
{
"name": "Zacky Vengeance",
"info": "Rhythm guitarist and backup vocalist. Capable of tight and fast riffs and harmonizing with lead guitar parts. "
},
{
"name": "Johnny Christ",
"info": "Bassist. Contributes heavy grooves as well as intricate undertones to the rhythm section."
},
{
"name": "Arin Iljey",
"info": "Drummer. New-comer to the band. Filled in for the late Jimmy 'The Rev' Sullivan."
},
]
},
"adtr": {
"headTitle": "A Day To Remember",
"footTitle": "Ocala Based Pop-Punk Band",
"members": [
{
"name": "Jeremey McKinnon",
"info": "Lead Singer. Capable of hitting clean high notes as well as low screams."
},
{
"name": "Neil Westfall",
"info": "Rhythm guitarist and backup vocalist. Plays fast punk inspired rhythm sections while contributing back up screams during live shows."
},
{
"name": "Joshua Woodard",
"info": "Bassist. Contributes to the heavy tones of the rhythm section."
},
{
"name": "Kevin Skaff",
"info": "Lead guitarist and backup vocalist. Plays the melodic section of songs and aids Jeremy with clean vocals both in the studio and on live shows."
},
{
"name": "Alex Shelnut",
"info": "Drummer. Adds fast punk fills with metal influenced double bass beats."
}
]
}
};
var mainWindow = Ti.UI.createWindow({
title: "Band Members",
backgroundImage: "347.png"
});
var navWindow = Ti.UI.iOS.createNavigationWindow({
window: mainWindow
});
var getDetail = function(){
var detailWindow = Ti.UI.createWindow({
title: this.text,
backgroundColor: "white"
});
var detailText = Ti.UI.createLabel({
text: this.details,
top: 30,
left: 15,
right: 15
});
detailWindow.add(detailText);
navWindow.openWindow(detailWindow);
};
var makeUI = function(){
var spacing = 30;
for(n in bands){
var titleLabel = Ti.UI.createLabel({
text: bands[n].headTitle,
left: 30,
right: 30,
borderRadius: 5,
top: spacing,
height: 25,
textAlign: "center",
backgroundColor: "#333",
font: {fontSize: 22, fontFamily: "Verdana", fontWeight: "bold"},
color: "#fafafa"
});
spacing = titleLabel.top + titleLabel.height + 10;
for(m in bands[n].members){
var itemLabel = Ti.UI.createLabel({
text: bands[n].members[m].name,
details: bands[n].members[m].info,
left: 30,
right: 30,
borderRadius: 5,
textAlign: "center",
top: spacing,
height: 25,
backgroundColor: "#ffffff",
font: {fontSize: 22, fontFamily: "Verdana"},
color: "#333"
});
mainWindow.add(itemLabel);
spacing = itemLabel.top + itemLabel.height + 10;
itemLabel.addEventListener("click", getDetail);
}
mainWindow.add(titleLabel);
spacing = itemLabel.top + itemLabel.height + 40;
}
};
makeUI();
navWindow.open();
Please see the Titanium Kitchen sink application which contains templates and examples for all the different UI elements. The app itself is not a good example of how to architect your entire application but it provides some excellent examples of how to build tableViews.
Titanium Kitchen Sink
Download it, import it into Ti Studio as an existing project, build it and view it in the simulator or on a device.. Find the control you want, see the options and follow the code examples.
In your existing app, you are adding labels to a window and then keeping a spacing counter for where to layout your next label.
The tableView is the right UI control to use.
create a tableView object(position, style etc..)
create an array of tableRow objects (like how you are with labels now)
tableView.data = myTableRowsArray;
add tableView to your window
you're up and running

Categories