Here we'll show you how to create custom charts from AmCharts.

Custom amCharts

First, have a button and chart on a graphic setup

The user needs to have a graphic with a button (or some sort of trigger component) and a chart. Make sure to add some tag on the chart.

On your button, right click to add an action. Its going to be Create Event > Mouse > Mouse Click. Then add any var to query the tag added on the chart. For example we used:

Get JavaScript code of desired chart

The user will go to AmCharts and select any chart there. Once the user finds one they like, they can select it. Then once it opens up, there will be an Edit button towards the top right of that chart that they will click on.

The user will then copy that JavaScript Code.

Adding JavaScript code to button on graphic

Now, the user will paste that on the Mouse Click action on the button below the "var myChart = query('foo');" already in there. It should something like below.

The user then needs to replace "chartdiv" (being of code) and replace it with whatever var was choosen above with ".view" appended to it. So it should be something like this:

Virtual Data Query

You'll need to create a virtual point in your Virtual Points section. For example, we created one called "All Sites". Then you'll need to add a string property tag called "query" and make the value be readAll(site) or whatever you prefer to query.

Bind Virtual Data

Now you'll need to create a new var on your button below the first var created that queries for that virtualPoint. So it should be like this:

Then in that same window, you need to remove the dataProvider value and replace with yourNewVar.curVal.toObj(). So it should be like this:

myData represents the var we created in our example. curVal is what we are getting from the virtual point. toObj() is so that it converts Axon to JavaScript.

Then you want to specify which records to look at from the query. In this case we want to show the area of each site.

So the valueField under the graphs section needs to change to "area". And categoryField needs to change to "dis". Should be like below.

Thats it! Preview your chart or save graphic and view it. Below is a copy of the action that you can just copy and paste to the button. Just make sure you have the rest of the steps. Its also the code for the Simple Column Chart.

All steps simplified

Make a virtualPoint and add the string property tag called "query" with the value of readAll(site) or whatever query
Add a chart to the world and add any tag to it
Add a button to the world and add an on click action. copy and paste the below on it and replace "foo" with your tag from chart.
```
var myChart     = query('foo');
var myData      = query('virtualPoint and query');
```
Go to AmCharts to copy and paste the chart code of whatever chart you want on the button action
Replace "chartdiv" with myChart.view in the chart code for chart. For example:

var chart = AmCharts.makeChart( myChart.view, {
Replace dataProvider value with myData.curVal.toObj(). For example:
```
"dataProvider": myData.curVal.toObj(),
```
Replace the valueField value under graphs section with whatever column of data you want to display. For example:
```
"valueField": "area"
```
Replace the categoryField value with whatever column of data you want to display. For example:
```
"categoryField": "dis",
```

Note: Some charts might have multiple valueFields under graphs section of the code, so make sure to change those as well with what data you want to display. Below is an example of the code when done and copy of the graphic with it working.

Code Example

var myChart     = query('foo');
var myData      = query('virtualPoint and query');
var chart       = AmCharts.makeChart( myChart.view, {
  "type": "serial",
  "rotate":true,
  "theme": "light",
  "dataProvider": myData.curVal.toObj(),
  "valueAxes": [ {
    "gridColor": "#FFFFFF",
    "gridAlpha": 0.2,
    "dashLength": 0
  } ],
  "gridAboveGraphs": true,
  "startDuration": 1,
  "graphs": [ {
    "balloonText": "[[category]]: <b>[[value]]</b>",
    "fillAlphas": 0.8,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "area"
  } ],
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "dis",
  "categoryAxis": {
    "gridPosition": "start",
    "gridAlpha": 0,
    "tickPosition": "start",
    "tickLength": 20
  },
  "export": {
    "enabled": true
  }

} );

To restore the below graphic, open the menu. Select Graphics Builder to open slider menu and select Graphics. Then select Miscellaneous and then Restore to select the file. Once you select Upload, that should be it, you can look for the graphic called Site Chart Example. It runs on site.

End Result

Tips

History Comparison Chart

You can use this in the graphics builder just by copying this and adding it to the query. you could make this dynamic too by adding a program that changes the chartQuery property.

read(zone and temp and sensor).finHisReadBaseline(thisWeek(),lastWeek(),{fold1:max,interval1:1day},[{curChartType:"bar",curColor:"#000000",baseColor:"#cccccc"}])

You can also have 2 rollups inside the query too

interval1 -> REQUIRED, a rollUp interval EX: 1h, 1day
fold1 -> REQUIRED, a fold func EX: avg, sum
interval2 -> OPTIONAL, a second rollUp
fold2 -> OPTIONAL (REQUIRED if interval2 present), second fold func for second rollUp

FIN Framework

GB Custom Charts