Split-packed-bubble-chart

Apps (Frontend)
1

Dear App Experts,

currently I am trying to use the CC Split-packed-bubble-chart.
I imported the CC with:

https://dev.onedata.customer.services/static/split-packed-bubble-chart/0.1.1/split-packed-bubblechart.umd.min.js

Then I created the Element like in the highcharts elements:

{
"id": "bubbleChart",
"renderer": "SplitPackedBubbleChart",
"type": "custom",
"sourceOptions": {
    "sql": "SELECT i.Restbon as x,  i.UMSATZ_MIT_RABATT as y, i.info AS z FROM inputTable i "
},

"source": "renpen_ds",
"config": {
"chart": {
"type": "bubble",
"plotBorderWidth": 1,
"zoomType": "xy"
},
"legend": {
"enabled": true
},
"title": {
"text": "Sugar and fat intake per country"
},
"subtitle": {
"text": "Source: Testdata"
},
"xAxis": {
"gridLineWidth": 1,
"title": {
"text": "Daily fat intake"
},
"labels": {
"format": " gr"
}
},
"yAxis": {
"startOnTick": false,
"endOnTick": false,
"title": {
"text": "Daily sugar intake"
},
"labels": {
"format": " gr"
},
"maxPadding": 0.2
},
"tooltip": {
"useHTML": true,
"headerFormat": "<table>",
"pointFormat": "<tr><th colspan='2'><h3>{point.z}</h3></th></tr><tr><th>Fat intake:</th><td>{point.x}g</td></tr><tr><th>Sugar intake:</th><td>{point.y}g</td></tr><tr><th>Obesity (adults):</th><td>{point.z}%</td></tr>",
"footerFormat": "</table>",
"followPointer": true
},
  "series": [
    {
      "name": "restbon",
      "columnName": "x"
    },
    {
      "name": "umsatz",
      "columnName": "y"
    },
    {
      "name": "artikeltext",
      "columnName": "z"
    }
  ],

"plotOptions": {
"series": {
"dataLabels": {
"enabled": true,
"format": "{point.z}"
}
}
}
}
}

But the Element is not shown correctly. So my questions are:
Do I import the CC correct?
Do I have given the data correct to the Element?
Do I need to deploy this component somehow to the markant instance?

Any hint is appreciated :slight_smile:

2

There are a couple of possible problems:

  • Don’t add the CC bei clicking on the plus next to Custom Element Packs. This leads to a malformatted entry. Instead go to the customElementPacks in the RAW JSON and add it with double quotes like
    image
    image257×529 26.3 KB 
"customElementPacks": [
    "myCCurl"
  ]
  • The custom component must be available on your instance. That is not the case by default for every custom component
  • You named the wrong version of the custom compnent (that is on your instance)
  • You can check if the url for the CC is correct and it is available if you open the url in the browser. You should see some plain code then.
3

Thank you Kai for your reply. It seems the URL is not correct

4

Solved by Max, Thanks a lot, the URL was wrong :slight_smile: