I have a series of data with a single datapoint every month using the OHLC renderer. I am trying to display it with jqplot. It looks fine, except the data points are far too skinny because jqplot is displaying them as if they only apply to that day. When I take out the date, and just specify month and year, jqplot crashes.
My data looks like this:
[
[
"01/01/2008",
8152.9054008104704,
2612.7075024153296,
5382.8064516128998
],
// ...
[
"03/01/2008",
7554.0494491662403,
2086.69248631764,
4820.3709677419401
],
]
Is this configuration possible, or should I hack the code myself? The documentation doesn't make it clear how to do this.
What code should I be modifying? DateAxisRenderer? OHLCRenderer?
You can use tickInterval option with jqplot.DateAxisRenderer plugin to create monthly ticks.
xaxis: {
renderer: jQuery.jqplot.DateAxisRenderer,
tickOptions: {
formatString:'%#d %I:%M %p'
},
rendererOptions: {
daTickInterval: [1, 'month']
}
}
Jagadish's rendererOptions did not work for me. However, this did:
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickOptions:{formatString:'%b/%e/%Y'},
tickInterval:'1 month'
}
},
Related
I know the ApexCharts can help to display data using timeline chart.
but the example(vue) only shown how to display the date like
new Date(1797, 2, 4).getTime(),
new Date(1801, 2, 4).getTime() ```
how can I change the value to display time? like 08:00-09:00
You can create your own x-axis labels in the dataset using the chart's xaxis categories option.
For example:
options: {
chart: {
id: 'mychart'
},
xaxis: {
categories: ['8:00','9:00','10:00','11:00','12:00','1:00','2:00','3:00']
}
}
Use the formatter on the axis: https://apexcharts.com/docs/options/xaxis/. It isn't exactly the format you asked for, but will set you in the right direction. There are getMinutes() getSeconds() and GetHours() among other functions that can be used to then construct a format you want.
xaxis: {
type: 'datetime',
labels: {
formatter: function (val: number) {
return new Date(val).toLocaleTimeString()
}
}
},
I want to disable or hide marked x-axis on the following image:
But I still need to be able to show a plot line.
I tried to play around with "xAxis" Highcharts property and I am able to hide marked x-axis, but then I can not add a plot line. It seems to me this axis is somehow connected with the plot.
Thanks a lot for help.
The plotLines are connected to an axis, but you can separately disable the grid and the labels:
xAxis: [{
...,
grid: {
enabled: false
},
plotLines: [{
color: 'red',
value: today + day * 7,
width: 5
}],
labels: {
enabled: false
},
tickLength: 0
}, {
visible: false
}]
Live demo: https://jsfiddle.net/BlackLabel/c2xLruvp/
API Reference: https://api.highcharts.com/gantt/xAxis.visible
I'm using kendo chart, scatter line series type, example:like this
I can able to plot the values on the kendo chart.see the output
I have an array series_array, It is dynamic, contains objects like this
{
name:"series1",
data:[x:"11/12/2018",y:"20",low:"5",high:"10"]
}
jquery code to fill kendo chart is :
code:
$("#chart").kendoChart({
title:{ text:"my error chart"},
seriesDefaults:{
type:"scatterLine",
yErrorLowField:"low",
yErrorHighField:"high",
xField:"x",
yField:"y"
},
series:seris_array
});
Problem is how to get x-axis or categorial axis values like "11/12/2018"(Full Date).
Use the xAxis.labels.format:
xAxis: {
labels: {
format: "{0:d}"
},
},
DEMO
I'm creating a line chart using n3 line chart in my angular app.
My data is array of dates and counts.
This is the result I get:
As you can see, the X axis values are inconsistent.
It has a tick every 12 hours, but each tick has different format. I'm trying to keep the format the same for every tick, i.e:
This is how I include the chart in my html:
<linechart class="linechart" data="data" options="options"></linechart>
This is my axes options:
$scope.options = {
axes: {
x: {
key: "from",
type: "date",
innerTicks: false,
grid: false,
ticksInterval: d3.time.days
},
y: {
ticks: 6,
ticksFormatter: $scope. formatNumber
}
}
I've tried to use diffent values for ticks and ticksInterval but with no success.
Any way to achieve this?
Thank you.
I had the same problem today.
I solved it using thickFormat and the d3.time.format() function.
axes : {
x : {
key : "date",
type : 'date',
tickFormat : d3.time.format("%x %X")
}
}
http://jsfiddle.net/jJNmV/
Yes I've multiplied my times by 1,000, and as you can see the dots do not appear on the date but rather a little bit to the side of it. Why does this happen?
My data and x-axis looks like:
{data: [[1351483200000, 12],[1351569600000, 1]], label: "Clicks"}, {data: [[1351483200000, 24],[1351569600000, 1]], label: "Opens"}
], {
xaxis: {
mode: 'time',
timeformat: '%y/%m/%d',
minTickSize: [1, 'day']
},
It looks like you're not accounting for your time zone. The 'time series data' section of the API docs goes into more detail, but the basic idea is that you'll need to add/subtract your timezone offset from each timestamp.