AnyChart JSON structure

0
Hi all,  Here is a JSON example of what will populate an anychart scatter and line plot var trace1 = { x: [0, 1, 2, 3, 4, 5, 6, 7, 8], y: [0, 1, 2, 3, 4, 5, 6, 7, 8], name: 'Name of Trace 1', type: 'scatter' }; var trace2 = { x: [0, 1, 2, 3, 4, 5, 6, 7, 8], y: [1, 0, 3, 2, 5, 4, 7, 6, 8], name: 'Name of Trace 2', type: 'scatter' }; var data = [trace1, trace2]; var layout = { title: { text:'Plot Title', font: { family: 'Courier New, monospace', size: 24 }, xref: 'paper', x: 0.05, }, xaxis: { title: { text: 'x Axis', font: { family: 'Courier New, monospace', size: 18, color: '#7f7f7f' } }, }, yaxis: { title: { text: 'y Axis', font: { family: 'Courier New, monospace', size: 18, color: '#7f7f7f' } } } }; Plotly.newPlot('myDiv', data, layout);   I’m still a bit unclear about Mendix’s JSON Structure feature. Does anyone know if the above can be put into a string attribute that the graph widget will read? With the “Name of trace” , X and Y values being pulled from the database? 
asked
1 answers
1

Hi,

1 – Make a com.mendix.charts.json file and put it in your theme folder;

2 - You can style the desired graph in a web app  @ https://plot.ly/create/#/ and then look to the Json-tree there and update your local json file with it, then you get something like this;

{
	"charts": {
		"ColumnChart": {
			"layout": {
				"showlegend": true,
				"legend": {
					"yanchor": "bottom",
					"xanchor": "right",
					"x": 0.14,
					"y": -0.68,
					 "orientation": "v",
					"traceorder": "normal"
				},

				"title": "Dropout Reasons",
				"margin": {
					"b": 140
				},
				"bargap": 0.5,
				"xaxis": {
					"tickangle": 0,
					"tickfont": {
						"size": 12
					}
				},
				"yaxis": {
					"tickformat": ".1d"
				}
			}
		}
	}
}

3  – empty your layout, configuration settings in the chart widget if it is included in the JSON 

 

Go make it

answered