Model: lineChartAM.zip

How To Create Your Own

Start by dragging out AM|Charts from the components menu
Resize it to the desired size
Drag out another component nearby (in the example we are using a button)
Select the AM|Chart and the other component and right click, and create group
Delete the other component, so it is just the AM|Chart in the group

finstack.eval(point.query, function(data){
var queryData=data.result.toObj();
var chart = AmCharts.makeChart(Chart.view, {
"type": "serial",
  "theme": "light",
    "dataProvider": queryData,
    "date": "ts",
    "value": "v0",
  "precision" : 1,
  "marginRight": 40,
  "marginLeft": 40,
  "autoMarginOffset": 20,
  "dataDateFormat": "HH:mm:ss",
  "valueAxes": [ {
    "id": "v1",
    "axisAlpha": 0,
    "position": "left",
    "ignoreAxisWidth": true
  } ],
  "balloon": {
    "borderThickness": 1,
    "shadowAlpha": 0,
  },
  "graphs": [ {
    "id": "g1",
    "balloon": {
      "drop": true,
      "adjustBorderColor": false,
      "color": "#ffffff",
      "type": "smoothedLine"
    },
    "fillAlphas": 0.2,
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "bulletColor": "#FFFFFF",
    "bulletSize": 5,
    "hideBulletsCount": 50,
    "lineThickness": 2,
    "title": "red line",
    "useLineColorForBulletBorder": true,
    "valueField": "v0",
    "balloonText": "<span style='font-size:18px;'>[[v0]]</span>"
  } ],
  "chartCursor": {
      "categoryBalloonDateFormat":"MMM DD YYYY JJ:NN:SS",
    "valueLineEnabled": true,
    "valueLineBalloonEnabled": true,
    "cursorAlpha": 0,
    "zoomable": false,
    "valueZoomable": true,
    "valueLineAlpha": 0.5
  },
  "valueScrollbar": {
    "autoGridCount": true,
    "color": "#000000",
    "scrollbarHeight": 50
  },
  "categoryField": "ts",
  "categoryAxis": {
      "equalSpacing": true,
    "parseDates": true,
    "dashLength": 1,
    "minorGridEnabled": true,
    "gridPosition": "start",
            "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
  },
});
});

Example query: readAll(id==@1eeb0225-0f9b8f7d).hisRead(today)

Line Chart

Model: lineChartAM.zip

How To Create Your Own