Time with Trendline Example


  var chart = new Cedar({"type":"time-trendline"});

  var datasets = [
    {
      "url": "https://services6.arcgis.com/Y3k193RFrcECJ8xA/arcgis/rest/services/Observed_Precipitation/FeatureServer/0",
      "query": {
        "where": "year > 2000",
        "orderByFields": "year"
      }
    }
  ];

  var series = [
    {
      "category": { "field": "year", "label": "Year" },
      "value": { "field":"annual","label":"Total Precipitation" },
      "trendline": { "field": "trendline", "label": "" }
    }
  ];

  chart.datasets = datasets;
  chart.series = series;

  chart.show({
    elementId: "#chart"
  });

  chart.override = {
    scales: [
      {
        "name": "x",
        "type": "ordinal",
        "range": "width",
        "nice": "year",
        "zero": false
      },
      {
        "zero" : false
      }
    ]
  };


Time with Trendline Example with more Overrides


  var chart = new Cedar({"type":"time-trendline"});

  var dataset = {
    "url":"https://services6.arcgis.com/Y3k193RFrcECJ8xA/arcgis/rest/services/Observed_Precipitation/FeatureServer/0",
    "mappings":{
      "time": {"field":"year", "label": "Year"},
      "value": {"field":"annual", "label": "Total Precipitation"},
      "trendline": {"field": "trendline", label: ""},
      "sort": "year"
    }
  };

  chart.dataset = dataset;
  chart.show({
    elementId: "#chart"
  });

  chart.override = {
    axes: [
      {
        "type" : "x",
        "scale" : "x",
        "values" : [1900,1920,1940,1960,1980,2000,2015]
      },
      {
        "type" : "y",
        "scale" : "y",
        "grid" : true,
        "format": "0d",
        "values" : [20,30,40,50,60]
      }
    ],
    scales: [
      {
        "name": "x",
        "type": "ordinal",
        "range": "width",
        "nice": "year",
        "zero": false
      },
      {
        "name" : "y",
        "zero" : false,
        "nice" : true,
        "domainMin" : 20
      }
    ],
    marks: [
      {
        "properties": {
          "enter" : {
            "stroke": {"value": "#008ec4"},
            "strokeWidth": {"value": 3}
          }
        }
      },
      {
        "properties": {
          "enter" : {
            "stroke": {"value": "#000000"},
            "strokeWidth": {"value": 3}
          }
        }
      }
    ]
  };