I have a flot line graph where the x values are repeating but I can't quite figure out why. How can I fix this?
My x-axis is defined as...
chartOptions = {
xaxis: {
mode: "time",
timeformat: "%d/%m/%y",
//tickSize: [1, "day"],
//tickLength: 2
},
And my data is ...
[1424005200000,20795],[1424091600000,20151],[1424178000000,22448],[1424264400000,27000],[1424350800000,30622],[1424437200000,30844],[1424523600000,23139]
Use: minTickSize: [1,"day"]
So the day will appear once in the graph.
chartOptions = {
xaxis: {
mode: "time",
timeformat: "%d/%m/%y",
minTickSize: [1,"day"],
//tickLength: 2
},
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 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 '.
The chart is pretty good when it is normal. but i expect it to adjust the bar width upon zoom. The graph without zoom is as below.
when I zoom into the graph, the bars width remains same, very thin!
Is there anyway that they auto adjust? I saw a link where the example adjusts the bar width with the zoom. But I don't see anything missing. Here's the example : http://blog.trifork.com/2014/07/29/creating-charts-with-c3-js/
Here's my charting code. Am I missing some setting?
var chart = c3.generate({
bindto: '#chart',
data: {
xFormat: '%m/%d/%y %I:%M %p',
json: final_data,
keys: {
x: 'date',
value: values
},
type: 'bar',
groups: val
},
bar: {
width: { ratio: 0.9 }
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%b %d'
}
}
},
zoom: {
enabled: true
},
color: {
pattern: colors
}
});
Try removing key value pair "bar".
If the problem still persists, try setting axis.x.tick.fit = false
I want to add titles to the x and y axes using ZingChart. For example, if my x-axis shows years (2010, 2011, 2012, etc.), I want the title "Fiscal Year" to be shown below each of the year labels
Similarly, if I am measuring revenues on the y-axis, where I may see labels like 1,000,000, 2,000,000, etc. I want to add a title to the y-axis that says "Annual Revenues".
I couldn't find anything in the documentation about this.
The link Martin used is correct, however there is also documentation about this in the JSON syntax guide. http://www.zingchart.com/docs/json-attributes-syntax/scale-objects/label/
var myChart = {
"graphset":[
{
"type":"mixed",
"background-color":"#ffffff",
"alpha":1,
"title":{
"text":"Browser Usage",
"font-size":"20px",
"font-weight":"bold",
"font-color":"#000000",
"background-color":"#ffffff",
"margin-top":"15px",
"margin-left":"15px",
"margin-bottom":"10px",
"text-align":"left"
},
"scale-x":{
"line-width":"1px",
"line-color":"#CCCCCC",
"line-style":"solid",
"values":["Jan","Feb","Mar","Apr","May","Jun","Jul"],
"guide":{
"line-width":"1px",
"line-color":"#CCCCCC",
"line-style":"solid"
},
"label":{
"text":"Month",
"font-size":"20px",
"color":"red"
},
"item":{
"font-family":"helvetica",
"font-color":"#CCCCCC",
"font-weight":"bold",
"font-size":"10px",
"visible":true
}
},
"scale-y":{
"values":"0:50:10",
"line-width":"1px",
"line-color":"#CCCCCC",
"line-style":"solid",
"tick":{
"visible":true,
"line-color":"#CCCCCC",
"placement":"outer",
"size":"12px"
},
"item":{
"font-color":"#CCCCCC",
"font-weight":"bold",
"font-size":"10px",
"visible":true
},
"guide":{
"line-width":"1px",
"line-color":"#CCCCCC",
"line-style":"solid"
}
},
"tooltip":{
"visible":true
},
"plot":{
"alpha":1,
"hover-state":{
"visible":false
}
},
"series":[
{
"type":"bar",
"values":[47,32,37,48,28,27,32],
"text":"Safari",
"background-color":"#7eac10"
}
]
}
]
};
zingchart.render({
id: "myChart",
height: "300px",
width: "100%",
data: myChart
});
<script src="http://www.zingchart.com/playground/lib/zingchart/zingchart-html5-min.js"></script>
<div id="myChart"></div>
You may have been searching docs for a title. But you can accomplish what you'd like to do by adding a "label" object to your scale-x and scale-y objects and fill it with the attributes necessary to style it for matching your chart.
You can always right click on a chart on ZingChart to see the source.
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: