I am creating gauge using this example, but I have to change pointer style.
Is it possible to change pointer style like this?
Chart.Type.extend({
//Passing in a name registers this chart in the Chart namespace
name: "Gauge",
//Providing a defaults will also register the deafults in the chart namespace
defaults : defaultConfig,
initialize: function(data){
//Declare segments as a static property to prevent inheriting across the Chart type prototype
this.segments = [];
var pointerDotRadius = helpers.min([this.chart.width,this.chart.height])/50;
this.outerRadius = (helpers.min([this.chart.width,this.chart.height]) - this.options.segmentStrokeWidth/2)/2;
this.SegmentArc = Chart.Arc.extend({
ctx : this.chart.ctx,
x : this.chart.width/2,
y : this.chart.height - pointerDotRadius
});
All code:
jsbin.com
There's a similar looking meter chart using the RGraph ( https://www.rgraph.net ) software in the download archive:
demos/meter-needle.html
And here's the code:
var meter = new RGraph.Meter({
id: 'cvs',
min: 0,
max: 100,
value: 75,
options: {
linewidthSegments: 20,
strokestyle: 'white',
segmentRadiusStart: 105,
border: 0,
tickmarksSmallNum: 0,
tickmarksBigNum: 0,
needleRadius: 205,
labels: false,
centerpinFill: 'black',
colorsRanges: [
[0, 30, '#FFC900'],
[30, 60, '#8FCE21'],
[60, 100, '#0094DA']
]
}
}).draw();
Related
I'm having hard time adding the dial/needle to the gauge chart from plotly.js.
gauge without needle
: As you could see in the image above it's gauge chart without any needle.
gauge with needle
: I want to build something similar to "gauge with needle", which is giving me hard time.
my code for "gauge without needle/dial" :
`https://codepen.io/vivek137/pen/rNyembX`
You will need to add an arrow annotation on top of your gauge chart. I answered a similar question and in that answer, I described how you can use polar coordinates to find out the ending position x and y for your arrow. Under the hood, the gauge chart you made has an x-range of [0,1] and a y-range of [0,1], so the starting point is ax=0.5 and ax=0 which are both parameters for your annotation. Then the ending position is given by x = 0.5 + r * cos(theta) and y = r * sin(theta) where theta is the angle taken from the right side of the chart and moving counterclockwise.
One thing you should keep in mind is that if the render area in your browser isn't a perfect square, then the r and theta values may need to be adjusted. For example, in my codepen, I used r=0.7, theta=93.5 to point to the 40.
let data = [
{
mode: "gauge",
type: "indicator",
value: 40,
gauge: {
shape: "angular",
bar: {
color: "blue",
line: {
color: "red",
width: 4
},
thickness: 0
},
bgcolor: "#388",
bordercolor: "#a89d32",
borderwidth: 3,
axis: {
range: [0,100],
visible: true,
tickmode: "array",
tickvals: [5, 10, 40, 80, 100],
ticks: "outside"
},
steps: [
{
range: [0, 40],
color: "#9032a8"
}
]
}
}
]
var theta = 93.5
var r = 0.7
var x_head = r * Math.cos(Math.PI/180*theta)
var y_head = r * Math.sin(Math.PI/180*theta)
let layout = {
xaxis: {range: [0, 1], showgrid: false, 'zeroline': false, 'visible': false},
yaxis: {range: [0, 1], showgrid: false, 'zeroline': false, 'visible': false},
showlegend: false,
annotations: [
{
ax: 0.5,
ay: 0,
axref: 'x',
ayref: 'y',
x: 0.5+x_head,
y: y_head,
xref: 'x',
yref: 'y',
showarrow: true,
arrowhead: 9,
}
]
};
Plotly.newPlot('gauge1', data, layout)
When hovering over a line in billboardjs you can see a marker which follows the mouse (a tall vertical line). Is there a function for putting a marker on the x-line which can be used without triggering an automatic marker via onmousemove/hovering over data-points?
var chart = bb.generate({
data: {
columns: [
["data1", 30, 200, 100, 400, 150, 250],
["data2", 50, 20, 10, 40, 15, 25]
],
type: "line", // for ESM specify as: line()
},
bindto: "#lineChart"
});
https://naver.github.io/billboard.js/demo/#Chart.LineChart
So to exemplify. I use an onclick (in the data object) in the chart which defocuses the view and I still want the marker to remain.
So the code would look something like:
var chart = bb.generate({
data: {
columns: [
["data1", 30, 200, 100, 400, 150, 250],
["data2", 50, 20, 10, 40, 15, 25]
],
type: "line", // for ESM specify as: line()
onclick: function (d) {
focusElsewhere()
showMarker(d.x)
}
},
bindto: "#lineChart"
});
So the question is if there is a function for this, or an obvious fix?
I have looked through https://naver.github.io/billboard.js/release/latest/doc/Chart.html but I may of course have missed something.
I found that using xgrids did the trick. I don't think that the documentation gives a good example of how to use it. But basically you can use the "value" field to give which point the line should be on and add a class to show different kinds of lines.
var chart = bb.generate({
data: {
columns: [
["data1", 30, 200, 100, 400, 150, 250],
["data2", 50, 20, 10, 40, 15, 25]
],
type: "line", // for ESM specify as: line()
onclick: function (d) {
focusElsewhere()
this.xgrids.add({ value: d.x, class: "hover-line" }); //showMarker(d.x)
}
},
bindto: "#lineChart"
});
To remove the line or reset the billboard for continued use so to say, you can use
xgrids․remove({}) and add an object with some parameters of what kind of lines you want to remove.
I am novice with billboard.js, tried to do a very simple thing: changing the color of a line.
var chart = bb.generate({
data: {
columns: [
["data1", 30, 20, 50, 40, 60, 50],
["data2", 200, 130, 90, 240, 130, 220]
],
type: "line",
bindto: "#dataColor"
});
chart.data.colors({data1:'orange'});
In this example, I can change the color of data1 in orange, but data1 is not a variable, I want something like this:
var lab1="toto",lab2="titi";
var chart = bb.generate({
data: {
columns: [
[lab1, 30, 20, 50, 40, 60, 50],
[lab2, 200, 130, 90, 240, 130, 220]
],
type: "line",
bindto: "#dataColor"
});
chart.data.colors({lab1:'orange'});
But this doesn't work, I have to hard code the value of lab1: chart.data.colors({toto:'orange'})
Try enclosing the it inside square brackets. This should replace it with the string value of lab1.
chart.data.colors({[lab1]:'orange'});
From MDN
Starting with ECMAScript 2015, the object initializer syntax also supports computed property names. That allows you to put an expression in brackets [], that will be computed and used as the property name.
If you are not using ES2015, You can always do
var d = {};
d[lab1] = 'orange';
chart.data.colors(d);
I am trying to set custom colors in a c3.js timeseries chart following this example. The first element of each array is used to identify the dataset, so if I have an array:
var datatest1 = ['data1', 30, 200, 100, 400, 150, 250];
the color property can be accessed like this:
colors: {data1:'#0000'}
or:
colors: {'data1':'#0000'}
However, if I use the first element of the array to access them:
var data1id = datatest1[0];
and then:
colors: {data1id:'#0000'}
It fails. Not sure what I may doing wrong as I get no feedback in the browser...
Here is a working example:
var axis = ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'];
var datatest2 = ['data2', 130, 340, 200, 500, 250, 350];
var datatest1 = ['data1', 30, 200, 100, 400, 150, 250];
var data1id = datatest1[0];
var data2id = datatest2[0];
var chart = c3.generate({
data: {
x: 'x',
columns: [
axis,
datatest1,
datatest2
],
colors: {
//data1: '#0000',
//data2: '#0000'
datatest1: '#0000',
datatest2: '#0000'
}
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d'
}
}
}
});
----- EDIT
I am doing this because the data (including the identifier) is generated dynamically. Thanks
You can dynamically create the colors object like this.
var colors = {};
colors[datatest1[0]] = '#0000';
colors[datatest2[0]] = '#0000';
then set it in the graph like this
var chart = c3.generate({
data: {
x: 'x',
columns: [
axis,
datatest1,
datatest2
],
colors: colors //set colors object created above
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d'
}
}
}
});
working code here
I want to use a radar chart from chart.js to display several attributes compared to average values.
For example, I might want to display the size, weight and ipd (interpupillary distance) of a specific human compared to the average.
Now, if I simply put in the raw numbers into the chart, that would look pretty weird, because the values of each of the attributes can't be compared with each other and would stretch the radar diagram in a weird way. So what I do instead is take a ratio from every attribute and put it in as data. For example this could mean that I have a size of 1.10 if someone is 10% taller than average, or a weight of 0.95, if someone is 5% lighter than average.
But now when hovering over the data point, the tooltip shows the ratio that I put in as data value, so the tooltip would tell me Size: 1.10. I would like to have the real value in the tooltip instead, like Size: 1.85m.
How can I have a 'tooltip value' that is different from the actual data that is used for drawing the chart? My current code is below.
HTML:
<canvas id="chart-human"></canvas>
JS:
var ctx = document.getElementById('chart-human');
var data = {
labels: ['Size', 'Weight', 'IPD'],
datasets: [
{
label: 'Sam Smith',
data: [1.10, 0.95, 1.23]
},
{
label: 'Average',
data: [1, 1, 1]
}
]
};
var options = {};
var chart = new Chart(ctx, {
type: 'radar',
data: data,
options: options
});
You could accomplish that using tooltip's callbacks function ...
var ctx = document.getElementById('chart-human');
var real_data = [
['1.85m', '100lbs', '120%'],
['1.95m', '90lbs', '150%']
];
var data = {
labels: ['Size', 'Weight', 'IPD'],
datasets: [{
label: 'Sam Smith',
data: [1.10, 0.95, 1.23],
backgroundColor: 'rgba(0,119,204,0.2)',
borderColor: 'rgba(0,119,204, 0.5)',
borderWidth: 1,
pointBackgroundColor: 'rgba(0, 0, 0, 0.4)'
}, {
label: 'John Doe',
data: [1.20, 0.85, 1.43],
backgroundColor: 'rgba(255, 0, 0, 0.15)',
borderColor: 'rgba(255, 0, 0, 0.45)',
borderWidth: 1,
pointBackgroundColor: 'rgba(0, 0, 0, 0.4)'
}, {
label: 'Average',
data: [1, 1, 1],
backgroundColor: 'rgba(0, 255, 0, 0.15)',
borderColor: 'rgba(0, 255, 0, 0.45)',
borderWidth: 1,
pointBackgroundColor: 'rgba(0, 0, 0, 0.4)'
}]
};
var options = {
tooltips: {
callbacks: {
title: function(t, d) {
let title = d.datasets[t[0].datasetIndex].label;
return title;
},
label: function(t, d) {
let title = d.datasets[t.datasetIndex].label;
let label = d.labels[t.index];
let value = (title != 'Average') ? real_data[t.datasetIndex][t.index] : d.datasets[t.datasetIndex].data[t.index];
return label + ': ' + value;
}
}
}
};
var chart = new Chart(ctx, {
type: 'radar',
data: data,
options: options
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="chart-human"></canvas>