Calling chart/create API not working with formatter function

1

Hello,

I am trying to call the chart/create API using the below JSON String but I am constantly getting “Your POST request did not contain valid JSON.” I am parsing this on the body of the create POST endpoint.

If I copy this JSON into the Chart.js Sandbox Editor (and remove the “chart” tag) it works perfectly.

What am I doing wrong?

Here is my chart JSON:

{
    chart: {
        type: 'horizontalBar',
        data: {
            labels: ['Target', 'Planr Predicted'],
            datasets: [{
                    label: 'Revenue',
                    backgroundColor: 'rgb(80,196,217)',
                    borderColor: 'rgb(80,196,217)',
                    stack: 'Stack 0',
                    borderWidth: 1,
                    data: [8000000, null]
                }, {
                    label: 'Recogized YTD',
                    backgroundColor: 'rgb(55,147,255)',
                    borderColor: 'rgb(55,147,255)',
                    stack: 'Stack 0',
                    data: [null, 2683988]
                }, {
                    label: 'Backlog',
                    backgroundColor: 'rgb(120,129,255)',
                    borderColor: 'rgb(120,129,255)',
                    stack: 'Stack 0',
                    data: [null, 2004679]
                }, {
                    label: 'Predicted Revenue from Sales Bookings',
                    data: [null, 1321700],
                    stack: 'Stack 0',
                    backgroundColor: 'rgb(251,189,66)',
                    borderColor: 'rgb(251,189,66)'
                }, {
                    label: 'Shortfall',
                    data: [null, 1989633],
                    stack: 'Stack 0',
                    backgroundColor: 'rgb(4,227,138)',
                    borderColor: 'rgb(4,227,138)'
                }
            ]
        },
        options: {
            responsive: true,
            legend: {
                position: 'bottom'
            },
            title: {
                display: true,
                position: 'top',
                fontSize: 12,
                fontFamily: 'sans-serif',
                fontColor: 'rgb(102,102,102)',
                fontStyle: 'bold',
                padding: 10,
                lineHeight: 1.2,
                text: 'Revenue - Full Financial Year'
            },
            plugins: {
                datalabels: {
                    display: true,
                    color: 'rgb(102,102,102)',
                    backgroundColor: 'white',
                    borderRadius: 10,
                    borderWidth: 1,
                    font: {
                        family: 'sans-serif',
                        size: 9,
                        style: 'normal'
                    },
                    formatter: function(value, context) { const options = { minimumFractionDigits: 2, maximumFractionDigits: 2 }; const formatted = Number(value).toLocaleString('en', options); return formatted; }
                }
            }
        }
    }        
}

Please help!

2

Just a note to anyone reading this, I managed to solve this!

I’m making the REST call in PL/SQL by first having the JSON as a “string” and then imbedding it into the “create” JSON and it works with the formatting javascript functions also.

w_json := '{type:''horizontalBar'',data:{labels:[''Target'',''Planr Predicted''],datasets:[{label:''Revenue'',backgroundColor:''rgb(80,196,217)'',borderColor:''rgb(80,196,217)'',stack:''Stack 0'',borderWidth:1,data:[8000000,null]},{label:''Recogized YTD'',backgroundColor:''rgb(55,147,255)'',borderColor:''rgb(55,147,255)'',stack:''Stack 0'',data:[null,2683988]},{label:''Backlog'',backgroundColor:''rgb(120,129,255)'',borderColor:''rgb(120,129,255)'',stack:''Stack 0'',data:[null,2004679]},{label:''Predicted Revenue from Sales Bookings'',data:[null,1321700],stack:''Stack 0'',backgroundColor:''rgb(251,189,66)'',borderColor:''rgb(251,189,66)''},{label:''Shortfall'',data:[null,1989633],stack:''Stack 0'',backgroundColor:''rgb(4,227,138)'',borderColor:''rgb(4,227,138)''}]},options:{responsive:true,legend:{position:''bottom''},title:{display:true,position:''top'',fontSize:12,fontFamily:''sans-serif'',fontColor:''rgb(102,102,102)'',fontStyle:''bold'',padding:10,lineHeight:1.2,text:''Revenue - Full Financial Year''},plugins:{datalabels:{display:true,color:''rgb(102,102,102)'',backgroundColor:''white'',borderRadius:10,borderWidth:1,font:{family:''sans-serif'',size:9,style:''normal''},formatter:function(value,context){const options={minimumFractionDigits:2,maximumFractionDigits:2};const formatted=Number(value).toLocaleString(''en'',options);return formatted;}}}}}';
w_body :=    
'{
  "width": 600,
  "height": 300,
  "devicePixelRatio": 1.0,
  "chart": "'||w_json||'"
}';
3

Hi @caddenc, that is indeed the solution :slight_smile: The POST payload must be valid JSON. That means if chart contains Javascript, it must be passed as a string. Documentation