Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by MIHA W.LEE
.a{fill-rule:evenodd;}techdegree seal-36
MIHA W.LEE
PHP Development Techdegree Graduate 25,452 Points

How to add the Data to the 'categoryB' and 'categoryC' in this chart?

Hey guys!! I dont know the question is allow or not at Treehouse. But I cant firgure out the question by myself.

I have some problem with this Chart. Actually its not a big problem, i just want to add the data to the 'categoryB' and 'categoryC'. But i dont know how to do. I will provide you the code and Github to this chart.

Code: <!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 100%"></div> <script type="text/javascript" src="dist/echarts.min.js"></script> <script type="text/javascript" src="dist2/echarts-gl.min.js"></script> <script type="text/javascript" src="dist3/ecStat.min.js"></script> <script type="text/javascript" src="dist/extension/dataTool.min.js"></script> <script type="text/javascript" src="map/js/china.js"></script> <script type="text/javascript" src="map/js/world.js"></script> <!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>--> <script type="text/javascript" src="dist/extension/bmap.min.js"></script> <script type="text/javascript" src="test/lib/simplex.js"></script> <script type="text/javascript"></script> <script type="text/javascript"> var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; option = null;

var data = [ { name: 'e', value: [ 0, '2016/12/18 00:00:00', '2016/12/18 00:30:05', 5 ], itemStyle: { normal: { color: 'blue' } }}, { name: 'e', value: [ 0, '2016/12/18 01:00:00', '2016/12/18 01:30:05', '123wewe' ], itemStyle: { normal: { color: 'blue' } }} ]; var dataCount = 10; var startTime = +new Date(); var categories = ['categoryA', 'categoryB', 'categoryC']; var types = [ {name: 'JS Heap', color: '#7b9ce1'}, {name: 'Documents', color: '#bd6d6c'}, {name: 'Nodes', color: '#75d874'}, {name: 'Listeners', color: '#e0bc78'}, {name: 'GPU Memory', color: '#dc77dc'}, {name: 'GPU', color: '#72b362'} ]; var anchor = [ {name:'2016/12/18 00:00:00', value:['2016/12/18 00:00:00', 0]}, {name:'2016/12/19 00:00:00', value:['2016/12/19 00:00:00', 0]} ]; // Generate mock data /echarts.util.each(categories, function (category, index) { var baseTime = startTime; for (var i = 0; i < dataCount; i++) { var typeItem = types[Math.round(Math.random() * (types.length - 1))]; var duration = Math.round(Math.random() * 10000); data.push({ name: typeItem.name, value: [ index, baseTime, baseTime += duration, duration ], itemStyle: { normal: { color: typeItem.color } } }); baseTime += Math.round(Math.random() * 2000); } });/ console.log(data); function renderItem(params, api) { console.log(api); var categoryIndex = api.value(0); var start = api.coord([api.value(1), categoryIndex]); var end = api.coord([api.value(2), categoryIndex]); var height = api.size([0, 1])[1] * 0.6;

return {
    type: 'rect',
    shape: echarts.graphic.clipRectByRect({
        x: start[0],
        y: start[1] - height / 2,
        width: end[0] - start[0],
        height: height
    }, {
        x: params.coordSys.x,
        y: params.coordSys.y,
        width: params.coordSys.width,
        height: params.coordSys.height
    }),
    style: api.style()
};

}

option = { tooltip: { formatter: function (params) { return params.marker + params.name + ': ' + params.value[3] + ' ms'; } }, title: { text: 'Profile', left: 'center' }, legend: { data: ['bar', 'error'] }, dataZoom: [{ type: 'slider', filterMode: 'weakFilter', showDataShadow: false, top: 400, height: 10, borderColor: 'transparent', backgroundColor: '#e2e2e2', handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line handleSize: 20, handleStyle: { shadowBlur: 6, shadowOffsetX: 1, shadowOffsetY: 2, shadowColor: '#aaa' }, labelFormatter: '' }, { type: 'inside', filterMode: 'weakFilter' }], grid: { height:300 }, xAxis: { type:'time', //min: startTime, scale: true, //axisLabel: { // formatter: function (val) { // return Math.max(0, val - startTime) + ' ms'; // } // } }, yAxis: { data: categories }, series: [{ type: 'custom', renderItem: renderItem, itemStyle: { normal: { opacity: 0.8 } }, encode: { x: [1, 2], y: 0 }, data: data },{ name:'.anchor', type:'line', showSymbol:false, data:anchor, itemStyle:{normal:{opacity:0}}, lineStyle:{normal:{opacity:0}} }] }; ; myChart.on('click',function(p){ console.log('click'); console.log(p) }); if (option && typeof option === "object") { myChart.setOption(option, true); } </script> </body> </html>

Github: https://github.com/suplex2825/chart-

Hope you guys can help me out and thank you so much!!!