0

Regarding issues with editing the chart code

Hello everyone! Through studying the dashboard template Dashboard Template  shared by Sotirios Zormpas, I have learned chart code. The following code already implements the display of accumulated data for a specific month. However, I still want to improve this feature. Thanks for your help! Thanks in advance.

 

  • The time displayed in the chart does not show the complete days of the month, and I have set the code as follows(At the bottom.)..However, the view did not display correctly. Could you please tell me where the issue might be?  
let fullDates := for i in range(1, 31) do
        if i < 10 then "0" + text(i) else text(i) end
    end;
let Timeperiod := (select 'Orders')[month(date('data')) = 5];
let onlytime := unique(Timeperiod.'data');
let cumulative := 0;
let AAAAAA := for luo1 in fullDates do
····

 

  • I want to compare the cumulative data for April. How can I display them in a single chart? How should the code be adjusted?

let Timeperiod := (select 'Orders')[month(date('data')) = 5];
let onlytime := unique(Timeperiod.'data');
let cumulative := 0;
let AAAAAA := for luo1 in onlytime do
        let Datadata := sum(Timeperiod['data' = luo1].'money');
        cumulative := cumulative + Datadata;
        {
            name: luo1,
            cumulative: cumulative
        }
    end;
let chartOptions04 := {
        title: {
            text: ""
        },
        tooltip: {
            trigger: "axis"
        },
        legend: {
            top: "name"
        },
        grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
        },
        dataset: [{
                source: AAAAAA
            }],
        xAxis: {
            type: "category",
            encode: {
                x: "name"
            }
        },
        yAxis: {
            type: "value",
            axisLabel: {
                interval: 0
            }
        },
        series: [{
                name: "name",
                type: "line",
                smooth: true,
                seriesLayoutBy: "row",
                stack: "total",
                label: {
                    show: false
                },
                emphasis: {
                    focus: "series"
                },
                encode: {
                    x: "name",
                    y: "cumulative"
                }
            }]
    };

3 replies

null
    • gold_cat
    • 1 mth ago
    • Reported - view

     I used AI to write the following code. It can work! But there are still some small issues. That is, for some months and dates, there is no data. However, the data lines still fill up from the 1st to the 31st.For example, there is data from the 1st to the 5th and from the 10th to the 20th. Can it be displayed at intervals?
    @

    let fixedDates := range(1, 32);
let monthsToCompare := [6, 5, 4];
let allMonthsData := for month in monthsToCompare do
        let monthData := ((select '订单出库')[month(date('开始')) = month and year(date('开始')) = year(today())] order by number('开始'));
        let cumulativeTotal := 0;
        let monthEntries := for day in fixedDates do
                let dailyTotal := sum(monthData[day(date('开始')) = day].'总价');
                cumulativeTotal := cumulativeTotal + dailyTotal;
                {
                    day: day,
                    cumulativeBaijiu: cumulativeTotal,
                    month: month
                }
            end;
        monthEntries
    end;
let cumulativeData := for monthData in allMonthsData do
        for entry in monthData do
            entry.cumulativeBaijiu;
            entry.month
        end
    end;
let chartOptions := {
        title: {},
        tooltip: {
            trigger: "axis"
        },
        legend: {
            top: "top"
        },
        grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
        },
        xAxis: {
            type: "category",
            data: fixedDates
        },
        yAxis: {
            type: "value",
            axisLabel: {
                interval: 0
            }
        },
        series: for monthData in allMonthsData do
            {
                name: first(monthData).month + "月",
                type: "line",
                smooth: true,
                showSymbol: false,
                data: for XX in monthData do
                    XX.cumulativeBaijiu
                end
            }
        end
    };
      • Rafael Sanchis
      • Rafael_Sanchis
      • 1 mth ago
      • Reported - view

       

      The script

      let Data := ((select 'Progress-Cost Report') order by 'Date CutOff');
let DataDates := Data.format('Date CutOff', "DD/MMM");
let DataRow1 := Data.'Total Plan Value';
let DataRow2 := Data.'Total Earned Value';
let DataRow3 := Data.'Cumulative Cost';
let vLegend := for i in DataDates do
        "'" + i +
        if not i = item(DataDates, count(DataDates)) then
            "',"
        else
            "'"
        end
    end;
let vDataLine1 := for j in DataRow1 do
        j +
        if not j = item(DataRow1, count(DataRow1)) then
            ","
        end
    end;
let vDataLine2 := for k in DataRow2 do
        k +
        if not k = item(DataRow2, count(DataRow2)) then
            ","
        end
    end;
let vDataLine3 := for k in DataRow3 do
        k +
        if not k = item(DataRow3, count(DataRow3)) then
            ","
        end
    end;
let vInit := if DarkMode then
        "echarts.init(chartDom, 'dark')"
    else
        "echarts.init(chartDom)"
    end;
html(eChartQuell() +
"
<div id='Graph1' style='width:100%; height:100%;'></div>
    <script type='text/javascript'>
     var chartDom = document.getElementById('Graph1');
            var myChart = " +
vInit +
";
            var option;

            option = {
title: {
        text: '  📈 Earned Value  Curve',
        subtext: ' Project: OCEMI - MACOLLA H1B PETROPIAR, S.A.',
        left: 'left',
            textStyle: {
                 fontSize: 14
    }
        },
legend: {
                        top: 'top',
            data: ['Planned Value', 'Earned Value', 'Cumulative Cost']
        },
tooltip: {
        trigger: 'axis',
            show: true
        },
toolbox: {
orient: 'vertical',
left: 'right',
top: 'center',
    feature: {
        title: 'Data View',
        mark: { show: true },
    saveAsImage: {show: true},
        dataView : {show: true, readOnly: false},
        restore: {},
        magicType: {
             type: ['line', 'bar']
            }
}
        },
  xAxis: {
    type: 'category',
    data: [" +
vLegend +
"]
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Planned Value',
      type: 'line',
      data:  [" +
vDataLine1 +
"],
    },{
      name: 'Earned Value',
      type: 'line',
      data:  [" +
vDataLine2 +
"],
    },{
      name: 'Cumulative Cost',
      type: 'line',
      data:  [" +
vDataLine3 +
"],
    }
  ]
};
            option && myChart.setOption(option);
      myChart.setOption(option);
    </script>
 </body>")
      • gold_cat
      • 1 mth ago
      • Reported - view

       
       

      Hi Rafael, thanks for sharing. I've reviewed your code and we have some differences. Your displayed values are associated with each date-related entry, so they are bound to the date. However, mine are calculated by code, so the dates are not aligned...

Login to reply

Content aside

  • 1 mth agoLast active
  • 3Replies
  • 49Views
  • 2 Following