Progress bar inside pdfmake - javascript

I'm trying to implement progress bar inside PDF using pdfmake js library.
Gone through working examples mentioned here vectors in pdfmake, but unable to find progress or partial filled canvas example.
I'm looking for workaround which depicts rectangular canvas with filled color based on dynamic value like below.
{
canvas: [
{
type: 'line',
x1: 40, y1: 100,
x2: 260, y2: 100,
lineWidth: 10,
lineCap: 'square',
lineColor: 'green',
// fillPercentage: 20
}
]
}


Found workaround.
solution_1:
stacking 2 lines.
{
canvas: [
{
type: 'line',
x1: 10, y1: 100,
x2: 100, y2: 100,
lineWidth: 15,
lineColor: '#eef2d7',
lineCap: 'round'
},
{
type: 'line',
x1: 10, y1: 100,
x2: 50, y2: 100, // 50 percent completion
lineWidth: 15,
lineColor: 'green',
lineCap: 'round'
}
]
}
solution_2:
stacking 2 rectangular.
{
canvas: [
{
type: 'rect',
x: 0,
y: 0,
w: 100,
h: 30,
opacity: 0.1,
color: 'white',
lineColor: 'black'
},
{
type: 'rect',
x: 0,
y: 0,
w: 70, // 70 percent completion
h: 30,
color: 'green',
lineColor: 'black'
},
]
}

Related

Highcharts - 2 synchronized activity gauges

I am starting from this Highcharts activity gauge and trying to have two of them, aligned horizontally (similar to this other example) and synchronised.
I started modifying the code from the 1st example, based on the 2nd example, and so far I am unsuccessful, the 2nd chart doesn't even display successfully.
What I am doing wrong?
My code, also in JSFiddle:
function renderIcons() {
// Move icon
if (!this.series[0].icon) {
this.series[0].icon = this.renderer.path(['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8])
.attr({
'stroke': '#303030',
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
'stroke-width': 2,
'zIndex': 10
})
.add(this.series[2].group);
}
this.series[0].icon.translate(
this.chartWidth / 2 - 10,
this.plotHeight / 2 - this.series[0].points[0].shapeArgs.innerR -
(this.series[0].points[0].shapeArgs.r - this.series[0].points[0].shapeArgs.innerR) / 2
);
// Exercise icon
if (!this.series[1].icon) {
this.series[1].icon = this.renderer.path(
['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8,
'M', 8, -8, 'L', 16, 0, 8, 8
]
)
.attr({
'stroke': '#ffffff',
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
'stroke-width': 2,
'zIndex': 10
})
.add(this.series[2].group);
}
this.series[1].icon.translate(
this.chartWidth / 2 - 10,
this.plotHeight / 2 - this.series[1].points[0].shapeArgs.innerR -
(this.series[1].points[0].shapeArgs.r - this.series[1].points[0].shapeArgs.innerR) / 2
);
// Stand icon
if (!this.series[2].icon) {
this.series[2].icon = this.renderer.path(['M', 0, 8, 'L', 0, -8, 'M', -8, 0, 'L', 0, -8, 8, 0])
.attr({
'stroke': '#303030',
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
'stroke-width': 2,
'zIndex': 10
})
.add(this.series[2].group);
}
this.series[2].icon.translate(
this.chartWidth / 2 - 10,
this.plotHeight / 2 - this.series[2].points[0].shapeArgs.innerR -
(this.series[2].points[0].shapeArgs.r - this.series[2].points[0].shapeArgs.innerR) / 2
);
}
Highcharts.chart('container', {
chart: {
type: 'solidgauge',
//height: 200,
height: '50%',
events: {
render: renderIcons
}
},
title: {
text: 'Activity',
style: {
fontSize: '24px'
}
},
tooltip: {
borderWidth: 0,
backgroundColor: 'none',
shadow: false,
style: {
fontSize: '16px'
},
pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>',
positioner: function(labelWidth) {
return {
x: (this.chart.chartWidth - labelWidth) / 2,
y: (this.chart.plotHeight / 2) + 15
};
}
},
pane: [{
startAngle: 0,
endAngle: 360,
center: ['25%', '50%'],
background: [{ // Track for Move
outerRadius: '112%',
innerRadius: '88%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0])
.setOpacity(0.3)
.get(),
borderWidth: 0
}, { // Track for Exercise
outerRadius: '87%',
innerRadius: '63%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1])
.setOpacity(0.3)
.get(),
borderWidth: 0
}, { // Track for Stand
outerRadius: '62%',
innerRadius: '38%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2])
.setOpacity(0.3)
.get(),
borderWidth: 0
}]
},
{
startAngle: 0,
endAngle: 360,
center: ['75%', '50%'],
background: [{ // Track for Move
outerRadius: '112%',
innerRadius: '88%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0])
.setOpacity(0.3)
.get(),
borderWidth: 0
}, { // Track for Exercise
outerRadius: '87%',
innerRadius: '63%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1])
.setOpacity(0.3)
.get(),
borderWidth: 0
}, { // Track for Stand
outerRadius: '62%',
innerRadius: '38%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2])
.setOpacity(0.3)
.get(),
borderWidth: 0
}]
}
],
yAxis: [{
min: 0,
max: 100,
lineWidth: 0,
pane: 0,
tickPositions: []
},
{
min: 0,
max: 100,
lineWidth: 0,
pane: 1,
tickPositions: []
}
],
plotOptions: {
solidgauge: {
dataLabels: {
enabled: false
},
linecap: 'round',
stickyTracking: false,
rounded: true
}
},
series: [{
name: 'Move',
data: [{
color: Highcharts.getOptions().colors[0],
radius: '112%',
innerRadius: '88%',
yAxis: 0,
pane: 0,
y: 80
}]
}, {
name: 'Exercise',
data: [{
color: Highcharts.getOptions().colors[1],
radius: '87%',
innerRadius: '63%',
yAxis: 0,
pane: 0,
y: 65
}]
}, {
name: 'Stand',
data: [{
color: Highcharts.getOptions().colors[2],
radius: '62%',
innerRadius: '38%',
yAxis: 0,
pane: 0,
y: 50
}]
},
{
name: 'Move',
data: [{
color: Highcharts.getOptions().colors[0],
radius: '112%',
innerRadius: '88%',
yAxis: 1,
pane: 1,
y: 75
}]
}, {
name: 'Exercise',
data: [{
color: Highcharts.getOptions().colors[1],
radius: '87%',
innerRadius: '63%',
yAxis: 1,
pane: 1,
y: 60
}]
}, {
name: 'Stand',
data: [{
color: Highcharts.getOptions().colors[2],
radius: '62%',
innerRadius: '38%',
yAxis: 1,
pane: 1,
y: 45
}]
}
]
});
<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/solid-gauge.js"></script>
<div id="container" style="width: 800px; height: 300px; margin: 0 auto"></div>

The problem in your example is that you don't have separate charts but one chart with two yAxis. Check Highcharts synchronized charts example here: jsfiddle. Notice, that each chart is separate and inserted into separate div container.
So firstly create two solidgauge type charts and align them horizontally. Then add mousemove trigger on a container div element that contains your charts. Highcharts wrap all browser events and when you hover over charts series you have information about a hovered chart, series etc.
Use hovered series index to invoke onMouseOver() method on proper series in both charts and refresh tooltip with the point from hovered series:
HTML:
<div id="container">
<div id="container1"></div>
<div id="container2"></div>
</div>
JS:
['mousemove', 'touchmove', 'touchstart'].forEach(function(eventType) {
document.getElementById('container').addEventListener(
eventType,
function(e) {
var chart,
point,
i,
seriesIndex,
event;
for (i = 0; i < Highcharts.charts.length; i = i + 1) {
chart = Highcharts.charts[i];
event = chart.pointer.normalize(e);
if (event.srcElement.point) {
seriesIndex = event.srcElement.point.series.index;
}
if (chart.series[seriesIndex]) {
point = chart.series[seriesIndex].points[0];
chart.series[seriesIndex].onMouseOver();
chart.tooltip.refresh(point);
}
}
}
);
});
Notice, Highcharts.charts contains all charts reference.
Demo:
https://jsfiddle.net/wchmiel/ce01y63s/
Api reference:
Highcharts.Series.onMouseOver
Highcharts.charts

Highcharts Angular gauge - How to remove data label stroke?

I have a standard Angular gauge, and I can't figure out how to remove the silver border (stroke) from the data labels.
Using the following code, taken from http://www.highcharts.com/demo/gauge-speedometer
$(function () {
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Speedometer'
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
// the value axis
yAxis: {
min: 0,
max: 200,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'km/h'
},
plotBands: [{
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
var point = chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - 0.5) * 20);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}, 3000);
}
});
});
I understand I can style the text within the data label, for example:
dataLabels: {
format: '<span style="font-size:18px">Consumption: {y} kWh</span>',
x: 0,
y: 50
},
But I can't seem to find a way to remove the stroke. Looking at the source it's written as attributes in the rect-tag.
<rect x="0.5" y="0.5" width="95" height="27" fill="none" stroke="silver" stroke-width="1" rx="3" ry="3"></rect>
Is there a way to remove this stroke using Highcharts? Any help is appreciated!

If you want to remove border from displayed dataLabel, you can use dataLabels.borderWidth parameter from Highcharts API:
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.borderWidth
plotOptions: {
series: {
dataLabels: {
borderWidth: 0
}
}
},
Here you can see an example how it can work:
http://jsfiddle.net/74eqcqso/1/

is it possible to add a legend for bubble size in high charts?

I'm using the latest version of high charts. I successfully created a 3d bubble chart following http://www.highcharts.com/demo/bubble-3d
I am wondering if I can add to the legend a reference to what the size of the bubble means. Just a simple bubble with some text next to it would be enough.
Thanks in advance for your help.

Just add an empty series and name it.Give it desired name ,See Updated fiddle here
{
name :"description",
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)'],
[1, Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.5).get('rgba')]
]
}
}}

Representing bubble size in a legend is not currently a feature of Highcharts.
You can draw one manually:
Add a series for the legend
Draw a rendered box around the legend
JSFiddle
Add a series for the legend
series: [{
// This series gives a legend for reference
data: [{
color: Highcharts.getOptions().colors[0],
x: 86,
y: 25,
z: 10,
dataLabels: {
format: '10%',
y: 40
}
}, {
x: 90,
y: 25,
z: 15,
dataLabels: {
format: '15%',
y: 40
}
}, {
x: 94,
y: 25,
z: 35,
dataLabels: {
format: '35%',
y: 40
}
}]
}, {
color: Highcharts.getOptions().colors[0],
data: [{
x: 95,
y: 95,
z: 13.8,
name: 'BE',
country: 'Belgium'
}, {
Draw a rendered box around the legend
events: {
load: function() {
// Draw the flow chart
var ren = this.renderer,
colors = Highcharts.getOptions().colors;
// Script label
ren.label('Obesity Rate', 410, 220)
.attr({
stroke: '#777',
'stroke-width': 1,
padding: 5,
r: 5,
width: 168,
height: 73
})
.css({
color: '#333',
textAlign: 'center',
fontSize: '1.1em'
})
.add();
}
}

Is there a way to cap Highchart's Gauge at the max

Im looking to have a set min and max (0-200) and to cap the gauge line at the 200. The data could be over 200, but the line on the gauge would still need to cap at 200.
Is there a parameter to do this?
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Speedometer'
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
// the value axis
yAxis: {
min: 0,
max: 200,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'km/h'
},
plotBands: [{
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [555],
tooltip: {
valueSuffix: ' km/h'
}
}]

You can use plotOptions.gauge.wrap: false to prevent wrapping around.
The API description:
wrap: Boolean
When this option is true, the dial will wrap around the axes. For instance, in a full-range gauge going from 0 to 360, a value of 400 will point to 40. When wrap is false, the dial stops at 360. Defaults to true.
Example usage (JSFiddle):
plotOptions: {
gauge: {
wrap: false
}
}

Highcharts Gauge - how to read input from file?

I currently just started on JS and needed highcharts for a project, so far so good, but I do have a very newbie question:
I have some task doing a cron job and outputing a value range: 10-90 to a file. How can I load the value into the gauge?
Here is the code I adapted (ranges, look and feel dont matter), i only could make a static value 53.8 :
$(function () {
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Speedometer'
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
// the value axis
yAxis: {
min: 0,
max: 200,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'km/h'
},
plotBands: [{
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}]
}
);
$('#container').highcharts().series[0].points[0].update(50.8)
});
Here is the jsfiddle link: http://jsfiddle.net/H8uGk/ , can you guys give me a tip how to read the content of a file? (a number in this case)
Is there any way to do it in javascript? It doesn't need to be dynamic , and i was avoiding using php.
Thank you,

The simplest is to just copy/paste it into your js file, which I'm assuming isn't good enough because you want it to be dynamic.
If you need it to be dynamic, you can't do this in javascript, because the javascript runs on the client (ie the web browser), but it needs to read from the server (ie the original machine). So, you have to create an "endpoint" to read the file, check out something simple in php like this:
<?php
// > PHP 5
$file = file_get_contents('./gauge_data.txt', FILE_USE_INCLUDE_PATH);
?>

Categories

Resources