Why is it that when I put a dynamic array value in the ticks, It always starts with zero but when I specify a min and max in my flot options I get the correct output? any views on this?
I commented the one using min/max:
$(function () {
var data = [ [
[1301634000000, 315.71], //Apr 1, 2011
[1302238800000, 209.21], //Apr 8, 2011
[1302843600000, 420.36], //Apr 15
[1303448400000, 189.86], //4/22
[1304053200000, 314.93], //4/29
[1304658000000, 279.71], //5/6
[1305262800000, 313.34], //5/13
[1305867600000, 114.67], //5/20
[1306472400000, 315.58] //5/27
] ];
var ticks = [];
var ticker=[315.71,209.21,420.36,189.86,314.93,279.71,313.34,114.67,315.58];
for (var i = 0; i < data[0].length; i++) {
ticks.push(data[0][i][0]);
}
$.plot($("#placeholder"), data, {
xaxis: {
mode: "time",
ticks: ticks,
timeformat: "%m/%d",
min: (new Date(2011, 2, 31)).getTime(),
max: (new Date(2011, 4, 31)).getTime()
},
yaxis: {
ticks: ticker
/*min: 114.67,
max: 420.36*/
},
series: {
lines: { show: true },
points: { show: true }
},
grid: {
hoverable: true,
clickable: true
}
});
});
and here is my Fiddle
I notice that in this example, it's not just formatted correctly and not properly scaled so entirely different from what Im asking but I applied the same thing in my prototype.
Related
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.
My problem appears to be close to THIS post (without solution).
Could anybody help me with a Echarts Pie withour colors? I have 2 versions of Echarts, an official and another modified, and the problem occours only with the official version (latest).
I am using data from PHP variables. Official version works when I change data to static numbers, but loose colors with static data. IMPORTANT: I have the correct data in the variables, because the pie appears with correct data, but black & white only.
Thanx any help.
Here is my pie code:
<div id="main2" style="width: 600px;height:400px;"></div></td></tr></table>
<script>
var csimpa = '<?php echo $csimpa[$mescert] ?>';
var cesprega = '<?php echo $cesprega[$mescert] ?>';
var cespdefa = '<?php echo $cespdefa[$mescert] ?>';
var cinta = '<?php echo $cinta[$mescert] ?>';
var cespparta = '<?php echo $cespparta[$mescert] ?>';
// Create a pie chart:
echarts.init(document.getElementById('main2')).setOption({
/*title : {
text: 'CERTID\u00d5ES EXPEDIDAS',
subtext: '2018',
x:'center'
},*/
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
/*legend: {
orient: 'vertical',
left: 'left',
data: ['CS','CI']
},*/
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series : [
{
name: 'CERTID\u00d5ES',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value: csimpa, name:'Simplificada'},
//{value:<? echo $cespoaba[$mescert] ?>, name:'Esp - OAB'},
{value: cesprega, name:'Esp - Existencia'},
{value: cespdefa, name:'Esp - Definir'},
{value: cinta, name:'Inteiro Teor'},
{value: cespparta, name:'Esp - Participa'}
]/*.sort(function (a, b) { return a.value - b.value; }),
roseType: 'radius'*/,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200;
}
}
]
});
</script>
Make sure if the data is coming through dynamically, that it is loaded before the chart finishes loading. You need the data fully loaded so that the chart can use it.
Instead of giving name and value inside the data create an array of objects and define it in a variable and pass it inside series data.
The values used are just for demo
you can use an array of object creation like objectDemo or objectDemo2
let values = [224, 214, 139, 312, 176]
let categories = ['Simplificada', 'Esp - Existencia', 'Esp - Definir', 'Inteiro Teor', 'Esp - Participa']
let objectDemo2 = values.map((d,i) => {
return {
name: categories[i],
value: values[i]
}
})
let objectDemo = [
{value: 224, name:'Simplificada'},
{value: 214, name:'Esp - Existencia'},
{value: 139, name:'Esp - Definir'},
{value: 312, name:'Inteiro Teor'},
{value: 176, name:'Esp - Participa'}
]
option = {
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
visualMap: {
show: true,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series : [
{
name: 'CERTID\u00d5ES',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data: objectDemo2/*.sort(function (a, b) { return a.value - b.value; }),
roseType: 'radius'*/,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200;
}
}
]
};
You can see the working of the above code
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'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" }
}
Can you render a bar chart like this using flot?
Do I need to create the dataset manually to get this result, instead of using mode: 'time' ?
Actually pretty easy to produce using flot.
var options = {
series: {
bars: {
show: true,
barWidth: 15778463000, // 1/2 year in milliseconds
align: 'center'
},
},
yaxes: {
min: 0
},
xaxis: {
mode: 'time',
timeformat: "%y",
tickSize: [1, "year"],
autoscaleMargin: .10 // allow space left and right
}
};
$(function() {
$.plot($('#placeholder'), [[[1230768000*1000, 100], //[seconds * 1000 = milli, y value]
[1262304000*1000, 200],
[1293840000*1000, 300]]], options);
});
Produces: