I am using angular and type script so I installed angular-plotly.js. However I am wondering if I really need to use that because I cant seem to find any tutorials on how to create heatMaps for that. I found the plotly.js tutorial and I did this:
import { Component, OnInit } from ‘@angular/core’;
@Component({
selector: ‘app-optimization-heat-map’,
template: <plotly-plot [data]="graph.data" [layout]="graph.layout" [useResizeHandler]="true" [style]="{position: 'relative', width: '100%', height: '100%'}"> </plotly-plot>,
styleUrls: [’./optimization-heat-map.component.css’]
})
export class OptimizationHeatMapComponent implements OnInit {
constructor() { }
ngOnInit() {
}
public graph = {
data: [
{z: [[1, 20, 30, 50, 1], [20, 1, 60, 80, 30], [30, 60, 1, -10, 20]],
x: [‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’],
y: [‘Morning’, ‘Afternoon’, ‘Evening’],
type: ‘heatmap’}
],
layout: {autosize: true, title: ‘A Fancy Plot’}
};
}
But I end up getting a line graph or something not what the example looks like at https://plot.ly/javascript/heatmaps/
Not sure what to do I need to create a heat map for a project at work.