Create GenericChart from Json

[uittorio]

Hi, I am currently building an application where people can customise their template in json plotly standard (not sure if there is a standard, just the one used in javascript).

{
  "data": [...],
   "layout": {...},
  "frames": [...]
}

Is it possible to create a GenericGraph starting from the json without having to map each single property?

[kMutagene]

The thing with our strongly typed layers is that they unfortunately only work well for JSON creation. plotly.js JSON has properties that have arbitrary types, which you can do in a dynamically typed language such as JavaScript or python, but is quite hard to do in .NET.

We circumvent this on object creation by offering a strongly typed subset of possible types and by using DynamicObj, which lets us set members dynamically. However, this basically prevents deserialization - even if you could deserialize all nested objects into DynamicObj (which does not work), there is no way of knowing whether that DynamicObj represents a Trace, a LinearAxis, or any other strong type abstraction provided by Plotly.NET without looking at the name of the member and additional knowledge about the plotly JSON schema.

Your use case is especially hard, because chart templates are basically allowing all possible plotly objects. I'd suggest only providing the options to set a subset of template properties and expand with what is needed. But maybe a pointer to the code where we implement the plotly template at least helps a little:

Plotly.NET/src/Plotly.NET/Templates/ChartTemplates.fs

Lines 168 to 701 in 11456b4

	/// the default template, as used in the python lib by default.
	let plotly =
	// non-standard props, may change in the future
	let annotationdefaults =
	let tmp = DynamicObj()
	tmp?arrowcolor <- "#2a3f5f"
	tmp?arrowhead <- 0
	tmp?arrowwidth <- 1
	tmp
	let shapedefaults =
	let tmp = DynamicObj()
	tmp?line <- Line.init (Color = Color.fromHex "#2a3f5f")
	tmp
	let layoutTempplate =
	Layout.init (
	AutoTypeNumbers = StyleParam.AutoTypeNumbers.Strict,
	Colorscale =
	DefaultColorScales.init (
	Diverging =
	StyleParam.Colorscale.Custom
	[
	0., Color.fromString "#8e0152"
	0.1, Color.fromString "#c51b7d"
	0.2, Color.fromString "#de77ae"
	0.3, Color.fromString "#f1b6da"
	0.4, Color.fromString "#fde0ef"
	0.5, Color.fromString "#f7f7f7"
	0.6, Color.fromString "#e6f5d0"
	0.7, Color.fromString "#b8e186"
	0.8, Color.fromString "#7fbc41"
	0.9, Color.fromString "#4d9221"
	1., Color.fromString "#276419"
	],
	Sequential =
	StyleParam.Colorscale.Custom
	[
	0.0, Color.fromString "#0d0887"
	0.1111111111111111, Color.fromString "#46039f"
	0.2222222222222222, Color.fromString "#7201a8"
	0.3333333333333333, Color.fromString "#9c179e"
	0.4444444444444444, Color.fromString "#bd3786"
	0.5555555555555556, Color.fromString "#d8576b"
	0.6666666666666666, Color.fromString "#ed7953"
	0.7777777777777778, Color.fromString "#fb9f3a"
	0.8888888888888888, Color.fromString "#fdca26"
	1.0, Color.fromString "#f0f921"
	],
	SequentialMinus =
	StyleParam.Colorscale.Custom
	[
	0.0, Color.fromString "#0d0887"
	0.1111111111111111, Color.fromString "#46039f"
	0.2222222222222222, Color.fromString "#7201a8"
	0.3333333333333333, Color.fromString "#9c179e"
	0.4444444444444444, Color.fromString "#bd3786"
	0.5555555555555556, Color.fromString "#d8576b"
	0.6666666666666666, Color.fromString "#ed7953"
	0.7777777777777778, Color.fromString "#fb9f3a"
	0.8888888888888888, Color.fromString "#fdca26"
	1.0, Color.fromString "#f0f921"
	]
	),
	Font = Font.init (Color = Color.fromHex "#2a3f5f"),
	Hoverlabel = Hoverlabel.init (Align = StyleParam.Align.Left),
	HoverMode = StyleParam.HoverMode.Closest,
	PaperBGColor = Color.fromKeyword White,
	PlotBGColor = Color.fromHex "#E5ECF6",
	Title = Title.init (X = 0.05)
	)
	//set axes/subplot templates (these are no direct Layout props in our model)
	|> Layout.updateColorAxisById (
	StyleParam.SubPlotId.ColorAxis 1,
	ColorAxis.init (ColorBar = ColorBar.init (OutlineWidth = 0., Ticks = StyleParam.TickOptions.Empty))
	)
	|> Layout.updateGeoById (
	StyleParam.SubPlotId.Geo 1,
	Geo.init (
	BgColor = Color.fromKeyword White,
	LakeColor = Color.fromKeyword White,
	LandColor = Color.fromHex "#E5ECF6",
	ShowLakes = true,
	ShowLand = true,
	SubunitColor = Color.fromKeyword White
	)
	)
	|> Layout.updateMapboxById (
	StyleParam.SubPlotId.Mapbox 1,
	Mapbox.init (Style = StyleParam.MapboxStyle.MapboxLight)
	)
	|> Layout.updatePolarById (
	StyleParam.SubPlotId.Polar 1,
	Polar.init (
	AngularAxis =
	AngularAxis.init (
	GridColor = Color.fromKeyword White,
	LineColor = Color.fromKeyword White,
	Ticks = StyleParam.TickOptions.Empty
	),
	RadialAxis =
	RadialAxis.init (
	GridColor = Color.fromKeyword White,
	LineColor = Color.fromKeyword White,
	Ticks = StyleParam.TickOptions.Empty
	),
	BGColor = Color.fromHex "#E5ECF6"
	)
	)
	|> Layout.updateSceneById (
	StyleParam.SubPlotId.Scene 1,
	Scene.init (
	XAxis =
	LinearAxis.init (
	BackgroundColor = Color.fromHex "#E5ECF6",
	GridColor = Color.fromKeyword White,
	GridWidth = 2.,
	LineColor = Color.fromKeyword White,
	ShowBackground = true,
	Ticks = StyleParam.TickOptions.Empty,
	ZeroLineColor = Color.fromKeyword White
	),
	YAxis =
	LinearAxis.init (
	BackgroundColor = Color.fromHex "#E5ECF6",
	GridColor = Color.fromKeyword White,
	GridWidth = 2.,
	LineColor = Color.fromKeyword White,
	ShowBackground = true,
	Ticks = StyleParam.TickOptions.Empty,
	ZeroLineColor = Color.fromKeyword White
	),
	ZAxis =
	LinearAxis.init (
	BackgroundColor = Color.fromHex "#E5ECF6",
	GridColor = Color.fromKeyword White,
	GridWidth = 2.,
	LineColor = Color.fromKeyword White,
	ShowBackground = true,
	Ticks = StyleParam.TickOptions.Empty,
	ZeroLineColor = Color.fromKeyword White
	)
	)
	)
	|> Layout.updateTernaryById (
	StyleParam.SubPlotId.Ternary 1,
	Ternary.init (
	AAxis =
	LinearAxis.init (
	GridColor = Color.fromKeyword White,
	LineColor = Color.fromKeyword White,
	Ticks = StyleParam.TickOptions.Empty
	),
	BAxis =
	LinearAxis.init (
	GridColor = Color.fromKeyword White,
	LineColor = Color.fromKeyword White,
	Ticks = StyleParam.TickOptions.Empty
	),
	CAxis =
	LinearAxis.init (
	GridColor = Color.fromKeyword White,
	LineColor = Color.fromKeyword White,
	Ticks = StyleParam.TickOptions.Empty
	),
	BGColor = Color.fromHex "#E5ECF6"
	)
	)
	|> Layout.updateLinearAxisById (
	StyleParam.SubPlotId.XAxis 1,
	LinearAxis.init (
	AutoMargin = StyleParam.TickAutoMargin.All,
	GridColor = Color.fromKeyword White,
	LineColor = Color.fromKeyword White,
	Ticks = StyleParam.TickOptions.Empty,
	Title = Title.init (Standoff = 15),
	ZeroLineColor = Color.fromKeyword White,
	ZeroLineWidth = 2.
	)
	)
	|> Layout.updateLinearAxisById (
	StyleParam.SubPlotId.YAxis 1,
	LinearAxis.init (
	AutoMargin = StyleParam.TickAutoMargin.All,
	GridColor = Color.fromKeyword White,
	LineColor = Color.fromKeyword White,
	Ticks = StyleParam.TickOptions.Empty,
	Title = Title.init (Standoff = 15),
	ZeroLineColor = Color.fromKeyword White,
	ZeroLineWidth = 2.
	)
	)
	|> fun l ->
	// set non-standard props
	l?annotationdefaults <- annotationdefaults
	l?shapedefaults <- shapedefaults
	l
	let traceTemplates: Trace list =
	[
	Trace2D.initBar (
	Trace2DStyle.Bar(
	XError = Error.init (Color = Color.fromHex "#2a3f5f"),
	YError = Error.init (Color = Color.fromHex "#2a3f5f"),
	Marker =
	Marker.init (
	Outline = Line.init (Color = Color.fromHex "#E5ECF6", Width = 0.5),
	Pattern =
	Pattern.init (
	FillMode = StyleParam.PatternFillMode.Overlay,
	Size = 10,
	Solidity = 0.2
	)
	)
	)
	)
	TracePolar.initBarPolar (
	TracePolarStyle.BarPolar(
	Marker =
	Marker.init (
	Outline = Line.init (Color = Color.fromHex "#E5ECF6", Width = 0.5),
	Pattern =
	Pattern.init (
	FillMode = StyleParam.PatternFillMode.Overlay,
	Size = 10,
	Solidity = 0.2
	)
	)
	)
	)
	TraceCarpet.initCarpet (
	TraceCarpetStyle.Carpet(
	AAxis =
	LinearAxis.initCarpet (
	EndLineColor = Color.fromHex "#2a3f5f",
	GridColor = Color.fromKeyword White,
	LineColor = Color.fromKeyword White,
	MinorGridColor = Color.fromKeyword White,
	StartLineColor = Color.fromHex "#2a3f5f"
	),
	BAxis =
	LinearAxis.initCarpet (
	EndLineColor = Color.fromHex "#2a3f5f",
	GridColor = Color.fromKeyword White,
	LineColor = Color.fromKeyword White,
	MinorGridColor = Color.fromKeyword White,
	StartLineColor = Color.fromHex "#2a3f5f"
	)
	)
	)
	TraceGeo.initChoroplethMap (
	TraceGeoStyle.ChoroplethMap(
	ColorBar = ColorBar.init (OutlineWidth = 0., Ticks = StyleParam.TickOptions.Empty),
	ColorScale =
	StyleParam.Colorscale.Custom
	[
	0.0, Color.fromString "#0d0887"
	0.1111111111111111, Color.fromString "#46039f"
	0.2222222222222222, Color.fromString "#7201a8"
	0.3333333333333333, Color.fromString "#9c179e"
	0.4444444444444444, Color.fromString "#bd3786"
	0.5555555555555556, Color.fromString "#d8576b"
	0.6666666666666666, Color.fromString "#ed7953"
	0.7777777777777778, Color.fromString "#fb9f3a"
	0.8888888888888888, Color.fromString "#fdca26"
	1.0, Color.fromString "#f0f921"
	]
	)
	)
	Trace2D.initContour (
	Trace2DStyle.Contour(
	ColorBar = ColorBar.init (OutlineWidth = 0., Ticks = StyleParam.TickOptions.Empty),
	ColorScale =
	StyleParam.Colorscale.Custom
	[
	0.0, Color.fromString "#0d0887"
	0.1111111111111111, Color.fromString "#46039f"
	0.2222222222222222, Color.fromString "#7201a8"
	0.3333333333333333, Color.fromString "#9c179e"
	0.4444444444444444, Color.fromString "#bd3786"
	0.5555555555555556, Color.fromString "#d8576b"
	0.6666666666666666, Color.fromString "#ed7953"
	0.7777777777777778, Color.fromString "#fb9f3a"
	0.8888888888888888, Color.fromString "#fdca26"
	1.0, Color.fromString "#f0f921"
	]
	)
	)
	TraceCarpet.initContourCarpet (
	TraceCarpetStyle.ContourCarpet(
	ColorBar = ColorBar.init (OutlineWidth = 0., Ticks = StyleParam.TickOptions.Empty)
	)
	)
	Trace2D.initHeatmap (
	Trace2DStyle.Heatmap(
	ColorBar = ColorBar.init (OutlineWidth = 0., Ticks = StyleParam.TickOptions.Empty),
	ColorScale =
	StyleParam.Colorscale.Custom
	[
	0.0, Color.fromString "#0d0887"
	0.1111111111111111, Color.fromString "#46039f"
	0.2222222222222222, Color.fromString "#7201a8"
	0.3333333333333333, Color.fromString "#9c179e"
	0.4444444444444444, Color.fromString "#bd3786"
	0.5555555555555556, Color.fromString "#d8576b"
	0.6666666666666666, Color.fromString "#ed7953"
	0.7777777777777778, Color.fromString "#fb9f3a"
	0.8888888888888888, Color.fromString "#fdca26"
	1.0, Color.fromString "#f0f921"
	]
	)
	)
	Trace2D.initHeatmapGL (
	Trace2DStyle.Heatmap(
	ColorBar = ColorBar.init (OutlineWidth = 0., Ticks = StyleParam.TickOptions.Empty),
	ColorScale =
	StyleParam.Colorscale.Custom
	[
	0.0, Color.fromString "#0d0887"
	0.1111111111111111, Color.fromString "#46039f"
	0.2222222222222222, Color.fromString "#7201a8"
	0.3333333333333333, Color.fromString "#9c179e"
	0.4444444444444444, Color.fromString "#bd3786"
	0.5555555555555556, Color.fromString "#d8576b"
	0.6666666666666666, Color.fromString "#ed7953"
	0.7777777777777778, Color.fromString "#fb9f3a"
	0.8888888888888888, Color.fromString "#fdca26"
	1.0, Color.fromString "#f0f921"
	]
	)
	)
	Trace2D.initHistogram (
	Trace2DStyle.Histogram(
	Marker =
	Marker.init (
	Pattern =
	Pattern.init (
	FillMode = StyleParam.PatternFillMode.Overlay,
	Size = 10,
	Solidity = 0.2
	)
	)
	)
	)
	Trace2D.initHistogram2D (
	Trace2DStyle.Histogram2D(
	ColorBar = ColorBar.init (OutlineWidth = 0., Ticks = StyleParam.TickOptions.Empty),
	ColorScale =
	StyleParam.Colorscale.Custom
	[
	0.0, Color.fromString "#0d0887"
	0.1111111111111111, Color.fromString "#46039f"
	0.2222222222222222, Color.fromString "#7201a8"
	0.3333333333333333, Color.fromString "#9c179e"
	0.4444444444444444, Color.fromString "#bd3786"
	0.5555555555555556, Color.fromString "#d8576b"
	0.6666666666666666, Color.fromString "#ed7953"
	0.7777777777777778, Color.fromString "#fb9f3a"
	0.8888888888888888, Color.fromString "#fdca26"
	1.0, Color.fromString "#f0f921"
	]
	)
	)
	Trace2D.initHistogram2DContour (
	Trace2DStyle.Histogram2DContour(
	ColorBar = ColorBar.init (OutlineWidth = 0., Ticks = StyleParam.TickOptions.Empty),
	ColorScale =
	StyleParam.Colorscale.Custom
	[
	0.0, Color.fromString "#0d0887"
	0.1111111111111111, Color.fromString "#46039f"
	0.2222222222222222, Color.fromString "#7201a8"
	0.3333333333333333, Color.fromString "#9c179e"
	0.4444444444444444, Color.fromString "#bd3786"
	0.5555555555555556, Color.fromString "#d8576b"
	0.6666666666666666, Color.fromString "#ed7953"
	0.7777777777777778, Color.fromString "#fb9f3a"
	0.8888888888888888, Color.fromString "#fdca26"
	1.0, Color.fromString "#f0f921"
	]
	)
	)
	Trace3D.initMesh3D (
	Trace3DStyle.Mesh3D(
	ColorBar = ColorBar.init (OutlineWidth = 0., Ticks = StyleParam.TickOptions.Empty)
	)
	)
	TraceDomain.initParallelCoord (
	TraceDomainStyle.ParallelCoord(
	Line =
	Line.init (
	ColorBar = ColorBar.init (OutlineWidth = 0., Ticks = StyleParam.TickOptions.Empty)
	)
	)
	)
	TraceDomain.initPie (TraceDomainStyle.Pie(AutoMargin = true))
	Trace2D.initScatter (
	Trace2DStyle.Scatter(
	Marker =
	Marker.init (
	ColorBar = ColorBar.init (OutlineWidth = 0., Ticks = StyleParam.TickOptions.Empty)
	)
	)
	)
	Trace3D.initScatter3D (
	Trace3DStyle.Scatter3D(
	Line =
	Line.init (
	ColorBar = ColorBar.init (OutlineWidth = 0., Ticks = StyleParam.TickOptions.Empty)
	),
	Marker =
	Marker.init (
	ColorBar = ColorBar.init (OutlineWidth = 0., Ticks = StyleParam.TickOptions.Empty)
	)
	)
	)
	TraceCarpet.initScatterCarpet (
	TraceCarpetStyle.ScatterCarpet(
	Marker =
	Marker.init (
	ColorBar = ColorBar.init (OutlineWidth = 0., Ticks = StyleParam.TickOptions.Empty)
	)
	)
	)
	TraceGeo.initScatterGeo (
	TraceGeoStyle.ScatterGeo(
	Marker =
	Marker.init (
	ColorBar = ColorBar.init (OutlineWidth = 0., Ticks = StyleParam.TickOptions.Empty)
	)
	)
	)
	Trace2D.initScatterGL (
	Trace2DStyle.Scatter(
	Marker =
	Marker.init (
	ColorBar = ColorBar.init (OutlineWidth = 0., Ticks = StyleParam.TickOptions.Empty)
	)
	)
	)
	TraceMapbox.initScatterMapbox (
	TraceMapboxStyle.ScatterMapbox(
	Marker =
	Marker.init (
	ColorBar = ColorBar.init (OutlineWidth = 0., Ticks = StyleParam.TickOptions.Empty)
	)
	)
	)
	TracePolar.initScatterPolar (
	TracePolarStyle.ScatterPolar(
	Marker =
	Marker.init (
	ColorBar = ColorBar.init (OutlineWidth = 0., Ticks = StyleParam.TickOptions.Empty)
	)
	)
	)
	TracePolar.initScatterPolarGL (
	TracePolarStyle.ScatterPolar(
	Marker =
	Marker.init (
	ColorBar = ColorBar.init (OutlineWidth = 0., Ticks = StyleParam.TickOptions.Empty)
	)
	)
	)
	TraceTernary.initScatterTernary (
	TraceTernaryStyle.ScatterTernary(
	Marker =
	Marker.init (
	ColorBar = ColorBar.init (OutlineWidth = 0., Ticks = StyleParam.TickOptions.Empty)
	)
	)
	)
	Trace3D.initSurface (
	Trace3DStyle.Surface(
	ColorBar = ColorBar.init (OutlineWidth = 0., Ticks = StyleParam.TickOptions.Empty),
	ColorScale =
	StyleParam.Colorscale.Custom
	[
	0.0, Color.fromString "#0d0887"
	0.1111111111111111, Color.fromString "#46039f"
	0.2222222222222222, Color.fromString "#7201a8"
	0.3333333333333333, Color.fromString "#9c179e"
	0.4444444444444444, Color.fromString "#bd3786"
	0.5555555555555556, Color.fromString "#d8576b"
	0.6666666666666666, Color.fromString "#ed7953"
	0.7777777777777778, Color.fromString "#fb9f3a"
	0.8888888888888888, Color.fromString "#fdca26"
	1.0, Color.fromString "#f0f921"
	]
	)
	)
	TraceDomain.initTable (
	TraceDomainStyle.Table(
	Cells =
	TableCells.init (
	Fill = TableFill.init (Color = Color.fromHex "#EBF0F8"),
	Line = Line.init (Color = Color.fromKeyword White)
	),
	Header =
	TableCells.init (
	Fill = TableFill.init (Color = Color.fromHex "#C8D4E3"),
	Line = Line.init (Color = Color.fromKeyword White)
	)
	)
	)
	]
	Template.init (layoutTempplate, traceTemplates) |> Template.withColorWay ColorWays.plotly

[kMutagene]

Oh, quite hacky solution, but you could include the template as javascript in the output of this lib by patching the generated html string for a chart, e.g. by replacing the actual template in the output of GenericChart.toChartHTML

[uittorio]

Thank you for the explanation!

Another approach I might follow is to use directly the plotty js library and run the application through puppeter to generate the image!