Develop Reference

Looping through data and passing it to a chart

I have an array of data that I'm using to plot a Line Chart. I'm using ApexCharts.
let testData = [
{
cell_id: 5833307,
datetime: ["2019-05-07 11:28:16.406795+03", "2019-05-07 11:28:38.764628+03", "2019-05-07 12:18:38.21369+03", "2019-05-07 12:33:47.889552+03", "2019-05-08 08:45:51.154047+03"],
rsrq: ["108", "108", "108", "108", "109"]
},
{
cell_id: 2656007,
datetime: ["2019-07-23 15:29:16.572813+03", "2019-07-23 15:29:16.71938+03", "2019-07-23 15:29:16.781606+03", "2019-07-23 15:29:50.375931+03", "2019-07-23 15:30:01.902013+03"],
rsrq: ["120", "119", "116", "134", "114"]
}
];
let datasetValue = [];
for( let x=0; x<testData.length; x++ )
{
datasetValue =
{
chart: {
height: 380,
width: "100%",
type: "line"
},
stroke: {
curve: 'smooth',
width: 1.5,
},
markers: {
size: 4,
},
legend: {
show: true,
position: 'top'
},
series: [
{
name: testData[x].cell_id,
data: testData[x].rsrq
}
],
xaxis: {
categories: testData[x].datetime,
title: {
text: "Date"
}
},
yaxis: {
title: {
text: "RSSI"
}
}
}
}
var chart = new ApexCharts(document.querySelector("#signal"), datasetValue);
chart.render();
<div id="signal"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
So I take my JSON array, loop it in a for loop to obtain my datasets. I define an array variable datasetValue which i assign the looped data and pass it to my chart instance: new ApexCharts(document.querySelector("#rssi-signal"), datasetValue);
What is happening is only the last array object is being passed meaning there's something I'm missing/not passing to get all my data.

Restructure the testData by grouping series and categories
let series = [];
let categories = [];
for (let x = 0; x < testData.length; x++) {
series.push({
name: testData[x].cell_id,
data: testData[x].rsrq
});
categories.concat(testData[x].datetime);
}
let testData = [{
cell_id: 5833307,
datetime: ["2019-05-07 11:28:16.406795+03", "2019-05-07 11:28:38.764628+03", "2019-05-07 12:18:38.21369+03", "2019-05-07 12:33:47.889552+03", "2019-05-08 08:45:51.154047+03"],
rsrq: ["108", "108", "108", "108", "109"]
},
{
cell_id: 2656007,
datetime: ["2019-07-23 15:29:16.572813+03", "2019-07-23 15:29:16.71938+03", "2019-07-23 15:29:16.781606+03", "2019-07-23 15:29:50.375931+03", "2019-07-23 15:30:01.902013+03"],
rsrq: ["120", "119", "116", "134", "114"]
}
];
let series = [];
let categories = [];
for (let x = 0; x < testData.length; x++) {
series.push({
name: testData[x].cell_id,
data: testData[x].rsrq
});
categories = categories.concat(testData[x].datetime);
}
var chart = new ApexCharts(document.querySelector("#signal"), {
chart: {
height: 380,
width: "100%",
type: "line"
},
stroke: {
curve: 'smooth',
width: 1.5,
},
markers: {
size: 4,
},
legend: {
show: true,
position: 'top'
},
series: series,
xaxis: {
categories: categories,
title: {
text: "Date"
}
},
yaxis: {
title: {
text: "RSSI"
}
}
});
chart.render();
<div id="signal"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

Since you are declaring an array outside the forloop
let datasetValue = {
chart: {
height: 380,
width: "100%",
type: "line"
},
stroke: {
curve: 'smooth',
width: 1.5,
},
markers: {
size: 4,
},
legend: {
show: true,
position: 'top'
},
series: [],
xaxis: {
categories: [],
title: {
text: "Date"
}
},
yaxis: {
title: {
text: "RSSI"
}
}
};
Inside for loop you should do
datasetValue.series.push(
{
name: testData[x].cell_id,
data: testData[x].rsrq
});
datasetValue.xaxis.categories.push(testData[x].datetime);
You should push the value inside the array instead of reassigning it in each iteration

The first mistake you are trying to do is defining the "datasetValue" as an array variable.
datasetValue = yourdata; //wrong in case of pushing data into array
You are trying to assign an object to array variable that contains only last results due to looping and assignment.
Instead, use push method of array to push the data into an array.
datasetValue.push(yourdata); //correct way to push data to array
So, there is no use to define "datasetValue" as array.
To achieve your objective you can apply loop with following
var datasetValue;
var series = [];
var categories = [];
for(let x=0; x<testData.length;x++) {
series.push({
name: testData[x].cell_id,
data: testData[x].rsrq
});
categories.concat(testData[x].datetime);
}
datasetValue = {
chart: {
height: 380,
width: "100%",
type: "line"
},
stroke: {
curve: 'smooth',
width: 1.5,
},
markers: {
size: 4,
},
legend: {
show: true,
position: 'top'
},
series,
xaxis: {
categories,
title: {
text: "Date"
}
},
yaxis: {
title: {
text: "RSSI"
}
}
};
var chart = new ApexCharts(document.querySelector("#signal"), datasetValue);
chart.render();

I move your for loop after datasetValue definition to add only series to it, and also change xaxis
for( let x=0; x<testData.length; x++ )
{
datasetValue.series.push({
name: testData[x].cell_id,
data: testData[x].rsrq
})
}
let testData = [
{
cell_id: 5833307,
datetime: ["2019-05-07 11:28:16.406795+03", "2019-05-07 11:28:38.764628+03", "2019-05-07 12:18:38.21369+03", "2019-05-07 12:33:47.889552+03", "2019-05-08 08:45:51.154047+03"],
rsrq: ["108", "108", "108", "108", "109"]
},
{
cell_id: 2656007,
datetime: ["2019-07-23 15:29:16.572813+03", "2019-07-23 15:29:16.71938+03", "2019-07-23 15:29:16.781606+03", "2019-07-23 15:29:50.375931+03", "2019-07-23 15:30:01.902013+03"],
rsrq: ["120", "119", "116", "134", "114"]
}
];
let datasetValue =
{
chart: {
height: 380,
width: "100%",
type: "line"
},
stroke: {
curve: 'smooth',
width: 1.5,
},
markers: {
size: 4,
},
legend: {
show: true,
position: 'top'
},
series: [
],
xaxis: {
categories: testData[0].datetime,
title: {
text: "Date"
}
},
yaxis: {
title: {
text: "RSSI"
}
}
}
for( let x=0; x<testData.length; x++ )
{
datasetValue.series.push({
name: testData[x].cell_id,
data: testData[x].rsrq
})
}
var chart = new ApexCharts(document.querySelector("#signal"), datasetValue);
chart.render();
<div id="signal"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

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();

apply new theme without reloading the charts in highcharts

Can I apply theme without reloading the whole chart. Can I push the themes settings within the chart code? In highcharts site all examples are single theme based. Here is my code
$(function() {
$.getJSON('http://api-sandbox.oanda.com/v1/candles?instrument=EUR_USD&candleFormat=midpoint&granularity=W', function(data) {
// create the chart
var onadata =[];
var yData=[];
var type='line';
var datalen=data.candles.length;
var all_points= [];
var all_str="";
for(var i=0; i<datalen;i++)
{
var each=[Date._parse(data.candles[i].time), data.candles[i].openMid, data.candles[i].highMid, data.candles[i].lowMid, data.candles[i].closeMid]
onadata.push(each);
yData.push(data.candles[i].closeMid);
}
$( "#change_theme" ).on("change", function() {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
//alert(valueSelected);
if(valueSelected=='default.js')
{
location.reload();
}
else{ $.getScript('js/themes/'+valueSelected, function() {
//alert('Load was performed.');
chart();
});
}
});
chart();
function chart()
{
$('#container').highcharts('StockChart', {
credits: {
enabled : 0
},
rangeSelector : {
buttons: [{
type: 'month',
count: 1,
text: '1M'
}, {
type: 'month',
count: 3,
text: '3M'
},{
type: 'month',
count: 6,
text: '6M'
},{
type: 'all',
text: 'All'
}],
selected:3
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
title : {
text : 'Stock Price'
},
xAxis :{
minRange : 3600000
},
yAxis : [{
offset: 0,
ordinal: false,
height:280,
labels: {
format: '{value:.5f}'
}
}],
chart: {
events: {
click: function(event) {
var x1=event.xAxis[0].value;
var x2 =this.xAxis[0].toPixels(x1);
var y1=event.yAxis[0].value;
var y2 =this.yAxis[0].toPixels(y1);
selected_point='['+x1+','+y1+']';
all_points.push(selected_point);
all_str=all_points.toString();
if(all_points.length>1)
{
this.addSeries({
type : 'line',
name : 'Trendline',
id: 'trend',
data: JSON.parse("[" + all_str + "]"),
color:'#'+(Math.random()*0xEEEEEE<<0).toString(16),
marker:{enabled:true}
});
}
if(all_points.length==2)
{
all_points=[];
}
}
}
},
series : [{
//allowPointSelect : true,
type : type,
name : 'Stock Price',
id: 'primary',
data : onadata,
tooltip: {
valueDecimals: 5,
crosshairs: true,
shared: true
},
dataGrouping : {
units : [
[
'hour',
[1, 2, 3, 4, 6, 8, 12]
], [
'day',
[1]
], [
'week',
[1]
], [
'month',
[1, 3, 6]
], [
'year',
[1]
]
]
}
},
]
});
}
});
});
and this is my js fiddle
Please help. Thanks in advance.

This is possible if you're using modern browsers that support CSS variables.
Highcharts.theme = {
colors: [
'var(--color1)',
'var(--color2)',
'var(--color3)',
'var(--color4)',
'var(--color5)',
'var(--color6)',
]
}
Highcharts.setOptions(Highcharts.theme);
function setTheme(themeName) {
// remove theme-* classes from body
removeClasses = Array.from(document.body.classList).filter(s => s.startsWith('theme-'));
document.body.classList.remove(...removeClasses)
if (themeName) {
document.body.classList.add('theme-' + themeName);
}
}
CSS
body {
--color1: #e00;
--color2: #b00;
--color3: #900;
--color4: #600;
--color5: #300;
--color6: #000;
}
body.theme-dark {
--color1: #555;
--color2: #444;
--color3: #333;
--color4: #222;
--color5: #111;
--color6: #000;
}
body.theme-retro {
--color1: #0f0;
--color2: #ff0;
--color3: #0ff;
--color4: #0a0;
--color5: #aa0;
--color6: #00a;
}

Unfortunately it is not possible, so you need to destroy and create new chart.

I want joint.js library to read my JSON and display it as a cell: rect and circle

I have a json data structure like this for example :
var json1 = {
"places": [ { "id":0, "x":0.0, "y":0.0, "width":10.0, "height":10.0 },
{ "id":1, "x":50.0, "y":0, "width":10.0, "height":10.0 },
{ "id":2, "x":0.0, "y":30.0, "width":10.0, "height":10.0 },
{ "id":3, "x":50.0, "y":30.0, "width":10.0, "height":10.0 } ],
"transitions": [ { "id":0, "x":20.0, "y":20.0, "width":20.0, "height":10.0, "label":"Hello" } ],
"ptlinks": [ { "src":0, "dst":0, "expr":"x=0" },
{ "src":1, "dst":0, "expr":"y=0" } ],
"tplinks": [ { "src":0, "dst":1 },
{ "src":0, "dst":3 } ],
"name"": "Client"
}
I want to use these data to draw a graph with element transition as a rectangle and place as a circle with the links ....
<script language="javascript">
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#main_petri'),
width: 960,
height: 500,
model: graph
});
var rect = new joint.shapes.basic.Rect({
position: { x: 100, y: 30 },
size: { width: 100, height: 30 },
attrs: { rect: { fill: '#FFFFFF' }, text: { text: '#', fill: '#000000' } }
});
var rect2 = rect.clone();
rect2.translate(0,50);
var link = new joint.dia.Link({
source: { id: rect.id },
target: { id: rect2.id }
});
graph.addCells([rect, rect2, link]);
How can I use JSON (position, size ...) into jointjs ?

You can just loop over your places/transitions and links and create JointJS elements/links. Something like:
_.each(json1.places, function(p) {
graph.addCell(new joint.shapes.pn.Place({
id: 'place' + p.id,
position: { x: p.x, y: p.y },
size: { width: p.width, height: p.height }
}));
});
_.each(json1.transitions, function(t) {
graph.addCell(new joint.shapes.pn.Transition({
id: 'transition' + t.id,
position: { x: t.x, y: t.y },
size: { width: t.width, height: t.height },
attrs: { '.label': { text: t.label } }
}));
});
_.each(json1.ptlinks, function(l) {
graph.addCell(new joint.dia.Link({
source: { id: 'place' + l.src },
target: { id: 'transition' + l.dst },
labels: [ { position: .5, attrs: { text: { text: l.expr } } } ]
}));
});
_.each(json1.tplinks, function(l) {
graph.addCell(new joint.dia.Link({
source: { id: 'transition' + l.src },
target: { id: 'place' + l.dst },
labels: [ { position: .5 } ]
}));
});