How do you get the jqplot to resize the min and max and ranges like it would on an inital plot?
Right now it replots but the new data goes off the screen.
<body>
<input type=button onClick=replot() value=replot><br>
<div id="chart1" style="height:400px;width:600px; "></div>
</body>
</html>
<script>
var plot1;
function replot(){
alert(plot1);
alert(plot1.data);
plot1.series[0].data=[[0,1],[0,2],[1,4]];
alert(plot1.data);
plot1.replot();
}
// Some simple loops to build up data arrays.
var cosPoints = [];
for (var i=0; i<2*Math.PI; i+=0.4){
cosPoints.push([i, Math.cos(i)]);
}
$(document).ready(function(){
plot1 = $.jqplot('chart1', [cosPoints], {
title: 'Google, Inc.'
});
});
after some investigation I found the following fix
plot1.replot( { resetAxes: true } );
Now it works.
Related
I'm hoping this is a problem that's really easy to fix. Having copied all of the necessary code from the Google Visualization site, everything is working with one exception. I have a data table where, if I select a row, the select handler is called - but I am unable to get table.getSelection() to work
I've seen a suggestion that I might need to include getChart(), but that doesn't fix it (at least not in any of the ways I tried).
In the extract below, I get the first alert message when selecting a row, but not the second, as the code stops running at the table.getSelection() line.
Can anyone suggest what the problem might be?
Many thanks!
<html>
</body>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['table']});
google.charts.setOnLoadCallback(drawTable_1);
function drawTable_1() {
js_booking = <?php echo json_encode($arr_booking); ?>;
js_name = <?php echo json_encode($arr_name); ?>;
var data = new google.visualization.DataTable();
data.addColumn('string', 'Booking');
data.addColumn('string', 'Name');
for (i = 0; i < 5; i++) {
data.addRows([
[js_booking[i], js_name[i]]
]);
}
var table = new google.visualization.Table(document.getElementById('table_div_1'));
table.draw(data, {showRowNumber: false, sort: 'disable', width: '95%', allowHtml:true});
google.visualization.events.addListener(table, 'select', selectHandler);
}
function selectHandler(e) {
alert('A table row was selected');
var selection = table.getSelection();
alert('Selection identified');
}
</script>
</head>
<body>
<div id="table_div_1">Loading...</div>
</body>
<br>
</html>
don't really see a problem with the code, seems to work fine here.
only minor issue...
generally, chart events should be assigned after the chart is created but before the chart is drawn.
see following working snippet...
google.charts.load('current', {
packages: ['table']
}).then(function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Booking');
data.addColumn('string', 'Name');
for (var i = 0; i < 5; i++) {
data.addRow(['Booking ' + (i + 1), 'Name ' + (i + 1)]);
}
var table = new google.visualization.Table(document.getElementById('table_div_1'));
google.visualization.events.addListener(table, 'select', selectHandler);
table.draw(data, {showRowNumber: false, sort: 'disable', width: '95%', allowHtml:true});
function selectHandler(e) {
console.log('A table row was selected');
var selection = table.getSelection();
console.log('Selection identified', JSON.stringify(selection));
}
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div_1"></div>
Has anyone been able to get paper.js working with ember.js? I am new to both libraries and have not been able to get things to work. When I refer to the 'paper' object I get an error: 'paper' is not defined.
Any help would be much appreciated!!
-nt
This is an example of using paper.js along with ember.js. When clicking an event is sent to an ember view from the paperjs event handling code, which populates an array of the corresponding controller, which is bound to the template and renders it on the output.
http://emberjs.jsbin.com/vunegose/1
http://emberjs.jsbin.com/vunegose/1/edit
js
function getView($el){
return Ember.View.views[$el.closest(".ember-view").attr("id")];
}
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexController = Ember.Controller.extend({
entries:[]
});
App.IndexView = Ember.View.extend({
actions:{
testAction:function(){
this.get("controller.entries").pushObject("now:"+Date.now());
}
}
});
hbs
<script type="text/x-handlebars">
<h2> Welcome to Ember.js with paper.js example</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<div class="canvas">
<canvas resize="true" id="canvas-1"></canvas>
</div>
<div class="output">
<b>output:</b>
{{#each entry in entries}}
<p>{{entry}}</p>
{{/each}}
</div>
</script>
paperscript (from http://paperjs.org/examples/chain/)
<script type="text/paperscript" canvas="canvas-1">
// Adapted from the following Processing example:
// http://processing.org/learning/topics/follow3.html
// The amount of points in the path:
var points = 25;
// The distance between the points:
var length = 35;
var path = new Path({
strokeColor: '#E4141B',
strokeWidth: 20,
strokeCap: 'round'
});
var start = view.center / [10, 1];
for (var i = 0; i < points; i++)
path.add(start + new Point(i * length, 0));
function onMouseMove(event) {
path.firstSegment.point = event.point;
for (var i = 0; i < points - 1; i++) {
var segment = path.segments[i];
var nextSegment = segment.next;
var vector = segment.point - nextSegment.point;
vector.length = length;
nextSegment.point = segment.point - vector;
}
path.smooth();
}
function onMouseDown(event) {
path.fullySelected = true;
path.strokeColor = '#e08285';
getView($("#canvas-1")).send("testAction");
}
function onMouseUp(event) {
path.fullySelected = false;
path.strokeColor = '#e4141b';
}
</script>
<script type="text/javascript" src="raphael.js"></script>
<script>
var paper = new Raphael("holder", 320, 200);
function testPaper(){
var width10 = paper.width * 0.1;
var height10 = paper.height * 0.1;
var width80 = paper.width * 0.8;
var height80 = paper.height * 0.8
var c = paper.rect( width10, height10, width80, height80, Math.min( width10, height10 ) );
}
</script>
</head>
<body onload = "testPaper()">
<div id="holder"></div>
</body>
What's wrong with the above code? I've been trying to get Raphael working for over an hour now & it always complains:
Uncaught TypeError: Cannot read property 'x' of undefined raphael.js:11
The script that uses Raphael is probably running before the "holder" element has been created.
Either create the Raphael in a ready/onload event or trivially arrange the HTML like so:
<body>
<div id="holder"></div> <!-- also use correct closing tag -->
<script src="raphael.js"></script>
<script>
var paper = new Raphael("holder", 320, 200);
// ..
</script>
</body>
I had the same problem using draw2d library in Angular. I couldn't initialize the canvas. It's worth to note that the element MUST have the same name as the initialized canvas.
Im trying to load a knockout observable array 25 items at a time using a count variable. The idea is that when you click a button you get another 25 items in the list. Sounds simple but Im useless with knockout.
I tried calling $root.getCount and $parent.getCount and put getCount in my list-view div as a value but none work. I might be over thinking it. All i want to do is put a named variable into the if statement where $getCount is. help would be awesome.
<div class="list-view" >
<ul data-bind="foreach: myBigList" class="shop_list">
<!-- ko if: $index() < $getCount -->
<li class="list_row">
</li>
<!-- /ko -->
</ul>
</div>
here's my view model
$(function () {
var viewModel = {
count: ko.observable(25),
getCount: function () {
return count;
},
updateCount: function () {
count+=count;
},
};
ko.applyBindings(viewModel);
})
I'm not sure I understand what you are really trying to achieve, but I'm going to assume you already have a big list of items that you want to display in groups of 25. You can achieve that using the visible binding:
<div class="list-view" >
<ul data-bind="foreach: myBigList" class="shop_list">
<li class="list_row" data-bind="visible: $index() < $parent.count()">
</li>
</ul>
</div>
Since count is an observable, to upate it's value you need to do this:
$(function () {
function ViewModel() {
this.count = ko.observable(25);
this.updateCount = function () {
var newCount = this.count() + 25;
this.count(newCount);
};
}
ko.applyBindings(new ViewModel());
})
Since count is an observable, you must use the function syntax to return it: return count();. If you want to add 25 to the count variable each time the updateCount method is called, you will need to hardcode the value.
$(function () {
var viewModel = {
count: ko.observable(25),
getCount: function () {
return count();
},
updateCount: function () {
count()+=25;
},
};
ko.applyBindings(viewModel);
})
I am new to jquery, so apologies if this is a lengthy question. The following is what I have come up with for a horizontal slider to scroll a div containing lists of images.
The result is the slider not scrolling the div. Any help would be great.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var slideDrag,
slideWidth = 330,
slideSpeed = 200;
animated = false;
$(".scroll-slider").slider({
animate: slideSpeed,
start: checkType,
slide: doSlide,
max: slideWidth
});
// Set each slider to a value
$(".scroll-slider").each(function(index){
$(this).slider("value", 330 / 5 * index);
});
// You can also change a slider at any time like so:
// $(".scroll-slider:eq(0)").slider("value", value);
//
// That would move the first slider to a value, along with its content
function checkType(e){
slideDrag = $(e.originalEvent.target).hasClass("ui-slider-handle");
}
function doSlide(e, ui){
var target = $(e.target).prev(".scroll-content"),
// If sliders were above the content instead of below, we'd use:
// target = $(e.target).next(".scroll-content")
maxScroll = target.attr("scrollWidth") - target.width();
// Need to check type now to prevent the new change handler from firing twice when user clicks on slider,
// because both 'slide' and 'change' events are fired on a click, but only a 'change' when setting slider
// value manually via code.
if (e.type == 'slide'){
// Was it a click or drag?
if (slideDrag === true){
// User dragged slider head, match position
target.attr({scrollLeft: ui.value * (maxScroll / slideWidth) });
}
else{
// User clicked on slider itself, animate to position
target.stop().animate({scrollLeft: ui.value * (maxScroll / slideWidth) }, slideSpeed);
}
animated = true;
}
else{
if (animated === false){
target.stop().animate({scrollLeft: ui.value * (maxScroll / slideWidth) }, slideSpeed);
}
animated = false;
}
}
});
</script>
</script>
<style>
/* Styling the scroll elements */
.scroll-container{padding-bottom:30px}
.scroll-content{width:330px;height:110px;overflow:hidden;margin-bottom:10px}
.scroll-content ul{
width:880px;
height:110px;
margin-bottom:5px
}
.scroll-content li{
float:left;
}
.ui-slider .ui-slider-handle{width:16px;height:12px;position:absolute;top:-3px;background:#234786;border:none}
</style>
<body>
<div id="wrapper">
<h2>Multiple Slider Control Demo</h2>
<div id="left">
<div class="scroll-container">
<div class="scroll-content">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
</div>
<div class="scroll-slider"></div>
</div>
</div>
Are you trying to work from this demo?
http://cnanney.com/journal/demo/div-slide/
I had the same error, and replaced the version of jQuery I was using with the one used in the demo and it worked.