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:
Related
I'm using ApexchartJS library.
Is it possible to set a candle width or indentation size between separate candle bars for the candlestick chart?
Now I have overlapping of two bars on top of each other.
Please take a look on CodePen:
https://codepen.io/yura_bezhentsev/pen/abOGGZo
This is my options config:
const options = {
series: [{
data: [
{
x: 'First',
y: [6630, 6660, 6623, 6650]
},
{
x: 'Second',
y: [6650, 6663, 6623, 6630]
},
{
x: 'Third',
y: [6630, 6660, 6623, 6650]
}
]
}],
chart: {
type: 'candlestick',
height: 400
},
xaxis: {
type: 'category',
min: 0,
max: 4
}
};
It looks like a bug in ApexCharts when small number of candles are present.
A small workaround is to set the tickPlacement property (you'll lose the ability to zoom though)
xaxis: {
tickPlacement: 'between'
}
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 am making a line graph in Flot, but i can't manage to put x-axes and y-axes to display data normally, they are stick together. How can i make it to be over whole graph. I didn't find in any documentation how to fix that.
This need to be on left side outside of graph : [0.24, "0.24 USD"], [2085.95, "2085.95 USD"]
and this on bottom of a graph
[0, "0"], [1, "Jan"], [275, "Aug"], [549, "Mar"], [823, "Oct"], [1097, "Jun"], [1371, "Dec"], [1372, "Dec"]
Here is an image how it looks now, all is grouped on bottom left corner
And this is how it need to looks like, this is image from Flot website
Here is a code:
var data1 = [{chart_data_money}];
var dataset = [{
data: data1,
color: '#ffa500',
label: 'Loss in USD',
points: { symbol: "circle", fillColor: "#FF000;", show: true}
}];
var options = {
series: {
lines: { show: true },
points: {
radius: 1,
fill: true,
show: true
}
},
xaxes: [{
position: "bottom",
ticks: '{chart_xticks_money}',
color: "black",
axisLabel: "Sin(x)",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3
}],
yaxes: [{
position: "left",
color: "red", // lines colors for y axes
ticks: '{chart_yticks_money}',
axisLabel: "Sin(y)",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3
}],
legend: {
noColumns: 0,
labelFormatter: function (label, series) {
return "<font color=\"white\">" + label + "</font>";
},
// legend postion and color
backgroundColor: "#000",
backgroundOpacity: 0.9,
labelBoxBorderColor: "orange",
position: "nw"
},
grid: {
hoverable: true,
borderWidth: 3,
mouseActiveRadius: 50,
backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }, // 2 colors gradient for bg of chart
axisMargin: 20
}
};
$(document).ready(function () {
$.plot($("#graph-line"), dataset, options);
});
The problem is that you give Flot your axis ticks as string instead of array:
ticks: '{chart_xticks_money}',
needs to be
ticks: {chart_xticks_money},
and the same for the other axis.
This fiddle has the same error as your image, and this is the correct version without the '.
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.