AnyChart JSON structure - Mendix Forum

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