my json data looks like this:
[
[1362027751000, 1362027781000, 1362027811000, 1362027841000, 1362027871000, 1362027901000, 1362027931000, 1362027961000, 1362027991000, 1362028021000 ],
[ 66, 72, 69, 72, 69, 68, 71, 73, 63, 57 ],
[ 50, 5, 67, 72, 34, 100, 10, 100, 23, 56 ]
]
the first row is date in epoch time, the second is cpu utilization and the third is the memory utilization. I would like to create time series chart, date being on xaxis and CPU and mmeory data on yaxis with different lines. How would I accomplish this given the data provided with the json external file. I see examples where that the in the javascript but this is really not realistics. Any help is greatly appriciated.
I attempted to the following where I wanted to split cpu and memory. I am not getting any results back, empty page. Is this the way to address this or there are other ways to draw multiple variables in one chart?
my javascript looks like this:
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'area'
},
xAxis: {
type: 'datetime'
},
//series: [{}]
series: [{{
type: 'spline',
name: 'CPU',
data: cpu
}, {
type: 'spline',
name: 'memory',
data: memory
}}]
};
$.getJSON('data.json', function(data) {
options.series[0].data = data;
var cpu = [];
var memory=[];
for(i=0; i< data.length, i++) {
for(j=0; j<data[i].length; j++){
alert(data[i].length);
cpu.push([
data[i][j], // the date
data[1][j] // the cpu
]);
memory.push([
data[i][j], // the date
data[2][j] // the volume
])
}
}
var chart = new Highcharts.Chart(options);
//alert(JSON.stringify(data, null, 4));
});
});
</script>
the charts does not look right. It looks like xaxis and yaxix are both reporting the date value. Is there a way to set the yaxis values?
My preference is to send in the data for a series as [x,y] pairs. So your data would look like:
[
[1362027751000, 66], [1362027781000, 72], [1362027811000, 69], [1362027841000, 72], [1362027871000, 69], [1362027901000, 68], [1362027931000, 71], [1362027961000, 73], [1362027991000, 63], [1362028021000, 57 ]
]
and:
[
[1362027751000, 50], [1362027781000, 5], [1362027811000, 67], [1362027841000, 72], [1362027871000, 34], [1362027901000, 100], [1362027931000, 10], [1362027961000, 100], [1362027991000, 23], [1362028021000, 23]
]
You would need to send this in as 2 different series.data blocks.
for(i=0; i< data.length-2; i++) {
for(j=0; j<data[i].length; j++){
cpu.push([
data[i][j], // the date
data[1][j] // the cpu
]);
memory.push([
data[i][j], // the date
data[2][j] // the volume
])
}
}
Related
I have been working on a chart using charts.js that show workouts duration each day. The y-axis should have dates and the x-axis should have the duration of the Series,
Here is my dataset:
public lineChartData: ChartDataSets[] = [
{ data: [65, 19, 40, 81, 56, 5, 40], label: 'Series A' },
{ data: [95, 69, 40, 81, 56, 96, 40], label: 'Series B' },
{ data: [65, 74, 40, 41, 54, 55, 40], label: 'Series C' }
];
public lineChartLabels: Label[] = ['2020/05/20', '2020/05/21', '2020/05/22', '2020/05/23', '2020/05/24', '2020/05/25'];
So far I am unable to find any implementation-related it, it would be very helpful if anyone can help me out on this.
I have tried the stackblitz with horizontal with a bar chart, we need to same like in LINE CHART
Here is stackblitz link
You need to use a scatter chart and define the option showLine: true on each dataset. Further you have to define the y-axis as a time cartesian axis as follows.
yAxes: [
{
type: "time",
time: {
parser: "YYYY/MM/DD",
unit: "day",
displayFormats: {
day: "YYYY/MM/DD"
}
},
ticks: {
reverse: true
}
}
]
Since the scatter chart expects the data in point format, you have to generate appropriate data structure in the ngOnInit method as follows:
ngOnInit() {
this.lineChartData.forEach(ds => {
ds.data = ds.data.map((v, i) => ({ x: v, y: this.lineChartLabels[i] }));
});
}
Also remove [labels]="lineChartLabels" from the canvas, this is not needed when defining the data in point format.
Unfortunately however ng2-charts can't cope with this configuration and displays wrong colors for the data points and the legend labels. Therefore I also had to remove [colors]="lineChartColors" from the canvas and define the colors on the datasets.
You'll probably have to get rid of this wrapper library and use Chart.js directly in order to obtain the expected result.
Please take a look at your amended code in this StackBlitz.
The code below renders only the last chart from JSON. I want it to append every chart from JSON to a div with a class of reportdiv.
Markup
<div class="reportdiv>
</div>
json
{reportvals:
{
labels:["Apple 25%", "Banana 15%", "Mango 10%", "Orange 35%", "Avocado15% "],
series: [25, 15, 10, 35, 15]
},
{
labels:["Apple 15%", "Banana 25%", "Mango 35%", "Orange 10%", "Avocado15% "],
series: [15, 25, 35, 10, 15]
}
}
JS
for (reportindex = 0; reportindex < settings.json.reportvals.length; reportindex++){
new Chartist.Pie('.reportdiv', {
labels: settings.json.reportvals[reportindex].labels,
series: settings.json.reportvals[reportindex].series
}, options);
}
How can I make my code append all charts to the div?
I can use an ID selector, but I am not sure count of charts are received from the JSON.
I tried to plot JSON data using JSON data.JSFiddle
Below is my JSON data in JavaScript.
var JSON = [
{ name:"Maintenance",
data:[[2017-06-26,1.5],
[2017-07-03,5.2],
[2017-07-10,1.65],
[2017-07-17,2.5],
[2017-07-24,1.5]
]
},
{ name:"Others",
data:[[2017-06-26,1.5],
[2017-07-03,1.5],
[2017-07-10,1.5],
[2017-07-17,1.25],
[2017-07-24,1.5]
]
},
{ name:"Project",
data:[[2017-06-26,6.5],
[2017-07-03,6.1],
[2017-07-10,6.7],
[2017-07-17,7],
[2017-07-24,6.5]
]
},
{ name:"Training",
data:[[2017-06-26,0],
[2017-07-03,0.75],
[2017-07-10,1.9],
[2017-07-17,0.5],
[2017-07-24,1]
]
},
{ name:"Day-Off",
data:[[2017-06-26,0],
[2017-07-03,0],
[2017-07-10,0],
[2017-07-17,0],
[2017-07-24,1]
]
}]
However, the chart looks strange. For every series, there is an additional line connecting the start point and the end point. In addition, the x-axis value is not the date that I want.
//Draw chart
Highcharts.chart('trend_bl', {
title: {
text: 'Trend by Business Lines'
},
yAxis: {
title: {
text: ' Resource Allocation'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
series : JSON,
});
Can anyone tell me why this would happen? In addition, I would also like to know the proper JSON data structure for line chart and pie chart in Highchart.
Your date in JSON should be string. This date should be converted to millisecond.
var JSON = [{
name: "Maintenance",
data: [
['2017-06-26', 1.5],
['2017-07-03', 5.2],
['2017-07-10', 1.65],
['2017-07-17', 2.5],
['2017-07-24', 1.5]
]
}, {
name: "Others",
data: [
['2017-06-26', 1.5],
['2017-07-03', 1.5],
['2017-07-10', 1.5],
['2017-07-17', 1.25],
['2017-07-24', 1.5]
]
}, {
name: "Project",
data: [
['2017-06-26', 6.5],
['2017-07-03', 6.1],
['2017-07-10', 6.7],
['2017-07-17', 7],
['2017-07-24', 6.5]
]
}, {
name: "Training",
data: [
['2017-06-26', 0],
['2017-07-03', 0.75],
['2017-07-10', 1.9],
['2017-07-17', 0.5],
['2017-07-24', 1]
]
}, {
name: "Day-Off",
data: [
['2017-06-26', 0],
['2017-07-03', 0],
['2017-07-10', 0],
['2017-07-17', 0],
['2017-07-24', 1]
]
}];
//updating jsons date to millisecond
Object.keys(JSON).map(function(key, index) {
JSON[key].data.map(function(value, keys, index) {
JSON[key].data[keys][0]=new Date(value[0]).getTime()
})
});
//console.log(JSON)
Fiddle Demo
First of all, you have made a mistake in your demo. Instead of data: JSON it should be series: JSON. Secondly, put your dates inside of strings, otherwise they will be treated as numbers (e.g. 2017 - 06 - 26 = 1985).
Example:
http://jsfiddle.net/3yumsp8m/
I was trying to get the label and data value from the following
var barChartData = {
labels: Months,
datasets: [{
label: 'Dataset 1',
backgroundColor: "#09a",
data: [5, 10, 15, 20, 25, 30, 35]
}]
};
I tried using alert(JSON.stringify(barChartData.datasets.data)); but I got output as undefined. Please help me to find out this .
Like Sachin K wrote in the comment.
You forget that datasets is an array containing an object.
Therefor you need
alert(JSON.stringify(barChartData.datasets[0].data))
With the [0] you specify that you want the value from the first element in the array (array's are zero based)
Try this approach..
var barChartData = {
labels: 'Months',
datasets: [{
label: 'Dataset 1',
backgroundColor: "#09a",
data: [5, 10, 15, 20, 25, 30, 35]
}]
};
//For multiple dataset
var data = []; label = [];
barChartData.datasets.map(function(dt) {
data.push(dt.data);
label.push(dt.label);
})
//Single datasets
var data1 = barChartData.datasets[0].data;
var label1 = barChartData.datasets[0].label;
console.log(data, label, data1, label1);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I am attempting to use a different symbol for one of my data series on my flot graph as it is at a much larger scale then the rest of the data. I am using this example as reference: http://www.flotcharts.org/flot/examples/symbols/index.html
Here is what I have so far:
My includes:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.flot.js"></script>
<script type="text/javascript" src="jquery.flot.symbol.js"></script>
I then configure my flot options like so:
var options = {
grid: {hoverable : true},
xaxis: { mode: "time", timeformat: "%H:%M", tickLength: 1},
series: { points : { show: true } }
};
I then actually plot the data:
$.plot('#placeholder', [{
data: my_data,
lines: { show : true},
points: { symbol: "square"},
color: '#CB4B4B',
label: 'My Data'
}], options);
}
However, flot is still graphing the points as the default circle. I get no error messages in firebug and I have even tried adding a logging message in the jquery.flot.symbol.js library itself to see if the "square" handler is even being called like so:
var handlers = {
square: function (ctx, x, y, radius, shadow) {
console.log("Square handler was called");
// pi * r^2 = (2s)^2 => s = r * sqrt(pi)/2
var size = radius * Math.sqrt(Math.PI) / 2;
ctx.rect(x - size, y - size, size + size, size + size);
},
I am getting no console messages so I am assuming the handler is not getting called correctly. Am I missing something here?
EDIT:
Example of data I am trying to plot:
var d1 = [
[1364342400000, 208],
[1364346000000, 107],
[1364353200000, 42],
[1364371200000, 1680],
[1364360400000, 52],
[1364349600000, 67],
[1364385600000, 1118],
[1364367600000, 163],
[1364382000000, 1359],
[1364378400000, 1468],
[1364389200000, 1023],
[1364356800000, 63],
[1364374800000, 1601],
[1364392800000, 556],
[1364364000000, 84],
],
d2 = [
[1364342400000, 86],
[1364346000000, 42],
[1364353200000, 13],
[1364371200000, 458],
[1364360400000, 10],
[1364349600000, 22],
[1364385600000, 453],
[1364367600000, 45],
[1364382000000, 369],
[1364378400000, 379],
[1364389200000, 358],
[1364356800000, 17],
[1364374800000, 471],
[1364392800000, 147],
[1364364000000, 16],
],
d3 = [
[1364342400000, 7],
[1364346000000, 5],
[1364382000000, 11709],
[1364371200000, 58336],
[1364360400000, 1],
[1364349600000, 1],
[1364367600000, 2],
[1364389200000, 1191],
[1364378400000, 9085],
[1364385600000, 4688],
[1364374800000, 9386],
[1364392800000, 1140],
[1364364000000, 1],
];
I have also edited my options parameter and how the plot function is called:
var options = {
grid: {hoverable : true},
xaxis: { mode: "time", timeformat: "%H:%M", tickLength: 1}
};
$.plot("#placeholder", [{
data: d1,
lines: { show : true },
points: { show: true},
color: '#EDC240',
label: "d1"
}, {
data: d2,
lines: { show : true },
points: { show : true},
color: '#AFD8F8',
label: "d2"
}, {
data: d3,
yaxis: 2,
lines: { show : true},
points: { show: true, symbol: "square"},
color: '#CB4B4B',
label: "d3"
}], options);
I am also sure that the symbol library is being included because I have added some logging itself to the library and that is showing up fine.
I see no issue with what you've done. I made a quick working example here: http://jsfiddle.net/ryleyb/shLtU/1/
I would guess that you haven't included the symbol library (even though you say you have).
Or show your data, might somehow be an issue there (doubtful?).
This is the full flot code I ran to make a working example (plus including flot and the symbol library):
$.plot('#placeholder', [{
data: [
[1, 1],
[2, 3],
[4, 4],
[5, 9]
],
lines: {
show: true
},
points: {
show: true,
symbol: "square"
},
color: '#CB4B4B',
label: 'My Data'
}]);