I want to create some gauges, but my Gauge object remains undefined.
var doesntwork;
function create_gauge(name, id, min, max, title, label) {
name = new JustGage({
id: id,
value: 0,
min: min,
max: max,
donut: false,
gaugeWidthScale: 0.3,
counter: true,
hideInnerShadow: true,
title: title,
label: label,
decimals: 2
});
}
create_gauge(doesntwork, "g2", 0, 100, "Füllstand", "%");
console.log(doesntwork); //undefined
why? can't i pass variables to a function?
No, you only pass values, not variable references or pointers.
For that simple example, returning would seem more appropriate.
var works;
function create_gauge(id, min, max, title, label) {
return new JustGage({
id: id,
value: 0,
min: min,
max: max,
donut: false,
gaugeWidthScale: 0.3,
counter: true,
hideInnerShadow: true,
title: title,
label: label,
decimals: 2
});
}
works = create_gauge("g2", 0, 100, "Füllstand", "%");
console.log(works);
However, I'm sure this is probably overly simplified. There are "reference types" in JS, so if works held an object, you could pass the value of the object reference and have the function populate a property of the object.
var works = {};
function create_gauge(obj, id, min, max, title, label) {
obj.data = new JustGage({
id: id,
value: 0,
min: min,
max: max,
donut: false,
gaugeWidthScale: 0.3,
counter: true,
hideInnerShadow: true,
title: title,
label: label,
decimals: 2
});
}
create_gauge(works, "g2", 0, 100, "Füllstand", "%");
console.log(works.data);
Related
I recently started working with xslt to generate html from a given xml document. I am trying to display history values using plotly, which is already working well.
Nevertheless, I am currently facing a problem: The x-axis with the date values should be displayed in German. I have already tried to set locale to 'de_DE', but unfortunately this does not work. Does anyone have any idea of how it might work?
var myPlot = node.children[0];
trace1 = {
x: values.map(a => a.xvalue),
y: values.map(a => a.yvalue),
type:'scatter',
name:'Messung',
locale:'de_DE',
hovertemplate: '<b>Wert:</b> %{y}<br><b>Datum:</b> %{x}<br>'
};
data = [ trace1 ];
layout = {
title: 'Verlaufswert: ' + vitSigTitle,
hovermode:'closest',
xaxis: {
autorange: true,
range: [beginDate, endDate],
rangeselector: {
buttons: [
{
count: 1,
label: 'Monat',
step: 'month',
stepmode: 'backward'
},
{
count: 6,
label: '6 Monate',
step: 'month',
stepmode: 'backward'
},
{
count: 1,
label: 'Jahr',
step: 'year',
stepmode: 'backward'
},
{
count: 1,
label: 'Day',
step: 'day',
stepmode: 'backward'
},
{ step: 'all' },
]
},
rangeslider: {range: [beginDate, endDate]},
type: 'date'
},
yaxis: {
title: vitSigUnit,
autorange: false,
range: [minValue-10, maxValue+10],
type: 'linear',
locale:'de_DE'
}
};
Plotly.newPlot(node.children[0], data, layout, {locale: 'de-DE'});
console.log(Plotly.BUILD);
Just setting the locale is not enough, you also have to include the corresponding js file, see https://github.com/plotly/plotly.js/blob/master/dist/README.md#to-include-localization
I am struggling to insert a comma into my JustGauge Chart.
So far I have the following code. most of it is working as expected;
window.onload = function() {
var g1 = new JustGage({
id: "g1",
value: 24692,
min: 0,
max: 30009,
title: 'Document Countdown',
titlePosition: 'above',
width: 800,
height: 800,
pointer: true,
textRenderer: function(val) {
return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
},
gaugeWidthScale: 1.2,
noGradient: true,
customSectors: [{
color: '#32CD32',
lo: 0,
hi: 30009
}]
});
}
Fiddle https://jsfiddle.net/johnny_s/xsgpp4ng/1/
The 'textRenderer' part of the above code adds a comma to the 'value', I'm not sure how to do the same with 'max'.
I need to add a comma to the 'max' value - so it's '30,009'. When I try to add it manually the chart won't load.
Any help is appreciated.
This has been a feature request posted as request 193 and has been implemented as an extra property maxTxt in the update of February 3, 2016 and is part of release 1.2.7. Current version is 1.2.9.
Note that several features changed in version 1.2.9 compared to the version you used (1.2.2):
the structure of the customSectors: it is no longer an array. The array part is now moved into a subproperty ranges
Support for title has been removed, as this really does not belong to the "core business" of the widget; one can better control the position and style of such a title in the surrounding HTML/CSS.
There is a bug related to the noGradient setting: issue 270. The suggested fix has not been included in the latest release. Instead of tampering with the library yourself, I would suggest working around that issue by adding a customSectors.length property with a positive value.
I have included these changes also in the updated fiddle which uses version 1.2.9:
var g1 = new JustGage({
id: "g1",
value: 24692,
min: 0,
max: 30009,
maxTxt: "30,009", // <------ add this
// remove title attributes -- no longer supported
//title: 'Document Countdown',
//titlePosition: 'above',
width: 800,
height: 400, // <--- reduced to allow title to be closer to gauge
pointer: true,
textRenderer: function(val) {
return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
},
gaugeWidthScale: 1.2,
pointerOptions: {
toplength: -15,
bottomlength: 10,
bottomwidth: 12,
color: '#8e8e93',
stroke: '#ffffff',
stroke_width: 3,
stroke_linecap: 'round'
},
noGradient: true,
customSectors: { // <--- no longer an array...
ranges: [{ // <--- ... which has moved to this property
color: '#32CD32',
lo : 0,
hi : 30009
}],
length: 1 // fixes a bug
}
});
The HTML should contain the title. Something like this:
<div style="display: inline-block">
<h2 style="text-align:center;">Document Countdown</h2>
<div id="g1"></div>
</div>
Another way of doing it is add formatNumber: true when you initialize. It will format min max and value. You can also get rid of the textRenderer field.
I updated your fiddle
window.onload = function(){
var g1 = new JustGage({
id: "g1",
value: 24692, /* <-- just change this to your current value */
min: 0,
max: 30009, /* start amount */
title: 'Document Countdown',
titlePosition: 'above',
width: 800,
height: 800,
pointer: true,
formatNumber: true,
gaugeWidthScale: 1.2,
pointerOptions: {
toplength: -15,
bottomlength: 10,
bottomwidth: 12,
color: '#8e8e93',
stroke: '#ffffff',
stroke_width: 3,
stroke_linecap: 'round'
},
noGradient: true,
customSectors: [{
color: '#32CD32',
lo: 0,
hi: 30009
}]
});
}
I would like to display on the y-axis of the data through the categories property. I pass an array as I saw in some examples
initLapChart() {
hcharts.chart(this.div.nativeElement, {
chart: {
...
},
yAxis: {
categories: ["0:20", "0:30", "0:40", "1:00", "1:15"],
reversed: true,
tickPixelInterval: 50,
gridLineWidth: 1,
...
},
...
}
but it only shows me the first two values, why?
If you want to show all of your categories, whether you have data for them or not, you just need to set your axis min and max values:
yAxis: {
min: 0,
max: 4,
reversed: true,
tickInterval: 1,
categories: ['0:20', '0:30', '0:40', '1:00', '1:15'],
labels: {
step: 1
}
},
Updated fiddle:
http://jsfiddle.net/jlbriggs/y3ut4jdv/1/
Or you can do it programmatically if you define your categories up front:
var categories = ['0:20', '0:30', '0:40', '1:00', '1:15'],
yMax = categories.length -1;
Fiddle:
http://jsfiddle.net/jlbriggs/y3ut4jdv/2/
The elements in categories array are indexed from 0 to categories.length - 1, so the first element from the array represents value 0 on yAxis, the second, value 1, etc. If you want to display them all, you need to set tickInterval and labels.step properties with value 1.
API Reference:
http://api.highcharts.com/highcharts/yAxis.tickInterval
http://api.highcharts.com/highcharts/yAxis.labels.step
Example:
http://jsfiddle.net/6qp0v887/
i have a script for showing span sparkline
like this
function refresh_network() {
var net = window.net = $('.dynamicbar').data('sparkline');
$.getJSON('<?echo site_url('home / netinfo')?>', function (data)
{
var myvalues = [data.value, data.value, data.value, data.value, data.value, data.value, data.value];
$('.dynamicbar').sparkline(myvalues, {
type: 'line',
barColor: 'green',
width: '100px',
height: '50px',
fillColor: false,
tooltipPrefix: 'RX ',
chartRangeMin: 10000,
chartRangeMax: 100000
});
var myvalues = [data.value2, data.value2, data.value2, data.value2, data.value2, data.value2, data.value2];
$('.dynamicbar').sparkline(myvalues, {
type: 'line',
lineColor: 'red',
width: '100px',
height: '50px',
composite: true,
fillColor: false,
tooltipPrefix: 'TX ',
chartRangeMin: 10000,
chartRangeMax: 100000
});
});
};
function auto_net() {
refresh_network();
};
setInterval(auto_net, 500);
i have grep network (RX/TX). It change every 0.5 s, but i still confuse to show moving graph like this
jsfiddle
But, in jsfiddle example. It's using ext.js(sencha), and the changing graph algorithm is using math random.
sparkline take parameter array like this [value1, value2, value3,..., valuex], example if i take 3 array then algorithm [value(now-2), value(now-1), value(now)]. But how to apply this?
In dijit/form/HorizontalSlider on change I am getting values in a textbox. The values are decimal, like 51.66777777. I want only 51.
<div id="horizontalSlider"></div>
<input type="text" id="sliderValue" data-dojo-type="dijit.form.TextBox" style="width:190px;" onkeyup="getSliderTxtBoxValue();">
var slider = new HorizontalSlider({
name: "horizontalSlider",
value: 1,
minimum: 1,
maximum: 500,
discreteValues: 10,
intermediateChanges: true,
style: "width:200px;",
onChange: function(value){
dom.byId("sliderValue").value = value;
}
}, "horizontalSlider");
See Also:
http://dojotoolkit.org/reference-guide/1.8/dijit/form/HorizontalSlider.html
Have you ever seen Spinal Tap? This one goes to 11!
Here is the code that will work:
value: 0,
minimum: 0,
maximum: 500,
discreteValues: 11,
You want 11 because you want 11 discrete values:
0,50,100,150,200,250,300,350,400,450,500
I created a fiddle for this problem.