We Keep Coding

How to make ECharts text and legend area options responsive to different screen sizes?

In this case I'm using ECharts for react library to visualize data using a pie chart. When the screen size increases the graph text will remain as the same size. canvas size is changing but the other texts are not changing.
So, I want to make those text and legend area responsive when the screen size is increasing.
const optionPieChart = { color: [ '#2B6AA9', '#2845AB', '#F8FAFF', '#4EBDDE' ], title: { text: 'Conversation Type', left: 'left', top: '10%', padding: 15, textStyle: { color: '#ffffff', opacity: '0.7', fontWeight: '400', fontFamily: 'poppins', fontSize: '18px' } }, tooltip: { trigger: 'item' }, legend: { itemGap: 10, show: true, padding: 15, orient: 'vertical', left: 'left', top: '50%', itemWidth: 15, textStyle: { color: '#C4D8FF', fontFamily: 'poppins', fontSize: '14px' } }, series: [ { // name: 'Access From', type: 'pie', radius: '80%', padding: '0', left: '160', data: [ { value: 1048, name: 'FAQs' }, { value: 735, name: 'Small Talks' }, { value: 580, name: 'Product inquiries' }, { value: 484, name: 'Escalate Hop' }, ], label: { show: false }, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ], backgroundColor: { type: 'radial', x: 0.3, y: 0.3, r: 0.8, colorStops: [ { offset: 0, color: '#122C44' }, { offset: 1, color: '#133351' } ] }, };
I tried some media quaries but didn't work.

You can do this with window.onresize event
var chartEl = echarts.init(document.getElementById('someId'));
var option = {
... // chart options
};
chartEl.setOption(option);
window.onresize = function () {
var width = document.getElementById('someId').offsetWidth;
var fontSize = width / 80 + 'px';
var legendWidth = width / 4 + 'px';
chartEl.setOption({
textStyle: {
fontSize: fontSize
}
});
chartEl.setOption({
legend: {
width: legendWidth
}
});
};

Selection zoom not working for Area chart in Apexchart for React Js

I have implemented an Area Chart using Apexchart for React Js. I have set options using useState. When I am updating the options by updating the state. When I am using selection zoom, the charts get zoomed and then gets reset within less than a second. Can someone help me with it? Thanks in advance.
setOptions1({
dataLabels: {
enabled: false,
},
chart: {
id: 'chartId1',
width: "100%",
zoom: {
enabled: true,
type: 'x',
// autoScaleYaxis: true,
},
toolbar: {
show: true,
tools: {
reset: true | '<img src="/static/icons/reset.png" width="20">',
customIcons: openModal ? [] : [{
icon: `<img src=${fullScreen} width="13">`,
index: 6,
title: 'full screen',
class: 'custom-icon-css',
click: function (chart, options, e) {
setOpenModal(true);
setOpenModalAreaChart(true);
setModalChartdata(options.globals.chartID)
}
}]
},
autoSelected: 'zoom'
},
},
xaxis: {
categories: year1,
min: 1,
max: 17
},
yaxis: [
{
title: {
text: 'Scale: in Millions ($)',
style: {
color: "rgb(55, 61, 63)",
fontSize: " 13px",
fontWeight: "400",
fontFamily: 'Montserrat, sans- serif'
},
},
},
],
legend: {
show: true,
showForSingleSeries: true
},
tooltip: {
y: {
formatter: function (val, index) {
return '$' + val;
}
}
},
stroke: {
show: true,
curve: 'smooth',
lineCap: 'butt',
colors: undefined,
width: 2,
},
responsive: [
{
breakpoint: 650,
options: {
chart: {
width: '50%'
}
},
},
{
breakpoint: 500,
options: {
chart: {
width: '30%'
}
},
}
],
})
}

Apex Chart Line Graph not showing data label only on first month

For some reason, the data label isn't being displayed on my line graph by ApexChart.
Seems like the chart's JS is relatively simple:
var options = {
chart: {
height: 380,
type: 'line',
zoom: {
enabled: false
},
toolbar: {
show: false
},
dropShadow: {
enabled: true,
top: 10,
left: 0,
bottom: 0,
right: 0,
blur: 2,
color: '#45404a2e',
opacity: 0.35
},
},
colors: ['#1ecab8', '#56b9db', '#ffb66e', '#eb3131', '#373d3f'],
dataLabels: {
enabled: true,
},
stroke: {
width: [3, 3, 3, 3, 3],
curve: 'smooth'
},
series: [{
name: "Informational",
data: [5,10,15,20]
},
{
name: "Low",
data: [2,3,4,5]
},
{
name: "Medium",
data: [9,0,2,3]
},
{
name: "High",
data: [1,2,3,4]
},
{
name: "Critical",
data: [0,0,0,10]
}
],
title: {
text: 'Reported Findings',
align: 'left',
style: {
fontSize: "14px",
color: '#ffffff'
}
},
grid: {
row: {
colors: ['transparent', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.2
},
borderColor: '#f1f3fa'
},
markers: {
style: 'inverted',
size: 6
},
xaxis: {
categories: <%= raw #series_months %>,
axisBorder: {
show: true,
color: '#bec7e0',
},
axisTicks: {
show: true,
color: '#bec7e0',
},
},
yaxis: {
min: 0,
max: 50
},
legend: {
position: 'top',
horizontalAlign: 'right',
floating: true,
offsetY: -25,
offsetX: 5
},
responsive: [{
breakpoint: 600,
options: {
chart: {
toolbar: {
show: false
}
},
legend: {
show: false
},
}
}]
}
var chart = new ApexCharts(
document.querySelector("#<%= #chart_id %>"),
options
);
chart.render();
What am I missing that is causing this to not display correctly? It doesn't make sense because if I change one of the first arrays from a 9 to a 10, then it shows up just fine:

Fixed this by updating the apexchart version from 3.15.6 to 3.19.3

Create and update multiple series in Zingchart

I'm trying to graph some Network data in Realtime using Zingchart. I'm using websockets to send data from a twisted pyton server to Zingchart.
Is there any way to identify which serie to update? For instance if a have this serie:
'series': [
{
'text': 'Serie 1',
'values': []
},
{
'text': 'Series 2',
'values': []
}
]
use "text" or another id to identify the serie to update with the data sent via websockets? Also is it possible to create series dynamically from the websocket?

Well, It might not be a right solution for you.
you can just write code below;
zingchart.exec('myChart', 'appendseriesvalues', {
plotindex : 0,
values : [[time,newValue-20]]
});
zingchart.exec('myChart', 'appendseriesvalues', {
plotindex : 1,
values : [[time,newValue+10]]
});
The point is you can set right order of the plotindex attribute;
I modified script source from the site below, see how it works.
Here is a complete source;
<html>
<head>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<script>
zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "ee6b7db5b51705a13dc2339db3edaf6d"];
</script>
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.zc-ref {
display: none;
}
</style>
</head>
<body>
<div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
<script>
var myConfig = {
gui: {
contextMenu: {
position: 'right',
docked: true,
alpha: 0.9,
item: {
textAlpha: 1
},
button: {
visible: true
}
}
},
graphset: [{
type: 'line',
borderColor: "#cccccc",
borderWidth: 1,
borderRadius: 2,
plot: {
aspect: 'spline'
},
plotarea: {
margin: 'dynamic'
},
utc: true,
timezone: 9,
title: {
text: 'Uniform Step Time Series Line Chart',
adjustLayout: true,
align: 'left',
marginLeft: '15%'
},
legend: {
draggable: true,
backgroundColor: 'transparent',
header: {
text: "Facility N",
backgroundColor: '#f0f0f0'
},
marker: {
visible: false
},
//item: {
// margin: '5 17 2 0',
// padding: '3 3 3 3',
// fontColor: '#fff',
// cursor: 'hand'
//},
verticalAlign: 'middle',
borderWidth: 0
},
scaleX: {
//minValue: 1484870400000, //set minValue timestamp
//minValue: 1512018819470,
//step: 'day', //set step for scale
step: '30minute',
//step: 'minute',
maxItems: 7,
itemsOverlap: true,
zooming: true,
transform: {
type: 'date',
all: "%d %M %Y<br>%g:%i:%s"
}
},
preview: {
adjustLayout: true,
live: true
},
scaleY: {
step: 50,
label: {
text: 'Sensor'
},
guide: {
lineStyle: 'solid'
}
},
crosshairX: {
lineColor: '#555',
plotLabel: {
backgroundColor: '#fff',
multiple: true,
borderWidth: 2,
borderRadius: 2,
},
marker: {
size: 5,
borderWidth: 1,
borderColor: '#fff'
}
},
tooltip: {
visible: false
},
series: [{
values: [],
text: 'Sensor FC-456',
legendItem: {
backgroundColor: '#29A2CC',
borderRadius: 2
}
}, {
values: [],
text: 'Sensor AB-265',
legendItem: {
backgroundColor: '#D31E1E',
borderRadius: 2
}
}, {
values: [],
text: 'Sensor DC-445',
legendItem: {
backgroundColor: '#7CA82B',
borderRadius: 2
}
}, {
values: [],
text: 'Sensor ER-985',
legendItem: {
backgroundColor: '#EF8535',
borderRadius: 2
}
}]
}]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});
//Set up of a websocket
var ws = new WebSocket('ws://65.50.232.201:8888/', 'zingchart');
//var ws = new WebSocket('ws://localhost:8080/examples/websocket/chartProgrammatic');
//var ws = new WebSocket('ws://192.9.112.69:8080/examples/websocket/sychart');
//Tell our internal server what to send.
ws.onopen = function(){
//console.log("########send##########");
ws.send('zingchart.feed');
ws.send('zingchart.push');
ws.send('zingchart.getdata');
}
//Setup an event to call a ZingChart API Method to update our chart.
ws.onmessage = function (e) {
console.log("===== \n " + JSON.stringify(e.data));
console.log("===== \n ");
//var data = JSON.parse(e.data);
var data = JSON.parse(e.data);
var newValue = data['plot0'][1];
var time = data['plot0'][0];
//console.log("====> " + time);
//console.log("====> " + newValue);
zingchart.exec('myChart', 'appendseriesvalues', {
plotindex : 0,
values : [[time,newValue-20]]
});
zingchart.exec('myChart', 'appendseriesvalues', {
plotindex : 1,
values : [[time,newValue+10]]
});
zingchart.exec('myChart', 'appendseriesvalues', {
plotindex : 2,
values : [[time,newValue+150]]
});
zingchart.exec('myChart', 'appendseriesvalues', {
plotindex : 3,
values : [[time,newValue+200]]
});
};
ws.onclose = function(event) {
console.log('Client notified socket has closed',event);
};
</script>
</body>
</html>
The output is as follows;
I hope it will help you.

jQuery DataTable PDF export table cells has no borders

I'm using jQuery DataTable to display a table. This table includes a "PDF Export" button. The export displays a PDF form but this form has no borders around the cells. It's just a text form (versus a table like Excel).
I want something like: for each cell but I can't seem to find a way to do this. Can anyone help?
My javascript code to set up this DataTable looks like the following:
$("table[id$='jQueryDataTable']").dataTable(
{
aLengthMenu: [
[10, 25, 50, 100, 200, -1],
[10, 25, 50, 100, 200, "All"]
],
iDisplayLength: -1,
dom: 'Blrftip',
buttons: [
{
extend: 'pdf',
title: 'Non Desctructive Inspection ' +
' DATE: ' + d,
pageSize: 'A2',
orentation: 'landscape',
exportOptions: { // This is IMPORTANT --- Monty
orthogonal: 'sort'
}//,
//function(){}
}
],
aoColumnDefs: [{
"aTargets": [0, 1, 2, 3, 4, 5, 6],
"defaultContent": "",
"ordering": true
}
});
Thanks in advance.
Steve

Add this to customize function:
var objLayout = {};
objLayout['hLineWidth'] = function(i) { return .8; };
objLayout['vLineWidth'] = function(i) { return .5; };
objLayout['hLineColor'] = function(i) { return '#aaa'; };
objLayout['vLineColor'] = function(i) { return '#aaa'; };
objLayout['paddingLeft'] = function(i) { return 8; };
objLayout['paddingRight'] = function(i) { return 8; };
doc.content[0].layout = objLayout;
Complete datatable implementation is:
$('#datatable').DataTable({
lengthMenu: [
[4, 7, 10, 15, 20, -1],
[4, 7, 10, 15, 20, "Todo"]
],
responsive: true,
paging: true,
pagingType: "full_numbers",
stateSave: true,
processing: true,
dom: 'Blftirp',
buttons: [
{
extend: 'copyHtml5',
text: '<i class="fa fa-files-o"></i>',
titleAttr: 'Copy',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'pdfHtml5',
text: '<i class="fa fa-file-pdf-o"></i>',
titleAttr: 'PDF',
extension: ".pdf",
filename: "name",
title: "",
orientation: 'landscape',
customize: function (doc) {
doc.styles.tableHeader = {
color: 'black',
background: 'grey',
alignment: 'center'
}
doc.styles = {
subheader: {
fontSize: 10,
bold: true,
color: 'black'
},
tableHeader: {
bold: true,
fontSize: 10.5,
color: 'black'
},
lastLine: {
bold: true,
fontSize: 11,
color: 'blue'
},
defaultStyle: {
fontSize: 10,
color: 'black'
}
}
var objLayout = {};
objLayout['hLineWidth'] = function(i) { return .8; };
objLayout['vLineWidth'] = function(i) { return .5; };
objLayout['hLineColor'] = function(i) { return '#aaa'; };
objLayout['vLineColor'] = function(i) { return '#aaa'; };
objLayout['paddingLeft'] = function(i) { return 8; };
objLayout['paddingRight'] = function(i) { return 8; };
doc.content[0].layout = objLayout;
// margin: [left, top, right, bottom]
doc.content.splice(0, 0, {
text: [
{text: 'Texto 0', italics: true, fontSize: 12}
],
margin: [0, 0, 0, 12],
alignment: 'center'
});
doc.content.splice(0, 0, {
table: {
widths: [300, '*', '*'],
body: [
[
{text: 'Texto 1', bold: true, fontSize: 10}
, {text: 'Texto 2', bold: true, fontSize: 10}
, {text: 'Texto 3', bold: true, fontSize: 10}]
]
},
margin: [0, 0, 0, 12],
alignment: 'center'
});
doc.content.splice(0, 0, {
table: {
widths: [300, '*'],
body: [
[
{
text: [
{text: 'Texto 4', fontSize: 10},
{
text: 'Texto 5',
bold: true,
fontSize: 10
}
]
}
, {
text: [
{
text: 'Texto 6',
bold: true, fontSize: 18
},
{
text: 'Texto 7',
fontSize: 10
}
]
}]
]
},
margin: [0, 0, 0, 22],
alignment: 'center'
});
},
exportOptions: {
columns: ':visible'
}
},
{
extend: 'csvHtml5',
text: '<i class="fa fa-file-excel-o"></i>',
titleAttr: 'CSV',
fieldSeparator: ';',
fieldBoundary: '"',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'print',
text: '<i class="fa fa-print"></i>',
exportOptions: {
columns: ':visible',
}
},
{
extend: 'colvis',
postfixButtons: ['colvisRestore'],
collectionLayout: 'fixed four-column'
}
]
});