cordova printer plugin is not printing t - ios

I m trying to print a html file from my cordova app.
I have installed the cordova-plugin-printer.
In app.module.ts file imported the plugin and after that when i try to use this.printer.print('hello')
Noting happens at all
import { Printer, PrintOptions } from '#ionic-native/printer/ngx';
private printer: Printer
Print(){
console.log("Print Pressed");
var options = {
font: {
size: 22,
italic: true,
align: 'center'
},
header: {
height: '6cm',
label: {
text: "\n\nDie Freuden",
font: {
bold: true,
size: 37,
align: 'center'
}
}
},
footer: {
height: '4cm',
label: {
text: 'Johann Wolfgang von Goethe, 1749-1832, deutscher Dichter, Naturforscher',
font: { align: 'center' }
}
}
};
this.printer.print("hello",options);
console.log("Print Pressed>>>");
}

Try:
Print(){
let options: PrintOptions = {
name: 'MyDocument',
printerId: 'printer007',
duplex: true,
landscape: true,
grayscale: true
};
//Checks whether the device is capable of printing
this.printer.isAvailable().then(()=>{
console.log("printer available")
}).catch((error)=>{
console.log("printer not available"+error);
});
}

Related

Highcharts data label on last point of series not displayed

I want to display a data label on the last point of a series in a line chart and added this code:
dataLabels: {
enabled: true,
formatter: function() {
if (this.x == this.series.data[this.series.data.length - 1].x) {
return 'Test';
} else {
return null;
}
}
},
Unfortunately the data label is not dislayed. See fiddle
Your series contains 63 points, but only 23 of them have defined y property and are displayed. You need to filter the visible points and get the last of them, for example by:
dataLabels: {
enabled: true,
formatter: function() {
var visiblePoints = this.series.points.filter(p => typeof p.y === 'number');
if (this.x == visiblePoints[visiblePoints.length - 1].x) {
return 'Test';
} else {
return null;
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/e50jspxu/
You can look this =>
working example
Highcharts.chart('container', {
chart: {
height: 800,
style: {
color: '#2e4964',
},
events: {
load() {
let chart = this;
chart.series.forEach(s => {
s.setState('inactive')
})
}
}
},
title: {
text: 'Corona',
align: 'left',
y: 20,
margin: 0,
style: {
color: '#292929',
fontWeight: '700',
fontWeight: '600',
fontSize: '22px',
fontFamily: 'Fira Sans,sans-serif'
}
},
subtitle: {
text: 'Verlauf der Pandemie in den Ländern',
align: 'left',
useHTML: true,
style: {
fontFamily: 'Poppins',
fontWeight: '400',
color: '#373737',
fontSize: "14px"
}
},
xAxis: [{
type: 'linear',
min: 1,
max: 40,
tickInterval: 5,
tickLength: 5,
labels: {
style: {
fontFamily: 'Poppins',
fontWeight: '400',
color: '#373737',
fontSize: "14px"
}
},
title: {
text: ''
}
}],
yAxis: [{
type: 'logarithmic',
max: 40000,
// minorTickInterval: 1,
min: 100,
title: {
text: null
},
labels: {
style: {
fontFamily: 'Poppins',
fontWeight: '400',
color: '#373737',
fontSize: "14px"
}
}
}],
exporting: {
buttons: {
contextButton: {
enabled: false
}
}
},
legend: {
enabled: true,
reversed: false,
title: {
text: 'Länder an- und abwählen:',
style: {
fontFamily: 'Poppins',
fontWeight: '600',
color: '#373737',
fontSize: "14px"
}
},
layout: 'horizontal',
align: 'left',
verticalAlign: 'top',
width: 300,
maxHeight: 200,
x: -8,
padding: 10,
floating: false,
borderWidth: 0,
shadow: false,
itemMarginTop: 1,
itemStyle: {
fontFamily: 'Poppins',
fontWeight: '400',
color: '#373737',
fontSize: "14px"
}
},
// tooltip: {
// shared: false,
// useHTML: true,
// headerFormat: '<span style="white-space:normal;font-size: 14px;font-weight: 400;min-width: 200px;color: black;font-family:Poppins,sans-serif">Tag {point.x}</span><br>',
// pointFormat: '<span style="color:{point.color};">● </span><span style="white-space:normal;font-size: 14px;font-weight: 400;min-width: 200px;color: black;font-family:Poppins,sans-serif;margin-top: 50px;">{series.name} : </span><span style="white-space:normal;font-size: 14px;font-weight: 800;min-width: 200px;color: black;font-family:Poppins,sans-serif">{point.y:,.0f}<br/></b></span>',
// },
tooltip: {
useHTML: true,
enabled: true,
outside: true,
formatter: function() {
return '<div style="white-space:normal;font-size: 14px;font-weight: 400;min-width: 120px;color: #373737;font-family:Poppins">' + 'Tag ' + this.x + '<br>' + this.series.name + ': <b>' + Highcharts.numberFormat(this.point.y, 0) + '</b>';
}
},
credits: {
href: '',
position: {
align: 'right',
y: -35,
},
text: 'Quellen: JHU CSSE, WHO CDC, NHC, Dingxiangyua',
style: {
cursor: 'arrow',
fontFamily: 'Poppins',
fontWeight: 'normal',
fontSize: "12px"
}
},
plotOptions: {
series: {
dataLabels: {
align: 'right',
enabled: true,
allowOverlap: true,
formatter: function() {
if (this.x == this.series.data[this.series.data.length - 1].x) {
return '<span style="color: #373737;font-weight: normal">' + Highcharts.dateFormat("%e. %B", this.x) + '</span>:<br>' + '<span style="color: #003f6e;font-weight: bold">' + Highcharts.numberFormat(this.y, 0) + '</span>';
} else {
return null;
}
},
style: {
textOutline: 0,
fontFamily: 'Poppins',
fontWeight: '400',
color: '#000',
fontSize: "12px"
}
},
marker: {
symbol: 'circle',
enabled: false
}
}
},
data: {
googleSpreadsheetKey: '13gjvlHhCZKlNcC1DV3nStGeWLBLWx3gxTO3SN9F3GQc',
complete: function(options) {
options.series[0].data.forEach(point => {
if (point[1] === 0) {
point[1] = null;
}
});
}
},
series: [{
color: '#8ebfd7',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: 'rgb(70, 151, 190)',
opacity: 0.5,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#266f9a',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#1c2b54',
opacity: 1,
dataLabels: {
enabled: true,
formatter: function() {
if (this.x == this.series.data[this.series.data.length - 1].x) {
return 'Test';
} else {
return null;
}
}
},
states: {
hover: {
opacity: 1
}
}
},
{
color: '#780081',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#9c00b3',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#b3007b',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#b30012',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#b36d00',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#b39c00',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#a3b300',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#59b300',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#12b36b',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#00b394',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#00a8b3',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#0091b3',
opacity: 0.3,
states: {
hover: {
opacity: 1
}
}
},
{
color: '#373737',
name: 'Verdopplung alle 3 Tage',
clip: false,
dashStyle: 'dot',
showInLegend: false,
states: {
inactive: {
opacity: 1
}
},
}
]
});

Highstock Range Selector Buttons to PDF Export Dropdown

I have been able to convert my range selector buttons in to a dropdown rather than displaying as a list. And seperately, adding the export to PDF/Image dropdown.
What i am now trying to achieve is integrate the range selector dropdown buttons in to the same dropdown as the Export, or vice versa.
Export:
exporting: {
enabled: true,
allowHtml: true,
accessibility: {
enabled: true,
},
buttons: {
contextButtons: {
enabled: true
}
}
}
Range selector:
exporting: {
buttons: {
contextButton: {
enabled: false
},
toggle: {
text: 'Select range',
align: 'left',
height: 20,
y: -3,
theme: {
'stroke-width': 0.5,
stroke: '#000000',
r: 2
},
menuItems: [{
text: '1M',
onclick: function() {
this.rangeSelector.clickButton(0, true);
}
}, {
text: '3M',
onclick: function() {
this.rangeSelector.clickButton(1, true);
}
}, {
text: '6M',
onclick: function() {
this.rangeSelector.clickButton(2, true);
}
}, {
text: 'YTD',
onclick: function() {
this.rangeSelector.clickButton(3, true);
}
}, {
text: '1Y',
onclick: function() {
this.rangeSelector.clickButton(4, true);
}
}, {
text: 'All',
onclick: function() {
this.rangeSelector.clickButton(5, true);
}
}]
}
}
},
Example:
http://jsfiddle.net/8rrotg5a/
Add default items to menuItems array:
exporting: {
buttons: {
contextButton: {
enabled: false
},
toggle: {
...,
menuItems: [..., {
text: 'All',
onclick: function() {
this.rangeSelector.clickButton(5, true);
}
},
'separator',
'viewFullscreen',
'printChart',
'separator',
'downloadPNG',
'downloadJPEG',
'downloadPDF',
'downloadSVG'
]
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/j7s8xgtr/
API Reference: https://api.highcharts.com/highcharts/exporting.buttons.contextButton.menuItems

highstocks responsive styling not working in different devices

I'm trying to give my chart responsive styling in three different devices. i created rules iPad pro (max width 2048), iPad (max width 1024) and mobile (max width 480) but its not rendering properly. for iPad pro its rendering iPads styling and for iPad its showing mobile styling.
responsive: {
rules: [
{
condition: {
maxWidth:2048
},
chartOptions: {
series: [{
dataLabels: {
style: {
fontSize: '25px',
color: 'red'
},
}
},
{
dataLabels: {
style: {
fontSize: '15px',
},
}
}
]
}
},
{
condition: {
maxWidth: 1024
},
chartOptions: {
series: [{
dataLabels: {
style: {
fontSize: '35px',
color: 'green'
},
}
},
{
dataLabels: {
style: {
fontSize: '8px',
},
}
}
]
}
},
{
condition: {
maxWidth: 480
},
chartOptions: {
series: [{
dataLabels: {
style: {
fontSize: '20px',
},
}
},
{
dataLabels: {
style: {
fontSize: '8px',
},
}
}
]
}
}]
} `
Have you noticed that responsive rules like maxWidth and minWidth are applied to a chart width? This is not always equal to screen width.
Highcharts api description of maxWidth:
The responsive rule applies if the chart width is less than this.
So your code is probably working correctly. Check title on several screen widths in this example: https://jsfiddle.net/BlackLabel/3stawvum/.
responsive: {
rules: [{
condition: {
maxWidth: 2048,
minWidth: 931
},
chartOptions: {
title: {
text: '2048 title'
},
}
}, {
condition: {
maxWidth: 930,
minWidth: 401
},
chartOptions: {
title: {
text: '1024 title'
},
}
}, {
condition: {
maxWidth: 400
},
chartOptions: {
title: {
text: '480 title'
},
}
}]
}
API reference:
https://api.highcharts.com/highcharts/responsive.rules.condition.maxWidth

Highcharts not display chart

I am having an issue displaying my chart. I am creating a script that displays three charts with a print button to print all the chart to one PDF.
The JSON call is returning:
[{"name":"Month"},{"name":"percent","data":[9.52]}]
I am not getting any errors in the browser console, can any one see where I am going wrong.
$(function () { //1
var chart1, chart2, chart3;
var categories=[];
//var chart;
var data2 =[];
$(document).ready(function() { //2
$.getJSON("../charts/1-2-4-detractors_month_chart.php?From=<?php echo $_GET['From'];?>&To=<?php echo $_GET['To'];?>", function(json) { //3
$.each(json,function(i,el) { //4
if (el.name=="Month")
categories = el.data;
else data2.push(el);
});
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'column',
marginTop: 25,
marginRight: 25,
marginBottom: 25,
plotBackgroundColor: '#FCFFC5',
style: {
fontFamily: 'serif',
fontSize: '8px',
}
},
title: {
text: '',
},
subtitle: {
text: '',
},
xAxis: {
categories: categories,
labels: {
enabled: false
}
},
yAxis: {
endOnTick: false,
max:101,
showFirstLabel: false,
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickWidth:1,
tickLength:2,
tickInterval: 10,
gridLineColor:'#ddd',
title: {
text: '',
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'bold',
fontSize: '8px'
}
},
plotLines: [{
color: '#808080'
}]
},
legend: {
enabled: false,
},
colors: ['#FF0000','#FF2F2F'],
plotOptions: {
column: {
colorByPoint: true
},
series: {
cursor: 'pointer',
pointWidth: 20,
point: {
events: {
//click: function() {
//location.href = "feedback-items_detractors_iframe.php?FromDate1=<?php echo $StartDate;?>&ToDate1=<?php echo $EndDate;?> target='iframe2'";
//}
}
},
legendIndex:0,
dataLabels: {
enabled: true,
color: '#000000',
align: 'center',
cursor: 'pointer',
borderRadius: 5,
backgroundColor: 'rgba(252, 255, 255, 255)',
borderWidth: 1,
borderColor: '#AAA',
y: -6,
format: '{y:.2f} %', // one decimal
y: -20, // 10 pixels down from the top
style: {
textShadow: false,
fontSize: '8px',
fontFamily: 'Verdana, sans-serif'
}
}
}
},
tooltip: {
style: {
fontSize: '7pt',
fontFamily: 'Verdana, sans-serif'
},
valueDecimals: 1,
formatter: function() {
return '<b>Guest responses:<br/> '+ this.y +'%</b>';
}
},
navigation: {
buttonOptions: {
verticalAlign: 'top',
y: -10,
x: -20
}
},
credits: {
enabled: false
},
series: data2,
lang: {
noData: "No data"
},
noData: {
style: {
fontWeight: 'normal',
fontSize: '12px',
color: '#303030'
}
},
});
});
});
//});
//--------------------------------------------------------------------
$("#print").click(function () {
printCharts([chart1, chart2, chart3]);
});
//--------------------------------------------------------------------
function printCharts(charts) {
var origDisplay = [],
origParent = [],
body = document.body,
childNodes = body.childNodes;
// hide all body content
Highcharts.each(childNodes, function (node, i) {
if (node.nodeType === 1) {
origDisplay[i] = node.style.display;
node.style.display = "none";
}
});
// put the charts back in
$.each(charts, function (i, chart) {
origParent[i] = chart.container.parentNode;
body.appendChild(chart.container);
});
// print
window.print();
// allow the browser to prepare before reverting
setTimeout(function () {
// put the chart back in
$.each(charts, function (i, chart) {
origParent[i].appendChild(chart.container);
});
// restore all body content
Highcharts.each(childNodes, function (node, i) {
if (node.nodeType === 1) {
node.style.display = origDisplay[i];
}
});
}, 500);
}
});

After print chart another chart is not visible in page

I am using two instance of high chart(Highcharts.JS v4.1.6) parallel, but when i tried to print the chart using export functionality, another chart gets invisible when print command gets completed.
Chart configuration:
var chart1, chart2;
var options, options2;
options = {
title: {
text: '',
floating: true,
align: 'left',
width: 610,
style: {
fontSize: '1.4em'
}
},
chart: {
renderTo: 'content1',
type: 'bar',
marginLeft: 210,
marginTop: 80,
spacingBottom: 15,
spacingLeft: 10,
spacingRight: 10
},
credits: {
enabled: false
},
credits: {
text: 'Source: xxxx',
href: '',
position: {
align: 'right',
x: -30,
y: -3
}
},
exporting: {
buttons: {
contextButton: {
align: 'right',
x: 2,
y: 10,
text: 'Download',
verticalAlign: 'top'
}
}
},
xAxis: {
categories: [],
labels: {
step: 1,
enabled: true,
formatter: function() {
var text = this.value,
formatted = text.length > 25 ? text.substring(0, 30) : text;
return '<div class="js-ellipse" style="width:150px; overflow:hidden" title="' + text + '">' + formatted + '</div>';
},
style: {
fontSize: '12px'
}
}
},
yAxis: {
max: 100,
plotLines: [{
color: 'black',
dashStyle: 'Solid',
value: 0,
width: 2
}, {
color: 'black',
width: 2,
value: 50
}
],
title: {
text: ''
},
},
legend: {
itemStyle: {
color: '#000000',
fontWeight: ''
},
layout: 'horizontal',
align: 'center',
x: 1,
verticalAlign: 'top',
y: 35,
floating: true,
backgroundColor: '#FFFFFF',
reversed: true
},
tooltip: {
style: {
padding: 30
},
formatter: function() {
return '' +
'<strong>' + this.x + '</strong><br>' + this.series.name + ': ' + Highcharts.numberFormat(this.y, 1) + "%";
}
},
plotOptions: {
series: {
grouping: true,
pointPadding: 0,
borderWidth: 0,
dataLabels: {
enabled: true,
crop: false,
formatter: function() {
return this.y.toFixed(1);
}
}
}
},
series: [],
}
options2 = {
title: {
text: ''
},
chart: {
renderTo: 'content2',
type: 'bar',
spacingBottom: 15,
spacingLeft: 10,
spacingRight: 10,
marginTop: 80
},
credits: {
text: 'Source: xxx',
href: '',
position: {
align: 'right',
x: -30,
y: -3
}
},
exporting: {
buttons: {
contextButton: {
align: 'right',
x: 2,
y: 10,
text: 'Download',
verticalAlign: 'top'
}
}
},
xAxis: {
categories: [],
labels: {
enabled: false,
step: 1,
overflow: 'justify',
crop: false,
formatter: function() {
var text = this.value,
formatted = text.length > 25 ? text.substring(0, 30) : text;
return '<div class="js-ellipse" style="width:150px; overflow:hidden" title="' + text + '">' + formatted + '</div>';
},
style: {
fontSize: '12px'
}
}
},
yAxis: {
plotLines: [{
color: 'black',
dashStyle: 'Solid',
value: 0,
width: 2
}],
title: {
text: ''
},
},
legend: {
itemStyle: {
color: '#000000',
fontWeight: ''
},
layout: 'horizontal',
align: 'center',
x: 1,
verticalAlign: 'top',
y: 35,
floating: true,
backgroundColor: '#FFFFFF',
reversed: true
},
tooltip: {
style: {
padding: 30
},
formatter: function() {
return '' +
'<strong>' + this.x + '</strong><br>' + this.series.name + ': ' + Highcharts.numberFormat(this.y, 1) + "%";
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
crop: false,
formatter: function() {
return this.y.toFixed(1);
}
}
}
},
series: [],
}
Before Print chart:
After Print when left side chart export print button used:
After Print when right side chart export print button used:
This will happen when print chart is used otherwise it work well.I couldn't figure out the issue.Please help me.
Thanks.
I have refer the below code that resolved my issue.
var beforePrint = function()
{
chart1 = jQuery('#content1').highcharts();
chartWidth1 = chart1.chartWidth;
chartHeight1 = chart1.chartHeight;
chart1.setSize(578,chartHeight1, false);
chart2 = jQuery('#content2').highcharts();
chartWidth2 = chart2.chartWidth;
chartHeight2 = chart2.chartHeight;
chart2.setSize(405,chartHeight2, false);
};
var afterPrint = function() {
chart1.setSize(chartWidth1,chartHeight1, false);
chart1.hasUserSize = null; // This makes chart responsive
chart2.setSize(chartWidth2,chartHeight2, false);
chart2.hasUserSize = null; // This makes chart responsive
};
if (window.matchMedia) {
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function(mql) {
if (mql.matches) {
beforePrint();
} else {
afterPrint();
}
});
}
window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;

Resources