I'm writing an electron.js app where I'm using echart.js to display a heatmap.
Two html input tags are used to let the user set the axis limits for the heatmap.
<span>
<input type="number" id="min_limit" value= 1>
<input type="number" id="max_limit" value= 2>
</span>
In the javascript code I'm simply using the following to get this content:
data_min = document.getElementById('min_limit').value;
data_max = document.getElementById('max_limit').value;
The problem occurs when I try to use these two variables within the echart option:
option = {
...
visualMap: {
min: data_min,
max: data_max,
...
}
}
I get the following error:
"Uncaught DOMException: Failed to execute 'addColorStop' on 'CanvasGradient': The value provided ('undefined') could not be parsed as a color."
The interesting thing is that the program works when I try any of the following (only one of the input values respectively but not both at the same time):
option = {
...
visualMap: {
min: 0,
max: data_max,
... // No errors
}
}
option = {
...
visualMap: {
min: data_min,
max: 1,
... // No errors
}
}
option = {
...
visualMap: {
min: 0,
max: 1,
... // No errors
}
}
And calling*:
myChart.setOption(option);
To display the chart.
Any suggestions? I'm new to html and JavaScript so there may be an obvious error that I'm missing.
*EDIT: Forgot to mention that I'm using "setOption" to change the appearance.
You can't set echarts option directly. Need to use setOption for add data, see documentation.
Update
Your implementation does not work because Echarts not understand what need do with inputs. Getting value you in fact calling the getter (special built-in function) of input component. The Echarts does't know how to call getter, it's expecting just value.
With regard to the implementation I would have the following way.
Define function that read value for inputs.
Define function that update Echart's min/max.
Attach event listener to body element for listen inputs change event.
And then after receive the event call the update Echarts.
var myChart = echarts.init(document.getElementById('main'));
var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
'7a', '8a', '9a','10a','11a',
'12p', '1p', '2p', '3p', '4p', '5p',
'6p', '7p', '8p', '9p', '10p', '11p'];
var days = ['Saturday', 'Friday', 'Thursday',
'Wednesday', 'Tuesday', 'Monday', 'Sunday'];
var data = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[3,12,7],[3,13,14],[3,14,13],[3,15,12],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1],[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],[4,12,2],[4,13,4],[4,14,4],[4,15,14],[4,16,12],[4,17,1],[4,18,8],[4,19,5],[4,20,3],[4,21,7],[4,22,3],[4,23,0],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,0],[5,5,0],[5,6,0],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[5,12,5],[5,13,10],[5,14,5],[5,15,7],[5,16,11],[5,17,6],[5,18,0],[5,19,5],[5,20,3],[5,21,4],[5,22,2],[5,23,0],[6,0,1],[6,1,0],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[6,7,0],[6,8,0],[6,9,0],[6,10,1],[6,11,0],[6,12,2],[6,13,1],[6,14,3],[6,15,4],[6,16,0],[6,17,0],[6,18,0],[6,19,0],[6,20,1],[6,21,2],[6,22,2],[6,23,6]];
data = data.map(function (item) {
return [item[1], item[0], item[2] || '-'];
});
option = {
tooltip: {
position: 'top'
},
animation: false,
grid: {
height: '50%',
top: '10%'
},
xAxis: {
type: 'category',
data: hours,
splitArea: {
show: true
}
},
yAxis: {
type: 'category',
data: days,
splitArea: {
show: true
}
},
visualMap: {
min: 0,
max: 10,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '15%'
},
series: [{
name: 'Punch Card',
type: 'heatmap',
data: data,
label: {
show: true
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
function updateChart(values){
myChart.setOption({ visualMap: values })
};
document.body.addEventListener('change', (event) => {
var targets = document.querySelectorAll('.changeable');
var new_values = [...targets].map(target => {
var key_name = target.id.split('_')[0];
return { [key_name]: target.value };
});
var new_values = Object.assign(new_values[0], new_values[1]);
updateChart(new_values);
});
myChart.setOption(option);
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.7.0/echarts.min.js"></script>
<span>
<input type="number" class="changeable" id="min_limit" value= 1>
<input type="number" class="changeable" id="max_limit" value= 5>
</span>
<div id="main" style="width: 600px;height:400px;"></div>
I want that the tooltip on my slider only shows integers like "130" and not "130.00".
I just dont know where i could start.
Here is my code:
$( document ).ready(function() {
var groesseslider = document.getElementById('slider-tooltip');
noUiSlider.create(groesseslider, {
start: [ 145 ],
step: 1,
range: {
'min': 100,
'max': 250
}
});
});
$( document ).ready(function() {
var groesseslider = document.getElementById('slider-tooltip');
var tipHandles = groesseslider.getElementsByClassName('noUi-handle'),
tooltips = [];
// Add divs to the slider handles.
for ( var i = 0; i < tipHandles.length; i++ ){
tooltips[i] = document.createElement('div');
tipHandles[i].appendChild(tooltips[i]);
}
// When the slider changes, write the value to the tooltips.
groesseslider.noUiSlider.on('update', function( values, handle ){
tooltips[handle].innerHTML = values[handle];
});
});
My JS Code:
http://jsfiddle.net/miiauwz/66a5ahm0/
This can work..
var sliderFormat = document.getElementById('slider-format');
noUiSlider.create(sliderFormat, {
start: [ 20 ],
...
format: {
from: function(value) {
return parseInt(value);
},
to: function(value) {
return parseInt(value);
}
}
});
You can either try using the unencoded value like described in noUISlider's documentation about events and their binding
slider.noUiSlider.on("update", function(values, handle, unencoded ) {
// values: Current slider values;
// handle: Handle that caused the event;
// unencoded: Slider values without formatting;
});
or another possibility would be using the format option on slider creation (but haven't tried it myself yet):
noUiSlider.create(slider, {
start: [ 20000 ],
...
format: wNumb({
decimals: 0, // default is 2
thousand: '.', // thousand delimiter
postfix: ' (US $)', // gets appended after the number
})
});
The drawback is you have to download the wNumb-Library separately from here: http://refreshless.com/wnumb/.
Another way without wNumb
After having another look at the examples from noUISlider, I found this way for manually formatting (at the bottom of the page):
var sliderFormat = document.getElementById('slider-format');
noUiSlider.create(sliderFormat, {
start: [ 20 ],
...
format: {
to: function ( value ) {
return value + ',-';
},
from: function ( value ) {
return value.replace(',-', '');
}
}
});
If you don't think you'll ever need to have decimal places on your site, you can search the jquery.nouislider.min.js file for toFixed(2) and replace with toFixed(0).
I you don't want to use wNumb - library , this method might work.
This will give you value without decimals.
Hope this helps.
value.split('.')[0]
Possible way without using any other library. If we want to show only integers there is no need to use additional libraries. Assuming that in the html code there is the element 'slider-fee'.
<div id="slider-fee"></div>
Let's say that we want to give the possibility to choose a range of hours in a day. Something like 7h-19h or 8h-20h and in the tooltip we want to display the integer only.
dragTapSlider = document.getElementById('slider-fee');
// number of decimal places
decimals = 0;
// format object
numberFormat = {
// 'to' the formatted value. Receives a number.
to: function (value) {
return value.toFixed(decimals);
},
// 'from' the formatted value.
// Receives a string, should return a number.
from: function (value) {
return Number(value);;
}
};
noUiSlider.create(dragTapSlider, {
start: [8, 20],
connect: [false, true, false],
step: 1,
behaviour: 'drag',
tooltips: [true, true],
range: {
'min': 1,
'max': 24
},
format: numberFormat
});
noUiSlider - Integer Format
Example for money range
dragTapSlider = document.getElementById('slider-fee');
decimals = 2;
suffix = '€';
numberFormat = {
// 'to' Format the value to currency.
to: function (value) {
return value.toFixed(decimals) + ' ' + suffix;
},
// 'from' Convert currency value to number.
// Receives a string, should return a number.
from: function (value) {
return Number(value.replace(' ' + suffix));
}
};
noUiSlider.create(dragTapSlider, {
start: [25, 40],
connect: [false, true, false],
step: 0.5,
behaviour: 'drag',
tooltips: [true, true],
range: {
'min': 20,
'max': 50
},
format: numberFormat
});
noUiSlider - Currency Format
Figured I'd provide an answer in case someone else comes looking for this. Simply add the following as an option to the noUiSlider creation:
tooltips: [ wNumb({ decimals: 0 }), wNumb({ decimals: 0 }) ],
The following code will create the slider you need with the noUiSlider tooltip displaying only the integer value with no decimal points:
$( document ).ready(function() {
var groesseslider = document.getElementById('slider-tooltip');
noUiSlider.create(groesseslider, {
start: [ 145 ],
step: 1,
tooltips: [ wNumb({ decimals: 0 }), wNumb({ decimals: 0 }) ],
range: {
'min': 100,
'max': 250
}
});
Just use Math for this instead of the library.
Math.round(value)
var skipSlider = document.getElementById('price');
noUiSlider.create(skipSlider, {
start: [47000, 247000],
connect: true,
behaviour: 'drag',
step: 1,
range: {
'min': [47000],
'max': [247000]
},
});
var skipValues = [
document.getElementById('min-price'),
document.getElementById('max-price')
];
skipSlider.noUiSlider.on('update', function (values, handle, unencoded) {
skipValues[handle].innerHTML = unencoded[handle];
});
React example with no external library:
<Nouislider
range={{ min: 0, max: 5 }}
tooltips={true}
step={1}
start={[0, 5]}
connect
format={{
from: (value) => {
return parseInt(value);
},
to: (value) => {
return parseInt(value);
}
}}
onSlide={onUpdate}
/>