I'm using jqPlot to create a pie chart with a legend. Part of my jqPlot pie options look as follows:
seriesDefaults: {
renderer: $.jqplot.PieRenderer,
rendererOptions: {
padding: 10,
showDataLabels: true,
dataLabelFormatString: '%.2f%%',
sliceMargin: 2,
startAngle: -90
}
},
legend: {
show: true,
location: 'e',
placement: 'outside',
xoffset: 1,
fontSize: '11px',
rowSpacing: '10px',
textColor: '#222222',
fontFamily: 'Lucida Grande, Lucida Sans, Arial, sans-serif'
}
Recently I've come across a case where there are many legend items (e.g., 21), which makes my legend box too tall. I'm wondering if there is a way to either
have a vertical scroll bar within the legend box
display the legend items in multiple columns (preferable)
I've tried setting the following properties:
numberRows
numberColumns
which I found from this page:
$.jqplot.PieRenderer options
however they don't seem to make any changes.
Would anybody be able to provide me with a good solution to this problem?
Try to go with the provided column/row settings. I double-checked personally that this settings do work. Just make sure that in legend you set the numberColumns or numberRows inside rendererOptions, like:
legend: {
show: true,
location: 'ne',
rendererOptions: {numberColumns: 2}
}
If this doesn't work then I must say some other bug must be hiding in your code, then let us see the code so we can find and squash the bug together :)
Related
I am using TinyMCE to input entries for a dictionary and I want to guide the person compiling with preset styles. The user chooses (from a dropdown) preconfigured styles for the dictionary definition (plain text, black font, 12pt size), examples in the definition (italic, blue font, 12pt size) or labels (italic, gray font, 11pt size).
These are my preconfigured styes:
style_formats: [
{title: 'Definition', inline: 'span', styles: {color: '#000000', fontSize: '12pt'}},
{title: 'Example', inline: 'span', styles: {color: '#236FA1', fontStyle: 'italic', fontSize: '12pt'}},
{title: 'Label', inline: 'span', styles: {color: '#7E8C8D', fontSize: '11pt'}},
]
These style formats settings basically work. My problem is that once I select the "Example" style, the font switches to italics and it stays so also when I later select "Definition" or "Label".
https://www.tiny.cloud/docs/tinymce/6/content-formatting/ lists many formatting options, but it seems there's nothing for forcing "plain" text.
In general I would appreciate any advice to build "presets" that a user could choose, while typing "inline" to pull preconfigured styles, with font type, color, size and formatting. This tremendously helps the data input consistency.
Thanks, Emanuele
I want to change the background color of my data table as a whole. I don't want to use the dark themed or light themed. I can't seem to change it even when using !important or using available classes.
Just add the relevant color class e.g. class="primary" or the name of the color from the vuetify color pack.
<v-data-table class="elevation-1 primary"></v-data-table>
Add a custom class to v-data-table tag like this:
<v-data-table ... class="elevation-1 test" ...>
elevation-1 is their standard class name. I added test to illustrate the point.
Add necessary styling to .test .theme--light.v-table selector in your custom CSS.
E.g. .test .theme--light.v-table { background-color: #00f; }
You may need to replace the theme name in the CSS path with your theme name.
If you look inside the DOM, you'll notice that class name test was applied to a <div> container, not the <table> element.
A simple way to include your CSS is with <style> tag inside your App.vue file:
<style>
#import './assets/styles/yourstyles.css';
</style>
How to include css files in Vue 2 has more on that.
You can use headers object to specify class as below,
headers: [{
text: 'Dessert (100g serving)',
align: 'start',
divider: true,
sortable: false,
value: 'name',
class: "blue lighten-5"
},
{
text: 'Calories',
value: 'calories',
align: 'center',
divider: true,
class: "blue lighten-5"
}]
The above code will add light blue background to your header. You can do more with the class attr in headers object
The current answers weren't working for my but I found a simple solution. I'll share it just in case anyone sees this in the future.
# 1. Add a class to the table element
<v-simple-table class="table">
...
</v-simple-table>
# 2. Add background color
<style scoped>
.table {
background-color: red;
}
</style>
I recently added jwplayer to my site. I added video with subtitles. But when we do full screen subtitles are too low almost at the bottom. Is there anyway i can adjust it to appear higher.
Here my code:
<div id="myElement">Loading the player ...</div>
<script type="text/javascript">
jwplayer("myElement").setup({
file: "/sample.mp4",
height: 420,
width: 950,
tracks: [{
file: "/sample.srt",
label: "English",
kind: "captions",
"default": true }]
});
</script>
This solution will work for HTML5, I am not sure about flash though.
check this out show-subtitle-outside-of-player
You need to catch the caption div and override the css
I'd like remove the header controls from the top of the Kendo UI Scheduler control, i.e. the part outlined in red from this screenshot:
I just want to show one static Day view for a single day. Any ideas?
for all Day Slot hide
$("#scheduler").kendoScheduler({
allDaySlot: false,
});
for Toolbar hide:
<style>
.k-scheduler-toolbar {
border-width: 0 0 1px;
display: none;
}
</style>
I'm not sure how to remove all of that, but you can at least remove the All Day slot by selecting allDaySlot: false in the views collection. If you only want to show the "day" view, you would use something like this (also showing how to remove footer; same doesn't appear to work for header, though):
$("#scheduler").kendoScheduler({
views: [
{ type: "day", selected: true, allDaySlot: false}
],
footer: false // removes the footer
});
Please check the information below:
To remove the footer you can set the footer option to false
The toolbar can be removed using CSS styles:
.k-scheduler-toolbar {
display: none;
}
All-day slot can be removed using the allDaySlot
I have the following in my code. Having the option
legend: {show:true}
messes up the chart badly. The legend section is so long
and there is no chart.
I have pasted the image here of how the chart looks :
http://tinypic.com/view.php?pic=2eqgbgy&s=7
It shows fine without the legend option though, but chart is of course without the legend.
In Chrome I see the following exception
Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1
<script type="text/javascript">
line2 = [['Living Expenses',1000], ['Loans',2000], ['Credit
Card',500]];
$j(document).ready(function() {
$j.jqplot.config.enablePlugins = true;
$j.jqplot('piechartdiv', [line2], {
title: 'Where is my money going?',
seriesDefaults:{renderer:$j.jqplot.PieRenderer,
rendererOptions:{sliceMargin:8}}, legend:{show:true}
});
});
</script>
<div style="width: 450px;margin: 0px auto;">
<div id='piechartdiv'></div>
</div>
Any help appreciated.
Are you using Bootstrap or some other CSS reset library?
If you go into firebug, and select the <table class="jqplot-table-legend" ...> element, you'll probably see that there is a width:100% default property set the table elements. You can fix it in your CSS layout:
#piechartdiv table.jqplot-table-legend {
width:auto;
}
The only thing that seems weird to me is this:
$j.jqplot
Why are there some J's on your code?, besides that, everything seems to be fine, maybe try putting a location on the legend to see if that fix the issue, here is an example:
plot = $.jqplot('chart2', [arr], {
grid: {
drawBorder: true,
drawGridlines: false,
background: '#FFFFFF',
shadow: true
},
seriesDefaults: {
renderer: $.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true
}
},
legend: {
show: true,
location: 'e'
}
});
Have you included the jqplot.css file in your code.
Make sure that it is included in the code, and that the file is also present in the directory you are referring to.
Thank you
I came across something similar.
try checking css property text-align:left
<div id='piechartdiv' style="text-align:left;"></div>
I'm afraid I don't know why but these fixed the error for me