/

Verilerin zaman içindeki değişimini estetik biçimde sunan Area Chart; finansal raporlama ve satış performansı gibi zaman serisi senaryolarında web ve mobil uygulamalarda güçlü bir görsel hafıza oluşturur.

Öncelikle Data Sources modülündeki Tables alanından ekrandaki tabloyu oluşturun. Ardından Actions alanındaki artı butonuna tıklayarak New SQL Action'ı seçin. Örnek verileri ekleyen aksiyon olan InsertMonthlySalesData aksiyonunu yazın. MonthlySales kısmını silip tekrar MonthlySales yazıp Enter'a basınız. Böylelikle tablo adının önüne doğru şema adı eklenecektir. Uygulamayı örnek verilerle test etmek için TEST butonuna basın. Verileri sağlayan ve filtreleyen aksiyon olan GetMonthlySalesByRange aksiyonunuzu ekleyin. Aynı işlemleri bu aksiyon için de gerçekleştirin.

Verilerin sayfa açılışında yüklenmesi için GetMonthlySalesByRange SQL aksiyonunuzu Initial Action olarak bağlayın. StartDate ve EndDate alanlarını Default alanından null olarak tanımlayın. UI Design modülünde sayfanıza bir Label, Area Chart ve filtreleme için bir Date Range elementi ekleyin. Properties panelinden Label alanını "Sales Trend" olarak isimlendirin. Styling panelindeki Text alanından Heading 2 olarak ayarlayın. Properties paneline gelin ve DateRange üzerine tıklayın. Aşağıdaki Add Action alanından onChange, Custom, Managed DB adımlarını izleyerek GetMonthlySalesByRange'i seçin. Açılan alandaki StartDate ve EndDate alanlarını Component, DateRange1 alanından startValue ve endValue olarak tanımlayın. Area Chart elementine tıkladıktan sonra Properties paneli DataSource alanındaki Action, DataLabel, DataField, DataBackgroundColor, SecondDataField, SecondDataBackgroundColor alanlarını uygun şekilde sırasıyla doldurun. Sağ üst köşede bulunan Preview butonundan uygulama test edildiğinde, seçilen 7 aylık tarih aralığına ait verileri Area Chart üzerinde görüntüleyebilirsiniz.