Open LauraKirby opened 6 years ago
I have specified that I would like 7 tick marks. My API returns 7 bar graph data points with 7 dates. Issue: only 6 dates are displayed.
Create stacked bar graph using Angular 5 and Typescript:
initializeGraph() { this.createGraph(); this.createYAxis(); this.createXAxis(); } createGraph() { this.graph = new Rickshaw.Graph({ element: this.graphContainer.nativeElement, renderer: 'bar', stack: true, interpolation: 'linear', series: this.graphData }); this.graph.render(); } createXAxis() { this.xAxis = new Rickshaw.Graph.Axis.X({ graph: this.graph, orientation: 'bottom', ticks: 7, element: document.getElementById('x_axis'), width: this.graphWidth, tickFormat: function(x) { const options = { month: 'short', day: 'numeric' }; const barDate = new Date(x * 1000).toLocaleDateString('en-US', options); console.log(barDate) return barDate; } }); this.xAxis.render(); } createYAxis() { this.yAxis = new Rickshaw.Graph.Axis.Y({ graph: this.graph, element: document.getElementById('y_axis') }); this.yAxis.render(); }
Stacked bar graph data:
"graph": [ { "data": [ { "x": 1522479600, "y": 0 }, { "x": 1522566000, "y": 3.73 }, { "x": 1522652400, "y": 0 }, { "x": 1522738800, "y": 0.09 }, { "x": 1522825200, "y": 0 }, { "x": 1522911600, "y": 0.09 }, { "x": 1522998000, "y": 0 } ], "color": "#48d4bb" }, { "data": [ { "x": 1522479600, "y": 7.45 }, { "x": 1522566000, "y": 0 }, { "x": 1522652400, "y": 0 }, { "x": 1522738800, "y": 0.09 }, { "x": 1522825200, "y": 1.23 }, { "x": 1522911600, "y": 0 }, { "x": 1522998000, "y": 0 } ], "color": "#3c6df0" }
bar graph (showing 6 dates):
log dates calculated (only 6):
I have specified that I would like 7 tick marks. My API returns 7 bar graph data points with 7 dates. Issue: only 6 dates are displayed.
Create stacked bar graph using Angular 5 and Typescript:
Stacked bar graph data:
bar graph (showing 6 dates):
log dates calculated (only 6):