I am using the latest KendoUI, and try to set a gauge like the kendoUI's offical web site AD image shows.
you could find the AD image just at: http://www.telerik.com/kendo-ui
please see the image, it shows an application named "northwind-dash", and there is a green gauge on it, there is a white color text "63%" inside the gauge.
I try the code below:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<link href="styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div id="gauge-container">
<div id="gauge"></div>
<input id="gauge-value" value="65">
</div>
<script>
function createGauge() {
$("#gauge").kendoRadialGauge({
pointer: {
value: $("#gauge-value").val()
},
scale: {
minorUnit: 5,
startAngle: -30,
endAngle: 210,
max: 180
}
});
}
$(document).ready(function() {
createGauge();
function updateValue() {
$("#gauge").data("kendoRadialGauge").value($("#gauge-value").val());
}
if (kendo.ui.Slider) {
$("#gauge-value").kendoSlider({
min: 0,
max: 180,
showButtons: false,
change: updateValue
});
} else {
$("#gauge-value").change(updateValue);
}
$(document).bind("kendo:skinChange", function(e) {
createGauge();
});
});
</script>
<style scoped>
#gauge-container {
background: transparent url("../content/dataviz/gauge/gauge-container-partial.png") no-repeat 50% 50%;
width: 386px;
height: 386px;
text-align: center;
margin: 0 auto 30px auto;
}
#gauge {
width: 350px;
height: 300px;
margin: 0 auto;
}
#gauge-container .k-slider {
margin-top: -11px;
width: 140px;
}
</style>
</div>
</body>
</html>
But, I could only get the normal Radial Gauge.
I look everywhere in the KendoUI's document, but can't find anything about the northwind-dash demo or example.
Who knows how to change the style of the Gauge to make it just like the image shows.
yours,
Ivan
You can find the sources for KendoUI + Northwind application in GitHub and you can see a version running in Telerik ASPNET-MVC demo site
But no, it does not look like the capture that they have, not sure if that's an older version of this project or an internal one.
Nevertheless, there is no option for placing that percentage and you have to do it manually playing with HTML and CSS.
What you might do is define the Chart using a DataSource like this:
$("#value").kendoChart({
// Define Data Source, the first element is the value to represent,
// the second is 100 - first element.
dataSource: {
data: [
{ "value": 63 },
// The remaining part of the Chart is transparent so we actually
// only see the first value
{ "value": 37, color: "transparent" }
]
},
// Define a DataBound event handler used when we change the data and will
// print the value inside the Chart.
dataBound: function () {
// Get current value and compute percentage.
var percentage = (this.dataSource.at(0).value / 100);
// Convert percentage to text and place it in inside the chart
$("#value-label").text(kendo.toString(percentage, "p0"));
},
// No legend
legend: {
visible: false
},
seriesDefaults: {
// Type of series: Donut
type: "donut",
// Size of the hole of the Donut
holeSize: 60,
// Thickness of the Donut
size: 20
},
series: [
// The value of the series is in "value" field while the color is
// a field called color.
{ field: "value", colorField: "color" }
],
// No tooltip
tooltip: { visible: false }
});
Now, the HTML and CSS definition for placing the label on top of the Chart:
<div class="value-container">
<div id="value"></div>
<div id="value-label" class="overlay"></div>
</div>
A container that includes two DIV the first for the Chart and the second for the label. In order to display the label on top of the Chart, we define a CSS class overlay as follow:
.overlay {
font-size: 24px;
width: 100%;
height: 100%;
position: absolute;
top: 220px;
left: 0;
text-align: center;
}
Where we specify the size of the label and its position from top and centered horizontally (here I hardcoded the vertical position (220px) but you can find for methods for centering a text in a DIV.
You can see it in action here: http://jsfiddle.net/OnaBai/egfrohtx/
Which looks like:
Related
I have a problem with render SVG in fabricjs when SVG include text with custom font.
How to make SVG in Fabricjs display correct with custom font?
Here is my code:
var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());
var canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: null,
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
var imageObj = new fabric.Image();
canvas.add(imageObj);
imageObj.setSrc('https://futushigame.firebaseapp.com/group_test.svg', function(imageObject) {
imageObject.set({top: 0, left: 0});
imageObject.set('dirty', true);
canvas.renderAll();
setObjectCoords();
});
function setObjectCoords() {
canvas.forEachObject(function(object) {
object.setCoords();
});
}
#canvasContainer {
width: 100%;
height: 100vh;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<style>
#font-face {
font-family: 'CurlzMT';
src: url("https://futushigame.firebaseapp.com/CurlzMT.ttf") format("ttf");
font-weight: 'normal';
font-style: 'normal';
}
</style>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>
Here is my resources:
1. Font file: CurlzMT
2. SVG file: group_test.svg
Thank you!
You need to embed the font in svg file.
The content of the svg must be like this
https://files.fm/f/qhvbe8jj
I am writing a simple grid layout using Sass. I am trying to use calc() to determine the width in relative units %. To test the styles, I am using a simple HTML file.
Problem: Inspecting the results with dev tools on Chrome, it shows that the width declaration with the calc() call is dropped as Invalid property value. Here is the code:
src.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="X-UA Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./../css/12grid_rwd.css">
</head>
<body>
<main class="grid_1" role="main">
<!--<header class="grid_12" role="banner">Header</header>
<nav class="grid_3" role="navigation">Nav</nav>
<section class="grid_9">Content</section>
<footer class="grid_12" role="contentinfo">Footer</footer> -->
</main>
</body>
</html>
src.scss
$context-width: 1200;
// Grid >> 12 Columns
.grid {
&_1 { width: calc(calc(80/#{$context-width})*100); }
}
generated css:
.grid_1 {
width: calc(calc(80/1200)*100); }
calc() call's can't be nested, it expects expression to calculate, it is the reason why your property is dropped by browser.
Moreover since your expression contains plain math - it can be calculated by Sass itself. Moreover from your expression it looks like you want resulted value to be percent from container's width, in this case you can use percentage() function from Sass:
$context-width: 1200;
$column-width: 80;
// Grid >> 12 Columns
.grid {
#for $n from 1 through 12 {
&_#{$n} {
width: percentage($column-width * $n/$context-width);
}
}
}
You can play with this example at Sassmeister.
Following the suggestions from #Flying, I was able to implement the logic I wanted. The code is much simpler to understand and debug.
Goal: To have a 1280 pixels grid system with 20px margin on container and 20px padding on the grids. Note that these margin and padding properties are for left and right only (10px each side). Starting with a first grid, class grid_1, at 80px, grid_2 will be 80*2 + 20*(2-1) where 80 is the fixed column width, 2 is the grid number, 20 is the paddingand so on. The scss code is as follows:
src.scss
$context-width: 1200;
$column-width: 80;
$fixed-gutter: 20;
// Grid >> 12 Columns
#mixin width-calc($n) {
#if $n == 1{
width: percentage(($column-width * $n)/$context-width);
}
#else {
$c: $column-width * $n + ($fixed-gutter * ($n - 1));
width: percentage(($c)/$context-width);
}
}
.grid {
#for $n from 1 through 12 {
&_#{$n} {
#include width-calc($n);
}
}
}
The generated css:
.grid_1 {
width: 6.66667%;
}
.grid_2 {
width: 15%;
}
.grid_3 {
width: 23.33333%;
}
.grid_4 {
width: 31.66667%;
}
.grid_5 {
width: 40%;
}
.grid_6 {
width: 48.33333%;
}
.grid_7 {
width: 56.66667%;
}
.grid_8 {
width: 65%;
}
.grid_9 {
width: 73.33333%;
}
.grid_10 {
width: 81.66667%;
}
.grid_11 {
width: 90%;
}
.grid_12 {
width: 98.33333%;
}
I have to load Libre Barcode 128 font family in to fabric canvas. But Barcode doesn't view on canvas. How to set Libre Barcode 128 font family in fabric js canvas?
var text;
var canvas;
document.addEventListener("DOMContentLoaded", function() {
canvas = new fabric.Canvas('c');
setTimeout(function() {
text = new fabric.Text("Text", {
fontSize: 70,
left: 100,
top: 0,
fill: '#sew3435'
});
canvas.add(text).setActiveObject(text);
canvas.getActiveObject().set("fontFamily", 'Libre Barcode 128');
canvas.renderAll();
}, 1000)
});
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Libre+Barcode+39+Text" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js"></script>
<script src="html2canvas.js"></script>
<style>
.ss {
font-family: 'Libre Barcode 39 Text';
font-size: 48px;
}
</style>
</head>
<body>
<div class="ss">Making the Web Beautiful!</div>
<canvas id="c" width=500 height=250></canvas>
</body>
</html>
The actual font is a 3-of-9 font, not 128 (though they are treated the same way) and the name should be (as defined in the CSS):
.set("fontFamily", "'Libre Barcode 39 Text'");
You might have to "preuse" the font on an DOM element before it will be picked up by the canvas.
Update: seems as FabricJS uses incoming string as-is so the inner quotes must be added also there due to the spaces in the font family name (included here for completeness).
Fiddle example
var text;
var canvas;
document.addEventListener("DOMContentLoaded", function() {
canvas = new fabric.Canvas('c');
setTimeout(function() {
text = new fabric.Text("Text", {
fontSize: 70,
left: 100,
top: 0,
fill: '#f00'
});
canvas.add(text).setActiveObject(text);
canvas.getActiveObject().set("fontFamily", "'Libre Barcode 39 Text'");
canvas.renderAll();
}, 500)
});
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Libre+Barcode+39+Text"
rel="stylesheet">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js"></script>
</head>
<body>
<canvas id="c" width=500 height=250></canvas>
</body>
</html>
We have to set font family name with in single quotes like " 'Libre Barcode 39 Text' ", Finally it works for me.
Using Polymer 1.1, in Chrome the elements are centered when the screen is resized smaller. But in Firefox, they shift to the left.
I filed a bug for this, but in the meantime...
Is there a way of making them centered in Firefox without breaking them in Chrome?
<dom-module id="portfolio-display">
<style>
:host[show] {
#apply(--layout-horizontal);
#apply(--layout-center-justified);
height: 100%;
width: 100%;
background-color: var(--paper-grey-50);
}
#main {
width: 100%;
margin-top: 50px;
}
</style>
<template>
<template is="dom-if" if="{{show}}">
<iron-media-query query="(min-width: 900px)" query-matches="{{queryMatches}}"></iron-media-query>
<div id="main">
<div class="layout vertical center center">
<portfolio-first-row class$="{{computeMediaSize(queryMatches)}}"></portfolio-first-row>
<portfolio-second-row class$="{{computeMediaSize(queryMatches)}}"></portfolio-second-row>
<portfolio-third-row class$="{{computeMediaSize(queryMatches)}}"></portfolio-third-row>
</div>
</div>
</template>
</template>
<script>
Polymer({
is: "portfolio-display",
properties: {
show: {
type: Boolean,
reflectToAttribute: true,
value: false
}
},
toggleShow: function() {
this.show = !this.show;
},
computeMediaSize: function (smallScreen) {
if (!smallScreen) {
return "layout vertical center center";
}
}
});
</script>
</dom-module>
This is a newbie question about Kendo UI draggable. I tried to look at their examples but cant really get it.
I want to make a div draggable to another position. When setting this up I can drag the div, but it disappears when released, I want it to stay in the new place. I have tried this but it doesnt work.
$('.draggable').kendoDraggable({
axis: "x",
hint: Hint,
dragstart: DragStart,
drag: Drag,
dragend: DragEnd
});
function Hint (element) {
console.log("hint");
return element;
}
function DragStart(){
console.log("dragstart");
}
function Drag(){
console.log("draging");
}
function DragEnd(event) {
console.log("dragend");
console.log(event.x.location);
$('.draggable').css({'left': event.x.location});
}
I think this is what you want, and I made a Demo for it.
$('.draggable').kendoDraggable({
hint : function (original) {
return original.clone().addClass("ob-clone");
},
dragstart: function (e) {
$(e.target).addClass("ob-hide");
}
});
$('body').kendoDropTarget({
drop: function (e) {
var pos = $(".ob-clone").offset();
$(e.draggable.currentTarget)
.removeClass("ob-hide")
.offset(pos);
}
})
.draggable {
position: absolute;
background: red;
width: 100px;
height: 100px;
vertical-align: middle;
}
.ob-hide {
display: none;
}
.ob-clone {
background: #cccccc;
}
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet"/>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<div id="drop" style="position: absolute; width: 100%; height: 100%; border: 2px solid #000000">
<div class="draggable">
Drag 1
</div>
<div class="draggable">
Drag 2
</div>
</div>
jsFiddle: http://jsfiddle.net/Wayou/fjrcw/