Utilizing amCharts Postprocessing for fetching data for visual representation

Question

Utilizing amCharts Postprocessing for fetching data for visual representation

My goal is to utilize amcharts for displaying data retrieved from my server. Unfortunately, the API format doesn't align directly with amCharts. It seems that I need to utilize the postProcess function to preprocess the data, but I am struggling due to the lack of error messages and my limited experience in javascript.

Following their instructions, here is where I currently stand:

var chart = AmCharts.makeChart( "$CHART$", {
  "type": "serial",
  "legend": {
    "horizontalGap": 10,
    "maxColumns": 1,
    "position": "right",
    "useGraphSettings": true,
    "markerSize": 10
  },
"dataLoader": {
    "format": "json",
    "postProcess": function( data, config, chart ) {
    var newData = [];
    for ( var i = 0; i < data.rows.length; i++ ) {
      var dataPoint = {};
      dataPoint= data["items"];
      
      newData.push( dataPoint );
    }
    return newData;
  },
    "showCurtain": true,
    "showErrors": true,
    "url": "*url*",
    "headers": [{
    "key": "Accept",
    "value": "application/javascript, application/json",
    "Authorization":"Basic *encodedpassword*"
  }]
    
  },  "categoryField": "timestamp",
  "graphs": [  {
    "valueField": "value",
    "bullet": "round",
    "bulletBorderColor": "#6698FF",
    "bulletBorderThickness": 2,
    "bulletAlpha":0,
    "bulletSize":0,
    "title":"ServerData",
    "lineThickness": 2,
    "lineColor": "#6698FF",
    "lineAlpha": 0.5,
    "fillAlphas": 0.8,
    "fillColors":"#6698FF",
  } ],
  "valueAxes": [{
        "axisAlpha": 0,
        "dashLength": 5,
        "gridCount": 10,
        "position": "left",
    "unit": "V",
    }],
  "categoryAxis": {
    "minPeriod": "mm",
    "labelsEnabled": false
  },
  "chartCursor": {
    "oneBalloonOnly": true,
    "zoomable":true
  },
} );

The sample output returned from the server's API is provided below:

{"href":"*url/value*","offset":0,"limit":20,"items":[
{"stateVarId":"value1","timestamp":1523939135978,"value":887.0},
{"stateVarId":"value1","timestamp":1523935535977,"value":887.0},{"stateVarId":"value1","timestamp":1523845535955,"value":887.0}]}

In order for amCharts to interpret the values correctly, they should not be nested inside the "items":[ ...] section.

Therefore, the postProcess function must navigate the JSON format and extract the contents of "items".

If you require additional information, please feel free to reach out. I will gladly provide any missing details.

Thank you.

javascript json amcharts

Answer 1

Answer №1

The issue with your postProcess method lies in how you are handling the array of items. Instead of creating an array of arrays, you should be creating a flattened array. Here's a breakdown of what's going wrong in your loop for each row of data:

  var dataPoint = {};
  dataPoint = data["items"]; // dataPoint is now an array

  // This line pushes the array as an element of newData, resulting in
  // [ [/*first items array*], [/*second items array*], ...]
  newData.push(dataPoint);

What you should be doing instead is looping through the data["items"] array and pushing each element individually into your newData array, or using Array.concat to accomplish this:

  // Concatenates the existing newData array
  // with the next data["items"] array
  newData = newData.concat(data["items"]);

On a side note, if you are working with date/timestamp-based data and utilizing parseDates, it is essential for the data to be in ascending order. This is crucial for features like minPeriod to function properly. Your sample API response shows items sorted in descending timestamp order, so remember to sort newData before returning it in postProcess.

Answer 2

The issue with your postProcess method lies in how you are handling the array of items. Instead of creating an array of arrays, you should be creating a flattened array. Here's a breakdown of what's going wrong in your loop for each row of data:

  var dataPoint = {};
  dataPoint = data["items"]; // dataPoint is now an array

  // This line pushes the array as an element of newData, resulting in
  // [ [/*first items array*], [/*second items array*], ...]
  newData.push(dataPoint);

What you should be doing instead is looping through the data["items"] array and pushing each element individually into your newData array, or using Array.concat to accomplish this:

  // Concatenates the existing newData array
  // with the next data["items"] array
  newData = newData.concat(data["items"]);

On a side note, if you are working with date/timestamp-based data and utilizing parseDates, it is essential for the data to be in ascending order. This is crucial for features like minPeriod to function properly. Your sample API response shows items sorted in descending timestamp order, so remember to sort newData before returning it in postProcess.

Answer 3

Answer №2

After my conversation with the team at Chartify, they provided me with the following solution:

"transformData": function( data, settings, chart ) {
var transformedData = [];
for ( var i = 0; i < data.entries.length; i++ ) {
  var newDataPoint = {};
  newDataPoint= data.entries[i];
  transformedData.push( newDataPoint );
}
return transformedData;
},

However, I later discovered that the reason it wasn't working on my site was due to a CORS error.

Appreciate the help of everyone who took the time to read my question. =)

Answer 4

After my conversation with the team at Chartify, they provided me with the following solution:

"transformData": function( data, settings, chart ) {
var transformedData = [];
for ( var i = 0; i < data.entries.length; i++ ) {
  var newDataPoint = {};
  newDataPoint= data.entries[i];
  transformedData.push( newDataPoint );
}
return transformedData;
},

However, I later discovered that the reason it wasn't working on my site was due to a CORS error.

Appreciate the help of everyone who took the time to read my question. =)

Utilizing amCharts Postprocessing for fetching data for visual representation

Answer №1

Answer №2

Similar questions

Using val() on a checkbox will give you an element, not a string literal

Replace Vue's mixin function

Creating a user-friendly form with validation in a Vue application using Vuetify.js

Adjust the placement of the fixed header waypoint or change its offset

Transmit an unmodifiable array using JSON and Ajax

Is Angular 4 failing to set headers properly or is Express.js searching in the wrong place?

"Exploring the intricacies of routing within a Node.js application

Preventing blank text entries in a task management application

Discover particular key value pairs using jq

PHP's json_encode() compared to using an empty NSDictionary in iOS development

A declaration file in Typescript does not act as a module

Error: No package.json file found after publishing npm package with ENOLOCAL

Concerns with the performance of Leaflet's polyline

The checkValidity function fails to identify incorrect "tel" input

I am unable to sketch my backdrop. - HTML Canvas Game

Discover the process of accessing nested arrays in MongoDB

Extract information from JSON-formatted string

Confirming Bootstrap - Implement an onConfirm method for element attributes

Utilizing JQuery and AJAX to fetch a specific variable

Issue: Encounter an Error with Status Code 401 using Axios in React.js