I'm using jqPlot
Look at the right-bottom corner
Left side is correct, but the right side isn't.
There is a way to fix word-wrap on tick labels?
EDIT:
$(document).ready(function(){
var plot2 = $.jqplot ('chart-line', [[["2013-03-22",1],["2013-03-23",0],["2013-03-24",0],["2013-03-25",2],["2013-03-26",19],["2013-03-27",7],["2013-03-28",4]]]
, {
title: 'Total de alertas por dia',
seriesDefaults: {
fill:true,
color: 'steelblue',
rendererOptions: {
smooth: true
},
pointLabels:{ show:true }
},
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions:{
formatString: '%F',//'%Q',
textColor: 'black',
fontSize: '11px',
labelPosition: 'auto'
}
},
yaxis: {
min:0,
tickRenderer: $.jqplot.CanvasAxisTickRenderer
}
}
});
EDIT:
Here is HTML
<style>
.ComBordaRedonda {
border:1px solid #dadada;
border-radius:3px;
padding:5px;
font-size: 10pt;
font-family: Calibri;
}
</style>
<div class="ComBordaRedonda" style = "float: right;background-color:#FFFFFF;width: 57%; height: 300px;">
<div id = "chart-line" style = "width: 90%; height: 95%;margin:auto">
</div>
</div>
I fixed it.
I forgot to include the css of jqPlot in the page.
thanks nick_w!
Related
I'm trying to replace the sweetalert control with the new sweetalert2 but I've run into some doubts. Among them, I was able to change the width of the popup but not the height. It seems that the "height" property does not take effect.
const { value: causas } = Swal.fire({
title: "Titulo",
text: "Este es el mensaje!",
input: 'select',
type: "warning",
showCancelButton: true,
confirmButtonText: "Confirmar!",
confirmButtonColor: "#DD6B55",
icon: 'warning',
cancelButtonText: "Cancelar!",
closeOnConfirm: true,
closeOnCancel: true,
width: 800,
height: 800,
inputOptions: {
'Causas': {
cause1: 'c1',
cause2: 'c2',
cause3: 'c3',
cause4: 'c4'
}
},
inputPlaceholder: 'Seleccione el item',
showCancelButton: true,
inputValidator: (value) => {
return new Promise((resolve) => {
//if (value === 'oranges') {
// resolve()
//} else {
// resolve('You need to select oranges :)')
//}
})
}
})
if (fruit) {
Swal.fire(`You selected: ${fruit}`)
}
I also want to change the font size but I haven't found how to do it. Maybe I should generate/create a css file? Can you help me? Thank you!!
I just fixed it! I added the properties in the css file.
.swal2-popup {
font-size: 14px !important;
}
.swal2-styled {
padding: 10px 32px 10px 32px !important;
margin: 20px 10px 0px 10px !important;
width: 170px;
height: 45px;
}
I want to make checkbox mode single in kendo treeview / ui for jquery.
But there is no official option for jquery. I found solution to scan all treeview and uncheck others one by one. But it puts me in trouble because i have 3-4 depth and over +500 items in my treeview. When i select 2nd time, it takes around 1-2 seconds and freeze all treeview for a while.
This is a demo for dummy solution that i use. But it's not smooth for my actual treeview.
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/treeview/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section wide k-content">
<div id="demo-section-title" class="treeview-flex">
<div>
<h3>
Select nodes, folders and drag them between the TreeViews
</h3>
</div>
</div>
<div class="treeview-flex">
<div id="treeview-kendo"></div>
</div>
<div class="treeview-flex">
<div>
<h4>Drag and Drop</h4>
</div>
</div>
<div class="treeview-flex">
<div id="treeview-telerik"></div>
</div>
</div>
<script id="treeview" type="text/kendo-ui-template">
# if (!item.items && item.spriteCssClass) { #
#: item.text #
<span class='k-icon k-i-close kendo-icon'></span>
# } else if(!item.items && !item.spriteCssClass) { #
<span class="k-sprite pdf"></span>
#: item.text #
<span class='k-icon k-i-close telerik-icon'></span>
# } else if (item.items && item.spriteCssClass){ #
#: item.text #
# } else { #
<span class="k-sprite folder"></span>
#: item.text #
# } #
</script>
<script>
function traverse(nodes, callback) {
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
var children = node.hasChildren && node.children.data();
callback(node);
if (children) {
traverse(children, callback);
}
}
}
function onCheck(e) {
var dataItem = this.dataItem(e.node);
var rootNodes = $("#treeview-kendo").getKendoTreeView().dataSource.data();
traverse(rootNodes, function(node) {
if (node != dataItem) {
node.set("checked", false);
}
});
}
$("#treeview-kendo").kendoTreeView({
template: kendo.template($("#treeview").html()),
dataSource: [{
id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
{
id: 2, text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [
{ id: 3, text: "about.html", spriteCssClass: "html" },
{ id: 4, text: "index.html", spriteCssClass: "html" },
{ id: 5, text: "logo.png", spriteCssClass: "image" }
]
},
{
id: 6, text: "Reports", expanded: true, spriteCssClass: "folder", items: [
{ id: 7, text: "February.pdf", spriteCssClass: "pdf" },
{ id: 8, text: "March.pdf", spriteCssClass: "pdf" },
{ id: 9, text: "April.pdf", spriteCssClass: "pdf" }
]
}
]
}],
//dragAndDrop: true,
checkboxes: {
checkChildren: true
},
check: onCheck,
loadOnDemand: true
});
</script>
<style>
#media screen and (max-width: 680px) {
.treeview-flex {
flex: auto !important;
width: 100%;
}
}
#demo-section-title h3 {
margin-bottom: 2em;
text-align: center;
}
.treeview-flex h4 {
color: #656565;
margin-bottom: 1em;
text-align: center;
}
#demo-section-title {
width: 100%;
flex: auto;
}
.treeview-flex {
flex: 1;
-ms-flex: 1 0 auto;
}
.k-treeview {
max-width: 240px;
margin: 0 auto;
}
#treeview-kendo .k-sprite {
background-image: url("../content/web/treeview/coloricons-sprite.png");
}
#treeview-telerik .k-sprite {
background-image: url("../content/web/treeview/coloricons-sprite.png");
}
.demo-section {
margin-bottom: 5px;
overflow: auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.rootfolder {
background-position: 0 0;
}
.folder {
background-position: 0 -16px;
}
.pdf {
background-position: 0 -32px;
}
.html {
background-position: 0 -48px;
}
.image {
background-position: 0 -64px;
}
</style>
</div>
</body>
</html>
There is an option mode:"single" for Angular.
single mode checkbox for treeview in kendo ui for Angular
But i'm looking same kendo ui for Jquery.
You don't need to manually traverse the nodes. You can leverage JQuery to get the appropriate selector and let it do it for you in the check event (documentation).
Basically what you'd do is:
Handle the check event
Get the inputs by selecting the treeview's k-checkbox-wrapper class' input
Set the checked property to false
Set the node that was checked back to true
Example:
check: function(e) {
$("#treeview .k-checkbox-wrapper input").prop("checked", false);
$(e.node).find("input").prop("checked", true);
}
Fiddle: https://dojo.telerik.com/ALEJetoD
when I click between the ticks, it doesn't change the "current value" output. How can I fix this?
Maybe someone is able to help me. I will attach a snippet below, so u can try and test.
Thank you very much!
var minSliderValue = $("#mySlider").data("slider-min");
var maxSliderValue = $("#mySlider").data("slider-max");
$('#mySlider').slider({ // if max 100, 150
ticks: [1, 2, 3, 5, 10, 25, 50, 100],
ticks_positions: [0, 10, 20, 35, 50, 65, 82.5, 100],
ticks_labels: ["1x", "2x", "3x", "5x", "10x", "25x", "50x", "100x"],
ticks_snap_bounds: 1, //0.5
ticks_tooltip: true,
step: 1,
max: 100, //JS script
value: 10,
formatter: function (value) {
return value + 'x';
},
});
$("#leverage").on("keyup", function () {
var val = Math.abs(parseInt(this.value, 10) || minSliderValue);
this.value = val > maxSliderValue ? maxSliderValue : val;
$('#mySlider').slider('setValue', val);
});
// Get Value Output //Bug
$("#mySlider").slider();
$("#mySlider").on("slide", function (slideEvt) {
$("#leverage").val(slideEvt.value);
});
body {
background-color: #0f121b!important;
color: #fff!important;
padding: 4rem 2rem;
}
#mySlider {
margin: 2rem;
width: 70%;
}
.slider-tick {
background-color: #ffffff !important;
background-image: none !important;
opacity: 1 !important;
height: 14px !important;
width: 14px !important;
margin: 0.2rem;
}
.slider-handle {
background-color: #ffffff !important;
background-image: none !important;
opacity: 1 !important;
}
.slider-track {
background-image: -webkit-gradient(linear, left top, right top, from(#129b6b), color-stop(#e5d02b), to(#b44b53))!important;
background-image: -o-linear-gradient(left, #129b6b, #e5d02b, #b44b53)!important;
background-image: linear-gradient(to right, #129b6b, #e5d02b, #b44b53)!important;
}
.slider-selection.tick-slider-selection {
background-color: transparent!important;
background-image: none!important;
}
.slider-track-high {
background-color: #2d343e!important;
background-image: none!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/css/bootstrap-slider.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/bootstrap-slider.js"></script>
<div style="text-align:center">
<div>
<input id="mySlider" data-slider-id='mySliderSlider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" />
<input type="number" id="leverage" min="1" max="100" value="10"
step="1" size="10" inputmode=" decimal">x
<br />
</div>
Use "change" instead of "slide" in the code below, also change slideEvt.value to slideEvt.value.newValue
$("#mySlider").on("slide", function (slideEvt) {
$("#leverage").val(slideEvt.value.newValue);
});
var minSliderValue = $("#mySlider").data("slider-min");
var maxSliderValue = $("#mySlider").data("slider-max");
$('#mySlider').slider({ // if max 100, 150
ticks: [1, 2, 3, 5, 10, 25, 50, 100],
ticks_positions: [0, 10, 20, 35, 50, 65, 82.5, 100],
ticks_labels: ["1x", "2x", "3x", "5x", "10x", "25x", "50x", "100x"],
ticks_snap_bounds: 1, //0.5
ticks_tooltip: true,
step: 1,
max: 100, //JS script
value: 10,
formatter: function (value) {
return value + 'x';
},
});
$("#leverage").on("keyup", function () {
var val = Math.abs(parseInt(this.value, 10) || minSliderValue);
this.value = val > maxSliderValue ? maxSliderValue : val;
$('#mySlider').slider('setValue', val);
});
// Get Value Output //Bug
$("#mySlider").slider();
$("#mySlider").on("change", function (slideEvt) {
$("#leverage").val(slideEvt.value.newValue);
});
body {
background-color: #0f121b!important;
color: #fff!important;
padding: 4rem 2rem;
}
#mySlider {
margin: 2rem;
width: 70%;
}
.slider-tick {
background-color: #ffffff !important;
background-image: none !important;
opacity: 1 !important;
height: 14px !important;
width: 14px !important;
margin: 0.2rem;
}
.slider-handle {
background-color: #ffffff !important;
background-image: none !important;
opacity: 1 !important;
}
.slider-track {
background-image: -webkit-gradient(linear, left top, right top, from(#129b6b), color-stop(#e5d02b), to(#b44b53))!important;
background-image: -o-linear-gradient(left, #129b6b, #e5d02b, #b44b53)!important;
background-image: linear-gradient(to right, #129b6b, #e5d02b, #b44b53)!important;
}
.slider-selection.tick-slider-selection {
background-color: transparent!important;
background-image: none!important;
}
.slider-track-high {
background-color: #2d343e!important;
background-image: none!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/css/bootstrap-slider.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/bootstrap-slider.js"></script>
<div style="text-align:center">
<div>
<input id="mySlider" data-slider-id='mySliderSlider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" />
<input type="number" id="leverage" min="1" max="100" value="10"
step="1" size="10" inputmode=" decimal">x
<br />
</div>
We want to use 'Avenir' in our Google Charts. This isn't a problem at all when using the charts on a webpage, as you can see here. We can simply change the font after the chart is generated using CSS:
#font-face
{
font-family: 'avenir';
src: url('../fonts/avenir.woff2');
}
svg text
{
font-family: 'avenir' !important;
}
The problem is we want to save the chart as an image after it is generated and use it in a PDF that we generate then. For saving the chart we're using the function getImageURI(), but in the image that is saved the 'default' font (Arial) is used, as you can see here.
Does anyone know if it's possible to use a custom font when setting up a Google Chart like the way Arial is set in the example below?
var oOptions =
{
vAxis:
{
textStyle:
{
color: '#2a292e',
fontName: 'Arial',
fontSize: 24
}
}
}
Thanks in advance!
rather than applying css to the chart elements, add the fontName to the chart options
this will translate to the image
the following working snippet uses a custom font from google
from the google "font picker"...
<link href="https://fonts.googleapis.com/css?family=Bahiana" rel="stylesheet">
Specify in CSS
Use the following CSS rules to specify these families:
font-family: 'Bahiana', cursive;
in the chart options, the fontName is set as...
fontName: "'Bahiana', cursive"
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
'Western', 'Literature', { role: 'annotation' } ],
['2010', 10, 24, 20, 32, 18, 5, ''],
['2020', 16, 22, 23, 30, 16, 9, ''],
['2030', 28, 19, 29, 30, 12, 13, '']
]);
var options = {
width: 800,
height: 600,
bar: { groupWidth: '75%' },
isStacked: true,
legend: {
position: 'top',
maxLines: 3,
textStyle: {
color: '#2a292e',
fontName: "'Bahiana', cursive",
fontSize: 40
}
},
hAxis: {
textStyle: {
color: '#2a292e',
fontName: "'Bahiana', cursive",
fontSize: 24
}
},
vAxis: {
textStyle: {
color: '#2a292e',
fontName: "'Bahiana', cursive",
fontSize: 24
}
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'ready', function () {
document.getElementById('image_div').innerHTML = '<img alt="Chart" src="' + chart.getImageURI() + '">';
});
chart.draw(data, options);
};
div {
padding: 4px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bahiana">
<div>CHART</div>
<div id="chart_div"></div>
<div>IMAGE</div>
<div id="image_div"></div>
I am trying to show a KendoUI Chart inside a DIV and looks what the LOG says:
Invalid negative value for attribute width="-10px"
This is the code:
<div id="chart"></div>
This is the javascript:
$("#chart").kendoChart({
theme: "Metro",
legend: {
position: "right",
labels: {
font: "12px arial",
color: "white"
},
},
chartArea: {
background: "",
},
dataSource: data,
series: [
{
type: "pie",
field: "itemTotal",
categoryField: "itemNameAndTotal",
explodeField: "exploded"
}
],
tooltip: {
visible: true,
template: "${ category }"
}
});
This is the css:
#chart {
background: #f9a600;
border-radius: 5px;
margin: 10px 5px 5px 5px;
padding: 5px;
}
Thanks for the help!