Continuation of what I thought was resolved a couple of months ago:
A new datatable is rendered each time when called in Ajax response [Highcharts]
$(function() {
Highcharts.setOptions({
lang: {
exportData: {
categoryHeader: 'Vulnerability'
}
}
});
$('#container').highcharts({
chart: {
//plotBackgroundColor: null,
//plotBorderWidth: null,
//plotShadow: false,
evsents: {
load: Highcharts.drawTable
},
height: 400,
width: 800,
//marginBottom: 250
},
title: {
text: undefined
},
credits: {
enabled: false
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
showInLegend: true,
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
verticalAlign: 'top',
enabled: true,
color: '#000000',
connectorWidth: 1,
distance: -50,
connectorColor: '#000000',
format: '<br>{point.percentage:.1f} %<br>Count: {point.y}'
}
}
},
exporting: {
showTable: true,
tableCaption: false
},
series: [{
type: 'pie',
name: 'Counts',
data: [{
y: 4,
name: 'high',
}, {
y: 8,
name: 'medium',
}, {
y: 2,
name: 'low'
}]
}]
});
});
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #EBEBEB;
margin: 10px auto;
text-align: center;
position: absolute;
top: 200px;
left: 20px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
Overview:
I have a condition where I need to update highcharts datatable every time when the change event is triggered.
http://jsfiddle.net/BlackLabel/s7m0tvpy/
This was working perfectly before in which clicking the update button changes 4,8,2 to 0,0,1.
But quite recently, this is not working.
Is it something that update function has been modified?
Any help would be appreciated.
This issue was due to
https://github.com/highcharts/highcharts/issues/14320
However, it still works in 8.1.2 version.
<script src="https://code.highcharts.com/8.1.2/highcharts.js"></script>
<script src="https://code.highcharts.com/8.1.2/modules/exporting.js"></script>
<script src="https://code.highcharts.com/8.1.2/modules/export-data.js"></script>
Related
What I expect:
Code and demo:
Highcharts.chart('container', {
chart: {
polar: true
},
title: {
text: 'Highcharts Polar Chart'
},
subtitle: {
text: 'Also known as Radar Chart'
},
pane: {
startAngle: 0,
endAngle: 360
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
labels: {
format: '{value}°'
}
},
yAxis: {
min: 0
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: [{
type: 'column',
name: 'Column',
data: [8, 7, 6, 5, 4, 3, 2, 1],
pointPlacement: 'between'
}]
});
.highcharts-figure,
.highcharts-data-table table {
min-width: 320px;
max-width: 660px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #ebebeb;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
A polar chart showing different series types on a radial axis. Polar
charts, also known as a radar charts, are often used to compare
multivariate data sets. A polar chart in Highcharts is simply a
cartesian chart where the X axis is wrapped around the perimeter. It
can render common cartesian series types like line, column, area or
arearange.
</p>
</figure>
This should work
Highcharts.chart('container', {
chart: {
polar: true
},
title: {
text: 'Highcharts Polar Chart'
},
subtitle: {
text: 'Also known as Radar Chart'
},
pane: {
startAngle: 0,
endAngle: 360
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
labels: {
format: '{value}°'
}
},
yAxis: {
min: 0
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: [{
type: 'column',
name: 'Column',
data: [8, 7, 6, 5, 4, 3, 2, 1],
pointPlacement: 'between'
}]
});
.highcharts-figure,
.highcharts-data-table table {
min-width: 320px;
max-width: 660px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #ebebeb;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
/*You can change the color using this selector*/
.highcharts-series-group path{
fill: red !important;
}
.highcharts-series-group path:hover{
opacity: 0.6
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
A polar chart showing different series types on a radial axis. Polar
charts, also known as a radar charts, are often used to compare
multivariate data sets. A polar chart in Highcharts is simply a
cartesian chart where the X axis is wrapped around the perimeter. It
can render common cartesian series types like line, column, area or
arearange.
</p>
</figure>
The simplest way is to enable the colorByPoint option and define colors array:
colors: ['#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'],
plotOptions: {
column: {
...
colorByPoint: true
}
},
...
Live demo: http://jsfiddle.net/BlackLabel/5h09mwy2/
API Reference:
https://api.highcharts.com/highcharts/colors
https://api.highcharts.com/highcharts/series.column.colorByPoint
If you need to do that by CSS only, you can use:
.highcharts-series-0 path:nth-child(1) {
fill: red;
}
.highcharts-series-0 path:nth-child(2) {
fill: orange;
}
.highcharts-series-0 path:nth-child(3) {
fill: yellow;
}
Live demo: http://jsfiddle.net/BlackLabel/8cmv2edz/
I have a line chartJS chart with the datalabel plugin but the datalabel is cropped by the border of the canvas, is there a way to increase its z-index or something like that?
For example in this code (a cleaned-up version of the real code), I'm supposed to have 1234 as the last value but it only shows 12, and even 3 is cropped. I would like to display it on top of the white border or maybe translate it a few pixels to the left automatically if it can't fit here (I don't care if a bit of the number border is cropped while the number isn't)
Chart.register(ChartDataLabels); // Import the data-labels plugin
graphItop4 = new Chart(document.getElementById("mois"), {
type: "line",
data: {
labels: [1, 2],
datasets: [{
label: "1",
fill: true,
data: [0, 1234],
backgroundColor: "rgba(0, 0, 255, 0.2)",
borderColor: "blue",
borderWidth: 1,
datalabels: {
align: 'start',
}
},
]
},
options: {
plugins: {
datalabels: {
backgroundColor: function(context) {
return context.dataset.backgroundColor.replace("0.2", "0.5");
},
borderRadius: 100,
color: 'white',
font: {
weight: 'bold',
size: '15'
},
formatter: Math.round,
padding: 5,
}
},
},
})
body {
font-family: "Arial", Helvetica, sans-serif;
display: flex;
margin: 18px;
padding: 0;
background-color: #ccc;
}
.case {
position: relative;
padding: 10px;
text-align: center;
border-radius: 10px;
min-height: 240px;
background-color: #fff;
}
h2 {
font-size: 1.4em;
margin: 0;
padding: 10px 20px;
border-radius: 10px;
background-color: lightgrey;
}
<div class="case">
<h2>Mois</h2>
<div>
<canvas height="270" id="mois" width="600"></canvas>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.7.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.0.0/dist/chartjs-plugin-datalabels.min.js"></script>
var table = new Tabulator("#example-table", {
layout: "fitColumns", //fit columns to width of table
height: "69vh",
responsiveLayout: "collapse", //hide columns that dont fit on the table
cellVertAlign: "middle",
headerSort: false,
columns: [
{
title: "title",
field: "title",
width: 300,
sorter: "string",
formatter(cell, formatterParams) {
return `<p class="p-name-inside-table" contenteditable="true">${cell.getValue()}</p>`;
}
},
{
title: "body",
field: "body",
sorter: "string",
formatter(cell, formatterParams) {
return `<p class="p-name-inside-table" contenteditable="true">${cell.getValue()}</p>`;
}
}
]
});
$.ajax({
type: "GET",
url: "https://jsonplaceholder.typicode.com/posts",
success: function (data) {
setTimeout(() => {
table.addData(data, false);
table.restoreRedraw();
}, 200);
}
});
body {
font-family: Arial;
}
h1 {
text-align: center;
margin: 0, auto;
}
.button {
justify-content: center;
margin: 10px;
text-align: center;
}
.button button {
margin: 10px;
padding: 10px;
}
.p-name-inside-table {
width: 100%;
cursor: default !important;
}
.p-name-inside-table img {
cursor: pointer !important;
}
<link href="https://unpkg.com/tabulator-tables#4.9.3/dist/css/tabulator.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/tabulator-tables#4.9.3/dist/js/tabulator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Tabulator</h1>
<div id="example-table"></div>
How do I wrap the title's row so it doesn't get truncated on Tabulator? You can see the rows are truncated and I can't find it on the docs (http://tabulator.info)
( ----This is for avoiding that "mostly code" error---------------------------------------------------------------------------------)
A little bit of CSS should do the trick:
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
white-space: normal !important;
}
I'm using a kendo grid and I want to implement an action bar when a user hover the row. I found the example solution. But I'm looking for showing the tooltips at the end of the row instead of the current hover column. So how can I get the last column that user currently stop at?
Add a :last-child to the filter property:
filter: "tbody td:last-child",
Demo:
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.513/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2020.2.513/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.513/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
template: "<div class='customer-photo'" +
"style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: ContactName #</div>",
field: "ContactName",
title: "Contact Name",
width: 500
}, {
field: "ContactTitle",
title: "Contact Title",
width: 300
}, {
field: "CompanyName",
title: "Company Name",
width: 300
}, {
field: "Country",
width: 300
}]
});
});
$("#grid").kendoTooltip({
position: "right",
callout: false,
filter: "tbody td:last-child",
content: function(e) {
return "<button class='k-button' ><span class='k-icon k-i-trash'></span></button> <button class='k-button'><span class='k-icon k-i-email'></span></button> <button class='k-button'><span class='k-icon k-i-warning'></span></button>";
}
});
</script>
</div>
<style type="text/css">
.customer-photo {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
background-size: 32px 35px;
background-position: center center;
vertical-align: middle;
line-height: 32px;
box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
margin-left: 5px;
}
.customer-name {
display: inline-block;
vertical-align: middle;
line-height: 32px;
padding-left: 3px;
}
</style>
</body>
</html>
Dojo
I'm trying to output this twitter feed to a tag in the right column, but I can't figure out how to make it work. It seems like the code is set up to print wherever it is located. However, I can't place the code in the body of the page.
http://cusli.org/NiagaraIntlMootCourt/NiagaraMoot.aspx
Here is the code. I have a div tag with id "comments" in the html body.
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<style type="text/css">
#nav {
padding: 0 0 0 10px;
margin: 0;
list-style: none;
width: 760px;
height: 0px;
background:#6E102B;
margin-bottom: 5px;
}
.twtr-hd,
.twtr-ft,
.twtr-user
{
display: none;
}
</style>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: 250,
height: 300,
theme: {
shell: {
background: '#ffffff',
color: '#000000'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#b80b0b'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('NiagaraMoot').start();
</script>
Try this:
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<style type="text/css">
#nav {
padding: 0 0 0 10px;
margin: 0;
list-style: none;
width: 760px;
height: 0px;
background:#6E102B;
margin-bottom: 5px;
}
.twtr-hd,
.twtr-ft,
.twtr-user
{
display: none;
}
</style>
<script>
var myThing = new TWTR.Widget({ //save you reference
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: 250,
height: 300,
theme: {
shell: {
background: '#ffffff',
color: '#000000'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#b80b0b'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
behavior: 'all'
}
}); //remove from here
</script>
inside your HTML go
<div>
<script>
myThing.render().setUser('NiagaraMoot').start(); //add here
</script>
</div>
Put the script tag inside the div where you want it to render.
eg:
<html>
<body>
<h1>Hello world</h2>
<div>
<script type="text/javascript">
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: 250,
height: 300,
theme: {
shell: {
background: '#ffffff',
color: '#000000'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#b80b0b'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('NiagaraMoot').start();
</script>
</div>
</body>
</html>
<div id="contentRight">
<!-- this is your right coulmn, put TWitter script here -->
<div class="myTwitter">
<script>
new TWTR.Widget({
version: 2,
....
}).render().setUser('NiagaraMoot').start();
</script>
</div>
<!-- end of your insert -->
<div id="dnn_ContentPane_Right">
....
CSS and main Tweeter JS library should stay in <head> ... </head> tag of you page - prefferably ... if you can not place them there ... they can be anywhere in your page but just before the init part (shown above).
I meen this part:
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<style type="text/css">
#nav {
padding: 0 0 0 10px;
margin: 0;
list-style: none;
width: 760px;
height: 0px;
background:#6E102B;
margin-bottom: 5px;
}
.twtr-hd,
.twtr-ft,
.twtr-user
{
display: none;
}
</style>