Hi You can simply add the last item of tuple to the object. I think it's a very basic JavaScript question.
Just updated the example for you https://jsfiddle.net/pissang/2s47eL0q/7/ Regards On Wed, Nov 6, 2019 at 5:22 PM Ayaskant Swain <ayaskant.sw...@gmail.com> wrote: > Hi Shen, > > I am trying add toggle buttons to categorize my bar chart that i wrote > following your code snippet yesterday. Basically there will be 3 toggle > buttons C1, C2 , C3 . The alerts will remain red colour while the normal > data (false value) will be Green for C1, Blue for C2 & Grey for C3. > > I am trying to do something like this - > https://echarts.apache.org/examples/en/editor.html?c=bar1 > > var tupleData1 = [ > ['10:15:25', 75 , false, 'C1'] , ['10:45:25', 35 , false, 'C1'], > ['11:15:25', 45 , true, 'C1'], ['11:20:25', 40 , false, 'C2'], > ['12:05:10', 50 , false, 'C1'], ['12:10:15', 42 , false, 'C2'], > ['13:25:28', 35 , false, 'C2'], ['13:45:55', 15 , false, 'C1'], > ['14:15:25', 75 , true, 'C1'], ['14:45:25', 25 , false, 'C3'], > ['15:30:20', 40 , false, 'C2'], ['15:45:21', 22 , false, 'C1'], > ['16:25:30', 55 , false, 'C2'], ['16:38:25', 51 , false, 'C1'], > ['17:20:25', 5 , false, 'C3'], ['17:22:25', 8 , false, 'C2'], > ]; > > Can you please help me here? > > Thanks > Ayas > > On Tue, Nov 5, 2019 at 6:21 PM 沈毅 <shenyi....@gmail.com> wrote: > >> Hi, glad to see it’s helpful:) >> >> Sent from my iPhone >> >> On Nov 5, 2019, at 8:00 PM, Ayaskant Swain <ayaskant.sw...@gmail.com> >> wrote: >> >> >> Hi Shen, >> >> I am able to view this now. yes this is what i wanted. Many thanks again >> for the help. >> >> Ayas >> >> On Tue, Nov 5, 2019 at 5:21 PM Ayaskant Swain <ayaskant.sw...@gmail.com> >> wrote: >> >>> Hi, >>> >>> I am getting 502 Bad Gateway from your link. >>> 502 Bad Gateway >>> Thanks >>> Ayas >>> >>> On Tue, Nov 5, 2019 at 5:05 PM Yi Shen <shenyi....@gmail.com> wrote: >>> >>>> Hi, >>>> >>>> You can convert the tuple to an object. >>>> >>>> I've updated the example https://jsfiddle.net/pissang/2s47eL0q/ . Not >>>> sure if it's what you expected. >>>> >>>> >>>> >>>> On Tue, Nov 5, 2019 at 7:24 PM Ayaskant Swain <ayaskant.sw...@gmail.com> >>>> wrote: >>>> >>>>> Hi Shen, >>>>> >>>>> This my test code that is generating a bar chart and the colors are >>>>> being assigned depending on that threshold value 80. I have attached the >>>>> screenshot of my chart. >>>>> >>>>> I am trying to change this code to the other logic of setting bar >>>>> color code depending on true or false for an alert. >>>>> >>>>> I am trying to read data form a tuple of data like this - [10:15:25, >>>>> 45 , true] , [12:15:25, 35 , false] >>>>> >>>>> True - Red >>>>> False - Green >>>>> >>>>> <html> >>>>> <body> >>>>> <div id="main" style="width:600px; height:400px;"> >>>>> </div> >>>>> <script type="text/javascript"> >>>>> var xAxisData = ['01:00', '02:00', '03:00', '04:00', >>>>> '05:00', '06:00', '07:00', '08:00', >>>>> '09:00', '10:00', '11:00', '12:00', >>>>> '13:00', '14:00', '15:00', '16:00', >>>>> '17:00', '18:00', '19:00', >>>>> '20:00','21:00','22:00','23:00', '00:00']; >>>>> >>>>> var data = [05, 06, 03, 09, 08, 12, 10, 15, 40, 85, 90, >>>>> 12, 15, 07, 22, 33, 38, 27, 98, >>>>> 22, 45, 35, 18, 25]; >>>>> >>>>> var option = { >>>>> title: { >>>>> text: 'Alerts Data' >>>>> }, >>>>> legend: { >>>>> data: ['bar', 'bar2'], >>>>> align: 'left' >>>>> }, >>>>> toolbox: { >>>>> // y: 'bottom', >>>>> feature: { >>>>> magicType: { >>>>> type: ['stack', 'tiled'] >>>>> }, >>>>> dataView: {}, >>>>> saveAsImage: { >>>>> pixelRatio: 2 >>>>> } >>>>> } >>>>> }, >>>>> tooltip: {}, >>>>> xAxis: { >>>>> data: xAxisData, >>>>> silent: false, >>>>> splitLine: { >>>>> show: false >>>>> } >>>>> }, >>>>> yAxis: { >>>>> }, >>>>> visualMap: { >>>>> type: 'piecewise', >>>>> pieces: [{ >>>>> lt: 80, >>>>> color: 'green' >>>>> }, { >>>>> gt: 80, >>>>> color: 'red' >>>>> }] >>>>> }, >>>>> series: [{ >>>>> type: 'bar', >>>>> data: data >>>>> }] >>>>> }; >>>>> >>>>> var chart = echarts.init(document.getElementById('main')); >>>>> chart.setOption(option); >>>>> </script> >>>>> </body> >>>>> </html> >>>>> >>>> >>>> >>>> -- >>>> Yi Shen >>>> Apache ECharts(incubating) PPMC >>>> >>> -- Yi Shen Apache ECharts(incubating) PPMC
