Picasso Widget Help

[mahitham]

Hi Experts,

I am very new to Widget development.I am trying to build a widget based on below URL Code like below bar chart

https://github.com/q2g/q2g-com-picasso

I have tried like below I have copied the code into html and drag and drop Dimensions and Measures into right panel but not able to see any preview. Please help me on this.

<q2g-com-picasso model="data.model" settings="settings">
<!--
var settingsChart = {
 scales: {
  x: {
   data: {
    extract: {
        field: 'qDimensionInfo/0'
    },
   },
   padding: 0.4
  },
  y: {
   data: {
    field: 'qMeasureInfo/0'
   },
   expand: 0.1,
   invert: true
  }
 },
 components: [{
  type: 'axis',
  scale: 'y',
  dock: 'left'
 }, {
  type: 'axis',
  scale: 'x',
  dock: 'bottom'
 }, {
     key: "bar",
     type: "box",
     data: {
         extract: {
             field: "qDimensionInfo/0",
             props: {
                 start: 0,
                 end: {
                     field: "qMeasureInfo/0"
                 }
             }
         },
     },
     settings: {
         major: {
             scale: "x"
         },
         minor: {
             scale: "y"
         },
         box: {
              fill: settings.setCol
            }
     }
 }]
};

let chart = picasso.chart({
 element: element,
 data: data,
 settings: settingsChart
});

console.log("CHART", chart);
-->
</q2g-com-picasso>

Thanks in advance.