I am trying to implement a simple editable table using SlickGrid using example1_simple (found here http://mleibman.github.com/SlickGrid/examples/example1-simple.html) as a template, but its gone terribly wrong.
My grid has to fit within a tab on the form that is 280 pixels wide and will have 3 columns (id, X, Y). The id will be autoincrementing and x & y will be blank, but for testing I am putting a gradually lengthening string in each cell so on the first row it should read 0, a, b and the second row would contain 1, aa, bb, etc. However each cell is being drawn below the previous, so that row 1 contains '0', row 2 contains '1' and 'a' drawn over each other, and row 3 contains '2', 'aa', and 'b' and so on. I've temporarily put it up on my website http://www.nutanageophysics.com/IFP/test.html so everyone can see. (quick side question - what's best way to preserve live examples such as this?)
Here's my test html file
<!DOCTYPE html>
<html>
<head>
<title>Nutana Project Planner</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/jquery-ui-1.8.16.custom.css" type="text/css"/>
<script src="js/jquery-1.7.min.js"></script>
<script src="js/jquery.event.drag-2.0.min.js"></script>
<script src="js/slick.core.js"></script>
<script src="js/slick.grid.js"></script>
<script src="js/xyGrid.js"></script>
<script type="text/javascript">
var xyGrid;
function initialize() {
xyGrid = new Slick.Grid("#xyGrid", data, columns, options);
}
</script>
</head>
<body onload="initialize();">
<div id=xyGrid >
<!-- the grid is going to be placed here by onLoadXML -->
</div>
</body>
</html>
My SlickGrid code is in xyGrid.js, included here:
var data = [];
var columns = [
{id: "id", name: "id", field: "id"},
{id: "x1", name: "X", field: "x1"},
{id: "y1", name: "Y", field: "y1"},
];
var options = {
enableCellNavigation: true,
enableColumnReorder: false,
};
$(function () {
var a='a';
var b='b';
for (var i = 0; i < 10; i++) {
data[i] = {
id: i,
x1: a,
y1: b,
};
a +="a";
b += "b";
}
})
The only other possible relevant thing is i've defined the style for xyGrid in css as
#xyGrid {
width: 280px;
height: 500px;
}
I've tried changing the width to no effect. All of the other relevant css is in the jquery.ui.css which I haven't touched. I've also unsuccessfully tried a bunch of different Grid options, but the two used here are those used in the example. I've also built a table around my div as in the example but they were using the table for other purposes and it isn't relevant.
Please help.
Thanks,
Marc Pelletier
I believe you're missing the stylesheet:
http://mleibman.github.com/SlickGrid/slick.grid.css
I re-created it locally and it looks okay with that included. Double-check you have all the sheets and scripts included in the original example.
(You can use jsfiddle.net for some sample code. Not sure if it could accommodate all this!)
Related
I found that I can create nice scatter plot with CanvasJS into my HTML templates (see the link: http://canvasjs.com/docs/charts/chart-types/html5-scatter-chart/)
I am creating a website using Django and a MySQL database.
In one of my tables (models) I have 3 fields VARCHAR containing different values:
- the 1st field contains values for X axis.
- The 2nd field contains values for Y axis.
- The 3rd field contains one letter labels.
Here is an example for one entry if it is not clear:
1st field:
999.99;-89.01;-60.29;-145.83;-140.76;-148.24;-88.70;56.92;69.08;-121.37
2nd field:
143.12;146.51;143.73;177.58;121.68;116.45;-14.05;20.77;15.82;168.20
3rd field:
CPPEEECTTE
As you can see, values are separated by ";" in fields 1 and 2.
there are 10 values in field 1, 10 values in field 2, and 10 corresponding letter labels.
All fields are 1 long string.
So my question is simple, I don't know how to make a for loop in javascript so that those coordinates will be taken in the scatter chart.
Here is the example of the canvasjs for scatter chart I want to obtain:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Title of my scatter chart"
},
data: [
{
type: "scatter",
dataPoints: [
{ x: 999.99, y: 143.12 },
{ x: -89.01, y: 146.51 },
{ x: -60.29, y: 143.73 },
{ x: -145.83, y: 177.58 },
{ x: -140.76, y: 121.68 },
{ x: -148.24, y: 116.45 }
]
}
]
});
chart.render();
}
</script>
<script type="text/javascript" src="/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
</body>
</html>
All I want is to generate coordinates in dataPoints with a for loop.
The 3 fields will be 3 rows in a HTML table.
The 3rd field will be used to associate a color to a letter. (Example: C = blue, P = green, E = yellow, T = red).
I have absolutely no idea how to make that in javascript.
If someone is experienced in JS, I would really appreciate some help.
You can do so by traversing the arrays(of x,y values and color) and converting them to the format required by CanvasJS and then updating the chart options.
for(var i = 0; i < xVal.length; i++) {
chart.options.data[0].dataPoints.push({
x: parseFloat(xVal[i]),
y: parseFloat(yVal[i]),
color: colorArr[i]
});
}
Here's a jsfiddle for the same.
Note: I just vastly simplified the program and have left it with the bare essentials ...
So I am trying to add graphs within a sigma.js graph. First, let me post the javascript (sigmaAngualr.js) ...
app = angular.module('sigmaAngular', []);
app.controller('NetworkDataCtrl', function($scope){
var i, s;
$scope.newName = null;
$scope.s = null;
$scope.N = 3;
$scope.newNode = function (id, label){
return {id: id,
label: label,
x: Math.random(),
y: Math.random(),
size: Math.random()+0.2,
color:'#333'}
};
$scope.addNodeGraph = function(id, label){
$scope.s.graph.addNode($scope.newNode(id, label));
console.log(id+'-'+label);
};
$scope.tempNodes = [];
for( i=0; i<$scope.N; i++ )
$scope.tempNodes.push($scope.newNode('id'+i, 'Node'+i));
$scope.s = new sigma({graph:{nodes:$scope.tempNodes, edges:[]}})
});
app.directive('showGraph', function(){
// Create a link function
function linkFunction(scope, element, attrs){
scope.s.addRenderer({container: element[0]})
};
return {
scope: false,
link: linkFunction
}
});
And here is the HTML ...
<!DOCTYPE html>
<html>
<head>
<title>Using AngularJS</title>
<script type="text/javascript" src='lib/sigma/sigma.min.js'></script>
<script type="text/javascript" src='lib/angular/angular.min.js'></script>
<script type="text/javascript" src='lib/sigmaAngular.js'></script>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body ng-app='sigmaAngular'>
<div>
<div ng-controller='NetworkDataCtrl'>
<input type='text' ng-model='newName' />
<button ng-click='addNodeGraph(newName,newName)'> Add Node </button>
<hr>
<div show-graph id='graph-container' s='s' tempNodes='tempNodes'>
</div>
<hr>
</div>
</div>
</body>
</html>
Of course, I am unable to add a node to the graph.
I had also tried another option of creating an entire graph when I add a node. That doesnt work either. (This is no longer true)
Let me try to explain. Now,
When I refresh the browser, I do not see a graph.
When I resize the browser window The graph suddenly appears.
When I type a random name and hit the Add Node button, the graph doesnt change.
When I resize the browser window, the graph changes to reveal the new node.
So in summary, I have to resize the browser window to see any changes in the graph.
Just a side note: The css is below:
#graph-container {
position: relative;
width: 200px;
height: 200px;
border: 1px solid indianred;
}
I feel now that I am really close to solving the problem. Just a tiny bit off somewhere ...
Any help will be greatly appreciated!!!
Basically I am i need of an Ext.Panel which contains an XML-Editor together with syntax-highlighting, line numbers and editing.
I have searched through the web and found the Javascript API CodeMirror.
I have implemented something, but the alignment of the CodeMirror-object-Textfield does not adjust itself to the Top/left of the Ext.Panel and also no line-numbers are seen:
<!DOCTYPE html>
<html>
<head>
<!-- ext imports -->
<script type="text/javascript" language="javascript" src="/ext-5.1.1/build/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="/ext-5.1.1/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
<script type="text/javascript" src="/ext-5.1.1/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
<!-- codemirror imports -->
<script type="text/javascript" language="javascript" src="/CodeMirror-master/lib/codemirror.js"></script>
<link rel="stylesheet" href="/CodeMirror-master/lib/codemirror.css">
<script type="text/javascript" src="/CodeMirror-master/mode/xml/xml.js"></script>
<script type ="text/javascript">
Ext.onReady(function(){
var panel_1 = Ext.create('Ext.panel.Panel', {
frame:true,
id: 'panel_1_id',
title: 'panel_1',
padding: '10 10 10 10',
margin: '10 10 10 10',
autoScroll: true
});
var vp = new Ext.Viewport({
layout: 'fit',
items: [panel_1],
autoScroll: true,
renderTo : Ext.getBody()
});
var myCodeMirror = CodeMirror(panel_1.body, {
value: "<XXX><YYY><AAA>foo1</AAA></YYY><ZZZ>foo2</ZZZ></XXX>"
});
});
</script>
</head>
<body>
</body>
</html>
So the following questions arise:
1.) I thought about extending Ext.Component and somehow pack the CodeMirror object inside it?
Is this possible?
2.) Is it possible to adapt my little codeexample from above to align it correctly?
This can be solved with a few slight tweaks to your code.
The key point here is that the behaviour of CodeMirror will vary depending on the type of the first parameter you pass to the CodeMirror constructor. Passing a HTML element (as in your example) will result in the HTML DOM function appendChild() being called. And this is why there is a large space before your new element, because it is being appended after the body of the panel.
If you pass in a function (acting as a callback) to the CodeMirror constructor then you will be returned with the HTML element that is the CodeMirror. Constructing the element this way enables you to replace the body element of the panel with the new HTML element (rather than appending).
This can be achieved by creating a simple function. The code changes you require are as follows....
Create a function to pass to CodeMirror constructor
var codeMirrorCallbackFunction = function(codeMirrorEl) {
var panelDom = panel_1.el.dom;
// the node at index 1 is the body (index 0 is panel header)
panelDom.replaceChild(codeMirrorEl, panelDom.childNodes[1]);
};
Create the CodeMirror object passing the function as 1st parameter
var myCodeMirror = CodeMirror(codeMirrorCallbackFunction, {
value: "<XXX><YYY><AAA>foo1</AAA></YYY><ZZZ>foo2</ZZZ></XXX>"
});
Update the padding of the Panel
// without this change the panel header and codemirror html overlap
padding: '25 10 10 10'
You are doing good, you only need to add a property like
var myCodeMirror = CodeMirror(panel.body, {
value: "<XXX><YYY><AAA>foo1</AAA></YYY><ZZZ>foo2</ZZZ></XXX>",
lineNumbers: true
});
I am trying to build a dynamically fed (data) straight lines chart. I built a prototype using graphael.
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Line Charts</title>
<script src="raphael.js"></script>
<script src="g.raphael.js"></script>
<script src="g.line.js"></script>
<script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
window.onload = function () {
var r = Raphael("holder");
var yAxisTags = ["A","B","C","D"];
var xData = [
[2000,2015],//hack line, transparent; used to specify the range of the axis
[2008,2014],[2004,2005],[2009,2010],[2000,2007],[2000,2014],[2010,2012]
];
var yData = [
[1, 1],//y coordinates of hack line
[0, 0],[1, 1],[1, 1],[2, 2],[3, 3],[0,0],
[0, 0]//hack line, transparent.Used to be able to draw straight lines
];
var colors = [
'transparent',//line 1
'red','green','green','purple','turquoise','black',
'transparent'];//'transparent' IS A MUST, a hack to make it have a straight line
var options = {
nostroke: false,
gutter: 90,
axis: "0 0 1 1",
symbol: "circle",
axisxstep:10,
axisystep:3,
colors: colors
};
var lines = r.linechart(100, 10, 700, 300,xData,yData,options);
// AXIS (x and y) have values but do not drawn the lines
lines.axis[0].attr([{stroke: false}]);
lines.axis[1].attr([{stroke: false}]);
// Thickness of symbols (ie dots)
lines.symbols.attr({ r: 4 });
// Animate dots on first load
lines.animate({"stroke-width": 1}, 1000);//ALL lines,1000 is animation time
// Set text for Y axis coordinates (instead of numbers)
$.each(lines.axis[1].text.items, function(index, label) {
this.attr("text", yAxisTags[index]);
});
};
</script>
</head>
<body>
<div id="holder" style="width:50%"></div>
</body>
</html>
And here is how it looks like:
So basically I want a time related (jumps +2 years from point to point) line chart graph with labels on Y-axis, that is made by drawing straight lines and to which dynamic data is being fed. The current code works with this specific configuration only but once i start modifying the data, the display is not accurate anymore:
x-axis (time axis) gets buggy and time doesn't jump +2 years
if there is a large difference in between two years (2 X coordinates), the line is drawn as a dot
will have to modify axisxstep and axisxstep (don't understand how the logic behind these works to be honest)
etc..
Is there a technique/hack around to make my desired line chart concept work with dynamic data using graphael? or it is not feasible with this library?
For anyone stuck with this same scenario:
Since I am using AngularJS, I ended up using angular-google-chart.
It is a directive wrapper around google chart; it is stable and straightforward to use.
I am having trouble creating multiple bars with flot. There is a plugin that can be downloaded here: http://www.benjaminbuffet.com/public/js/jquery.flot.orderBars.js that makes graphs with multiple bars per x category like this: http://www.pikemere.co.uk/blog/tutorial-flot-how-to-create-bar-charts/ (see under the customized bar charts). However, his example is a bit different in that it uses the time function rather than categories.
Here is my code:
<!doctype html>
<head>
<script language="javascript" type="text/javascript" src="/flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="/flot/jquery.flot.js"> </script>
<script language="javascript" type="text/javascript" src="/flot/jquery.flot.categories.js"></script>
<script language="javascript" type="text/javascript" src="/flot/jquery.flot.orderBars.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var data1 = [
{
label: "Male" ,
data: [["True", 1],["False", 2]] ,
bars: {
show: true,
barWidth: 0.13,
order: 1
}
},
{
label: "Female" ,
data: [["True", 3],["False", 4]],
bars: {
show: true,
barWidth: 0.13,
order: 2
}
}
];
$.plot($("#placeholder"), data1, {
xaxis: {
mode: "categories"
},
});
});
</script>
<title>Test</title>
</head>
<body>
<div id="placeholder" style="width:600px;height:300px"></div>
</body>
</html>
With the above code, the graph displays, but without any bars. If I remove the order:1 and order:2, it displays correctly, except with the bars overlapping each other rather than being offset by each other (I think it just ignores the orderbars plugin).
This is a very simplified example of what I really want to do, but if someone knows how I can get it to do what I want fairly simply, I would be very much appreciative.
To sum up, what I want is to have two sets of two bars. The first set with "True" under them and the second second set with "False" under them. I do not want to use numbers to represent the values, if possible as it will greatly complicate my more complex situation. But if I must, I would still like to know how to do it that way.
change the function getAxeMinMaxValues in orderBars.js
function getAxeMinMaxValues(series, AxeIdx) {
var minMaxValues = new Array();
for (var i = 0; i < series.length; i++) {
series[i].data[series[i].data.length - 1][AxeIdx];
minMaxValues[0] = 0;
minMaxValues[1] = series[i].data.length - 1;
}
return minMaxValues;
}
hope this will help