AM Weather Chart
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);