I am using version 0.7.1 of C3.js and I have created a donut chart with the following code:
var chart = c3.generate({
data: {
columns: [
['Critical', 100],
['High', 200],
['Informational', 300],
['Medium', 400],
['Low', 500],
],
type : 'donut',
},
donut: {
title: "Finding Severities"
},
tooltip: {
format: {
value: function (value, ratio, id, index) { return value + " " + id + " Findings"; }
}
}
});
Everything works perfectly fine except for the tooltips which show up with blank boxes instead of the values I am trying to print. Even if I remove my custom tooltip format, the default tooltip still will not show up.
I have not modified the css and js files for C3.js and when I run this same code on their website (https://c3js.org/samples/chart_donut.html), it works perfectly fine.
Here is what shows up when I try to view the tooltip on my site:
And here is what I want to show up (which is what is supposed to happen if you run this code on https://c3js.org/samples/chart_donut.html) :
Not a full answer, but too big to fit in a comment:
Something, somewhere, is setting the css color style for your table cell elements to 'white' (or '#fff'). c3.css itself doesn't have a rule for this property, so this will be getting set in another css file you load in or it might be the default for whatever browser you are using.
The c3 demo page uses another css file, foundation.css, that sets it to '#222'. (And I can recreate your problem by changing that css file's value for that rule/property combo to 'white'). The jsfiddle linked above uses the browser default which for me in chrome is '#000'.
So add this css rule and I'm 90% sure the problem goes away:
.c3-tooltip td {
color: #222;
}
Related
I'm trying to develop a very compact chart that displays both buttons and inputSelect from rangeSelector on the same line. Also I have a controller to show/hide stocktools gui interface (this is the source of bug).
Showing gui generates an animation that moves buttons to the right, since the distance between both elements are greater than the responsive rule condition (I suppose) they stay on the same line, but when I click to hide the gui an animation triggers and forces inputSelect to break a line.
I have tried to use a parameter chart:{animation:false}, but for some reason I get the inverse problem. When I click to show the gui interface inputSelect breaks a line and when I hide it back it goes back for the same line.
Here is a live demo.
I was wondering if I could acces that responsive rule and disable it, but I couldn't find it anywhere in API docs. Also I have tried to use default parameters from rangeSelector API but it seems they can't help with that gui animation being triggered.
Any solution for that outcome is valid, I just think this is viable one.
Update
I found this forum thread https://www.highcharts.com/forum/viewtopic.php?t=41142. This is a viable workaround, I tried to implement it to make both input goes to the right and buttons to the left, this way it would be harder for their condition of break line to be met.
Here is the workaround:
chart: {
events: {
load: function(){
let marginRight;
let marginLeft;
let marginLeft;
let this = chart;
marginRight = chart.marginRight - chart.spacing[1];
marginLeft = chart.plotLeft + chart.spacing[3];
chart.update({
rangeSelector: {
inputPosition: {
align: "right",
x: marginRight,
},
buttonPosition: {
align: "left",
x: marginLeft,
}
}
});
}
},
It only worked for the marginRight for some reason chart object doesn't have marginLeft property, I was wondering if is there any other way to calculate axis title and labels width to pass as this x offset.
I have the following handsontable loaded into a html div.
HTML
<div id="example1"></div>
CSS
<style>
.handsontable .colHeader {
overflow: hidden;
/* Expands or shrinks column names as required to fill the available free
space. Stops column headers overflowing onto filters. Causings Col Header row
sizing issues on IE and Edge when enabled. */
display: flex;
height: 20px;
}
</style>
JS
document.addEventListener("DOMContentLoaded", function() {
var container = document.getElementById('example1'),
hot;
hot = new Handsontable(container, {
data: Handsontable.helper.createSpreadsheetData(10, 200)
, rowHeaders: true
, rowHeaderWidth: 25
, rowHeights: 25
, colHeaders: true
, colWidths: 40
, columnSorting: true
, filters: true
, dropdownMenu: true
});
});
You can view it in operation in the following link.
https://jsfiddle.net/JoshAdams/nbLy6j04/
I want my column header names to be hidden behind the column filter symbol. So I have changed the display property of the ColHeaders to flex. Which works fine on all browsers.
However, changing this display value causes strange behaviour on MS Edge and IE. Specifically it causes the Column Heights to be re-sized incorrectly on scrolling of the table. See image below.
Which is explainable by the fact IE and Edge do not properly support display: flex.
So my question is. Is there any changes I can make to my code to achieve the functionality I want. I.e. if the column header text overflows the column (and filter button) hide the overflowing section of the text?
We are using jspanels in our project as tool bar and whenever we click toolicons,jspanels will come as a popup and will display controls like textboxes for inputting data and gridview for displaying data.In normal way whenever we enter data in textboxes,after saving data it will be displayed in gridview.Jspanel will be adjusted to accommodate gridview.Now the problem i am facing is, i am minimizing jspanel by using jspanel.minimize() for certain times after that i will use jspanel.normalize() in order to move to the previous position.After that when ever i display results in gridview jspanel is not adjusting its size rather gridview is going inside jspanel, and i have to drag the corner of jspanel in order to display gridview.How can i avoid this issue rather dragging the panel.Here is the code i used for jspanel
var jteamNetworkPanel = null;
function searchByPanel() {
document.getElementById("divtDetails").style.visibility = "";
var content = document.getElementById("divtDetails").outerHTML;
$(document).ready(function () {
jteamNetworkPanel = $.jsPanel({
draggable: {
containment: "#tDiv"
},
selector: '#tDiv',
content: content,
size: { width: 'auto', height: 'auto' },
title: "Test",
position: { top: 50, left: "center" },
theme: 'warning'
});
});
}
Meanwhile jsPanel version 3 is released and I would suggest switching to version 3 for at least two reasons concerning your issue:
minimize() works different and has no more negative side effects I
know of
using "auto" with panel size is also improved and works a lot better
But v3 doesn't work with browsers older than IE11 and you need to check the docs since some options and methods are renamed.
http://jspanel.de/
How to force chart to show left flag?
http://jsfiddle.net/25hBZ/
$('#container').highcharts('StockChart',{
series: [
{data: [[1397760750356,1],[1401353540540,10],[1401455794172,100]], type: 'spline'},
{"name":"ELOXATIN","data":[[1397760750356,15],[1401455794172,15]],"type":"spline","id":"dataseries_17328","enableMouseTracking":false},
{"type":"flags","data":[{"x":1397760750356,"title":"A","text":"something"},{"x":1401455794172,"title":"B","text":"something"}],"onSeries":"dataseries_17328","shape":"squarepin"}
]
});
http://monosnap.com/image/3vs327Xw0A62ktOAENBJDc2O7jmCqr
I've tried with setting extremes, maxPadding, minPadding and nothing. The problem is only for flags on edges.
Any ideas?
The only workaround I can see is add an additional "null" in the "data" attribute.
{data: [[null,null],[1397760750356,1],[1401353540540,10],[1401455794172,100]], type: 'spline'},
Once you click on YTD or 1y, the items show up just fine except the navigation at the bottom can scroll left.
Added the following based on your comment:
xAxis: {
min: 1390000000000
},
That will ensure that you are properly zoomed in from the correct position. Though keep in mind, if your data is dynamic, you would need to round it somehow so it would be displayed.
Is it possible to add several wider buttons to the CKEditor toolbar?
I know how to make all of them wider by changing width parameter in editor.css:
but I only need several buttons, in similar to "source button" style:
Any hints?
UPDATE
Ok, lets say I want to widen icon of this plugin:
CKEDITOR.plugins.add( 'timestamp',
{
init: function( editor )
{
editor.addCommand( 'insertTimestamp',
{
exec : function( editor )
{
var timestamp = new Date();
editor.insertHtml( 'The current date and time is: <em>' + timestamp.toString() + '</em>' );
}
});
editor.ui.addButton( 'Timestamp',
{
label: 'Insert Timestamp',
command: 'insertTimestamp',
icon: this.path + 'images/timestamp.png'
} );
}
} );
and former result I got by adding this:
.cke_button_insertTimestamp { width: 32px !important; }
this doesn't change anything:
#cke_11 {
width: 32px ;
}
no matter what integer I choose, and I don't see any integers like you mentioned while inspecting. I have CKEditor build in IPBoard maybe that's the issue?
What should I add? Sorry for me being noob
UPDATE
Ok I got this at last and have identical results - half icon. Is it about this .cke_icon class which defines 16px width? Many icons share this class. Don't know how to get around or delete it
UPDATE
#cke_61 .cke_icon { width:32px; }
This code did the job thanks a million!
Final question, how do I add horizontal separator below my new icon row like other rows have:
Vertical one I've added in ips_config.js using this:
['Timestamp'],['-'],
but horizontal I have no idea
Every button has an unique id. A line of CSS is all that is needed to adjust the width of a button:
#cke_11 { width: 120px; }
#cke_11 is the first button (cut) on the demo page.
All buttons contain a label. This label is a string of text and hidden with .cke_button_label { display: none; }. If you remove this line of CSS or set the value to inline. You'll get this:
That is the reason the Source button is wider. Source button has a class cke_button__source_label. This class sets display to inline.
If you only want to show a single label:
#cke_11_label { display: inline; }
Use your Developer Tools that come with your browser to inspect elements and fiddle with the css.