I'm using Column chart in am4charts , From ajax call I'm rendering the chart.
I'm also adding LabelBullet to display the value of each bars in labels, but sometimes the result for a particular bar will be 0 or null. In that scenario I cannot able to handle the labels popping out for empty values.
I will post both the scenario, please help to restrict the 0 or null values.
fiddle without adding labels :
https://jsfiddle.net/Knavaneeth/89xz0yok/1/
var chart_data = [
{vendor: "Amazon", price: 21.67},
{vendor: "Cimandis", price: 0},
{vendor: "Co-op", price: 0},
{vendor: "easenmyne", price: 0},
{vendor: "La Collette", price: 25.92},
{vendor: "M&S", price: 0},
{vendor: "Morrisons", price: 0},
{vendor: "Tescos", price: 0},
{vendor: "tesst", price: 0},
{vendor: "Valley Foods", price: 0},
{vendor: "Waitrose", price: 0}
];
am4core.useTheme(am4themes_animated);
// Themes end
var chart = am4core.create("amcharts_chart_price_compare_div", am4charts.XYChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
chart.data = chart_data;
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "vendor";
categoryAxis.renderer.minGridDistance = 30;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
valueAxis.max = 200;
valueAxis.strictMinMax = true;
valueAxis.renderer.minGridDistance = 30;
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryX = "vendor";
series.dataFields.valueY = "price";
series.columns.template.tooltipText = "{valueY.value}";
series.columns.template.tooltipY = 0;
series.columns.template.strokeOpacity = 0;
fiddle adding labels :
https://jsfiddle.net/Knavaneeth/6eub51cz/1/
var chart_data = [
{vendor: "Amazon", price: 21.67},
{vendor: "Cimandis", price: 0},
{vendor: "Co-op", price: 0},
{vendor: "easenmyne", price: 0},
{vendor: "La Collette", price: 25.92},
{vendor: "M&S", price: 0},
{vendor: "Morrisons", price: 0},
{vendor: "Tescos", price: 0},
{vendor: "tesst", price: 0},
{vendor: "Valley Foods", price: 0},
{vendor: "Waitrose", price: 0}
];
am4core.useTheme(am4themes_animated);
// Themes end
var chart = am4core.create("amcharts_chart_price_compare_div", am4charts.XYChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
chart.data = chart_data;
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "vendor";
categoryAxis.renderer.minGridDistance = 30;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
valueAxis.max = 200;
valueAxis.strictMinMax = true;
valueAxis.renderer.minGridDistance = 30;
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryX = "vendor";
series.dataFields.valueY = "price";
series.columns.template.tooltipText = "{valueY.value}";
series.columns.template.tooltipY = 0;
series.columns.template.strokeOpacity = 0;
chart.series.each(series => {
console.log(series);
var labelBullet = series.bullets.push(new am4charts.LabelBullet());
labelBullet.setStateOnChildren = true;
labelBullet.label.text = "{vendor}\n[bold font-size: 20]{price}[/]";
labelBullet.label.maxWidth = 75;
labelBullet.label.wrap = true;
labelBullet.label.truncate = false;
labelBullet.label.textAlign = "middle";
labelBullet.label.padding(5, 5, 5, 5);
labelBullet.label.fill = am4core.color("#000");
const background = new am4core.RoundedRectangle();
background.cornerRadius(3, 3, 3, 3);
labelBullet.label.background = background;
labelBullet.label.background.fill = series.fill;
labelBullet.label.background.fillOpacity = 0.9;
labelBullet.label.background.stroke = am4core.color("#fff");
labelBullet.label.background.strokeOpacity = 1;
});
Finally I need a solution to display the labels in the chart only if has the values, 0 or other values should not be displayed.
You can set the Tooltip directly on the series and not only to the columns:
series.tooltipText = "{valueY.value}";
After that you need to add a Cursor to your chart, which controls the Tooltips:
chart.cursor = new am4charts.XYCursor();
You can disable all the other axis tooltips, and cursor lines by using the following snippet:
chart.cursor.lineX.disabled = true;
chart.cursor.lineY.disabled = true;
valueAxis.tooltip.disabled = true;
categoryAxis.tooltip.disabled = true;
At the end you may want to consider using the following to make the Tooltips show at the top of the column:
series.tooltip.pointerOrientation = "vertical";
Here is a code pen showing the final result.
To hide the LabelBullets for the zero values you can use an Adapter for the visible property:
labelBullet.label.adapter.add('visible', (visible, target) => {
return target.dataItem.dataContext.price !== 0;
});
Related
I'm looking to do a chart like this one using amcharts 4.
The question linked only supports AmCharts 3, and AmCharts 4 has no .addGraph() functionality. Is it possible to do this using XYCharts()?
const chart = new am4core.create(chartDiv.current, am4charts.XYChart);
chart.dataProvider = chartData;
chart.categoryField = 'category';
chart.rotate = true;
chart.columnWidth = 1;
// AXES
// Category
const categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.gridAlpha = 0;
categoryAxis.axisAlpha = 0;
categoryAxis.gridPosition = 'start';
// value
const valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.stackType = '100%';
valueAxis.gridAlpha = 0;
valueAxis.autoGridCount = false;
valueAxis.gridCount = 20;
valueAxis.axisAlpha = 1;
// GRAPHS
// firstgraph
const graph = new am4charts.XYChart();
graph.labelText = 'Bad';
graph.valueField = 'bad';
graph.type = 'column';
graph.lineAlpha = 0;
graph.fillAlphas = 1;
graph.fillColors = ['#d05c4f', '#ffb2a8'];
chart.createChild(graph);
I tried chart.createChild(), but that appears to be for containers like rectangles. How would I achieve the same functionality using AmCharts 4?
A gauge chart is essentially a stacked column(bar) chart of only 1 type of series data. I've modified stacked column chart to look like the gauge chart linked in the question.
working demo: https://codepen.io/rabelais88/pen/RwMGxxJ
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>
<style>
#chartdiv {
width: 100%;
height: 400px;
}
</style>
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Add data
chart.data = [
{
type: "gauge",
bad: 2,
good: 7,
worst: 1
}
];
// Create axes
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "type";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 20;
// forcefully expand axis to make it look like gauge
categoryAxis.renderer.cellStartLocation = -0.12;
categoryAxis.renderer.cellEndLocation = 1.12;
categoryAxis.visible = false;
var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
// remove inner margins by syncing its start and end with min and max
valueAxis.min = 0;
valueAxis.max = 10;
// Create series
function createSeries(field, name, stacked) {
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueX = field;
series.dataFields.categoryY = "type";
series.name = name;
series.columns.template.tooltipText = "{name}: [bold]{valueX[/]}";
series.stacked = stacked;
// add inner text
const bullet = series.bullets.push(new am4charts.LabelBullet());
bullet.label.text = "{name}";
bullet.locationX = 0.5;
}
createSeries("good", "Good", false); // base of stacked column
createSeries("bad", "Bad", true);
createSeries("worst", "Worst", true);
// Add legend
chart.legend = new am4charts.Legend();
Edit
I've added hand as requested.
added another a column and designated it as a non-cluster to make it ignore the grid layout.
set the column's interaction and style as hidden and attached a bullet shape that looks like a 'clock hand'.
it includes a lot of manual position manipulation; due to the limit of a pre-made charts.
On a side note, normally if a chart has anything unusual element, it's better to implement it with D3.js by scratch; fiddling with a pre-made chart will bring too much side effects later.
// adding a pointing hand(clock hand) as annotation
// draw pointing hand
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueX = "current";
series.dataFields.categoryY = "type";
series.fillOpacity = 0;
// hide shape
series.stroke = am4core.color("rgba(0,0,0,0)");
// make it ignore other columns
series.clustered = false;
// disable tooltips
series.interactionsEnabled = false;
const bullet = series.bullets.push(new am4core.Triangle());
bullet.width = 30;
bullet.height = 30;
bullet.fill = am4core.color("black");
bullet.horizontalCenter = "middle";
bullet.verticalCenter = "top";
bullet.rotation = 180;
// manually change its position
bullet.dy = -65;
const label = series.bullets.push(new am4charts.LabelBullet());
label.label.text = "current: {valueX}";
label.label.dy = -30;
updated working demo with pointing hand(clock hand): https://codepen.io/rabelais88/pen/mdxOyYQ
I have problem to make my tooltip in amchart have to look nice, I just want to make that tooltip not struck down by other tooltip, this is my screen shoot amchart tooltip
how can I solve my problem? this is my code with amchart
< style > #chartdiv {
height: 280 px;
position: relative;
} < /style>
<!-- Chart code -->
< script >
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_kelly);
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Enable chart cursor
chart.cursor = new am4charts.XYCursor();
chart.cursor.lineX.disabled = true;
chart.cursor.lineY.disabled = true;
// Enable scrollbar
chart.scrollbarX = new am4core.Scrollbar();
// Add data
chart.data = <?php
echo $realisasi;
?>;
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.dataFields.category = "Date";
dateAxis.renderer.grid.template.location = 0.5;
dateAxis.dateFormatter.inputDateFormat = "yyyy-MM-dd";
dateAxis.renderer.minGridDistance = 40;
dateAxis.tooltipDateFormat = "MMM dd, yyyy";
dateAxis.dateFormats.setKey("day", "dd");
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.tooltipText = "{date}\n[bold font-size: 17px]realisasi: {valueY}[/]";
series.tooltip.valign = "middle";
series.dataFields.valueY = "realisasi";
series.dataFields.dateX = "date";
series.strokeDasharray = 3;
series.strokeWidth = 2
series.strokeOpacity = 0.3;
series.strokeDasharray = "3,3"
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.strokeWidth = 2;
bullet.stroke = am4core.color("#fff");
bullet.setStateOnChildren = true;
bullet.propertyFields.fillOpacity = "opacity";
bullet.propertyFields.strokeOpacity = "opacity";
var hoverState = bullet.states.create("hover");
hoverState.properties.scale = 1.7;
function createTrendLine(data) {
var trend = chart.series.push(new am4charts.LineSeries());
trend.dataFields.valueY = "pakta";
trend.dataFields.dateX = "date";
trend.strokeWidth = 2
trend.stroke = trend.fill = am4core.color("#c00");
trend.data = data;
var bullet = trend.bullets.push(new am4charts.CircleBullet());
bullet.tooltipText = "{date}\n[bold font-size: 17px]pakta: {pakta}[/]";
bullet.strokeWidth = 2;
bullet.stroke = am4core.color("#fff")
bullet.circle.fill = trend.stroke;
var hoverState = bullet.states.create("hover");
hoverState.properties.scale = 1.7;
return trend;
};
// createTrendLine();
createTrendLine(<?php
echo $pagu;
?>);
}); // end am4core.ready()
< /script>
<!-- HTML -->
< div id = "chartdiv" > < /div>
Help me to solve my problem, or whether other solution to make my two tooltip is not struck down.
You didn't specify any sample data on your code, but try replacing valign:
series.tooltip.valign = "middle";
with pointerOrientation:
series.tooltip.pointerOrientation = "down";
I have a container with two or more XYCharts with dateAxis and I want to change the zoom for all my charts in the container at the same time, using a jQuery slider. I have tried to make the function below run, but it doesn't work.
$("#slider-range").slider({
animate: "fast",
range: true,
min: 0,
max: 1,
step: 0.01,
values: [0, 1],
slide: function (event, ui) {
for (var i = 0; i < container.children.length; i++) {
container.children[i].dateAxis[0].start = ui.values[0];
container.children[i].dateAxis[0].end = ui.values[1];
}
}
});
I always get the error message 'Cannot read property 'dateAxis' of undefined'
This is my code:
am4core.ready(function () {
am4core.useTheme(am4themes_animated);
container = am4core.create("container", am4core.Container);
container.width = am4core.percent(100);
container.height = am4core.percent(100);
container.layout = "vertical";
});
function createSimpleLineChart() {
var chart = container.createChild(am4charts.XYChart);
...
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.baseInterval = { "timeUnit": "second", "count": 1 };
...
return chart;
}
There are a couple of issues with your slide method:
1) You're going through your container's children incorrectly. The children property is not an array that you can directly index; it is a List object that has specific methods you can use to access each element. In this case, using the each method to loop through the children is the way to go.
2) There is no dateAxis property in the chart object. Each chart's axis objects are stored in the corresponding yAxes and xAxes properties, which are also List objects. Assuming each chart only has one date axis, you can access it directly by using getIndex. Also note that you might find calling the zoom method cleaner than modifying start and end directly.
Putting it all together:
slide: function (event, ui) {
container.children.each(function(chart) {
chart.xAxes.getIndex(0).zoom({start: ui.values[0], end: ui.values[1]}, false, true);
//chart.xAxes.getIndex(0).start = ui.values[0];
//chart.xAxes.getIndex(0).end = ui.values[1];
});
}
Demo below:
am4core.useTheme(am4themes_animated);
var container = am4core.create("container", am4core.Container);
container.width = am4core.percent(100);
container.height = am4core.percent(100);
container.layout = "vertical";
$("#slider-range").slider({
animate: "fast",
range: true,
min: 0,
max: 1,
step: 0.01,
values: [0, 1],
slide: function(event, ui) {
container.children.each(function(chart) {
chart.xAxes
.getIndex(0)
.zoom({ start: ui.values[0], end: ui.values[1] }, false, true);
//chart.xAxes.getIndex(0).start =ui.values[0];
//chart.xAxes.getIndex(0).end =ui.values[1];
});
}
});
createCharts();
function createCharts() {
var chart = container.createChild(am4charts.XYChart);
var data = generateData();
chart.data = data;
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "price";
series.tooltipText = "{valueY.value}";
series.name = "Series 1";
chart.zoomOutButton.disabled = true;
chart2 = container.createChild(am4charts.XYChart);
chart2.data = data;
var dateAxis2 = chart2.xAxes.push(new am4charts.DateAxis());
var valueAxis2 = chart2.yAxes.push(new am4charts.ValueAxis());
var series2 = chart2.series.push(new am4charts.ColumnSeries());
series2.columns.template.width = am4core.percent(50);
series2.dataFields.dateX = "date";
series2.dataFields.valueY = "quantity";
series2.yAxis = valueAxis2;
series2.tooltipText = "{valueY.value}";
series2.name = "Series 2";
chart2.zoomOutButton.disabled = true;
}
function generateData() {
var data = [];
var price = 100;
var quantity = 1000;
for (var i = 0; i < 300; i++) {
price += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 100);
quantity += Math.round(
(Math.random() < 0.5 ? 1 : -1) * Math.random() * 1000
);
data.push({ date: new Date(2000, 1, i), price: price, quantity: quantity });
}
return data;
}
#container {
width: 95%;
height: 400px;
}
#slider-range {
width: 95%;
height: 10px;
border: 1px solid #000;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="container"></div>
<div id="slider-range"></div>
JS Amcharts - Responsive relocate position of legend
How to change the position of the legend responsivly from "right" to "bottom" when let say the screen is (gets resized) smaller than 992px?
html:
<div id="chartdiv"></div>
js:
var chart = am4core.create("chartdiv", am4charts.PieChart);
chart.data = [{
"country": "Lithuania",
"litres": 501.9
}, {
"country": "Czech Republic",
"litres": 301.9
}, {
"country": "The Netherlands",
"litres": 50,
"hidden": true
}];
var pieSeries = chart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = "litres";
pieSeries.dataFields.category = "country";
pieSeries.dataFields.hidden = "hidden";
chart.legend = new am4charts.Legend();
chart.legend.fontSize = 12;
chart.legend.position = "right";
chart.legend.markers.template.width = 12;
chart.legend.markers.template.height = 12;
Fiddle: https://codepen.io/anon/pen/wLEomN
You can just watch the window resize event and change the chart.legend.position according to the window width:
window.addEventListener('resize', () => {
if (window.innerWidth < 992) {
chart.legend.position = "bottom";
} else {
chart.legend.position = "right";
}
}, true);
Here I forked your code pen and added my solution.
Here is the code to show the users ranking using amCharts Javascript library.
The code's output is something like this:
As you can see there are 6 users that are ranked from 1 to 6 all aligned to the left side of the page (The first group).
Now the problem is I want to continue ranking users from 7 to 12 (Second group) and align them to the right side of the page.
Something like this one :
Unfortunately, I can't handle this.
Here is the code on CodePen.
And here is the Javascript code:
am4core.useTheme(am4themes_animated);
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.data = [{
"profileName": "John",
"slogan": "Slogan Sentence Related to Profile Name 6",
"level": "6.",
"income": 0,
"bullet": "https://www.scripturaengage.com/wp-content/uploads/2017/05/Profile-Picture-Koen-VanGeert-circle-ScripturaEngage.png"
}, {
"profileName": "Sara",
"slogan": "Slogan Sentence Related to Profile Name 5",
"level": "5.",
"income": 0,
"bullet": "https://i1.wp.com/teacupwellness.com/wp-content/uploads/2018/03/Amanda-Blankinship-profile-circle.png?fit=300%2C300&ssl=1"
}, {
"profileName": "Nima",
"slogan": "Slogan Sentence Related to Profile Name 4",
"level": "4.",
"income": 0,
"bullet": "https://www.scripturaengage.com/wp-content/uploads/2017/05/Profile-Picture-Pauline-Suy-circle-ScripturaEngage.png"
}, {
"profileName": "Max",
"slogan": "Slogan Sentence Related to Profile Name 3",
"level": "3.",
"income": 0,
"bullet": "https://www.scripturaengage.com/wp-content/uploads/2017/05/Profile-Picture-Koen-VanGeert-circle-ScripturaEngage.png"
}, {
"profileName": "Megan",
"slogan": "Slogan Sentence Related to Profile Name 2",
"level": "2.",
"income": 0,
"bullet": "https://i1.wp.com/teacupwellness.com/wp-content/uploads/2018/03/Amanda-Blankinship-profile-circle.png?fit=300%2C300&ssl=1"
}, {
"profileName": "Inna",
"slogan": "Slogan Sentence Related to Profile Name 1",
"level": "1.",
"income": 0,
"bullet": "https://www.scripturaengage.com/wp-content/uploads/2017/05/Profile-Picture-Pauline-Suy-circle-ScripturaEngage.png"
} ];
// Chart A:
//create category axis for Names Column
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "profileName";
categoryAxis.renderer.grid.template.location = -100;
categoryAxis.renderer.inside = true;
categoryAxis.renderer.labels.template.dy = -60;
categoryAxis.renderer.labels.template.dx = 200;
categoryAxis.labelsEnabled = false;
categoryAxis.renderer.labels.template.fontSize = 20;
categoryAxis.renderer.labels.template.fill = am4core.color("#4286f4");
//create category axis for Slogans Column
var categoryAxis2 = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis2.dataFields.category = "slogan";
categoryAxis2.renderer.grid.template.location = 100;
categoryAxis2.renderer.inside = true;
categoryAxis2.renderer.labels.template.dy = -20;
categoryAxis2.renderer.labels.template.dx = 200;
categoryAxis2.renderer.labels.template.fontSize = 12;
//create category level
var categoryAxis3 = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis3.dataFields.category = "level";
categoryAxis3.renderer.grid.template.location = 100;
categoryAxis3.renderer.inside = true;
categoryAxis3.renderer.labels.template.dy = -20;
categoryAxis3.renderer.labels.template.dx = 170;
categoryAxis3.renderer.labels.template.fontSize = 16;
categoryAxis3.renderer.labels.template.fill = am4core.color("#ccd3e0");
//create value axis for income and expenses
var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.opposite = true;
valueAxis.min = 0;
valueAxis.max = 10;
valueAxis.strictMinMax = true;
valueAxis.renderer.minGridDistance = 25;
valueAxis.renderer.labels.template.disabled = true;
valueAxis.disabled = true;
//create columns
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryY = "profileName";
series.dataFields.valueX = "income";
series.name = "Income";
series.columns.template.fillOpacity = 0.5;
series.columns.template.strokeOpacity = 0;
// Do not crop bullets
chart.maskBullets = false;
chart.paddingTop = 64;
chart.paddingBottom = -30;
// Add bullets
var bullet = series.bullets.push(new am4charts.Bullet());
var image = bullet.createChild(am4core.Image);
image.horizontalCenter = "middle";
image.verticalCenter = "bottom";
image.width = 120;
image.height = 120;
image.dy = 0;
image.dx = 100;
image.y = am4core.percent(100);
image.propertyFields.href = "bullet";
image.tooltipText = series.columns.template.tooltipText;
image.propertyFields.fill = "color";
image.filters.push(new am4core.DropShadowFilter());
Html code:
<!-- Resources -->
<script language="JavaScript" src="amcharts4/core.js"></script>
<script language="JavaScript" src="amcharts4/charts.js"></script>
<script language="JavaScript" src="amcharts4/themes/animated.js"></script>
<div id="chartdiv"></div>
<link rel="stylesheet" href="Style.css">
<script src="Script.js"></script>
and CSS:
#chartdiv {
width: 1500px;
height: 840px;
}
body {
margin: 40 100 100 20;
background-color: transparent;
overflow:hidden;
font-family: "Helvetica Neue";
font-weight: 800;
src: url(helveticaneue-ultrathin.woff);
}
Any suggestions are extremely appreciated...