Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    #16
    As of the latest 4.1d builds, you can now use Date values for the X-axis of a Scatter chart, so the approach mentioned in this thread (conversion to numeric type, then formatters to show values as dates or times) is no longer necessary.

    Sample code is below.

    Code:
    package com.smartgwt.sample.client;
    
    import com.google.gwt.core.client.EntryPoint;
    
    import com.smartgwt.client.data.Record;
    import com.smartgwt.client.types.ChartType;
    import com.smartgwt.client.widgets.chart.FacetChart;
    import com.smartgwt.client.widgets.cube.Facet;
    import com.smartgwt.client.widgets.cube.FacetValue;
    import com.smartgwt.client.widgets.drawing.DrawItem;
    import com.smartgwt.client.widgets.form.DynamicForm;
    import com.smartgwt.client.widgets.form.fields.SelectItem;
    import com.smartgwt.client.widgets.form.fields.events.ChangedEvent;
    import com.smartgwt.client.widgets.form.fields.events.ChangedHandler;
    import com.smartgwt.client.widgets.layout.VLayout;
    
    import java.util.Date;
    import java.util.LinkedHashMap;
    
    
    public class DateScatterChartSample implements EntryPoint {
    
        private static final long SECONDS = 1000;
        private static final long MINUTES = 60 * SECONDS;
        private static final long HOURS = 60 * MINUTES;
        private static final long DAYS = 24 * HOURS;
        private static final long YEARS = 365 * DAYS;
    
        private static final int NUM_TIME_SCALES = 10;
    
        private static final String[] TIME_SCALE_PROPERTIES = {
            "year5", "year", "day90", "day30", "day7",
            "day", "hour10", "hour5", "hour", "min15"
        };
    
        private static final long[] TIME_SCALES = {
            5 * YEARS, 1 * YEARS, 90 * DAYS, 30 * DAYS, 7 * DAYS,
            1 * DAYS, 10 * HOURS, 5 * HOURS, 1 * HOURS, 15 * MINUTES
        };
    
        private VLayout layout;
        private Record[] chartData;
    
        public void onModuleLoad() {
            String defaultTimeScale = "day90";
    
            @SuppressWarnings("deprecation")
            Date start = new Date(110, 0, 1);
    
            chartData = generateRandomData(start, -10.0, 10.0, 100);
    
            VLayout layout = this.layout = new VLayout();
            layout.setID("dateScatterChartLayout");
            layout.setTop(10);
            layout.setLeft(10);
            layout.setWidth(420);
            layout.setHeight(450);
            layout.setMembersMargin(20);
    
            DynamicForm timeScaleSelector = createTimeScaleSelector(defaultTimeScale);
            FacetChart dateScatterChart = createDateScatterChart(defaultTimeScale);
            layout.setMembers(timeScaleSelector, dateScatterChart);
    
            layout.draw();
        }
    
        private FacetChart createDateScatterChart(String timeScale) {
            FacetChart dateScatter = new FacetChart();
            dateScatter.setID("dateScatterChart");
            dateScatter.setChartType(ChartType.SCATTER);
            dateScatter.setWidth100();
            dateScatter.setHeight100();
            dateScatter.setShowTitle(false);
    
            Facet metricFacet = new Facet("metric");
            metricFacet.setInlinedValues(true);
            metricFacet.setValues(new FacetValue("y"), new FacetValue(timeScale));
            dateScatter.setFacets(metricFacet);
    
            dateScatter.setData(chartData);
    
            dateScatter.setShowChartRect(true);
            dateScatter.setChartRectMargin(10);
            dateScatter.setBandedBackground(false);
    
            DrawItem dataPoint = new DrawItem();
            dataPoint.setFillColor("#7f62b4");
            dataPoint.setLineWidth(0);
            dateScatter.setDataPointProperties(dataPoint);
    
            return dateScatter;
        }
    
        private DynamicForm createTimeScaleSelector(String defaultTimeScale) {
    
            SelectItem selectItem = new SelectItem("timeScale", "Time Scale");
            selectItem.setDefaultValue(defaultTimeScale);
    
            LinkedHashMap<String, String> valueMap = new LinkedHashMap<String, String>(10);
            valueMap.put("year5", "5 Years");
            valueMap.put("year", "1 Year");
            valueMap.put("day90", "90 Days");
            valueMap.put("day30", "30 Days");
            valueMap.put("day7", "1 Week");
            valueMap.put("day", "1 Day");
            valueMap.put("hour10", "10 Hours");
            valueMap.put("hour5", "5 Hours");
            valueMap.put("hour", "1 Hour");
            valueMap.put("min15", "15 Minutes");
            selectItem.setValueMap(valueMap);
    
            selectItem.addChangedHandler(new ChangedHandler() {
                    @Override
                    public void onChanged(ChangedEvent event) {
                        String newTimeScale = (String)event.getValue();
    
                        VLayout layout = DateScatterChartSample.this.layout;
                        layout.removeMember(layout.getMember(1));
                        layout.addMember(createDateScatterChart(newTimeScale));
                    }
                });
    
            DynamicForm form = new DynamicForm();
            form.setItems(selectItem);
            return form;
        }
    
        private static Record[] generateRandomData(Date start, double minValue, double maxValue, int n) {
    
            long startTime = start.getTime();
            Record[] data = new Record[n];
    
            for (int i = 0; i < n; i++) {
                Record record = data[i] = new Record();
                record.setAttribute("y", minValue + (maxValue - minValue) * Math.random());
    
                for (int j = 0; j < NUM_TIME_SCALES; j++) {
                    Date value = new Date(startTime + (long)Math.floor(Math.random() * TIME_SCALES[j]));
                    record.setAttribute(TIME_SCALE_PROPERTIES[j], value);
                }
            }
            return data;
        }
    }

    Comment

    Working...
    X