You can change the width of the pointer by setting the cap:size value, but I need to change the length of the pointers so that they are in a tiered fashion representing 5 different points in time. How can this be done?
function createGauge() {
$("#gauge").kendoRadialGauge({
pointer: [{
value: 10,
color: "#c20000",
cap: {
size: 0.19
}
}, {
value: 70,
color: "#ff7a00",
cap: {
size: 0.15
}
}, {
value: 140,
color: "#ffc700",
cap: {
size: 0.11
}
}, {
value: 350,
color: "#ffe700",
cap: {
size: 0.07
}
}, {
value: 313,
color: "#fff700",
cap: {
size: 0.03
}
}],
scale: {
minorUnit: 5,
startAngle: 90,
endAngle: 450,
max: 360
}
});
}
$(document).ready(function() {
createGauge();
$("#example .slider").each(function() {
$(this).kendoSlider({
min: 0,
max: 360,
showButtons: true,
change: function() {
var id = this.element.attr("id");
var pointerIndex = id.substr(id.length - 1);
var gauge = $("#gauge").data("kendoRadialGauge");
gauge.pointers[pointerIndex].value(this.value());
}
});
});
$("#getValues").click(function() {
alert("All values: " + $("#gauge").data("kendoRadialGauge").allValues().join(", "));
});
$("#setValues").click(function() {
var values = $("#newValues").val().split(",");
values = $.map(values, function(val) {
return parseInt(val);
});
$("#gauge").data("kendoRadialGauge").allValues(values);
});
$(document).bind("kendo:skinChange", function(e) {
createGauge();
});
});
#gauge {
width: 33em;
height: 33em;
//margin: 0 auto 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
<div id="gauge-container">
<div id="gauge"></div>
</div>
According to Telerik you can't. At least for the current version.
http://www.telerik.com/forums/change-length-of-radial-gauge-pointer
I used in ANGULARJS below code is used to reduce the length of the pointer.
gauge.options.scale.labels = {
border: { width:13 }
};
I used label position as 'outside'.
Yes, you can change the pointer length now. pointer.length:
The pointer length (in percent) that is based on the distance to the scale. The default length of 1 indicates that the pointer exactly reaches the scale. Accepts values between 0.1 and 1.5.
function createGauge() {
$("#gauge").kendoRadialGauge({
pointer: [{
value: 10,
color: "#c20000",
cap: {
size: 0.19
},
length: 1,
}, {
value: 70,
color: "#ff7a00",
cap: {
size: 0.15
},
length: 0.8,
}, {
value: 140,
color: "#ffc700",
cap: {
size: 0.11
},
length: 0.6,
}, {
value: 350,
color: "#ffe700",
cap: {
size: 0.07
},
length: 0.5,
}, {
value: 313,
color: "#fff700",
cap: {
size: 0.03
},
length: 0.4,
}],
scale: {
minorUnit: 5,
startAngle: 90,
endAngle: 450,
max: 360
}
});
}
$(document).ready(function() {
createGauge();
$("#example .slider").each(function() {
$(this).kendoSlider({
min: 0,
max: 360,
showButtons: true,
change: function() {
var id = this.element.attr("id");
var pointerIndex = id.substr(id.length - 1);
var gauge = $("#gauge").data("kendoRadialGauge");
gauge.pointers[pointerIndex].value(this.value());
}
});
});
$("#getValues").click(function() {
alert("All values: " + $("#gauge").data("kendoRadialGauge").allValues().join(", "));
});
$("#setValues").click(function() {
var values = $("#newValues").val().split(",");
values = $.map(values, function(val) {
return parseInt(val);
});
$("#gauge").data("kendoRadialGauge").allValues(values);
});
$(document).bind("kendo:skinChange", function(e) {
createGauge();
});
});
#gauge {
width: 33em;
height: 33em;
//margin: 0 auto 0;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.511/js/kendo.all.min.js"></script>
<div id="gauge-container">
<div id="gauge"></div>
</div>
Related
I'm trying to make a choropleth map, but how can I set the size of the map?
Now I've this map:
I would like expand the map to all the space, I read the documentations but I didn't find a solution.
This is my code:
var data = [{
type: 'choropleth',
locationmode: 'country names',
locations: unpack(output, 'label'),
z: unpack(output, 'nres'),
text: unpack(output, 'nres')
}];
var layout = {
geo: {
projection: {
type: 'equirectangular'
}
}
};
Plotly.plot(mapChoropleth, data, layout, {
showLink: false
});
Plotly tries to take all the available space without changing the image ratio. If you have a very wide div there will be a lot of empty space to left and right due but it will be filled from the top to the bottom.
You could change height and width in layout, change the margins and fine tune the color bar to get the desired result.
Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2014_world_gdp_with_codes.csv', function(err, rows) {
function unpack(rows, key) {
return rows.map(function(row) {
return row[key];
});
}
var data = [{
type: 'choropleth',
locations: unpack(rows, 'CODE'),
z: unpack(rows, 'GDP (BILLIONS)'),
text: unpack(rows, 'COUNTRY'),
colorscale: [
[0, 'rgb(5, 10, 172)'],
[0.35, 'rgb(40, 60, 190)'],
[0.5, 'rgb(70, 100, 245)'],
[0.6, 'rgb(90, 120, 245)'],
[0.7, 'rgb(106, 137, 247)'],
[1, 'rgb(220, 220, 220)']
],
autocolorscale: false,
reversescale: true,
marker: {
line: {
color: 'rgb(180,180,180)',
width: 0.5
}
},
tick0: 0,
zmin: 0,
dtick: 1000,
colorbar: {
autotic: false,
tickprefix: '$',
len: 0.8,
x: 1,
y: 0.6
}
}];
var layout = {
width: 300,
height: 300,
geo: {
showframe: false,
showcoastlines: false,
scope: 'europe',
projection: {
type: 'mercator',
},
},
margin: {
l: 0,
r: 0,
b: 0,
t: 0,
pad: 2
}
};
Plotly.plot(myDiv, data, layout, {
showLink: false
});
});
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv"></div>
You can also change the ratio of the map directly, an ugly but working possibility.
var c = document.getElementsByClassName('countries')[0];
c.setAttribute('transform', 'translate(-300), scale(3, 1)');
c = document.getElementsByClassName('choropleth')[0];
c.setAttribute('transform', 'translate(-300), scale(3, 1)');
c = document.getElementsByClassName('clips')[0].firstChild.firstChild;
c.setAttribute('x', -300);
c.setAttribute('width', 900);
The map is first drawn normally and then resized when clicked on.
var myPlot = document.getElementById('myDiv');
var data = [];
var layout = {};
Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2014_world_gdp_with_codes.csv', function(err, rows) {
function unpack(rows, key) {
return rows.map(function(row) {
return row[key];
});
}
data = [{
type: 'choropleth',
locations: unpack(rows, 'CODE'),
z: unpack(rows, 'GDP (BILLIONS)'),
text: unpack(rows, 'COUNTRY'),
colorscale: [
[0, 'rgb(5, 10, 172)'],
[0.35, 'rgb(40, 60, 190)'],
[0.5, 'rgb(70, 100, 245)'],
[0.6, 'rgb(90, 120, 245)'],
[0.7, 'rgb(106, 137, 247)'],
[1, 'rgb(220, 220, 220)']
],
autocolorscale: false,
reversescale: true,
marker: {
line: {
color: 'rgb(180,180,180)',
width: 0.5
}
},
tick0: 0,
zmin: 0,
dtick: 1000,
colorbar: {
autotic: false,
tickprefix: '$',
len: 0.8,
x: 1,
y: 0.6
}
}];
layout = {
width: 1200,
height: 400,
geo: {
showframe: false,
showcoastlines: false,
scope: 'europe',
projection: {
type: 'mercator',
scale: 1
},
},
margin: {
l: 0,
r: 0,
b: 0,
t: 0,
pad: 2
}
};
Plotly.plot(myPlot, data, layout, {
showLink: false
});
myPlot.on('plotly_click', function(){
var c = document.getElementsByClassName('countries')[0];
c.setAttribute('transform', 'translate(-300), scale(3, 1)');
c = document.getElementsByClassName('choropleth')[0];
c.setAttribute('transform', 'translate(-300), scale(3, 1)');
c = document.getElementsByClassName('clips')[0].firstChild.firstChild;
c.setAttribute('x', -300);
c.setAttribute('width', 900);
})
});
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv" style="x: 0"></div>
i have the next problem with Highcharts. This is a new Highchart for an other site.
See here: https://imgur.com/a/VQQLU
The arrow show to -3 Megawatts but the value at the bottom shows another value. At the first pageload the values are identical, but there comes all 5 seconds new values. And they are not updated at the bottom.
Edit: The tolltip will be updated correctly.
My code:
$(function () {
$.getJSON('jsonlive.php', function(chartData) {
var ADatum; var Eheit; var AktL; var MinL; var MaxL; var chartValue; var i;
ADatum = chartData[0].AktDatum;
Eheit = chartData[0].Einheit;
AktL = chartData[0].AktuelleLeistung;
MinL = chartData[0].MinLeistung;
MaxL = chartData[0].MaxLeistung;
var tMin = (MinL*-1); var tMax = MaxL;
var ttt = new Array();
if (tMin < tMax) { chartValue = tMax; } else if (tMin > tMax) { chartValue = tMin; } // Ermitteln ob neg/pos Zahl die größere ist.
ttt[0] = (chartValue*-1); // Skala mit Zahlen beschriften
for (i = 1; i < chartValue; i++) { ttt[i] = (i*-1); }
var tz = ttt.length ;
for (i = 0; i < chartValue; i++) { ttt[(tz+i)] = i; }
ttt[ttt.length] = chartValue;
var gaugeOptions = {
chart:{ events: {
load: function () { setInterval(function () {
$.getJSON('jsonlive.php', function(chartData) {
ADatum = chartData[0].AktDatum;
AktL = chartData[0].AktuelleLeistung;
var point = $('#inhalt').highcharts().series[0].setData([AktL], true);
});}, 5000);}
}, type: 'gauge' },
title: null,
pane: {
center: ['50%', '85%'], size: '140%', startAngle: -90, endAngle: 90,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [[0, '#00fb00'],[1, '#003f00']]},
borderWidth: 2,
outerRadius: '109%',
innerRadius: '102%', shape: 'arc' }]
},
series: [{
data: [AktL],
dataLabels: { borderWidth: 0,align: 'center',x: 0,y: 110,
format: '<div style="text-align:center;font-size:24px;color:black">'+AktL+' ' +Eheit+'</span></div>'
}
}],
tooltip: {
formatter: function () { return 'Datum: <b>' + (new Date(ADatum).toLocaleString("de-DE", { timeZone: 'UTC' })) +
'</b> <br>Leistung <b>' + AktL + ' ' + Eheit + '</b>';}, enabled: true },
yAxis: {lineWidth: 10, minorTickInterval: null, tickPixelInterval: 100, tickWidth: 5, title: { y: -250 }, labels: { y: 2 }}
};
// Anzeige
$('#inhalt').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: (chartValue*-1),max: chartValue,tickPositions: ttt,tickColor: '#666',minorTickColor: '#666',
plotBands: [{ // optionaler Bereich, zeigt von 0-1 grün, 1 bis hälfte maximum gelb, und hälfte max bis max rot
from: 0, to: -1, color: '#55BF3B' }, { // green
from: -1, to: ((chartValue*-1)/2), color: '#DDDF0D' }, { // yellow
from: ((chartValue*-1)/2),to: (chartValue*-1),color: '#DF5353' }, { // red
from: 0,to: 1,color: '#55BF3B' }, { // green
from: 1,to: (chartValue/2),color: '#DDDF0D' }, { // yellow
from: (chartValue/2),to: chartValue,color: '#DF5353' }],// red
title: { style: { color: 'black', fontWeight: 'bold', fontSize: '24px' }, text: 'Leistung in '+Eheit },
labels: { formatter: function () { return this.value; }}},
credits: { enabled: false } // Link auf highcharts rechts unten an/aus
}));
});
});
</script>
The problem here is that you use a hard-coded value (AktL) in your dataLabels.format. In your example format is just a string that's used all the time.
Use {point.y} to have the label updated on every setData():
series: [{
data: [val],
dataLabels: {
// format: val // WONT WORK
format: '{point.y}'
}
}],
Live demo: http://jsfiddle.net/BlackLabel/v28q5n09/
I have implemented an algorithm for dividing overlapping existing ranges into a list of date / number ranges.
The algorithm is working but I was wondering if you can avoid the last loop of the algorithm.
It's possible?
Input Data
0-100(red)
90-150(green)
90-150(blue)
140-300(yellow)
170-240(black)
350-530(orange)
50-500(silver)
50-60(pink)
Output Data
0-49(red)
50-60(red,silver,pink)
61-89(red,silver)
90-100(red,green,blue,silver)
101-139(green,blue,silver)
140-150(green,blue,yellow,silver)
151-169(yellow,silver)
170-240(yellow,black,silver)
241-300(yellow,silver)
301-349(silver)
350-500(orange,silver)
501-530(orange)
Javascript Code:
function splitRanges(original_intervals) {
for (var to = [], from = [], n, i = original_intervals.length; i--;) {
if (to.indexOf(n = original_intervals[i].to) < 0)
to.push(n);
if (from.indexOf(n = original_intervals[i].from) < 0)
from.push(n);
}
to.sort(function(a, b) {
return a - b;
});
from.sort(function(a, b) {
return a - b;
});
var intervals = [];
while (to.length) {
var sFrom = from.shift();
var sTo = 0;
if (from.length == 0) {
sTo = (from.push((n = to.shift()) + 1), n);
} else {
if (from[0] > to[0]) {
while (to[0] < from[0]) {
from.unshift(to[0] + 1);
to.shift();
}
sTo = from[0] - 1;
} else {
sTo = from[0] - 1;
}
}
intervals.push({
from: sFrom,
to: sTo,
colors: []
});
}
/***********************Loop that i want remove*/
intervals.forEach(function(item, index) {
original_intervals.forEach(function(item1, index1) {
if ((item.from >= item1.from && item.from <= item1.to) || (item.to >= item1.from && item.to <= item1.to))
item.colors.push(item1.color);
});
});
return intervals;
}
var r1 = [{
id: 1,
from: 0,
to: 100,
color:'red'
}, {
id: 2,
from: 90,
to: 150,
color:'green'
}, {
id: 3,
from: 90,
to: 150,
color:'blue'
}, {
id: 4,
from: 140,
to: 300,
color:'yellow'
}, {
id: 5,
from: 170,
to: 240,
color:'black'
}, {
id: 6,
from: 350,
to: 530,
color:'orange'
}, {
id: 7,
from: 50,
to: 500,
color:'silver'
}
, {
id: 8,
from: 50,
to: 60,
color:'pink'
}
];
console.log(splitRanges(r1));
You need some iterations, at least the one with getting all range points, and then generate an array out of it and take the subset of colors for each small interval.
var data = [{ from: 0, to: 100, color: 'red' }, { from: 90, to: 150, color: 'green' }, { from: 90, to: 150, color: 'blue' }, { from: 140, to: 300, color: 'yellow' }, { from: 170, to: 240, color: 'black' }, { from: 350, to: 530, color: 'orange' }, { from: 50, to: 500, color: 'silver' }, { from: 50, to: 60, color: 'pink' }],
ranges = new Set,
parts,
result;
data.forEach(({ from, to }) => (ranges.add(from), ranges.add(to)));
parts = [...ranges].sort((a, b) => a - b);
result = parts.slice(1).map(function (a, i, aa) {
var from = i ? aa[i - 1] : parts[0],
to = a,
colors = data.filter(d => d.from <= from && to <= d.to).map(({ color }) => color);
return { from, to, colors };
});
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
I'm using ChartsJS to create a gauge. I like their styles so I thought it wouldn't be too hard to implement compared to Highcharts or others.
I put the code (which comes in from a jQuery AJAX load - might be a factor) and it ONLY works if I right click and open Inspect Element, or if it is already open, I have to close it. Otherwise it's just empty white space ... no console errors..
Code:
var scaleSettings = {
startValue: -50,
endValue: 50,
majorTick: {
color: 'black',
tickInterval: 10
},
minorTick: {
visible: true,
color: 'black',
tickInterval: 1
}
};
$("#gaugeGraph").dxCircularGauge({
value:200,
valueIndicator: {
type: 'rangebar',
color: '#483D8B'
},
geometry: {
startAngle: 180, endAngle: 0
},
scale: {
startValue: 0, endValue: 100,
majorTick: {
tickInterval: 25,
tickInterval: 50,
tickInterval: 75,
tickInterval: 100
},
label: {
customizeText: function (arg) {
return arg.valueText + ' %';
}
}
}
});
Load Code:
$(document).ready(function() {
loadURL("dataGraph.php?id=<?php echo $id;?>", $('#section > .graph'));
loadURL("dataGauge.php?id=<?php echo $id;?>", $('#section > .gauge')); //GAUGE
$(window).trigger('resize');
loadURL("dataRecords.php?id=<?php echo $id;?>", $('#section > .dataTable'));
});
#k0pernikus helped to discover the resize issue.
I used this code to make it happen:
$( document ).ready(function() {
var scaleSettings = {
startValue: -50,
endValue: 50,
majorTick: {
color: 'black',
tickInterval: 10
},
minorTick: {
visible: true,
color: 'black',
tickInterval: 1
}
};
$(window).resize(function()
{
$("#gaugeGraph").dxCircularGauge({
value:200,
valueIndicator: {
type: 'rangebar',
color: '#483D8B'
},
geometry: {
startAngle: 180, endAngle: 0
},
scale: {
startValue: 0, endValue: 100,
majorTick: {
tickInterval: 25,
tickInterval: 50,
tickInterval: 75,
tickInterval: 100
},
label: {
customizeText: function (arg) {
return arg.valueText + ' %';
}
}
}
});
}).resize();
});
I am charting different data with RickshawJS. But I need a way to update the chart when a user clicks the #search button. Right now it just creates a new chart below the old one, and that is pretty messy.
The user enters the page and enters some details and clicks the button to chart it. So ideally I'd like to start with an empty chart that isn't shown, but I can't really figure out how to remove the data from the chart and axes and then update it.
I could call $('#chart svg').remove(); on the chart and axes but it seems messy.
$('#search').click(function(event){
event.preventDefault();
var data = utils.malletData();
var graph = new Rickshaw.Graph( {
element: document.querySelector("#chart"),
width: 800,
height: 250,
series: [ {
name: data['name'],
color: 'steelblue',
data: data['series']
} ]
} );
graph.render();
var hoverDetail = new Rickshaw.Graph.HoverDetail( {
graph: graph,
xFormatter: function(x) {
var date = new Date(x).getTime();
return moment(x).format('MMMM Do YYYY, h:mm:ss a');
},
yFormatter: function(y) { return Math.floor(y) + " users" }
} );
var xAxis = new Rickshaw.Graph.Axis.X( {
graph: graph,
orientation: 'bottom',
element: document.getElementById('x_axis'),
tickFormat: function(x) { return moment(x).fromNow(); },
ticks: 7,
tickSize: 1,
} );
xAxis.render();
var ticksTreatment = 'glow';
var yAxis = new Rickshaw.Graph.Axis.Y( {
graph: graph,
orientation: 'left',
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
ticksTreatment: ticksTreatment,
element: document.getElementById('y_axis'),
} );
yAxis.render();
});
There's no official way to do so. However, you could leverage the fact that arrays in javascript are passed by reference and then update the graph.
Have a look at this demo on fiddle
var data = [
{
data: [ { x: 0, y: 120 }, { x: 1, y: 890 }, { x: 2, y: 38 }, { x: 3, y: 70 }, { x: 4, y: 32 } ],
color: "#c05020"
}, {
data: [ { x: 0, y: 80 }, { x: 1, y: 200 }, { x: 2, y: 100 }, { x: 3, y: 520 }, { x: 4, y: 133 } ],
color: "#30c020"
}
];
var graph = new Rickshaw.Graph( {
element: document.getElementById("chart"),
renderer: 'line',
height: 300,
width: 800,
series: data
} );
var y_ticks = new Rickshaw.Graph.Axis.Y( {
graph: graph,
orientation: 'left',
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
element: document.getElementById('y_axis'),
} );
graph.render();
$('button#add').click(function() {
data.push({
data: [ { x: 0, y: 200 }, { x: 1, y: 390 }, { x: 2, y: 1000 }, { x: 3, y: 200 }, { x: 4, y: 230 } ],
color: "#6060c0"
});
graph.update();
});