I'm using the Chart.js 2.0
The formula : Failure Rate: Failure Count / Total Count.
I've got the an array for failure rate, failure count and total count.
Plotting failure rate of a component against time in a line chart is straight forward but now i also want the failure count and total count to be displayed when the user hovers over the tool tip. I'm not able to figure out how to customize it.
we have e.time, e.count, e.failure_count, e.rate
new Chart(document.getElementById(event_id).getContext("2d"), {type: "line", data:
{
labels: e.time,
datasets: [
{
label: "Failure Rate",
fill: false,
borderColor: "#4caf50",
backgroundColor: "#4caf50",
pointBorderWidth: 1,
pointHoverRadius: 3,
data: e.rate
}
]
}, options: {
scales: {
yAxes: [{
ticks: {
suggestedMin: -1,
suggestedMax: 6
}
}]
},
tooltips: {
custom: function(tooltip) {
tooltip.text= "Not working????"
}
}
}
});
In 2.0, the callback needs a return.
So basically what you want to do is :
custom: function(tooltip) {
tooltip.text= "Not working????"
}
By
callbacks: {
label: function(tooltipItem, data) { return "What you want as a tooltip" }
}
Related
I'm trying to add a string (Week) next to the week number in xAxes in Chartjs 3. But it shows a random number instead of the string.
Here is the part of my code in the options:
scales: {
x: {
type: 'time',
time: {
unit: 'week',
displayFormats: {
week: "'Week' W",
},
tooltipFormat: 'YYYY-W',
},
ticks: {
source: 'data',
},
offset: true,
},
.........
Current output:
'51124' 10
Expected output:
Week 10
any help would be appreciated.
Thanks
"'Week' W" is a formating string, depending on which adapter you are using 'Week' will be translated to a specific value.
You could check if your adapter support custom strings in the format-string,...
Or you try to modify the label with a callback, like shown here in the documentation: https://www.chartjs.org/docs/latest/axes/labelling.html
Here the relevat code, adapted to fit your code snippet:
...
scales: {
x: {
type: 'time',
time: {
unit: 'week',
displayFormats: {
week: 'W',
}
},
ticks: {
// This prepends the "Week" before the label
callback: function(value, index, ticks) {
return '"Week" ' + value;
}
}
}
}
...
I wan't to set all bars the same width, because if I have few bars they get super big, and If I have a lot bars they get very thin.
Here is what I mean:
I have bar width 50 because I tought this was the size of the bar, but it keeps making bars small if the amount increases.
Here is my code:
$(document).ready(function () {
var chart = c3.generate({
bindto: '#stocked',
size: {
height: 320,
width: 1500
},
data: {
labels: ['y',1,2,3,4,5,6],
columns: [
['MUSCLE', <?php echo substr($muscle,1,strlen($muscle)); ?>],
['FAT', <?php echo substr($fat,1,strlen($fat)); ?>]
],
groups: [
['MUSCLE', 'FAT']
],
type: 'bar',
colors: {
MUSCLE: '#75e3ff',
FAT: '#23bbe8'
}
},
bar: {
// width: { ratio: 0.8 }
width: 50,
},
axis: {
x: {
type: 'categories',
show: true,
label: {
text: 'Measurements',
position: 'outer-middle'
},
tick: {
format: "%b",
fit: true,
},
},
y: {
label: {
text: '<?php echo $_SESSION["unit"]; ?>',
position: 'outer-middle'
}
},
},
// subchart: {
// show: true
// },
// zoom: {
// enabled: true
// }
});
});
Thanks and greetings!
The width of your bars is the result of the width of your chart and the amount of data you have populating it. My recommendation would be to size your chart or the container holding your chart accordingly. This will prevent having large white spaces in between each of your bars and result in a more uniform look between your charts.
ex: pseudo code of how to determine how wide you chart should be.
var chart = c3.generate({
size: {
height: 240,
width: function () {
return 6 * 20 + 15
},
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
]
}
});
Here you can see that there of 6 pieces of data and each data is given 20 space and then an extra 15 to account for the axis/labels etc. If each you had 50 data then it should be width: 6 * 20 + 15 ..... of course now you have different width chart but the bar widths and space between bars should be pretty uniform. The more data the longer the chart. You might need to "20" and "15" to get the look you want.
So I have created a basic line chart using Chartjs. How would I go about changing the color of the points (pointBackgroundColor) depending on the value of the data? For example, if the data point is less than 10 it changes to red, or if the data point is between 10 and 20 it changes to blue?
const CHART = document.getElementById("lineChart");
let lineChart = new Chart(CHART, {
type: 'line',
data: {
labels: ["5/10/2010", "5/11/2010", "5/12/2010", "5/13/2010", "5/14/2010", "5/15/2010", "5/16/2010"],
datasets: [
{
label: "Theta",
fill: false,
lineTension: 0,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(9,31,62)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(0,191,255)",
pointBackgroundColor: "rgba(0,191,255)",
pointBorderWidth: 5,
pointBorderRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [15, 28, 11, 3, 34, 65, 20],
}
]
},
options: {
maintainAspectRatio: false,
responsive: true,
legend: {
display: false,
},
scales: {
yAxes:[{
ticks: {
fontColor: "#091F3e",
beginAtZero: true,
steps: 10,
stepSize: 10,
max: 100
},
gridLines: {
display: false
}
}],
xAxes:[{
ticks: {
fontColor: "#091F3e",
fontSize: "10",
},
gridLines: {
display: false
}
}]
}
}
});
You can use a closure on any option and manipulate the returned value according to the context. In the example bellow I'm the pointBackgroundColor is red when the current value is greater then 0 and blue otherwise.
pointBackgroundColor: function (context) {
let value = context.dataset.data[context.dataIndex];
return value > 0
? 'red'
: 'blue';
},
Here is another thing that may help you Change bar color depending on value.
Its original answer from Tot Zam
Adding the code sample in case the link doesn't work.
var colorChangeValue = 50; //set this to whatever is the decidingcolor change value
var dataset = myChart.data.datasets[0];
for (var i = 0; i < dataset.data.length; i++) {
if (dataset.data[i] > colorChangeValue) {
dataset.backgroundColor[i] = chartColors.red;
}
}
myChart.update();
Its about bars background, but you can try work around and find same solution.
I need to put some additional labels on my charts, so I'm using shapes. Here is the result:
http://jsfiddle.net/z3n3qobm/91/
But I need to align the circles from the example with the labels of the X-axis. The chart must be responsive and the total of labels depends from the database.
I have a function that generates the initial position of the shapes in '%', but it misaligns when I change the window's size.
I did some calculations, but when the chart resizes it doesn't keep a fixed proportion.
Someone have an idea how to use shapes at the same position of the X-axis labels?
Unfortunately ZingChart does not provide a way to scale shapes and labels based on sizing. Hooks are available to position labels on nodes, but not on scale items themselves.
Now there I do have a solution to your issue, but just to be clear this is more of a hack utilizing tricks with ZingChart and multiple charts. I removed the shapes in your chart and decided to replicate those circles utilizing a second chart.
The main goal of this was to utilize a scatter chart, modify the look of each scatter node to replicate what you are trying to achieve, and to hide all the superficial items that were unnecessary (scales, removed plotarea margins). Do note that I'm using a mixed chart, one series for the scatter chart, and another for a dummy bar chart to force the scales to match how the chart above is displayed.
http://jsfiddle.net/mikeschultz/q6arebsu/1/
(Snippet below incase the jsfiddle is deleted in the future).
This can be also accomplished by combining the two charts into a single graphset, but I find working with separate charts is more flexible.
var myData = {
"graphset":[
{
"globals":{
"overflow":"visible"
},
"plot":{
"animation":{
"effect":"ANIMATION_EXPAND_BOTTOM",
"sequence":null,
"speed":10
},
"aspect":"jumped"
},
"plotarea": {
"margin-bottom": 30
},
"type":"mixed",
"series":[
{
"type":"bar",
"values":[46,46,53,50],
"background-color":"#5e36e6",
"value-box":{
"placement":"bottom-in",
"rules":[
{
"rule":"%v==0",
"visible":false
}
],
"thousands-separator":".",
"font-color":"#fff"
},
"palette":0
},
{
"type":"bar",
"values":[52,53,61,58],
"background-color":"#0099cd",
"value-box":{
"placement":"top",
"rules":[
{
"rule":"%v==0",
"visible":false
}
],
"thousands-separator":".",
"font-color":"#fff"
},
"palette":1
},
{
"type":"line",
"values":[150,105,399,159],
"marker":{
"size":0,
"border-width":0,
"background-color":"transparent"
},
"line-color":"#99cc33",
"line-width":3,
"value-box":{
"placement":"top",
"rules":[
{
"rule":"%v==0",
"visible":false
}
],
"thousands-separator":"."
},
"palette":2
}
],
"background-color":"#3F0767",
"scale-x":{
"tick":{
"alpha":0
},
"zooming":false,
"labels":["AB","CDE","FG","HI JKL"],
"line-width":0,
"zoom-to":null
},
"scale-y":{
"guide":{
"alpha":0.25,
"line-style":"solid",
"line-color":"#5a3b77"
},
"short":true,
"tick":{
"alpha":0
},
"line-width":0
},
"scroll-x":false
},
]
};
zingchart.render({
id : 'myChart',
data : myData,
height: 400
});
var bubbleConfig = {
type: 'mixed',
backgroundColor:"#3F0767",
scaleX: {
visible: false
},
scaleY: {
visible: false
},
plotarea: {
marginTop : 0,
marginBottom: 0,
maskTolerance: [0,0]
},
plot: {
marker: {
size: 30,
borderColor: '#371876',
borderWidth: 3,
backgroundColor: 'transparent'
},
tooltip: {
visible: false
}
},
scaleY: {
values: "0:2:1",
visible: false
},
series: [
{
type:'scatter',
values: [
[0,1],
[1,1],
[2,1],
[3,1]
],
valueBox: {
visible: true,
text: 'foobar',
fontColor: '#fff',
fontSize: '15px',
fontWeight: 'normal',
placement: 'over',
rules: [
{
rule: '%i == 0',
text: '35%'
},
{
rule: '%i == 1',
text: '51%'
},
{
rule: '%i == 2',
text: '15%'
},
{
rule: '%i == 3',
text: '36%'
}
]
}
},
{
type:'bar',
values: []
}
]
}
zingchart.render({
id : 'myBubbles',
data : bubbleConfig,
height: 80
});
<html>
<head>
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"></div>
<div id='myBubbles'></div>
</body>
</html>
I have a basic bar chart I'm presenting in flot (5 bars, displaying the % per status).
$.plot($("#placeholder"), [
{
label: 'Failed',
data: [[0,10]],
bars: { show: true }
},
{
label: 'Passed',
data: [[1,15]],
bars: { show: true }
},
{
label: 'Not Run',
data: [[2,30]],
bars: { show: true }
},
{
label: 'Blocked',
data: [[3,5]],
bars: { show: true }
},
{
label: 'In Progress',
data: [[4,40]],
bars: { show: true }
}
],
{
xaxis: {
ticks: [[0.5, "Failed"], [1.5, "Passed"], [2.5, "Not Run"], [3.5, "Blocked"], [4.5, "In Progress"]]
},
legend: {
show: false
}
});
I'm finding the font used for the tick values on the x axis are a little too big, especially when the graph is displayed at small dimensions ie. 240x100. I've read the API documentation, but can't find how to control the tick label sizes.
Is this possible OOTB?
It doesn't appear you can set the font size via the API, but you can use css to set the size of the tick labels.
.tickLabel { font-size: 80% }
Here's an example directly from the API:
xaxis:{
font:{
size:11,
style:"italic",
weight:"bold",
family:"sans-serif",
variant:"small-caps"
}
}
http://flot.googlecode.com/svn/trunk/API.txt
The above two answers won't work on the latest version of flot, as they no longer use 'real' text (the text is drawn instead). Instead specify these options:
{xaxis: {font: size: some_number}, yaxis: {font: size: some_number}}
(replace some_number with the desired size in points)
I used the following:
CSS File/SCSS File
#graph_label .tickLabel{
font-size: 50%;
}
Index.html or place where you are plotting the graph area
$.plot($("graph_label"), [dataArrayReference], options);
Ref: #BrentM 's Answer Above
PS: I am using Flot Version prior to 0.8.1 so I dont have any idea about how latest version would work