I'm trying to achieve something like this: example.
I want to display labels for xAxis like in categories: in Month day-day format. Is it possible to achieve it with 'datetime' type?
This is my xAxis configuration:
{
"type" : "datetime",
"crosshair" : false,
"visible" : true,
"labels" : {
"enabled" : true,
"padding" : 10
},
"minTickInterval" : 86400000,
"tickLength" : 10,
"min" : 1507759200000,
"max" : 1523311199999
}
You can try setting xAxis.labels.x offset when xAxis.showLastLabel is disabled:
var chart = Highcharts.chart('container', {
chart: {
width: 700
},
xAxis: {
type: 'datetime',
labels: {
x: 150
},
showLastLabel: false
},
series: [{
data: [
[Date.UTC(2018, 0), 1],
[Date.UTC(2018, 1), 2],
[Date.UTC(2018, 2), 2]
]
}]
});
Live demo: http://jsfiddle.net/BlackLabel/0bk79bpz/
API references:
https://api.highcharts.com/highcharts/xAxis.labels.x
https://api.highcharts.com/highcharts/xAxis.showLastLabel
Related
I've the following date: "2022-06-04T00:00:00.000Z" format, We've need of date calculation for highcharts in this numeric type format "1525844100000" so how can I calculate in react-highcharts
xAxis: {
type: 'datetime',
ordinal: false,
startOnTick: false,
endOnTick: false,
minPadding: 0,
maxPadding: 0,
Date: false,
tickInterval: 4 3600 1000,
minRange: 1 24 3600000,
dateTimeLabelFormats: {
day: '%l %P',
hour: '%l %P'
},
offset: 0,
},
series: [
{
"data": [[1.424304e+12, 0.25]],
color: '#FFA749',
},
],
"highcharts": "^6.1.1",
"react-highcharts": "^16.0.2",
I've given above my charts details
In order to convert ISO-8601 to timestamp format, use getTime() JS method.
let timestamp = new Date('2022-06-04T00:00:00.000Z').getTime()
// expected output: 1654300800000
Demo: https://jsfiddle.net/BlackLabel/vnLdum1k/
I want to show my custom (Day-Month-Year Hour:Min:Sec -->ex: 01-05-2019 14:06:47 PM) time format on chartjs chart
How Can i Show On chart xAxis Date Format Like This >>
Day-Month-Year Hour:Min:Sec -->ex: 01-05-2019 14:06:47 PM
time format is timeFormat = 'DD/MM/YYYY h:mm:ss a' but on chart only shows Month,Day,Year
This is my code below and:
Online Code On >>> https://codepen.io/sibche2013/pen/XQWWbb
var timeFormat = 'DD/MM/YYYY h:mm:ss a';
var config = {
type: 'line',
data: {
datasets: [
{
label: "UK Dates",
data: [{
x: "01-04-2014 02:15:50", y: 175
}, {
x: "12-04-2014 12:19:27", y: 177
}, {
x: "23-04-2014 22:25:47", y: 178
}, {
x: "28-04-2014 14:46:40", y: 182
}],
fill: false,
borderColor: 'blue'
}
]
},
options: {
responsive: true,
title: {
display: true,
text: "Chart.js Time Scale"
},
scales: {
xAxes: [{
type: "time",
time: {
format: timeFormat,
tooltipFormat: 'll'
},
scaleLabel: {
display: true,
labelString: 'Date'
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'value'
}
}]
}
}
};
window.onload = function () {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
};
Could any one help me how could I bind data object with DevExtreme's dxDataGrid using customstore.
My DTO is like:
[
data: {...},
totalCount: 100,
summary: [10,20,30]
]
But when i bind the data with dxDataGrid it just bind data but not totalCount.
I have found a solution for my problem.
[remoteOperations]="true"
I need remoteOperations = true to bind the totalCount along with data fetched from the server.
You don't need to send a totalCount, you have to use the summary section istead, look at this sample
$("#gridContainer").dxDataGrid({
dataSource: orders,
keyExpr: "ID",
showBorders: true,
selection: {
mode: "single"
},
columns: [{
dataField: "OrderNumber",
width: 130,
caption: "Invoice Number"
}, {
dataField: "OrderDate",
dataType: "date",
width: 160
},
"Employee", {
caption: "City",
dataField: "CustomerStoreCity"
}, {
caption: "State",
dataField: "CustomerStoreState"
}, {
dataField: "SaleAmount",
alignment: "right",
format: "currency"
}
],
summary: {
totalItems: [{
column: "OrderNumber",
summaryType: "count"
}]
}
});
Data Source
var orders = [{
"ID" : 1,
"OrderNumber" : 35703,
"OrderDate" : "2014-04-10",
"SaleAmount" : 11800,
"Terms" : "15 Days",
"TotalAmount" : 12175,
"CustomerStoreState" : "California",
"CustomerStoreCity" : "Los Angeles",
"Employee" : "Harv Mudd"
}, {
"ID" : 4,
"OrderNumber" : 35711,
"OrderDate" : "2014-01-12",
"SaleAmount" : 16050,
"Terms" : "15 Days",
"TotalAmount" : 16550,
"CustomerStoreState" : "California",
"CustomerStoreCity" : "San Jose",
"Employee" : "Jim Packard"
}....
]
For custom summaries you can use this
summary: {
totalItems: [{
name: "SelectedRowsSummary",
showInColumn: "SaleAmount",
displayFormat: "Sum: {0}",
valueFormat: "currency",
summaryType: "custom"
}
],
calculateCustomSummary: function (options) {
if (options.name === "SelectedRowsSummary") {
if (options.summaryProcess === "start") {
options.totalValue = 0;
}
if (options.summaryProcess === "calculate") {
if (options.component.isRowSelected(options.value.ID)) {
options.totalValue = options.totalValue + options.value.SaleAmount;
}
}
}
}
}
In the section if (options.summaryProcess === "calculate") { you can put your custom calc logic, in this case your total count.
I have prepared linear graph and some data here.
As you can see, when you try display details of samples in the middle, graph show detail of another one. As the date format I am using Unix timestamp.
Next problem is rectangle below which should show sample's date, instead of it show day, month, and some number. I require date format like YYYY/MM/DD - mm:ss.
var chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 80,
"autoMarginOffset": 20,
"marginTop": 7,
"dataDateFormat": "YYYY/MM/DD JJ:NN:QQQ",
"dataProvider": chartData,
"valueAxes": [{
"axisAlpha": 0.2,
"dashLength": 1,
"position": "left",
}],
"mouseWheelZoomEnabled": true,
"graphs": [{
"id": "g1",
"balloonText": "BallonText",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"hideBulletsCount": 50,
"title": "red line",
"valueField": "yCoordinate",
"useLineColorForBulletBorder": true,
"balloon":{
"drop":true
}
}],
"chartScrollbar": {
"autoGridCount": true,
"graph": "g1",
"scrollbarHeight": 40
},
"chartCursor": {
"limitToGraph":"g1"
},
"categoryField": "xCoordinate",
"categoryAxis": {
"parseDates": true,
"axisColor": "#DADADA",
"dashLength": 1,
"minorGridEnabled": true
},
"export": {
"enabled": true
},
} );
There are a couple of issues.
1) Your date-based data must be sorted in ascending, per the parseDates documentation documentation. Your dates are out of order, which will cause chart behavior issues like what you're seeing.
2) You have to set your category axis minPeriod to match the smallest period between each of your dates in your data. It looks like seconds ("ss") are appropriate.
As for formatting the chart cursor, you can set categoryBalloonDateFormat to the desired format. In this case "YYYY/MM/DD - NN:SS" is what you want. Refer to the formatting dates documentation if you need to use different formats.
Also note that dataDateFormat is not necessary if you're using millisecond timestamps. dataDateFormat is only used to parse your date data if they are strings.
Updated code below:
var chartData = [
{
xCoordinate: 1511509736056,
yCoordinate: 1
},
{
xCoordinate: 1511509955035,
yCoordinate: 1
},
{
xCoordinate: 1511510013033,
yCoordinate: 1
},
{
xCoordinate: 1511510152052,
yCoordinate: 1
},
{
xCoordinate: 1511510436036,
yCoordinate: 1
},
{
xCoordinate: 1511510664024,
yCoordinate: 1
}
];
//sort dates into ascending order
chartData.sort(function(lhs, rhs) {
return lhs.xCoordinate - rhs.xCoordinate;
});
var chart = AmCharts.makeChart("chartdiv", {
type: "serial",
theme: "light",
marginRight: 80,
autoMarginOffset: 20,
marginTop: 7,
dataProvider: chartData,
valueAxes: [
{
axisAlpha: 0.2,
dashLength: 1,
position: "left"
}
],
mouseWheelZoomEnabled: true,
graphs: [
{
id: "g1",
balloonText: "BallonText",
bullet: "round",
bulletBorderAlpha: 1,
bulletColor: "#FFFFFF",
hideBulletsCount: 50,
title: "red line",
valueField: "yCoordinate",
useLineColorForBulletBorder: true,
balloon: {
drop: true
}
}
],
chartScrollbar: {
autoGridCount: true,
graph: "g1",
scrollbarHeight: 40
},
chartCursor: {
limitToGraph: "g1",
categoryBalloonDateFormat: "YYYY/MM/DD - NN:SS" //change date format in cursor
},
categoryField: "xCoordinate",
categoryAxis: {
parseDates: true,
axisColor: "#DADADA",
dashLength: 1,
minPeriod: "ss", //update min period to match the smallest intervals in your data.
minorGridEnabled: true
},
export: {
enabled: true
}
});
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
#chartdiv {
width: 100%;
height: 100%;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script src="//www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv"></div>
My flot graph is rendering fine on firefox and chrome, however on ie11 it does not render. the graph appears with no datapoints.
var options = {
"xaxis" : {
"mode" : "time",
"timeformat" : "%d/%m",
//"tickSize" : [1, "day"]
},
"yaxes" : [{
"position" : "left",
//"tickSize" : 1,
"min" : min,
"max" : 100
}, {
"position" : "right",
"min" : 0,
"max" : max
}
],
"series" : {
"lines" : {
"show" : true
},
curvedLines: {
apply: true,
}
},
"colors" : ["#00ff00"],
"legend" : {
"show" : false
},
"grid" : {
hoverable: true,
clickable: true
}//,
//animator: { start: 100, steps: 99, duration: 2000, direction: "left" }
};
var data_ajax = [{
"color" : "#A8B400",
"label" : "R1 Graph",
"lines" : {
"show" : true,
"lineWidth" : 1
},
"points" : {
"show" : false
},
"yaxis" : 1,
"data" : arr
}
];
$('#network-graph').empty();
plot = $.plot("#network-graph", data_ajax, options);
Problem I found was with the data_ajax variable. it contained objects with wrong format. The time format i had to use for IE11 fix is as follows
var to_seconds = moment(data[i].TIMESTAMP, 'YYYY-MM-DD hh:mm A').unix() * 1000;
I wasn't specifying a format previously. Is there a universal date time format I can use for all browsers?