Angular-Nvd3 dates and numbers do not match data

Angular-Nvd3 dates and numbers do not match data - javascript

I'm using Angular-Nvd3 to represent my sets of data, and I'm currently getting some weird results from my data. The dates and numbers in my data does not correspond to the dates and numbers that are shown on the graph.
My $scope.data contains this JSON-array:
http://www.jsoneditoronline.org/?id=654aba4a1a8f3fd7d31f75dd295da363
and my $scope.options look like this:
$scope.options = {
chart: {
type: 'cumulativeLineChart',
height: 450,
margin : {
top: 20,
right: 20,
bottom: 60,
left: 65
},
x: function(d){ return d[0]; },
y: function(d){ return d[1]; },
average: function(d) { return d.mean/100; },
color: d3.scale.category10().range(),
transitionDuration: 300,
useInteractiveGuideline: true,
clipVoronoi: false,
xAxis: {
axisLabel: 'X Axis',
tickFormat: function(d) {
return d3.time.format('%m/%d/%Y')(new Date(d))
},
showMaxMin: false,
staggerLabels: true
},
yAxis: {
axisLabel: 'Y Axis',
tickFormat: function(d){
return d3.format('')(d);
},
axisLabelDistance: 20
}
}
};
The problem is that my chart only shows dates from 1970, and the numbers are completely off:
I have no idea why the chart is showing both the wrong dates and numbers, please help me figuring this out.

Your values are actually in 1970.
You can see it by yourself:
var json = [
{
"key": "IBM",
"values": [
[
1112313600,
90.44
],
[
1124755200,
82.03
],
[
1137456000,
83
],
[
1149811200,
77.63
],
[
1162252800,
92.33
],
[
1175040000,
94.26
],
[
1187568000,
109.22
],
[
1200009600,
97.67
],
[
1212624000,
128.47
],
[
1225065600,
79.66
],
[
1237766400,
98.71
],
[
1250121600,
119.58
],
[
1262736000,
130
],
[
1275350400,
124.34
],
[
1287619200,
139.83
],
[
1300233600,
153
],
[
1312761600,
166.22
],
[
1325116800,
186.18
],
[
1337731200,
196.12
],
[
1350259200,
208.93
],
[
1363132800,
212.06
],
[
1375660800,
195.5
],
[
1388016000,
185.35
],
[
1400630400,
186.39
],
[
1413158400,
183.52
],
[
1425859200,
160.77
],
[
1438214400,
160.96
]
]
}
];
[].forEach.call(json[0].values, function(value) {
document.body.innerHTML += '<div>' + new Date(value[0]) + '</div>';
});

Related

ECharts make the XAxis proportional to its values

I need to update the xAxis of this chart to make it be proportional to its values:
Here is my chart
As you can see the A Section is as wide as the B section even if the difference in X values from start to finish is roughfully ten fold (0.01 in A, 0.1 in B).
I need the A section to be 1/10 of the B section. Is there an Echart a settings to achieve this?
Here's a codepen of my current situation:
https://codepen.io/dariooo512/pen/vYawBMb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Smoothed Line Chart - Apache ECharts Demo</title>
</head>
<body>
<div id="chart-container"></div>
<script src="https://fastly.jsdelivr.net/npm/echarts#5.4.1/dist/echarts.min.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
}
#chart-container {
position: relative;
height: 100vh;
overflow: hidden;
}
var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {};
var option;
const xData = [
0.0100000000000000,
0.0107977516232770,
0.0116591440117983,
0.0125892541179416,
0.0135935639087852,
0.0146779926762206,
0.0158489319246111,
0.0171132830416178,
0.0184784979742229,
0.0199526231496887,
0.0215443469003188,
0.0232630506715362,
0.0251188643150957,
0.0271227257933202,
0.0292864456462523,
0.0316227766016837,
0.0341454887383359,
0.0368694506451957,
0.0398107170553497,
0.0429866234708227,
0.0464158883361277,
0.0501187233627272,
0.0541169526546463,
0.0584341413373517,
0.0630957344480192,
0.0681292069057960,
0.0735642254459640,
0.0794328234724280,
0.0857695898590893,
0.0926118728128792,
0.0999999999999999,
0.1079775162327708,
0.1165914401179830,
0.1258925411794166,
0.1359356390878524,
0.1467799267622068,
0.1584893192461112,
0.1711328304161779,
0.1847849797422289,
0.1995262314968877,
0.2154434690031881,
0.2326305067153623,
0.2511886431509577,
0.2712272579332025,
0.2928644564625232,
0.3162277660168375,
0.3414548873833597,
]
const yData = [
0.163994337909158,
0.164355359005510,
0.164781529248110,
0.165290711360058,
0.165888614999721,
0.166599912595426,
0.167449496368629,
0.168470163071883,
0.169710786849251,
0.171197399817278,
0.172712533758993,
0.174671841558769,
0.176975558012239,
0.180294513617511,
0.184327422956864,
0.191100453431249,
0.200522213979933,
0.211754773758690,
0.216565431261549,
0.2505493351851847,
0.326466853585988,
0.347298734251199,
0.3523985766254678,
0.373650615601135,
0.311629700205303,
0.280092084112155,
0.250131726901599,
0.273316888213822,
0.266613651947510,
0.317070017440979,
0.400477619240458,
0.3590975138843978,
0.4310041008366142,
0.5090963720150549,
0.4907638864448018,
0.5406581161637817,
0.56051067203831806,
0.5071383683330877,
0.5355916724605659,
0.5355408618682007,
0.3839169258278131,
0.2773418659785273,
0.2949077335148602,
0.2394754641244239,
0.2036052621075644,
0.2106189314544600,
0.2395847208235534,
]
option = {
xAxis: {
type: 'category',
data: xData
},
yAxis: {
type: 'value'
},
series: [
{
data: yData,
type: 'line',
smooth: true
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);

Your xAxis is a category axis, which is not a good choice for what you have to do...
You should use a value axis instead:
const data = [
[ 0.0100000000000000, 0.163994337909158 ],
[ 0.0107977516232770, 0.164355359005510 ],
[ 0.0116591440117983, 0.164781529248110 ],
[ 0.0125892541179416, 0.165290711360058 ],
[ 0.0135935639087852, 0.165888614999721 ],
[ 0.0146779926762206, 0.166599912595426 ],
[ 0.0158489319246111, 0.167449496368629 ],
[ 0.0171132830416178, 0.168470163071883 ],
[ 0.0184784979742229, 0.169710786849251 ],
[ 0.0199526231496887, 0.171197399817278 ],
[ 0.0215443469003188, 0.172712533758993 ],
[ 0.0232630506715362, 0.174671841558769 ],
[ 0.0251188643150957, 0.176975558012239 ],
[ 0.0271227257933202, 0.180294513617511 ],
[ 0.0292864456462523, 0.184327422956864 ],
[ 0.0316227766016837, 0.191100453431249 ],
[ 0.0341454887383359, 0.200522213979933 ],
[ 0.0368694506451957, 0.211754773758690 ],
[ 0.0398107170553497, 0.216565431261549 ],
[ 0.0429866234708227, 0.2505493351851847 ],
[ 0.0464158883361277, 0.326466853585988 ],
[ 0.0501187233627272, 0.347298734251199 ],
[ 0.0541169526546463, 0.3523985766254678 ],
[ 0.0584341413373517, 0.373650615601135 ],
[ 0.0630957344480192, 0.311629700205303 ],
[ 0.0681292069057960, 0.280092084112155 ],
[ 0.0735642254459640, 0.250131726901599 ],
[ 0.0794328234724280, 0.273316888213822 ],
[ 0.0857695898590893, 0.266613651947510 ],
[ 0.0926118728128792, 0.317070017440979 ],
[ 0.0999999999999999, 0.400477619240458 ],
[ 0.1079775162327708, 0.3590975138843978 ],
[ 0.1165914401179830, 0.4310041008366142 ],
[ 0.1258925411794166, 0.5090963720150549 ],
[ 0.1359356390878524, 0.4907638864448018 ],
[ 0.1467799267622068, 0.5406581161637817 ],
[ 0.1584893192461112, 0.56051067203831806 ],
[ 0.1711328304161779, 0.5071383683330877 ],
[ 0.1847849797422289, 0.5355916724605659 ],
[ 0.1995262314968877, 0.5355408618682007 ],
[ 0.2154434690031881, 0.3839169258278131 ],
[ 0.2326305067153623, 0.2773418659785273 ],
[ 0.2511886431509577, 0.2949077335148602 ],
[ 0.2712272579332025, 0.2394754641244239 ],
[ 0.2928644564625232, 0.2036052621075644 ],
[ 0.3162277660168375, 0.2106189314544600 ],
[ 0.3414548873833597, 0.2395847208235534 ]
];
let option = {
xAxis: {
type: 'value'
},
yAxis: {
type: 'value'
},
series: [
{
data,
type: 'line',
smooth: true
}
]
};
let myChart = echarts.init(document.getElementById('chart-container'));
myChart.setOption(option);
#chart-container {
width 100vw;
height: 100vh;
}
<script src="https://fastly.jsdelivr.net/npm/echarts#5.4.1/dist/echarts.min.js"></script>
<div id="chart-container"></div>
Is it the expected result?
Take a look at the documentation: xAxis.type

Google spreadsheet API. Cannot specify axisPosition of a series

I want to specify the axis of a series. If i specify targetAxis to be "RIGHT_AXIS", it doesn't work..
The Axis-titles for LEFT_AXIS and RIGHT_AXIS are also not showing. Only the bottom one.
I want the graph to look like this:
But it ends up looking like this:
Here the red axis is at the bottom, because this column contains much lower numbers then the column with the numbers for the blue bars.
Someone who knows how i can solve this?
Here is my code:
{
addChart: {
chart: {
spec: {
title: "Graf - tibber",
basicChart: {
chartType: "COMBO",
axis: [
// X-AXIS
{
position: "BOTTOM_AXIS",
title: "TID",
},
// Y-AXIS LEFT
{
position: "LEFT_AXIS",
title: "FORBRUK(KWH)",
},
// X-AXIS RIGHT
{
position: "RIGHT_AXIS",
title: "PRIS",
},
],
legendPosition: "BOTTOM_LEGEND",
domains: [
{
domain: {
sourceRange: {
sources: [
{
sheetId: 0,
startRowIndex: 0,
endRowIndex: endIndex,
startColumnIndex: 0,
endColumnIndex: 1
}
]
}
}
}
],
series: [
{
series: {
sourceRange: {
sources: [
{
sheetId: 0,
startRowIndex: 0,
endRowIndex: endIndex,
startColumnIndex: 5,
endColumnIndex: 6,
},
],
},
},
targetAxis: "LEFT_AXIS",
},
{
series: {
sourceRange: {
sources: [
{
sheetId: 0,
startRowIndex: 0,
endRowIndex: endIndex,
startColumnIndex: 3,
endColumnIndex: 4,
},
],
},
},
targetAxis: "RIGHT_AXIS",
}
],
headerCount: 1,
},
},
position: {
newSheet: true,
},
},
},
},
],

Improved request
Disclaimer, there is a bug in the API for the right hand axis, see end of answer
{
"requests": [
{
"addChart": {
"chart": {
"spec": {
"title": "Graf - tibber",
"basicChart": {
"chartType": "COMBO",
"legendPosition": "BOTTOM_LEGEND",
"axis": [
{
"position": "BOTTOM_AXIS",
"title": "TID"
},
{
"position": "LEFT_AXIS",
"title": "FORBRUK(KWH)"
},
{
"position": "RIGHT_AXIS",
"title": "PRIS"
}
],
"domains": [
{
"domain": {
"sourceRange": {
"sources": [
{
"sheetId": 0,
"startRowIndex": 0,
"endRowIndex": 8,
"startColumnIndex": 0,
"endColumnIndex": 1
}
]
}
}
}
],
"series": [
{
"series": {
"sourceRange": {
"sources": [
{
"sheetId": 0,
"startRowIndex": 0,
"endRowIndex": 8,
"startColumnIndex": 1,
"endColumnIndex": 2
}
]
}
},
"targetAxis": "LEFT_AXIS",
"type": "COLUMN"
},
{
"series": {
"sourceRange": {
"sources": [
{
"sheetId": 0,
"startRowIndex": 0,
"endRowIndex": 8,
"startColumnIndex": 2,
"endColumnIndex": 3
}
]
}
},
"targetAxis": "RIGHT_AXIS",
"type": "LINE"
}
],
"headerCount": 1
}
},
"position": {
"newSheet": true
}
}
}
}
]
}
Note that the row and column indices I changed because I was working with some sample data. "type": "COLUMN" and "type": "LINE" entries in the series. In fact, for me, I would get 400 bad request without it. This produces a chart with BOTTOM_AXIS and LEFT_AXIS but not RIGHT_AXIS (see below for info on that). The chart also has two different scales so the line doesn't get overshadowed by the columns.
Right Axis
Unfortunately this is a current bug with the API: https://issuetracker.google.com/issues/153528225 - be sure to mark it with a ☆ to let Google know that this affects you.
Reference
Sample Chart Requests - I used the sample to navigate the documentation to find out if there were any attributes missing.

Json data for apexcharts

I have some problems rendering some data from a JSON in my apexchart series.
Here is the example of my chart with the data that I want to be in my JSON, and i don't know how to write it.
var _seed = 42;
Math.random = function() {
_seed = _seed * 16807 % 2147483647;
return (_seed - 1) / 2147483646;
};
var options = {
series: [{
name: "Q",
data: [0, 4800, 9500, null],
},
{
name: "Q - 1",
data: [0, 6500, 12000, 16000]
},{
name: "Q Target",
data: [15500, 15500, 15500, 15500]
},
],
chart: {
height: 350,
type: 'line',
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
title: {
text: 'Clicks',
align: 'left'
},
grid: {
row: {
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
},
xaxis: {
categories: [' ', 'Month1', 'Month2', 'Month3'],
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
#chart {
max-width: 450px;
margin: 35px auto;
}
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill#8/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill"></script>
<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise#4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise#4/dist/es6-promise.auto.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>
If someone could give me a hint, is kindly appreciated.

The JSON looks like this , for retrieving data for the apexchart
{
"data_clicks":[
{
"name":"Q",
"data":[
{
"x":" ",
"y":0
},
{
"x":"Month1",
"y":2400
},
{
"x":"Month2",
"y":5200
},
{
"x":"Month3",
"y":null
}
]
},
{
"name":"Q - 1",
"data":[
{
"x":" ",
"y":0
},
{
"x":"Month1",
"y":1800
},
{
"x":"Month2",
"y":7150
},
{
"x":"Month3",
"y":10200
}
]
},
{
"name":"Q Target",
"data":[
{
"x":" ",
"y":11000
},
{
"x":"Month1",
"y":11000
},
{
"x":"Month2",
"y":11000
},
{
"x":"Month3",
"y":11000
}
]
}
],

append API data into an array

I need to display apex chart (Brush Chart). I am trying to append data from API into Array. i have given code below and also API data.
I used console to check that the data is coming correctly from API but not appending to series array
<div id="app" style="background:white">
<div id="chart1">
<apexchart type=line height=230 :options="chartOptionsArea" :series="series" />
</div>
<div id="chart2">
<apexchart type=area height=130 :options="chartOptionsBrush" :series="series" />
</div>
</div>
below is my VUEjs code
data() {
return {
series: [{
data: this.generateDayWiseTimeSeries(new Date('01 Jan
2014 ').getTime(),185, {
min: 30,
max: 90
})
}],
chartOptionsArea: {
chart: {
id: 'chartArea',
toolbar: {
autoSelected: 'pan',
show: false
}
},
colors: ['#546E7A'],
stroke: {
width: 3
},
dataLabels: {
enabled: false
},
fill: {
opacity: 1,
},
markers: {
size: 0
},
xaxis: {
type: 'datetime'
}
},
chartOptionsBrush: {
chart: {
id: 'chartBrush',
brush: {
target: 'chartArea',
enabled: true
},
selection: {
enabled: true,
xaxis: {
min: new Date('01 Jan 2014').getTime(),
max: new Date('09 Jan 2014').getTime()
}
},
},
colors: ['#008FFB'],
fill: {
type: 'gradient',
gradient: {
opacityFrom: 0.91,
opacityTo: 0.1,
}
},
xaxis: {
type: 'datetime',
tooltip: {
enabled: false
}
},
yaxis: {
tickAmount: 2
}
}
}
}
below is Function
generateDayWiseTimeSeries: function() {
var i = 0;
var self = this;
var series;
axios
.get("http://172.31.0.114:5000/api/eco/BNG-JAY-136-001")
.then(function(res) {
self.series = res.data; //not working
})
return series;
}
API data
[
[
"2019-5-23",
0
],
[
"2019-5-24",
0
],
[
"2019-5-25",
0
],
[
"2019-5-26",
0
],
[
"2019-5-27",
0
],
[
"2019-5-28",
0
],
[
"2019-5-29",
0
],
[
"2019-5-30",
0
],
[
"2019-5-31",
0
]
]

You can use updateSeries method or you can directly update the value of series. Please check below code
Code Snippet
generateDayWiseTimeSeries: function() {
var me = this;
axios.get("data.json")
.then(function(res) {
me.series[0].data = res.data;
//OR you can use updateSeries method
/* me.$children[0].updateSeries([{
data: res.data
}]);*/
});
return [];
}
You can check here with working fiddle.

generateDayWiseTimeSeries function return undefined variable => series.
Assign returned data to series instead of self.series.

Simplify JavaScript array variable

I'm looking to simplify this code. Any way to it so? Spring MVC + Apex Charts
var d = /*[[${s0}]]*/ null`; <-- It is sent via the Spring Framework. Basically represents datetime(in millis) at `d[0]`, `d[3]`,... Temperature at `d[1]`, `d[4]`,... and Humidity at `d[2]`, `d[5]`,...
<script type="text/javascript" th:inline="javascript">
var d = /*[[${s0}]]*/ null;
var options = {
chart: {
type: 'area',
height: 300
},
series: [
{
name: 'Temperature',
data: [
[d[0], d[1]],
[d[3], d[4]],
[d[6], d[7]],
[d[9], d[10]],
[d[12], d[13]],
[d[15], d[16]],
[d[18], d[19]],
[d[21], d[22]],
[d[24], d[25]],
[d[27], d[28]],
[d[30], d[31]],
[d[33], d[34]],
[d[36], d[37]],
[d[39], d[40]],
[d[42], d[43]],
[d[45], d[46]],
[d[48], d[49]],
[d[51], d[52]],
[d[54], d[55]],
[d[57], d[58]],
[d[60], d[61]],
[d[63], d[64]],
[d[66], d[67]],
[d[69], d[70]]
]
},
{
name: "Humidity",
data: [
[d[0], d[2]],
[d[3], d[5]],
[d[6], d[8]],
[d[9], d[11]],
[d[12], d[14]],
[d[15], d[17]],
[d[18], d[20]],
[d[21], d[23]],
[d[24], d[26]],
[d[27], d[29]],
[d[30], d[32]],
[d[33], d[35]],
[d[36], d[38]],
[d[39], d[41]],
[d[42], d[44]],
[d[45], d[47]],
[d[48], d[50]],
[d[51], d[53]],
[d[54], d[56]],
[d[57], d[59]],
[d[60], d[62]],
[d[63], d[65]],
[d[66], d[68]],
[d[69], d[71]]
]
}
],
xaxis: {
type: 'datetime'
},
yaxis: [
{
axisTicks: {
show: true
},
axisBorder: {
show: true,
},
title: {
text: "Temperature"
}
}, {
min: 0,
max: 100,
opposite: true,
axisTicks: {
show: true
},
axisBorder: {
show: true,
},
title: {
text: "Humidity"
}
}
],
legend: {
position: 'top',
horizontalAlign: 'center'
},
tooltip: {
x: {
format: 'HH:mm dd/MM/yy'
},
}
}
var chart = new ApexCharts(document.querySelector("#chart0"), options);
chart.render();
</script>
I just need to simplify sending data via d[0], d[1] etc. Is there any kind of loop or anything else I can use?

You could take a function which takes the data and a pattern for the wanted elements and an offset for increment for the next row.
function mapByPattern(data, pattern, offset) {
var result = [], i = 0;
while (i < data.length) {
result.push(pattern.map(j => data[i + j]));
i += offset;
}
return result;
}
var data = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
result = { series: [
{ name: 'Temperature', data: mapByPattern(data, [0, 1], 3) },
{ name: "Humidity", data: mapByPattern(data, [0, 2], 3) }
]};
console.log(result);

Thank You, Nina. Code code didn't work exactly as i wanted but was so helpful to fix my own. Thanks alot! Here's some fixed code :)
var data = /*[[${s0}]]*/ null;
function mapByPattern(data, pattern, offset) {
var result = [], i = 0;
while (i < data.length) {
result.push(pattern.map(j => data[i + j]));
i += offset;
}
return result;
}
var options = {
chart: {
type: 'area',
height: 300
},
series: [
{
name: 'Temperature',
data: mapByPattern(data, [0, 1], 3)
},
{
name: "Humidity",
data: mapByPattern(data, [0, 2], 3)
}
],
xaxis: {
type: 'datetime'
},
yaxis: [
{
axisTicks: {
show: true
},
axisBorder: {
show: true,
},
title: {
text: "Temperature"
}
}, {
min: 0,
max: 100,
opposite: true,
axisTicks: {
show: true
},
axisBorder: {
show: true,
},
title: {
text: "Humidity"
}
}
],
legend: {
position: 'top',
horizontalAlign: 'center'
},
tooltip: {
x: {
format: 'HH:mm dd/MM/yy'
},
}
}
var chart = new ApexCharts(document.querySelector("#chart0"), options);
chart.render();

Develop Reference

JavaScript is the programming language of the Web.

Angular-Nvd3 dates and numbers do not match data - javascript

Related

ECharts make the XAxis proportional to its values

Google spreadsheet API. Cannot specify axisPosition of a series

Json data for apexcharts

append API data into an array

Simplify JavaScript array variable

Categories

Resources