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});
});

FIN Framework

History Date Picker Chart with Search

Analytics

Make Your Own

Template

Model

Style

Init

Related content