Monday, November 26, 2018

Chart create by Code

function chartview()
{
  var chartObj = kdv_createColumnChartJSObject();

  var chartWidget = new kony.ui.Chart2D3D({
    "id": "chartid",
    "isVisible": true
  }, {
    "widgetAlignment": constants.WIDGET_ALIGN_CENTER,
    "contentAlignment": constants.CONTENT_ALIGN_MIDDLE_LEFT,
    "containerWeight": 100
  },
                                          chartObj);
  frmChart.flxMain.add(chartWidget);
}

//creating chart object with chart properties and chart data...
function kdv_createColumnChartJSObject()
{

  var setofdat =  kony.store.getItem("usersessionid");
  var setdata = kony.store.getItem("LSArrayDetails")[setofdat].MarkDetailofUser;

  //var setofdat =  kony.store.getItem("usersessionid");
  //kony.store.getItem("LSArrayDetails")[setofdat].MarkDetailofUser;
  var chartJSObj ={
    "chartProperties":{
      "chartHeight": 50,
      "drawEntities":["axis","grid","columnChart"],         
      "columnChart":{
        "columnId": [0],
        /////// animations
        "animations": {
          "onInitAnimation": true
        },
        "graphType": "normal",
        "dataAlignToAxis": ["primaryYAxis"],
        "plotMissingValues": "assumeZero",
        /////// bar config
        "bar": {
          "width": [400],
          "fillType": ["color"],
          "transparency": [0],
          "gradientType": ["linearTopToBottom"],
          "gradientRatios": [
            [0, 20, 50, 100]
          ],
          "color": ["0x169EECFF", "0xBE0056ff", "0xFCC40EFF", "0xff0000ff", "0x00ff00ff", "0x0000ffff"],
        },
        "border": {
          "visible": false,
          "line": {
            "color": ["0xaaaaaaff"],
            "width": [1],
            "transparency": [0]
          }
        },
        /////// chart datalabels
        "dataLabels": {
          "visible": true,
          "indicators": ["numberValue"],
          "separator": "space",
          "placement": "inside",
          "orientationAngle": 0,
          "font": {
            "size": [14],
            "family": ["Verdana"],
            "style": ["Bold"],
            "color": ["0xaaaaaaff"],
            "transparency": [0]
          },
        }
      }
    },
    "chartData":{
      "columnNames":{
        "values":["col1"]
      },
      "rowNames":{
        "values":["10th","12","UG"]
      },
      "data":{
        "col1":setdata
      }
    }
  };
  return chartJSObj;
}

0 comments:

Post a Comment