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

Tutorial examples not working #3386

Closed Rincewind3d closed 7 years ago

Rincewind3d commented 7 years ago

I'm currently evaluating plottable.

Based on the tutorial (http://plottablejs.org/tutorials/basics/) I created a line chart. But only the x-axis is rendered.

bildschirmfoto 2017-08-10 um 16 26 11

I checked the version of plottable which is used on the example page. It's 2.7.0! Could it be that the examples and tutorials are a little bit outdated...?

chart.js

$(document).ready(function () {

    var xScale = new Plottable.Scales.Linear();
    var yScale = new Plottable.Scales.Linear();

    var xAxis = new Plottable.Axes.Numeric(xScale, "bottom");
    var yAxis = new Plottable.Axes.Numeric(yScale, "left");

    var plot = new Plottable.Plots.Line();
    plot.x(function(d) { return d.x; }, xScale);
    plot.y(function(d) { return d.y; }, yScale);

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

    var dataset = new Plottable.Dataset(data);
    plot.addDataset(dataset);

    var chart = new Plottable.Components.Table([
        [yAxis, plot],
        [null, xAxis]
    ]);

    chart.renderTo("div#chart");

});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script src="node_modules/d3/build/d3.js"></script>
    <script src="node_modules/plottable/plottable.js"></script>
    <link rel="stylesheet" href="node_modules/plottable/plottable.css">
    <script src="chart.js"></script>
</head>
<body>
<div id="chart"></div>
</body>
</html>
hellochar commented 7 years ago

Apologies for that! You should be able to follow the upgrade steps at https://github.com/palantir/plottable/wiki/Upgrading-to-3.0.0 to get a working version. Closing as dupe of #3342