Utilizing Zoomdata data in conjunction with echarts index.js to create a dynamic stacked line chart

Question

Utilizing Zoomdata data in conjunction with echarts index.js to create a dynamic stacked line chart

I am currently working on integrating Zoomdata with an echarts javascript chart to visualize data from 20 different computers in a stacked line chart format. While I can manually code this setup, I am looking for a way to dynamically link the data from Zoomdata to automatically display in the chart with separate lines for each computer. As of now, all 20 computers are displayed on one single line.

import echarts from 'echarts'; //
import styles from './index.css';

// create chart container
const chartContainer = document.createElement('div');
chartContainer.style.width = '100%';
chartContainer.style.height = '100%';
chartContainer.classList.add(styles.chartContainer);
controller.element.appendChild(chartContainer);

const groupAccessor = controller.dataAccessors['Group By'];
const metricAccessor = controller.dataAccessors.Size;

//Need help
//Part Im having trouble with linking data in zoomdata to this chart
const chart = echarts.init(chartContainer);
const option = {
    xAxis: {
        type: 'category',
        data: []
    },
    yAxis: {
        type: 'value'
    },
    series: [
        // Data should be loaded dynamically based on the Zoomdata input
    ]
};

//Rest of code
controller.update = data => {
  // Called when new data arrives
  option.series[0].data = reshapeData(data);
  chart.setOption(option);
};


function reshapeData(data) {
  return data.map(d => ({
    name: groupAccessor.raw(d),
    value: metricAccessor.raw(d),
    datum: d,
    itemStyle: { //tell the chart you would like to use the colors selected
      color: groupAccessor.color(d),//tell the chart you would like to use the colors selected
    }, //tell the chart you would like to use the colors selected
  }));
}

chart.on('mousemove', param => {
  controller.tooltip.show({
    event: param.event.event,
    data: () => param.data.datum,
  });
});

chart.on('mouseout', param => {
  controller.tooltip.hide();
});

chart.on('click', param => {
  controller.menu.show({
    event: param.event.event,
    data: () => param.data.datum,
  });
});

controller.createAxisLabel({
  picks: 'Group By',
  position: 'bottom',
  orientation: 'horizontal',
});

controller.createAxisLabel({
  picks: 'Size',
  position: 'bottom',
  orientation: 'horizontal',
});

The JSON data structure is as follows:

[
  { 
    current: {
      count: 1508,
      metrics: null,
      na: false
    },
    group: [
      "Computer1"
    ]
  },
  {..},
  {..}
]

javascript echarts

Answer 1

Answer №1

Thank you for providing the JSON details. Based on my understanding, the value to be displayed on each line should be current.count, with the series name taken from the first item in the group array (even though it's an array for some reason).

Below is the code I would use to map your data on ECharts:

/* 
 * Incremental update counter. This will show up 
 * on the xAxis by adding it to the options.xAxis.data array.
 */
let updateCount = 0;

// Initialize series as empty
const options = {
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: []
}

controller.update = data => {
  updateCount++;
  if (options.series.length > 0) {
    // Executed when new data arrives  
    options.xAxis.data.push('record ' + updateCount);
    options.series = updateData(data);
  } else {
    // Executed only once for initialization
    options.xAxis.data.push('record ' + updateCount);
    options.series = initData(data);
  }
  // You can remove the following line if your chart is already reactive.
  chart.setOption(option);
}

// The initialization function
const initData = data => {
  // Convert each item in the data array into a series entry
  data.map(item => {
    return {
       name: item.group[0],
       type: 'line',
       stack: 'defaultStack',
       data: [item.current.count]
    }
  })
}

// The update function
const updateData = newData => {
  // Add new data counts to their respective series data
  options.series.forEach((item, index) => {
    item.data.push(newData[index].current.count)
  }
}

This may be a bit lengthy but provides a more secure way to parse your raw data into an ECharts option. Please let me know if you encounter any issues with this implementation; I have not tested it yet, so it's purely conceptual.

Answer 2

Thank you for providing the JSON details. Based on my understanding, the value to be displayed on each line should be current.count, with the series name taken from the first item in the group array (even though it's an array for some reason).

Below is the code I would use to map your data on ECharts:

/* 
 * Incremental update counter. This will show up 
 * on the xAxis by adding it to the options.xAxis.data array.
 */
let updateCount = 0;

// Initialize series as empty
const options = {
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: []
}

controller.update = data => {
  updateCount++;
  if (options.series.length > 0) {
    // Executed when new data arrives  
    options.xAxis.data.push('record ' + updateCount);
    options.series = updateData(data);
  } else {
    // Executed only once for initialization
    options.xAxis.data.push('record ' + updateCount);
    options.series = initData(data);
  }
  // You can remove the following line if your chart is already reactive.
  chart.setOption(option);
}

// The initialization function
const initData = data => {
  // Convert each item in the data array into a series entry
  data.map(item => {
    return {
       name: item.group[0],
       type: 'line',
       stack: 'defaultStack',
       data: [item.current.count]
    }
  })
}

// The update function
const updateData = newData => {
  // Add new data counts to their respective series data
  options.series.forEach((item, index) => {
    item.data.push(newData[index].current.count)
  }
}

This may be a bit lengthy but provides a more secure way to parse your raw data into an ECharts option. Please let me know if you encounter any issues with this implementation; I have not tested it yet, so it's purely conceptual.

Utilizing Zoomdata data in conjunction with echarts index.js to create a dynamic stacked line chart

Answer №1

Similar questions

Using Middleware to Access LocaleStorage in Universal Mode

Step-by-step guide on concealing elements and subsequently displaying them upon clicking the containing DIV

Style the div element with CSS

Easily integrating a JavaScript file into an HTML document when utilizing a NodeJS Express server

Supertest and Jest do not allow for sending JSON payloads between requests

What is the operational mechanism behind drag and drop page builders?

Trouble encountered when trying to use an anchor link with the .slideUp jQuery function

Configuring download destination in WebDriver with JavaScript

Tips for maintaining server session by tracking user activity on the browser using a simple ajax request to the server without relying on JQuery

Unable to alphabetically arrange buttons automatically

What is the best approach to dynamically enable or disable a button depending on the state of multiple checkboxes in React.js?

Utilizing EventEmitters for cascading operations in Angular 2 dropdown menus

Customizing font size in React with Material UI: A comprehensive guide on adjusting the font size of the Select component

What techniques do platforms like Twitch, YouTube, Twitter, and Reddit use to dynamically load pages and update the URL without triggering a full reload?

Invoke the parent's function within the Local-Registration component of VueJs

Bringing in the component's individual module

`Vue JS table with Boostrap styling showcasing a loading indicator for busy state`

Using an ng-repeat directive alongside an if condition in Angular

Why is URL Hash Navigation not functioning when linking to a different page's slide on the carousel?

Looking for a way to locate a string for a Boolean field in mongoDB?