CODEWITHSUNDEEP
javascriptecharts
sectechguy
sectechguy

Reputation: 2117

Getting Zoomdata data to work with echarts index.js stacked line chart

I am working with a echarts javascript chart and trying to get it to work with my data in Zoomdata. I have the data grouped by 20 different computers so I am looking to do a stacked line chart with 20 lines. I know how to hard code this but I would like to link the data in Zoomdata to the code to display in the chart. Right now it just plots all 20 computers on one 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: [
        {
            name:'邮件营销',
            type:'line',
            stack: '总量',
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'联盟广告',
            type:'line',
            stack: '总量',
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'视频广告',
            type:'line',
            stack: '总量',
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'直接访问',
            type:'line',
            stack: '总量',
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'搜索引擎',
            type:'line',
            stack: '总量',
            data:[820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};

//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 looks like:

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

Upvotes: 0

Views: 311

Answers (1)

Ryo Shiina
Ryo Shiina

Reputation: 568

Thanks for adding the json details. If I understood it good, the value you want to display on each line must be current.count, and the name of each series is given by the first item in the group array (I don't know why it's an array, though).

Here is the code I would write if I want to map your data on ECharts:

/* 
 * incremental update counter. This will be displayed 
 * on the xAxis by being pushed to 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) {
    // Called when new data arrives  
    options.xAxis.data.push('record ' + updateCount)
    options.series = updateData(data)
  } else {
    // Called only once to initialize
    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 init function.
const initData = data => {
  // transform 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 => {
  // push new data counts to its respective series data.
  options.series.forEach((item, index) => {
    item.data.push(newData[index].current.count)
  }
}

It's a bit long but more secure way to parse your raw data into an ECharts option. Let me know if you have any issue with this, I haven't tested yet so it's only brain code.

Upvotes: 1

Related Questions