I am trying to create a line, spline chart using JSON data. I want multiple series but I am confused on how to do that. Right now I am able to create the multiple series when the date is in 2019-07-06 format. I also have a JSON that has a column for the month and a column for the year Please help on how I can fix this. Right now I only have the code for group by day.
JSON Data:
[
{ "month": 6,
"year": 2019,
"starts": 21278998,
"completes": 9309458
},
{ "month": 7,
"year": 2019,
"starts": 38850115,
"completes": 17790105
}
]
I used the solution for the date format 2019-07-06 provided in this fiddle: https://jsfiddle.net/BlackLabel/tjLvh89b/
Please help with how I can create a chart for the Month, Year on the x-Axis.
You can achieve it simply by creating a Date object using different parameters.
Instead of the string date parameter new Date('2019-07-07') use year and month as separate parameters like that: new Date(2019, 7).
Code:
var json = [{
month: 6,
year: 2019,
starts: 21278998,
completes: 9309458
}, {
month: 7,
year: 2019,
starts: 38850115,
completes: 17790105
}];
var series1 = {
name: 'starts',
data: []
},
series2 = {
name: 'completes',
data: []
};
json.forEach(elem => {
series1.data.push({
x: +new Date(elem.year, elem.month),
y: elem.starts
});
series2.data.push({
x: +new Date(elem.year, elem.month),
y: elem.completes
});
});
Highcharts.chart('container', {
chart: {
type: 'spline'
},
xAxis: {
type: 'datetime'
},
series: [
series1,
series2
]
});
Demo:
https://jsfiddle.net/BlackLabel/xtefuLsp/1/
Date object reference:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
Related
I have an API that returns data like this:
[
{
"attributes": {
"type": "AggregateResult"
},
"expr0": 25937961.52,
"expr1": 1,
"expr2": 2020
},
{
"attributes": {
"type": "AggregateResult"
},
"expr0": 4092447.85,
"expr1": 3,
"expr2": 2020
},
{
"attributes": {
"type": "AggregateResult"
},
"expr0": 18509414.84,
"expr1": 6,
"expr2": 2019
},
{
"attributes": {
"type": "AggregateResult"
},
"expr0": 13572118.12,
"expr1": 10,
"expr2": 2019
},
...
Where expr0 is an monetary value, expr1 is the month and expr2 is the year. I am using ApexCharts in React to display the results on my website, however I can't seem to format the data correctly. My component is shown below, however it currently only displays a single point. I'm not sure whether the data points need x/y keys to be displayed or if the dates need to be in the x-axis in options.
class SFAllTimeQuoteValue extends Component {
constructor(props) {
super(props);
this.state = {
series: [{
name: "Opportunities",
data: []
}],
options: {
chart: {
id: "line"
},
xaxis: {
type: "date"
}
}
}
}
async componentDidMount() {
var res = await axios.get(api);
const value = res.data;
var data = [];
for(var i = 0; i < value.length; i++) {
var date = new Date(value[i].expr2, value[i].expr1 - 1);
data.push([date, value[i].expr0]);
}
this.setState({
series: [{
data: data
}]
})
}
render() {
return (
<div>
<Chart series={this.state.series} type ='line' options ={this.state.options}/>
</div>
)
}
}
I would preferably like the data points to display just the month and year as the label too, however using my current method I am getting full date time strings as the label.
You should set the xaxis type as datetime and also set the labels.format property
xaxis: {
type: 'datetime',
labels: {
format: 'MM yyyy'
}
}
I need to show JSON data in Kendo chart.
My code as follows,
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
</head>
<body>
<div id="chart"></div>
$("#chart").kendoChart({
series: [{
data: [new Date(formatTime(360)).getTime(), // here 360 means seconds
new Date(formatTime(100)).getTime(),
new Date(formatTime(125)).getTime(),
new Date(formatTime(146)).getTime(),
new Date(formatTime(65)).getTime(),
new Date(formatTime(185)).getTime(),
new Date(formatTime(236)).getTime(),
new Date(formatTime(100)).getTime()],
color: "Blue",
name: "Average time",
type: "line"
},
{
data: [new Date(formatTime(760)).getTime(),
new Date(formatTime(100)).getTime(),
new Date(formatTime(125)).getTime(),
new Date(formatTime(148)).getTime(),
new Date(formatTime(65)).getTime(),
new Date(formatTime(185)).getTime(),
new Date(formatTime(236)).getTime(),
new Date(formatTime(100)).getTime()],
color: "Red",
name: "Wait time",
type: "bar",
}
]
,
valueAxis: {
labels: {
template: "#= kendo.format('{0:HH:mm:ss}', new Date(value)) #"
},
min: new Date("2018/02/01").getTime(),
majorUnit: 10 * 60 * 1000 // 20 minutes step
},
tooltip: {
visible: true,
template: "#= kendo.format('{0:HH:mm:ss}', new Date(value)) #"
}
});
function formatTime(time) {
var rootDate = new Date(new Date(2018, 1, 1, 0, 0, 0).setSeconds(time));
return rootDate;
}
here you can see, I set static chart data as data: [new Date(formatTime(360)).getTime()] I need to set dynamic JSOn object to chart data from JSON object.
I have the following JSON object.
[{
day: "YYY",
second: "100",
second2: "125"
}, {
day: "XXX",
second: "145",
second2: "117"
}, {
day: "TTT",
second: "565",
second2: "340"
}, {
day: "SSS",
second: "125",
second2: "250"
}]
I receiving separate JSON key from backend as second and second2.I need to set those fields to Chart series as new date object. how can I do it
If you're thinking about getting a new javascript values parsing some string that contains js codes, Just run eval function and let it do it's magic. Check this code:
let x = 'new Date()';
console.log(eval(x))
Assuming that second should populate the first series (average time) and second2 the second series (wait time), you could do this:
series: [{
data: arr.map(function (o) {
return new Date(formatTime(o.second)).getTime();
}),
color: "Blue",
name: "Average time",
type: "line"
},
{
data: arr.map(function (o) {
return new Date(formatTime(o.second2)).getTime();
}),
color: "Red",
name: "Wait time",
type: "bar",
}]
...where arr is the array you get from your back-end (after conversion from JSON of course).
I will need to display objects (a doublebar chart for each object). The structure of the object is:
{
dates: (5) ["2018-12-26", "2018-12-27", "2018-12-28", "2018-12-31", "2019-01-02"]
formattedDates: (5) ["2018/12/26", "2018/12/27", "2018/12/28", "2018/12/31", "2019/01/02"]
formatPoints2: (5) [1545945000000, 1546026562061, 1546284847056, 1546465543023, 1546545993086]
points: (5) ["2018-12-27T10:36:24.893", "2018-12-28T17:29:56.517", "2018-12-31T05:48:41.587", "2019-01-01T10:10:09.683", "2019-01-03T10:36:42.002"]
points2: (5) ["2018-12-27T16:10", "2018-12-28T14:49:22.061", "2018-12-31T14:34:07.056", "2019-01-02T16:45:43.023", "2019-01-03T15:06:33.086"]
formatPoints: (5) [1545924984893, 1546036196517, 1546253321587, 1546355409683, 1546529802002]
}
I took the liberty of converting the points and points 2 array using date.getTime() to get the formatPoints and formatPoints2
what I need to do is plot the time of the timestamps vs the dates.
e.g. points[0] = 2018-12-27T10:36:24.893, dates[0] = 2018-12-26
plot 10:36:24 vs 2018-12-26 and so on for each time in the array
an extra catch I need to display the FULL timestamp in the tool-tip (2018-12-27T10:36:24.893) on the chart when you hover over the bar for that point
the chart is a double bar chart where points&points2 is plotted against dates.
In your case the key is to set the right axis types. For timestamp values on yAxis the best type will be datetime and for dates on xAxis - category. Please check the example below and let me know if everything is fine.
var series = [{data: []}, {data: []}];
data.points.forEach(function(point, i){
series[0].data.push({
name: data.formattedDates[i],
tooltipText: data.points[i],
y: data.formatPoints[i]
});
series[1].data.push({
name: data.formattedDates[i],
tooltipText: data.points2[i],
y: data.formatPoints2[i]
});
});
Highcharts.chart('container', {
chart: {
type: 'bar'
},
xAxis: {
type: 'category'
},
tooltip: {
pointFormat: '{point.tooltipText}'
},
yAxis: {
min: 1545945000000,
max: 1546529802002,
type: 'datetime'
},
series: series
});
Live demo: http://jsfiddle.net/BlackLabel/asm64f5r/
API: https://api.highcharts.com/highcharts/xAxis.type
There are 52 weeks in a year, If i manually group 13 weeks into one quarter, it will give me a wrong result in high charts. Sometimes 13th week will be in 2nd quarter,so is there any function which will group weeks into quarter ?
Iam gettting data in following format:
Response is an object,consists of quarterNumber, actual production and planned production and weekwisedata, which is a list consists of weeknumber and weekly planned production and weekly actual production.
{"response":[{"quarterNumber":"1","actualQuarterProduction":"1.5","plannedQuarterProduction":"13.49","weekwisedata":[{"quarterNumber":1,"weekNumber":"1","weeklyPlannedProduction":"0","weeklyActualProduction":"0"}, {"quarterNumber":1,"weekNumber":"2","weeklyPlannedProduction":"13.49","weeklyActualProduction":"0"}, {"quarterNumber":1,"weekNumber":"3","weeklyPlannedProduction":"0","weeklyActualProduction":"0"},
{"quarterNumber":"2","actualQuarterProduction":"211.18","plannedQuarterProduction":"850",
"weekwisedata":[{"quarterNumber":2,"weekNumber":"14","weeklyPlannedProduction":"67.45","weeklyActualProduction":"0"},{"quarterNumber":2,"weekNumber":"15","weeklyPlannedProduction":"67.45","weeklyActualProduction":"0"},{"quarterNumber":2,"weekNumber":"16","weeklyPlannedProduction":"67.45","weeklyActualProduction":"0"},{"quarterNumber":2,"weekNumber":"17","weeklyPlannedProduction":"53.96","weeklActualProduction":"0"},{"quarterNumber":2,"weekNumber":"18","weeklyPlannedProduction":"67.45","weeklyActualProduction":"46.45"}]}
In Highchart iam displayng the data manually as shown below:
function(dataVal){
drilldown: {
series: [{
id: 'Quarter1a',
name: 'Actual Quality ',
data: [{
name: 'Week1',
y:parseFloat(dataVal.response[0].weekwisedata[0].weeklyActualProduction)
},
{
name: 'Week2',
y:parseFloat(dataVal.response[0].weekwisedata[1].weeklyActualProduction)
}
]
},
{
id: 'Quarter1p',
name: 'Planned Quantity',
data: [{
name: 'Week1',
y:parseFloat(dataVal.response[0].weekwisedata[0].weeklyPlannedProduction)
},
{
name: 'Week2',
y:parseFloat(dataVal.response[0].weekwisedata[1].weeklyPlannedProduction)
},
{
name: 'Week3',
y:parseFloat(dataVal.response[0].weekwisedata[2].weeklyPlannedProduction)
}
]
} ]
}
As you can see the above code,manually iam setting week number and values. iam grouping 13 weeks into quarter. can it be automated based on year?
I have the following
<div id="chart"></div>
<script src="js/flot/jquery.flot.js"></script>
<script src="js/flot/jquery.flot.tooltip.min.js"></script>
<script src="js/flot/jquery.flot.resize.js"></script>
var sessions = [
[1418706000000, 14813],
[1418792400000, 39580],
[1418878800000, 51193],
[1418965200000, 66700],
[1419051600000, 108737],
[1419138000000, 101081],
[1419224400000, 94449],
[1419310800000, 109039],
[1419397200000, 92329],
[1419483600000, 68942],
[1419570000000, 75391],
[1419656400000, 120016],
[1419742800000, 132495],
[1419829200000, 103469],
[1419915600000, 88940],
[1420002000000, 59938],
[1420088400000, 72359],
[1420174800000, 74663]
];
var users = [
[1418706000000, 2632],
[1418792400000, 9588],
[1418878800000, 9273],
[1418965200000, 10839],
[1419051600000, 14948],
[1419138000000, 11226],
[1419224400000, 13394],
[1419310800000, 10493],
[1419397200000, 8482],
[1419483600000, 2375],
[1419570000000, 5783],
[1419656400000, 10068],
[1419742800000, 8288],
[1419829200000, 5423],
[1419915600000, 4866],
[1420002000000, 1862],
[1420088400000, 5560],
[1420174800000, 1257]
];
function doPlot(position) {
$.plot($("#chart"), [{
data: sessions,
label: "Sessions"
}, {
data: revenue,
label: "Revenue",
yaxis: 2
}], {
xaxes: [{
mode: 'time'
}],
yaxes: [{
min: 0
}, {
alignTicksWithAxis: position == "right" ? 1 : null,
position: position
}],
legend: {
position: 'sw'
},
grid: {
hoverable: true
},
tooltip: true,
tooltipOpts: {
content: "%s for %x was %y",
xDateFormat: "%y-%0m-%0d",
onHover: function (flotItem, $tooltipEl) {
}
}
});
}
doPlot("right");
Thhis displays figures for both sessions and users on dates that there isn't even data for. The last date that there is data for is Dec 27th. Yet, this line graph shows data for up until Jan 2nd.
Here is a working example here
Any ideas?
According to your last data entry in each array element time = 1420174800000, so:
var date = new Date(1420174800000);
// output "Fri, 02 Jan 2015 05:00:00 GMT"
console.log(date.toGMTString());
I converted your data to dates:
date = new Date(sessions[i][0])
It contains dates between Dec 16 2014 and Jan 02 2015. You can see it in this fiddle.
When you fill your arrays, you should convert your dates to numbers simply with:
sessions[i] = [Number(date), value];
I'm not sure how you meant Date('D, M j'), I assume it's a string like "Date(month,day,year)". An example of converting this kinf of json to plottable data: in this other fiddle.
Actually, I reversed the day and month, but you get the idea. :)