I have the following running code in JavaScript's Plottable.js.
var data = [{ x: 1, y: 1 }, { x: 2, y: 3 }, { x: 3, y: 2 },
{ x: 4, y: 4 }, { x: 5, y: 3 }, { x: 6, y: 5 }];
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.Bar()
.addDataset(new Plottable.Dataset(data))
.x(function(d) { return d.x; }, xScale)
.y(function(d) { return d.y; }, yScale)
.animated(true);
new Plottable.Components.Table([
[null, null],
[yAxis, plot],
[null, xAxis]
]).renderTo("svg#example");
window.addEventListener("resize", function() {
plot.redraw();
});
<!doctype html>
<html>
<head>
</head>
<body>
<svg width="100%" height="100%" id="example"></svg>
<!-- Act on the thing -->
<link href="http://plottablejs.org/assets/css/application.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.12.0/plottable.css" rel="stylesheet"/>
<link href="http://plottablejs.org/assets/css/application.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.12.0/plottable.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.12.0/plottable.css" rel="stylesheet"/>
</body>
</html>
As stated in the image below, how can I modify my Javascript code so that it can include the horizontal line at y=2?
You can use Plottable.Components.GuideLineLayer:
var data = [{ x: 1, y: 1 }, { x: 2, y: 3 }, { x: 3, y: 2 },
{ x: 4, y: 4 }, { x: 5, y: 3 }, { x: 6, y: 5 }];
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.Bar()
.addDataset(new Plottable.Dataset(data))
.x(function(d) { return d.x; }, xScale)
.y(function(d) { return d.y; }, yScale)
.animated(true);
var guideline = new Plottable.Components.GuideLineLayer("horizontal")
.scale(yScale);
guideline.value(2);
var plots = new Plottable.Components.Group([guideline, plot]);
new Plottable.Components.Table([
[null, null],
[yAxis, plots],
[null, xAxis]
]).renderTo("svg#example");
window.addEventListener("resize", function() {
plot.redraw();
});
<!doctype html>
<html>
<head>
</head>
<body>
<svg width="100%" height="100%" id="example"></svg>
<!-- Act on the thing -->
<link href="http://plottablejs.org/assets/css/application.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.12.0/plottable.css" rel="stylesheet"/>
<link href="http://plottablejs.org/assets/css/application.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.12.0/plottable.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.12.0/plottable.css" rel="stylesheet"/>
</body>
</html>
Related
What I need is to build the chart as on this image:
I'm trying to do this by combining two types of series "verticalRangeArea" and "scatterLine". For some reason they are not working together.
$("#chart").kendoChart({
valueAxis: {
min: new Date("2014/01/01 08:00").getTime(),
max: new Date("2014/01/01 17:00").getTime(),
majorUnit: 60 * 60 * 1000, // 60 minutes in milliseconds
labels: {
template: "#= kendo.toString(new Date(value), 'HH:mm') #"
}
},
series: [
{
type: "scatterLine",
data: [[new Date("2014/01/01 09:30").getTime(), 5], [new Date("2014/01/01 09:30").getTime(), 11]]
},
{
type: "verticalRangeArea",
data: [[new Date("2014/01/01 09:00").getTime(), new Date("2014/01/01 10:00").getTime()], [new Date("2014/01/01 09:00").getTime(), new Date("2014/01/01 10:00").getTime()]],
},
{
type: "verticalRangeArea",
data: [[new Date("2014/01/01 11:00").getTime(), new Date("2014/01/01 12:00").getTime()], [new Date("2014/01/01 11:00").getTime(), new Date("2014/01/01 12:00").getTime()]],
}],
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
</head>
<body>
<div id="chart"></div>
</body>
</html>
I came to the next solution:
var data = {
points: [
[new Date("01/01/2013 01:00"), 2],
[new Date("01/01/2013 01:20"), 5],
[new Date("01/01/2013 01:30"), 3],
[new Date("01/03/2013 15:00"), 1]
],
plotBands: [
{ from: new Date("01/01/2013"), to: new Date("01/02/2013"), name: "name1", color: "coral", opacity: 0.5 },
{ from: new Date("01/03/2013"), to: new Date("01/04/2013"), name: "name2", color: "blue", opacity: 0.5 }
]
};
$("#chart").kendoChart({
zoomable: true,
series: [
{
type: "scatterLine",
data: data.points,
color: "red",
width: 2
}
],
xAxis: {
type: "date",
plotBands: data.plotBands,
name: "xAxis",
baseUnit: "hours",
min: new Date("01/01/2013"),
max: new Date("01/04/2013"),
crosshair: {
tooltip: {
visible: true,
background: "#ff6800",
format: "{0:dd/MM/yyyy HH:mm}"
},
visible: true
}
},
render: function(e) {
var plotBands = data.plotBands;
var xAxis = e.sender.getAxis("xAxis");
var group = new kendo.drawing.Group();
for(var i = 0; i < plotBands.length; i++) {
var slot = xAxis.slot(plotBands[i].from);
var labelPos = [slot.origin.x + 10, 20 ];
var label = new kendo.drawing.Text(plotBands[i].name, labelPos, {
fill: {
color: "black"
},
font: "18px Arial,Helvetica,sans-serif"
});
group.append(label);
}
e.sender.surface.draw(group);
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
</head>
<body>
<div id="chart"></div>
</body>
This question builds on this question.
Using d3.js/dc.js, I have three (or more) charts. All have the same x-axis (a date series), so the nth datapoint on any chart will correspond exactly to the nth datapoint on the x-axis of the other charts.
When the user clicks on a dot point in one chart, I need to get the "y" data from the same point on the other 2+ charts and return an array or object or string with the chartID/y-datum from the other charts, something like this:
{"chart1":"30","chart2":"50","chart3":"10"}
Here is an example borrowed from Gerardo Furtado's answer to the above-referenced question. How would I modify Gerardo's example to return the datapoints from each chart?
var data = [{x:20, y:30},
{x:30, y:60},
{x:40, y:40},
{x:50, y:90},
{x:60, y:20},
{x:70, y:90},
{x:80, y:90},
{x:90, y:10}];
draw("#svg1");
draw("#svg2");
draw("#svg3");
function draw(selector){
var width = 250,
height = 250;
var svg = d3.select(selector)
.append("svg")
.attr("width", width)
.attr("height", height);
var xScale = d3.scaleLinear()
.domain([0, 100])
.range([30, width - 10]);
var yScale = d3.scaleLinear()
.domain([0,100])
.range([height - 30, 10]);
var circles = svg.selectAll("foo")
.data(data)
.enter()
.append("circle");
circles.attr("r", 10)
.attr("fill", "teal")
.attr("cx", d=>xScale(d.x))
.attr("cy", d=>yScale(d.y));
var xAxis = d3.axisBottom(xScale);
var yAxis = d3.axisLeft(yScale);
svg.append("g").attr("transform", "translate(0,220)")
.attr("class", "xAxis")
.call(xAxis);
svg.append("g")
.attr("transform", "translate(30,0)")
.attr("class", "yAxis")
.call(yAxis);
}
d3.selectAll("circle").on("mouseover", function(){
var thisDatum = d3.select(this).datum();
d3.selectAll("circle").filter(d=>d.x == thisDatum.x && d.y == thisDatum.y).attr("fill", "firebrick");
}).on("mouseout", function(){
d3.selectAll("circle").attr("fill", "teal")
})
#svg1 {
float: left;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="svg1"></div>
<div id="svg2"></div>
<div id="svg3"></div>
As you have several different data sets, I'll modify the answer I wrote in your previous question so we can have different y values.
First, let't put all data in an object. That way, we can access the different data sets later:
var dataObject = {
data1: [{
x: 10,
y: 30
}, ...
}],
data2: [{
x: 10,
y: 70
}, ...
}],
data3: [{
x: 10,
y: 10
}, ...
}]
};
Then, we call the draw function:
draw("#svg1", dataObject.data1);
draw("#svg2", dataObject.data2);
draw("#svg3", dataObject.data3);
So, to get what you want, in the mouseover...
d3.selectAll("circle").on("mouseover", function() {
var thisDatum = d3.select(this).datum();
findPoints(thisDatum);
})
We call this function:
function findPoints(datum) {
var myObject = {};
for (var i = 1; i < 4; i++) {
myObject["chart" + i] = dataObject["data" + i].filter(e => e.x === datum.x)[0].y;
}
console.log(myObject)//use return instead of console.log
}
Here is the demo:
var dataObject = {
data1: [{
x: 10,
y: 30
}, {
x: 20,
y: 60
}, {
x: 30,
y: 40
}, {
x: 40,
y: 90
}, {
x: 50,
y: 20
}, {
x: 60,
y: 90
}, {
x: 70,
y: 90
}, {
x: 80,
y: 10
}],
data2: [{
x: 10,
y: 70
}, {
x: 20,
y: 60
}, {
x: 30,
y: 80
}, {
x: 40,
y: 10
}, {
x: 50,
y: 10
}, {
x: 60,
y: 20
}, {
x: 70,
y: 10
}, {
x: 80,
y: 90
}],
data3: [{
x: 10,
y: 10
}, {
x: 20,
y: 20
}, {
x: 30,
y: 40
}, {
x: 40,
y: 90
}, {
x: 50,
y: 80
}, {
x: 60,
y: 70
}, {
x: 70,
y: 50
}, {
x: 80,
y: 50
}]
};
draw("#svg1", dataObject.data1);
draw("#svg2", dataObject.data2);
draw("#svg3", dataObject.data3);
function draw(selector, data) {
var width = 200,
height = 100;
var svg = d3.select(selector)
.append("svg")
.attr("width", width)
.attr("height", height);
var xScale = d3.scaleLinear()
.domain([0, 100])
.range([30, width - 10]);
var yScale = d3.scaleLinear()
.domain([0, 100])
.range([height - 30, 10]);
var circles = svg.selectAll("foo")
.data(data)
.enter()
.append("circle");
circles.attr("r", 5)
.attr("fill", "palegreen")
.attr("cx", d => xScale(d.x))
.attr("cy", d => yScale(d.y));
var xAxis = d3.axisBottom(xScale);
var yAxis = d3.axisLeft(yScale).ticks(2);
svg.append("g").attr("transform", "translate(0,70)")
.attr("class", "xAxis")
.call(xAxis);
svg.append("g")
.attr("transform", "translate(30,0)")
.attr("class", "yAxis")
.call(yAxis);
}
d3.selectAll("circle").on("mouseover", function() {
var thisDatum = d3.select(this).datum();
findPoints(thisDatum);
d3.selectAll("circle").filter(d => d.x == thisDatum.x).attr("fill", "firebrick");
}).on("mouseout", function() {
d3.selectAll("circle").attr("fill", "palegreen")
})
function findPoints(datum) {
var myObject = {};
for (var i = 1; i < 4; i++) {
myObject["chart" + i] = dataObject["data" + i].filter(e => e.x === datum.x)[0].y;
}
console.log(JSON.stringify(myObject))
}
#svg1, #svg2 {
float: left;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="svg1"></div>
<div id="svg2"></div>
<div id="svg3"></div>
<!doctype>
<html>
<head>
<link type="text/css" rel="stylesheet" href="rickshawmmm/src/css/graph.css">
<link type="text/css" rel="stylesheet" href="rickshawmmm/examples/css/lines.css">
<script src="rickshawmmm/vendor/d3.v3.js"></script>
<script src="rickshawmmm/rickshaw.js"></script>
<style>
#chart {
position: relative;
left: 40px;
}
#y_axis {
position: absolute;
top: 0;
bottom: 0;
width: 40px;
}
#x_axis {
position: relative;
left: 40px;
height: 40px;
}
</style>
</head>
<body>
<div id="chart_container">
<div id="y_axis"></div>
<div id="chart"></div>
<div id="x_axis"></div>
</div>
<div>
<button onclick="window.showTextOnOtherSide()">Change text location</button>
<button onclick="window.setSize()">setSize()</button>
</div>
<script>
// instantiate our graph!
var graph = new Rickshaw.Graph( {
element: document.getElementById("chart"),
renderer: 'line',
height: 300,
width: 800,
series: [
{
data: [ { x: 0, y: 800 }, { x: 1, y: 200 }, { x: 2, y: 800 }, { x: 3, y: 70 }, { x: 4, y: 32 } ],
color: "#c05020"
},
]
} );
var y_ticks = new Rickshaw.Graph.Axis.Y( {
graph: graph,
orientation: 'left',
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
element: document.getElementById('y_axis')
} );
graph.render();
window.showTextOnOtherSide = function() {
y_ticks.orientation = y_ticks.orientation === 'right' ? 'left' : 'right';
graph.render();
};
window.setSize = function() {
var width = parseInt(prompt('New axis width?', y_ticks.width), 10);
var height = parseInt(prompt('New axis height?', y_ticks.height), 10);
y_ticks.setSize({
width: width,
height: height
});
};
var format = function(n) {
var map = {
0: 'zero',
1: 'first',
2: 'second',
3: 'third',
4: 'fourth'
};
return map[n];
}
var x_ticks = new Rickshaw.Graph.Axis.X( {
graph: graph,
orientation: 'bottom',
element: document.getElementById('x_axis'),
pixelsPerTick: 200,
tickFormat: format
} );
graph.render();
</script>
</body>
</html>
I have some code i am try to draw the curve in array method but i want to how to draw the curve in quadratic based on three value for example 5x^2+8x-6 ;a=5,b=8,c=-6 in the three value based how to draw the quadratic equation please help me.
Suppose I create a bar chart from some data that I have. This bar chart is generated on a set of x- and y- axes. How can I plot a function (in the form y=f(x)) as a line over that same set of axes? I want to do this so that you can easily compare the trends shown by the bar chart and the function.
You just generate the data to feed to d3 by running the function over the desired values of the domain and then use for example line genrators to draw the line.
var w = 400;
var h = 400;
var padding = 50;
var svg = d3.select('svg').attr('width', w + padding * 2).attr('height', h + padding * 2);
var xScale = d3.scale.linear().domain([-10, 10]).range([0, w]);
var yScale = d3.scale.linear().domain([2, -2]).range([0, h]);
var xAxis = d3.svg.axis().scale(xScale);
var yAxis = d3.svg.axis().scale(yScale).orient("left");
var g = svg.append("g").attr("transform", "translate(" + padding + "," + padding + ")");
g.append("g").attr("transform", "translate(0, " + w / 2 + ")").call(xAxis);
g.append("g").attr("transform", "translate(" + h / 2 + ", 0)").call(yAxis);
var line = d3.svg.line().interpolate("basis")
.x(function(d, i) {
return xScale(d.x);
})
.y(function(d, i) {
return yScale(d.y);
})
g.append('path')
.data([fn1()])
.attr("d", line);
g.append('path')
.data([fn2()])
.attr("d", line);
g.append('path')
.data([fn3()])
.attr("d", line);
g.append('path')
.data([fn4()])
.attr("d", line);
function fn1() {
function f(x) {
return Math.cos(x);
}
return _.chain(_.range(-10, 10)).map(function(x) {
return {
y: f(x),
x: x
};
}).value();
}
function fn2() {
function f(x) {
return Math.sin(x);
}
return _.chain(_.range(-10, 10)).map(function(x) {
return {
y: f(x),
x: x
};
}).value();
}
function fn3() {
function f(x) {
return Math.exp(x);
}
return _.chain(_.range(-10, 10)).map(function(x) {
return {
y: f(x),
x: x
};
}).value();
}
function fn4() {
function f(x, m, b) {
return m * x + b;
}
return _.chain(_.range(-10, 10)).map(function(x) {
return {
y: f(x, 1, 1),
x: x
};
}).value();
}
path {
stroke: black;
fill: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<body>
<svg></svg>
</body>
I am making use of D3 and Math.js.
The reason I am using Math.js is that the function can be very complex
from:
4 * sin(x) + 5 * tan(x/2)
4 * sin(x^2) + 5 * cos(x/2)^3
Anything but f(x) :)
You can define your any domain of your choice here:
//define xDomain change it domain of your choice
var xDomain = [-10, 10];
//define yDomain change it domain of your choice
var yDomain = [-10, 10];
Then make the conventional bar chart for the domain nothing special this is a standard D3 code for making bar charts.
//make the bar chart by loading the tsv
d3.tsv("data.tsv", type, function(error, data) {
if (error) throw error;
//make x axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + y(0) + ")")
.call(xAxis);
//make y axis
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + x(0) + ",0)")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");
//make bar chart rectangle
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) {
return x(d.letter) - 10;
})
.attr("width", 20)
.attr("y", function(d) {
return y(d.frequency);
})
.attr("height", function(d) {
return height / 2 - y(d.frequency);
});
makeLineFunction();
});
This is my function which will make the line chart based on the value entered in the text box(for the xdomain):
function makeLineFunction() {
//remove any line if present
d3.selectAll(".line").remove();
//make an array of all x points
var xArray = d3.range(xDomain[0], xDomain[1], 0.5);
//get the formula from the text box above
var value = d3.select("#function_text").node().value;
//generate the data using math.js
var data = xArray.map(function(x1) {
return {
x: x1,
//using math.js for evaluating y point for the given x
y: math.eval(value, {
x: x1
})
};
});
//make the path
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
}
Working code here, necessary comments added for help.
Hope this helps!
Here is an example which illustrate the line chart over bar chat. You can generate y=f(x) values using jsp or php at run time.
update the data part
series: [
{
title: 'Column',
type: 'column',
axisY: 'y1',
data: [['A', 1], ['B', 4], ['C', 3],
['D', 5], ['E', 2], ['F', 1]]
},
{
title: 'Line',
type: 'line',
axisY: 'y2',
data: [['A', 40], ['B', 60], ['C', 62],
['D', 52], ['E', 70], ['F', 75]]
}
]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Multiple Axes Example
</title>
<link rel="stylesheet" type="text/css" href="http://www.jqchart.com/css/jquery.jqChart.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.21/themes/smoothness/jquery-ui.css" />
<script src="http://www.jqchart.com/js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="http://www.jqchart.com/js/jquery.mousewheel.js" type="text/javascript"></script>
<script src="http://www.jqchart.com/js/jquery.jqChart.min.js" type="text/javascript"></script>
<script src="http://www.jqchart.com/js/jquery.jqRangeSlider.min.js" type="text/javascript"></script>
<script lang="javascript" type="text/javascript">
$(document).ready(function () {
var background = {
type: 'linearGradient',
x0: 0,
y0: 0,
x1: 0,
y1: 1,
colorStops: [{ offset: 0, color: '#d2e6c9' },
{ offset: 1, color: 'white' }]
};
$('#jqChart').jqChart({
title: { text: 'Multiple Axes' },
border: { strokeStyle: '#6ba851' },
background: background,
animation: { duration: 1 },
shadows: {
enabled: true
},
axes: [
{
name: 'y1',
location: 'left'
},
{
name: 'y2',
location: 'right',
strokeStyle: '#FCB441',
majorGridLines: {
strokeStyle: '#FCB441'
},
majorTickMarks: {
strokeStyle: '#FCB441'
}
}
],
series: [
{
title: 'Column',
type: 'column',
axisY: 'y1',
data: [['A', 1], ['B', 4], ['C', 3],
['D', 5], ['E', 2], ['F', 1]]
},
{
title: 'Line',
type: 'line',
axisY: 'y2',
data: [['A', 40], ['B', 60], ['C', 62],
['D', 52], ['E', 70], ['F', 75]]
}
]
});
});
</script>
</head>
<body>
<div>
<div id="jqChart" style="width: 500px; height: 300px;"></div>
</div>
</body>
</html>
I am using Plottable.js to draw chart on my page.
I would like to resize the chart when the window is being resized.
I've tried to set the size via css (as well as svg width and height attribute) with no success.
Here is my attempt to set via svg attribute:
$('#svgSample').attr('width', w);
$('#svgSample').attr('height', h);
Here is my attempt to set via css:
$('#svgSample').css({
'width': w + 'px',
'height': h + 'px'
});
Any idea?
Thanks
I believe all you need to do is to call Plot.redraw() after setting svg attributes
here's an example:
window.onload = function() {
var data = [
{ x: 1, y: 1 },
{ x: 2, y: 1 },
{ x: 3, y: 2 },
{ x: 4, y: 3 },
{ x: 5, y: 5 },
{ x: 6, y: 8 }
];
var xScale = new Plottable.Scales.Linear();
var yScale = new Plottable.Scales.Linear();
var plot = new Plottable.Plots.Scatter()
.addDataset(new Plottable.Dataset(data))
.x(function(d) { return d.x; }, xScale)
.y(function(d) { return d.y; }, yScale);
plot.renderTo("#chart");
$('#chart').attr('width', 500);
$('#chart').attr('height', 400);
plot.redraw();
}
</style> <link rel="stylesheet" type="text/css" href="https://rawgithub.com/palantir/plottable/develop/plottable.css"> <style type="text/css">
body { background-color: #AAA; }
svg { background-color: #FFF; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://rawgithub.com/palantir/plottable/develop/plottable.js"></script>
<svg id="chart" width="100" height="100"></svg>
Using CSS you can overwrite the width, by using CSS "important" property
Ex: width: 100% !important; apply this to your div and try
Thanks to Zoe, I have modified my code to response to redraw on windows resize.
var data = [
{ x: 1, y: 1 },
{ x: 2, y: 1 },
{ x: 3, y: 2 },
{ x: 4, y: 3 },
{ x: 5, y: 5 },
{ x: 6, y: 8 }
];
var xScale = new Plottable.Scales.Linear();
var yScale = new Plottable.Scales.Linear();
var xAxis = new Plottable.Axes.Category(xScale, "bottom");
var yAxis = new Plottable.Axes.Numeric(yScale, "left");
var plot = new Plottable.Plots.Bar()
.addDataset(new Plottable.Dataset(data))
.x(function(d) { return d.x; }, xScale)
.y(function(d) { return d.y; }, yScale);
var chart = new Plottable.Components.Table([
[yAxis, plotBar],
[null, xAxis]
]);
chart.renderTo("svg#svgSample");
window.addEventListener("resize", function () {
plot.redraw();
});
As you can see, I don't even need to worry about setting width and height in css. I think Plottable handle it when calling plot.redraw()!
Thanks Zoe!