You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@echarts.apache.org by Yi Shen <sh...@gmail.com> on 2019/11/06 09:29:56 UTC
Re: My Test code
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 <ay...@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 沈毅 <sh...@gmail.com> wrote:
>
>> Hi, glad to see it’s helpful:)
>>
>> Sent from my iPhone
>>
>> On Nov 5, 2019, at 8:00 PM, Ayaskant Swain <ay...@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 <ay...@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 <sh...@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 <ay...@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