palantir / plottable

:bar_chart: A library of modular chart components built on D3
http://plottablejs.org/
MIT License
2.96k stars 224 forks source link

Using Angular and chart.renderTo #3472

Open reckoner opened 6 years ago

reckoner commented 6 years ago

I am trying to use plottable with angular but I don't know what to put in the chart.renderTo or how to set up the HTML app component.

Any hints appreciated!

import { Component } from '@angular/core';
import { Plots, Scales, Axes, Dataset, Components } from 'plottable';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  name = 'foo';
  chart: HTMLElement;

  onChangeFirst() {
    this.name = 'goo';
    const xScale = new Scales.Linear();
    const yScale = new Scales.Linear();
    const xAxis = new Axes.Numeric(xScale, 'bottom');
    const yAxis = new Axes.Numeric(yScale, 'left');
    const plot = new Plots.Line();
    plot.x(function(d) { return d.x; }, xScale);
    plot.y(function(d) { return d.y; }, yScale);

    const data = [
      { "x": 0, "y": 1 },
      { "x": 1, "y": 2 },
      { "x": 2, "y": 4 },
      { "x": 3, "y": 8 }
    ];

    const dataset = new Dataset(data);
    plot.addDataset(dataset);
    const chart = new Components.Table([
      [yAxis, plot],
      [null, xAxis]
    ]);
    // chart.renderTo(this.chart);
    chart.renderTo("svg#tutorial-result");       
  }

}
Steven4294 commented 5 years ago

bumparoosky

antoinebis commented 4 years ago

News on this!?