The application code

For the application, we are going to show a series of data based on the age of each of our users added through the form. This will match up with the grid any time data is changed. As mentioned before we will be using a bar chart and will create all necessary settings in the initialization method with the passed in object.

First, we will add the creation method in our app.js file directly after our form creation method. This will have our global chart variable and create method.

Creating the chart

Add the following code to the app.js file at the end:

// Chart
var appChart;
dhtmlxEvent(window,"load",function(){
   appChart = appLayout.cells("b").attachChart({
      view: "bar",
      value: "#age#",
      label: "#age#",
      gradient: "rising",
      tooltip: {
         template: "#age#"
      },
      xAxis: {
         title: "Users",
         template: "#name#",
         lines: false
      },
      yAxis: {
         title: "Years of Age",
         lines: true
      },...