AM Weather Chart

Owned by Sarah Padilla (Unlicensed)
Dec 13, 2017
3 min read



Description: This is an AM Chart that uses the query read(site).finWeatherData() to graph the high and low for today, tomorrow, and the next day.  As you hover over the point a ballon will appear with an icon, the temperature, and text.


Ractive

Template

<div id="am" class="chart"></div>

Style

.chart{
    width: 100%;
    height:100%;
    background-color: #fcfcfc;
    border-radius: 10px;
}

Init

this.ractive.fire("obtainData");


Program

var template = this;
var myTarget = query('targetPoint');
setTimeout(function() {
var queryData = query("stackRactive");
finstack.eval("read(site).finWeatherData()", function(data){
queryData=data.result.toObj();
var newPoints      = [];
    var realPoints  = data.result.toObj()[0].forecast;
    console.log(realPoints);
var test = template.view.querySelector("#am");
var chart = AmCharts.makeChart(test, {
 "type": "serial",
  "theme": "light",
    "dataProvider": realPoints,
    "date": "date",
    "value": "tempMin",
  "marginRight": 40,
  "marginLeft": 40,
  "autoMarginOffset": 20,
  "valueAxes": [ {
    "id": "v1",
    "axisAlpha": 0,
    "position": "left",
    "ignoreAxisWidth": true
  } ],
  "balloon": {
    "borderThickness": 1,
    "shadowAlpha": 0,
  },
  "graphs": [ {
      "precision": 1,
    "id": "g1",
    "balloon": {
      "drop": true,
      "adjustBorderColor": false,
      "color": "#ffffff",
      "type": "smoothedLine"
    },
    "fillAlphas": 0,
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "bulletColor": "#FFFFFF",
    "bulletSize": 5,
    "hideBulletsCount": 50,
    "lineThickness": 2,
    "title": "red line",
    "useLineColorForBulletBorder": true,
    "valueField": "tempMin",
    "balloonText": "<span class='[[icon]]' style='font-size:30px;'> [[tempMin]]ºF<br><span style='font-size:18px;'>[[iconText]]</span></span>"
  },
  {
    "id": "g2",
    "balloon": {
      "drop": true,
      "adjustBorderColor": false,
      "color": "#ffffff",
      "type": "smoothedLine"
    },
    "fillAlphas": 0,
    "lineColor": "#da616b",
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "bulletColor": "#FFFFFF",
    "bulletSize": 5,
    "hideBulletsCount": 50,
    "lineThickness": 2,
    "title": "red line",
    "useLineColorForBulletBorder": true,
    "valueField": "tempMax",
    "balloonText": "<span class='[[icon]]' style='font-size:30px;'> [[tempMax]]ºF<br><span style='font-size:18px;'>[[iconText]]</span></span>"
  }],
  "chartCursor": {
      "categoryBalloonDateFormat":"MMM DD YYYY",
    "valueLineEnabled": true,
    "valueLineBalloonEnabled": true,
    "cursorAlpha": 0,
    "zoomable": false,
    "valueZoomable": false,
    "valueLineAlpha": 0.5
  },
  "valueScrollbar": {
    "autoGridCount": true,
    "color": "#000000",
    "scrollbarHeight": 50
  },
  "categoryField": "date",
  "categoryAxis": {
      "equalSpacing": true,
    "parseDates": true,
    "dashLength": 1,
    "minorGridEnabled": true,
    "gridPosition": "start",
    "minPeriod": "mm",
  },
  "export": {
    "enabled": true
  },
} );
} );
}, 200);