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
}]
});
}
Related
So I've read this post, where someone visualizes 4chan posts in a graph. It looks very cool so I wanted to try it out myself. Everything is working good but I'm having some problems with my visjs options.
I am trying to get as close to the options he used. Sadly he hasn't posted them anywhere.
This is what I've got so far:
var options = {
nodes: {
shape: 'dot',
scaling: {
min: 10,
max: 30,
customScalingFunction: function (min,max,total,value) { return value },
label: {
min: 8,
max: 30,
drawThreshold: 12,
maxVisible: 20
}
},
font: {
size: 12,
face: 'Tahoma'
}
},
edges: {
width: 0.15,
color: {inherit: 'from'},
smooth: {
type: 'continuous'
}
},
physics: {
barnesHut: {
springLength: 1000,
springConstant: 1,
avoidOverlap: 1
}
},
interaction: {
tooltipDelay: 200,
hideEdgesOnDrag: true
}
};
My Problem is, that they still don't seem quite right and I also have trouble with overlapping nodes.
JSFiddle
Sorry for the unclean code.
I am trying to implement a flowchart editor using jsPlumb and this is my first time using it. I have a square element (which is draggable also) and when I try to re-size it, the endpoints do not move (see 1). I use jsPlumb-2.0.7.js here.
When I used jquery.jsPlumb-1.4.1-all-min.js, the endpoints move as the element is re-sized. But, there are some problems in the endpoints of the diamond shape element in the editor (see 2). I implemented this diamond shaped element by rotating the square element by 45 degrees.
Here is how I make the elements re-sizable:
function makeResizable(classname){
$(classname).resizable({
resize : function(event, ui) {
jsPlumb.repaint(ui.helper);
}
});
}
This is my source endpoint:
var connectorPaintStyle = {
lineWidth: 4,
strokeStyle: "#61B7CF",
joinstyle: "round",
outlineColor: "white",
outlineWidth: 2
},
connectorHoverStyle = {
lineWidth: 4,
strokeStyle: "#216477",
outlineWidth: 2,
outlineColor: "white"
},
endpointHoverStyle = {
fillStyle: "#216477",
strokeStyle: "#216477"
},
sourceEndpoint = {
endpoint: "Dot",
paintStyle: {
strokeStyle: "#7AB02C",
fillStyle: "transparent",
radius: 7,
lineWidth: 3
},
isSource: true,
connector: [ "Flowchart", { stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true } ],
connectorStyle: connectorPaintStyle,
hoverPaintStyle: endpointHoverStyle,
connectorHoverStyle: connectorHoverStyle,
maxConnections: -1,
dragOptions: {},
overlays: [
[ "Label", {
location: [0.5, 1.5],
label: "Drag",
cssClass: "endpointSourceLabel",
visible:false
} ]
]
};
This is my target endpoint:
targetEndpoint = {
endpoint: "Dot",
paintStyle: { fillStyle: "#7AB02C", radius: 11 },
hoverPaintStyle: endpointHoverStyle,
maxConnections: -1,
dropOptions: { hoverClass: "hover", activeClass: "active" },
isTarget: true,
overlays: [
[ "Label", { location: [0.5, -0.5], label: "Drop", cssClass: "endpointTargetLabel", visible:false } ]
]
}
I use the jsPlumb.addEndpoint() method to add the endpoints.
I searched for help but could not find a suitable answer. Can anyone provide a solution for this problem?
I am posting this as an answer because it solved my problem! I used the latest version of jsPlumb-2.0.7.js and created an instance of jsPlumb.
var instance = jsPlumb.getInstance({/*Drag options and connection overlays*/});
Then I used this instance to make the elements draggable and resizable.
And also, instead of using instance.repaint(ui.helper) I used instance.revalidate(ui.helper) within the resizable function.
Then it perfectly worked!
I a trying to plot some information using a flot graph but I can not get the values to appear on the graph. This code was part of a demo file included in a template and so i have modified it to plot the data rather than using a randomise for the values, i am getting no errors but the chart isn't working and was hoping somebody could point me in the right direction.
My code is here:
init: function()
{
// apply styling
charts.utility.applyStyle(this);
this.plot = $.plot(
$("#chart_simple"),
[{
label: "Jobs",
data: this.data.d1,
lines: {fillColor: "#dd3333"},
points: {fillColor: "#dd3333"}
},
{
label: "Resumes",
data: this.data.d2,
lines: {fillColor: "#282b30"},
points: {fillColor: "#282b30"}
}], this.options);
}
},
// lines chart with fill & without points
chart_lines_fill_nopoints:
{
// chart data
data:
{
d1: [[1,100], [2,150], [3,100]],
d2: [[1,100], [2,150], [3,100]]
},
// will hold the chart object
plot: null,
// chart options
options:
{
grid: {
show: true,
aboveData: true,
color: "#3f3f3f",
labelMargin: 5,
axisMargin: 0,
borderWidth: 0,
borderColor:null,
minBorderMargin: 5 ,
clickable: true,
hoverable: true,
autoHighlight: true,
mouseActiveRadius: 20,
backgroundColor : { }
},
series: {
grow: {active:false},
lines: {
show: true,
fill: true,
lineWidth: 2,
steps: false
},
points: {show:false}
},
legend: { position: "nw" },
yaxis: { min: 0 },
xaxis: {ticks:11, tickDecimals: 0},
colors: [],
shadowSize:1,
tooltip: true,
tooltipOpts: {
content: "%s : %y.0",
shifts: {
x: -30,
y: -50
},
defaultTheme: false
}
},
So, digging a bit, I see you are using javascript from here. Looking at a working example here, you've broken their code in the following ways:
1.) You no longer seem to have a parent charts object, so
charts.utility.applyStyle(this);
isn't going to work.
2.) The init function is part of the chart_lines_fill_nopoints object, in your cut/paste code it isn't anymore.
3.) In your sample code you never actually call the init function to draw the plot.
4.) In the options backgroundColor : { } is invalid for flot (maybe this is part of the missing charts.utility.applyStyle).
Taking all this into account here's a fiddle which makes this code work.
Generating flot plots with the above code feels unnecessarily convoluted. Perhaps it makes sense when using these templates, but if you just using this as an example of how to call flot it's not very straightforward.
Also, please next time you post a question, include all relevant information (like where you found this code and how you changed it). Taken out of context this code makes little sense.
This code is working
//Defining data for the chart
var data=
{
d1: [[1,100], [2,150], [3,100]],
d2: [[1,100], [2,150], [3,100]]
};
//Defining options for the chart
var options=
{
grid: {
show: true,
aboveData: true,
color: "#3f3f3f",
labelMargin: 5,
axisMargin: 0,
borderWidth: 0,
borderColor:null,
minBorderMargin: 5 ,
clickable: true,
hoverable: true,
autoHighlight: true,
mouseActiveRadius: 20,
backgroundColor : { }
},
series: {
grow: {active:false},
lines: {
show: true,
fill: true,
lineWidth: 2,
steps: false
},
points: {show:false}
},
legend: { position: "nw" },
yaxis: { min: 0 },
xaxis: {ticks:11, tickDecimals: 0},
colors: [],
shadowSize:1,
tooltip: true,
tooltipOpts: {
content: "%s : %y.0",
shifts: {
x: -30,
y: -50
},
defaultTheme: false
}};
// shorthand for document.ready
$(function(){
this.plot = $.plot(
$("#chart_simple"),
[{
label: "Jobs",
data: data.d1,
lines: {fillColor: "#dd3333"},
points: {fillColor: "#dd3333"}
},
{
label: "Resumes",
data: data.d2,
lines: {fillColor: "#282b30"},
points: {fillColor: "#282b30"}
}], this.options);
});
Check out the working example here on jsfiddle.
I am trying to add custom sectors to my JustGage object and when I add them it is just showing the default of:
0-25 = green, 25-50 = yellow, 50-100 = red
I want to have it split like this:
0-25 = red, 25-50 = orange, 50-75 = yellow, 75-100 = green
My code is below. I have defined my customSectors as I want them, but the gage still defaults back to the original 3 sectors. Am I doing something wrong here. I tried to find some documentation on JustGage, but there really isn't any.
var Gage1 = new JustGage({
id: "gage-1",
value: 100,
min: 0,
max: 100,
showInnerShadow: false,
shadowOpacity : 0.3,
customSectors: [{
color : "#CE1B21",
lo : 0,
hi : 25
}, {
color : "#D0532A",
lo : 25,
hi : 50
}, {
color : "#FFC414",
lo : 50,
hi : 75
}, {
color : "#85A137",
lo : 75,
hi : 100
}],
valueFontColor : ['#4A98BE'],
gaugeColor : ['#333'],
title: "Demo Gage",
label: "%"
});
NOTE: I am using justgage.1.0.1.js
If you get the latest version of justgage, you will see that 'customSectors' is in the code where if you download from their site, 'customSectors' doesn't exist.
Use the below link to get the latest and your code should work just fine.
https://raw.github.com/toorshia/justgage/master/justgage.js
I think all you need is levelColors:
var Gage1 = new JustGage({
id: "gage-1",
value: 100,
min: 0,
max: 100,
levelColors: ['#CE1B21', '#D0532A', '#FFC414', '#85A137']
});
I don't think justGage supports you choosing exactly the min and max for each color you want. And you may need to mess around with the option levelColorsGradient try setting it to false first.
Config that worked for me:
config = {
value: 0,
min: 0,
max: 600000,
decimals: 0,
gaugeWidthScale: 0.6,
label: '$',
formatNumber: true,
customSectors: {
percents: true,
ranges: [
{lo: 0, hi: 33, color: '#13ED5A'}, // lo and hi values are in %
{lo: 34, hi: 67, color: '#49D61C'},
{lo: 68, hi: 100, color: '#49AB1C'}
]
}
};
I am trying to create a chart in dojo. The issue is, as soon as I try and add any data to the chart, the chart renders blank (no errors).
Code:
var cPosition
require(["dojox/charting/Chart","dojox/charting/themes/Claro", "dojox/charting/plot2d/Grid", "dojox/charting/axis2d/Default", "dojox/charting/plot2d/MarkersOnly",], function(Chart, theme, Grid, Default, MarkersOnly){
cPosition = new Chart("chartPosition");
cPosition.setTheme(theme);
cPosition.addAxis("x", {
min: -180,
max: 180,
majorTicks: true,
majorTick: {length:180},
minorTick:{length:5},
majorTickStep:180,
minorTickStep:20
});
cPosition.addAxis("y", {
min: -180,
max: 180,
vertical: true,
majorTicks: true,
majorTick: {length:180},
minorTick: {length:5},
majorTickStep:180,
minorTickStep:20
});
cPosition.addPlot("Grid", { type: Grid,
hMajorLines: true,
hMinorLines: true,
vMajorLines: true,
vMinorLines: true,
majorHLine: { color: "black", width: 2 },
majorVLine: { color: "black", width: 2 },
minorHLine: { color: "grey", width: 1 },
minorVLine: { color: "grey", width: 1 },
enableCache: true });
cPosition.addPlot("default", { type: MarkersOnly });
//cPosition.addSeries("series_markers", [{x:10,y:10}]);
cPosition.render();
});
If I uncomment the line:
cPosition.addSeries("series_markers", [{x:10,y:10}]);
The chart turns blank (absolutely nothing on it). If I comment the line, the grid displays correctly but, of course, no data.
What I am trying to accomplish is create an x,y grid that will display a marker that corresponds to the position of an object.