History Date Picker Chart with Search

Owned by Sarah Padilla (Unlicensed)
Last updated: May 09, 2018
14 min read

  


Description: This is an AM Chart that can show different queries.  It can support up to 8 different lines. It also needs the moment.js file.  

Model: searchDatesAM.f5m

JavaScript: moment.min.js

Make Your Own

  • Drag out Ractive from components on the left side menu
  • Under Properties, click ractive editor, then open editor
  • Copy and paste the code below for template, model, style, and init, into the corresponding tabs

Template

<div class="s-box">
     <div class="searchBar">
        <input id="inputText" class="s-input"/>
        <div class="s-search view-superman-value round icon-search" on-click="search"></div>
    </div>
    <div class="buttonBar">
        <div class="s-button s-selected" id="day" on-click="day">Today</div>
        <div class="s-button" id="week" on-click="week">This Week</div>
        <div class="s-button" id="month" on-click="month">This Month</div>
        <div class="s-button" id="datePicker" on-click="datePicker">{{#if myStart==myEnd}}{{myStart}}{{else}}{{myStart}}-{{myEnd}}{{/if}}</div>
    </div>
    <div id="amChartPoint" style="width:100%; height:100%;"></div>
</div>


Model

{
    data:
    {
        myStart: "Date Picker",
        myEnd: "Date Picker"
    }
}

Style

.s-box{
    padding         : 10px;
    border-radius   : 5px;
    width           : 100%;
    height          : 100%;
    display         : flex;
    flex-direction  : column;
    flex            : 1 1 auto;
}
.buttonBar{
    width           :100%;
    height          :35px;
    border-radius   : 5px;
    background-color: #4f7ab3;
    display         : flex;
    flex-direction  : row;
    justify-content : center;
    align-items     : center;
}
.s-button{
    color           :#fff;
    border-radius   : 5px;
    width           :100%;
    height          : 100%;
    font-weight     : bold;
    padding         : 10px 15px 10px 15px;
    display         : flex;
    flex-direction  : row;
    justify-content : center;
    align-items     : center;
    cursor          : pointer;
}
.s-selected{
    background-color: #7093c1;
}
.searchBar{
    width: 100%;
    height: 25px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.s-input{
    height: 30px;
    width: 100%;
    border-radius: 5px;
    margin-right: 10px;
}
.s-search{
    height: 25px;
    width: 25px;
}
.s-search:hover{
    cursor: pointer;
    background-color: #62bee3;
}

Init

this.ractive.fire("obtainData");
var template  = this;
var model     = this.ractive;
var dataQuery = 'readAll('+template.view.querySelector("#inputText").value+').hisRead(today)';

function updateChart(newQuery, buttonInd){
    var test = template.view.querySelector("#amChartPoint");
    var buttonIds = [
        template.view.querySelector("#day"),
        template.view.querySelector("#week"),
        template.view.querySelector("#month"),
        template.view.querySelector("#datePicker")
    ];
    
    buttonIds.forEach(function(itm){ itm.style.backgroundColor = "#4f7ab3"; });
    buttonIds[buttonInd].style.backgroundColor = "#7093c1";
    
    setTimeout(function() {
        finstack.eval(newQuery, function(event){
            var cols = [];
            event.result.columns.forEach(function(itm){
                var t = /v\d+/.exec(itm.name);
                if(t !== null && t[0] == t.input){
                    if(itm.metadata) cols.push({dis: itm.metadata.idDis || itm.metadata.dis || itm.metadata.id, col: itm.name, unit: itm.metadata.unit || null, equipRefDis: itm.metadata.equipRefDis});
                    else cols.push({dis: itm.name, col: itm.name});
                }
            });
            
            var grphs = [];
            var cou = 0;
            cols.forEach(function(itm){
                grphs.push({
                    "id": "g"+cou,
                    "balloonText": ""+itm.equipRefDis+": [["+itm.col+"]] "+itm.unit+"",
                    "lineThickness": 2,
                    "title": itm.dis,
                    "unit" : itm.unit,
                    "valueField": itm.col,
                    "fillAlphas": 0.2 //Area
                });
                cou++;
            });
            
            var myData = event.result.toObj();
            var chartData =[];
            var myData2 = [];
            
            myData.forEach(function(itm){
                myData2.push({
                    "ts": itm.ts,
                    "tsOffset": itm.tsOffset,
                    "tsTimezone": itm.tsTimezone,
                    "v0": itm.v0 || 0,
                    "v1": itm.v1 || 0,
                    "v2": itm.v2 || 0,
                    "v3": itm.v3 || 0,
                    "v4": itm.v4 || 0,
                    "v5": itm.v5 || 0,
                    "v6": itm.v6 || 0,
                    "v7": itm.v7 || 0
                });
            });
            
            myData2.forEach(function(itm){
                chartData.push({
                    "ts": itm.ts,
                    "tsOffset": itm.tsOffset,
                    "tsTimezone": itm.tsTimezone,
                    "v0": itm.v0.toFixed(1) || null,
                    "v1": itm.v1.toFixed(1) || null,
                    "v2": itm.v2.toFixed(1) || null,
                    "v3": itm.v3.toFixed(1) || null,
                    "v4": itm.v4.toFixed(1) || null,
                    "v5": itm.v5.toFixed(1) || null,
                    "v6": itm.v6.toFixed(1) || null,
                    "v7": itm.v7.toFixed(1) || null
                });
            });
            
            var chart = AmCharts.makeChart(test, {
                "type": "serial",
                "theme": "light",
                "marginRight": 80,
                "dataProvider": chartData,
                "valueAxes": [{
                    "axisAlpha": 0.1
                }],
                "graphs": grphs,
                "zoomOutButtonRollOverAlpha": 0.15,
                "chartCursor": {
                    "categoryBalloonDateFormat": "MMMM D L:NN A",
                    "cursorPosition": "mouse",
                    "showNextAvailable": true
                },
                "legend": {
                    "equalWidths": true,
                    "position": "top",
                    "valueAlign": "left",
                    "valueWidth": 100
                },
                "chartScrollbar": {
	"enabled": true
},
                "autoMarginOffset": 5,
                "columnWidth": 1,
                "categoryField": "ts",
                "categoryAxis": {
                    "parseDates": true,
                    "minPeriod": "mm",
                    "dateFormats":[
                        {
                            "period":"fff",
                            "format":"L:NN:SS A"
                        },
                        {
                            "period":"ss",
                            "format":"L:NN:SS A"
                        },
                        {
                            "period":"mm",
                            "format":"L:NN A"
                        },
                        {
                            "period":"hh",
                            "format":"L:NN A"
                        },
                        {
                            "period":"DD",
                            "format":"MMM DD"
                        },
                        {
                            "period":"WW",
                            "format":"MMM DD"
                        },
                        {
                            "period":"MM",
                            "format":"MMM"
                        },
                        {
                            "period":"YYYY",
                            "format":"YYYY"
                    }]
                },
                "export": {
                    "enabled": true
                }
            });
            
            chart.addListener("rendered", zoomChart);
            zoomChart();
            function zoomChart() {
                chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
            }
        });
    }, 200);
}
this.ractive.on("search", function(event) {
    dataQuery = 'readAll('+template.view.querySelector("#inputText").value+').hisRead(today)';
    updateChart(dataQuery.replace(/(\.*\hisRead).*$/g,'.hisRead(today)'), 0);
});
this.ractive.on("day", function(event) {
    updateChart(dataQuery.replace(/(\.*\hisRead).*$/g,'.hisRead(today)'), 0);
});
this.ractive.on("week", function(event) {
    updateChart(dataQuery.replace(/(\.*\hisRead).*$/g,'.hisRead(thisWeek)'), 1);
});
this.ractive.on("month", function(event) {
    updateChart(dataQuery.replace(/(\.*\hisRead).*$/g,'.hisRead(thisMonth)'), 2);
});
this.ractive.on("datePicker", function(event) {
    top.app.ShowCalendar(null,function(data){
        var start = moment(data.range.start).format("YYYY-MM-DD");
        var end   = moment(data.range.end).format("YYYY-MM-DD");
        var dateStringStart = start;
        var startDate = new moment(dateStringStart).format('MM/DD/YYYY');
        var dateStringEnd = end;
        var endDate = new moment(dateStringEnd).format('MM/DD/YYYY');
        
        var newQuery = "";
        if(start == end) newQuery= dataQuery.replace(/(\.*\hisRead).*$/g,'.hisRead('+start+')');
        else newQuery= dataQuery.replace(/(\.*\hisRead).*$/g,'.hisRead('+start+'..'+end+')');
        updateChart(newQuery, 3);
    },
    {periods:true});
});