I have code like below. I have attached 2 screenhots where in issue is clear. I just want Y-axis data to be hardcoded like 5,10,15,20,25 and data to be represented correctly in graph.
Trail 1: If i use addAxis for Y
1. Data shows properly
2. But y Axis ticks are not as required.
Trail 2: If i add addCategoryAxis for Y
1. Data does not show up properly
2. y Axis ticks are not as required. I need 5 interval between each ticks.
Is there a way to solve this problem? Am i missing anything?
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 800, 400);
var data = [
{
"Type": "Type1",
"Range": 128000,
"Price": 20
},
{
"Type": "Type1",
"Range": 128000,
"Price": 18
},
{
"Type": "Type1",
"Range": 145000,
"Price": 21
},
{
"Type": "Type2",
"Range": 129000,
"Price": 20
},
{
"Type": "Type2",
"Range": 145000,
"Price": 21
},
{
"Type": "Type2",
"Range": 195000,
"Price": 17
}
];
var chart = new dimple.chart(svg, data);
chart.setBounds(60,20,680,330);
var x = chart.addCategoryAxis("x", "Range");
var y1 = chart.addAxis("y", "Price");
y1.ticks = 5;
var lines = chart.addSeries("Type", dimple.plot.line, [x,y1]);
lines.lineMarkers = true;
x.addOrderRule("Tyre");
chart.addLegend(60, 5, 680, 10, "right", lines);
chart.draw();
</script>
</div>
</html>
Have you tried using the tickValues function?
You can use it to specify exact values for the ticks:
yAxis.tickValues(d3.range(0, 25, 5));
Related
I have the following data
"meta": {
"total_count": 17
},
"items": [
{
"id": 80,
"meta": {
"type": "",
"detail_url": "",
"html_url": "",
"slug": "",
"first_published_at": ""
},
"title": "some title",
"image": {
"id": 46,
"meta": {
"type": "wagtailimages.Image",
"detail_url": "some url",
"download_url": "/media/original_images/im.png"
},
"title": "im.png",
"width": 100,
"height": 80
},
}
]
Now if I try to get the width of an image inside :src attribute it works but if I try to pass it to a method it doesn't
, a snippet of the HTML code is:
<li v-for="(item, index) in response_data">
<a v-bind:href="item.meta.html_url">
<div class="icon" :class="classObject(item.image.width,item.image.height)">
<img v-if="item.image" v-bind:src="item.image.meta.download_url" alt=""/>
<img v-else src="{% static 'images/logo-dummy.svg' %}" alt="logo-dummy.svg"/>
</div>
where classObject is a method that compares the width and the height, I tried also to make it a computed property, the above code doesn't work but if for example I wrote
<img v-if="item.image" v-bind:src="item.image.width">
I can see the width inside the src attribute, what am I doing wrong?
Edit: classObject code is the following
classObject: function (width, height) {
if (width > height) return 'icon1'
return 'icon2'
},
The problem I encountered was because sometimes there was no image at all, otherwise the code is correct so now I just check if there's an image like this
<div v-if="item.image" :class="classObject(item.image.width,item.image.height)">
<img v-bind:src="item.image.meta.download_url" alt=""/>
</div>
I have an array like this:
"products": {
"111111": {
"date": "01.01.2018",
"amount": 10,
"user_id": "user1",
}
"222222": {
"date": "10.10.2018",
"amount": 15,
"user_id": "user1,
}
}
"111111" and "222222" are IDs and they are generated dynamically, depending on selected user.
I want to display the following columns: product_id, date, amount, user_id
Is there a way to populate the table when a column name is dynamic ?
Thanks!
If you can change the format of your json slightly, you can easily just assign it as an array for the data attribute when initializing datatables. If that is not an option, you could just parse it into the below format by iterating through the key-value pairs and adding that data to an array of jsons.
$(document).ready(function() {
var products = [{
"product_id": "111111",
"date": "01.01.2018",
"amount": 10,
"user_id": "user1",
},
{
"product_id": "222222",
"date": "10.10.2018",
"amount": 15,
"user_id": "user1",
}
];
var table = $('#example').DataTable({
data: products,
columnDefs: [
{ targets: 0, data: "product_id"},
{ targets: 1, data: "date" },
{ targets: 2, data: "amount" },
{ targets: 3, data: "user_id" }
]
});
});
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<div class="container">
<table id="example" class="display nowrap" width="100%">
<thead>
<tr>
<th>product_id</th>
<th>date</th>
<th>amount</th>
<th>user_id</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
I have account with www.makemytrip.com and where 'from' field and 'to' field is already saved through cookies
Using extension, I would like to display the value present in 'from' field of that site. (whose id is 'hp-widget__sfrom')
On page load I am able to view the value but the same I can't achieve on click on my button defined in my extension
Below is the code: index.html
<html>
<head>
<title>My new extension</title>
</head>
<body>
<input type="button" id="save" value="Save Text">
</body>
</html>
manifest.json
{
"manifest_version": 2,
"name": "Test1",
"description": "TestDesc",
"version": "1.0",
"background": {
"scripts": ["background.js"]
},
"permissions": [
"activeTab"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "index.html",
"default_title": "Test11"
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["myContentScript.js"]
}
]
}
myContentScript.js
window.onload = function(){
alert("Hi by contentScript");
//alert(document.getElementById('hp-widget__sfrom').value); //this works!
//but the below doesn't work; onclick of button
document.getElementById('save').onclick = function(){
alert(document.getElementById('hp-widget__sfrom').value);
}
}
background.js
window.onload = function(){
alert("Hi by backgroundJS");
}
I appreciate any sort of help!
I'm trying to plot multiple Points on an ArcGIS map using span#longitude and span#latitude in the HTML. I can get the very first point to plot, but not any subsequent points.
I'm new to ArcGIS, and my javascript knowledge is limited. Any help is appreciated!
<script>
var map, agraphicsLayer, symbol;
function addPointtoMap(x, y) {
require([
"esri/geometry/Point",
"esri/graphic",
"dojo/domReady!"],
function(Point, Graphic) {
var pt = new Point(x, y);
map.centerAt(pt);
agraphicsLayer.add(new Graphic(pt, symbol));
});
}
(function($) {
if($("div#mapDiv").length) {
$.getScript( "http://js.arcgis.com/3.14/" )
.done(function( script, textStatus ) {
require(["esri/map",
"esri/symbols/SimpleMarkerSymbol",
"esri/geometry/Point",
"esri/graphic",
"esri/Color",
"esri/layers/GraphicsLayer",
"dojo/domReady!"
],
function(
Map,
SimpleMarkerSymbol,
Point,
Graphic,
Color,
GraphicsLayer) {
map = new Map("mapDiv", {
center: [-56.049, 32.485],
zoom: 5,
basemap: "topo",
logo: false
});
map.on("load", function() {
map.disableScrollWheelZoom();
});
agraphicsLayer = new GraphicsLayer();
map.addLayer(agraphicsLayer);
symbol = new SimpleMarkerSymbol();
symbol.setColor(new Color("#00ADA1"));
var pt = new Point($("span#longitude").html(), $("span#latitude").html());
map.centerAt(pt);
agraphicsLayer.add(new Graphic(pt, symbol));
});
})
.fail(function( jqxhr, settings, exception ) { });
}
</script>
<div id="mapDiv"></div>
<span id="longitude">37.82</span>
<span id="latitude">-2.28</span>
<span id="longitude">34.82</span>
<span id="latitude">1.36</span>
<span id="longitude">34.31</span>
<span id="latitude">-0.67</span>
<span id="longitude">40.19</span>
<span id="latitude">.10</span>
in both the HTML 4.01 and HTML 5 specifications the "id" attribute must be unique among all the IDs in the document so
$("span#longitude").html()
is only ever going to give you the first longitude (or at least it's not going to give you what you want which is to loop through all the lat/longs)
There's are a lot of ways to accomplish your goal. One way is to store the lat/longs in your javascript instead of in the HTML.
you would do that like so
<script>
var map, agraphicsLayer, symbol,
data = {"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [37.82, -2.28]
}},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [34.82, 1.36]
}},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [34.31, -0.67]
}},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [40.19, 0.10]
}}]
};
...code snipped for brevity
//here you want to loop through the points
data.features.forEach(function(feature){
var pt = new Point(feature.geometry.coordinates, map.spatialReference);
agraphicsLayer.add(new Graphic(pt, symbol));
})
</script>
if you really want to store the data in spans like you are now then you need to change the "id" attribute to a "class" attribute and then wrap the lat/long spans in some grouping element like a div or another span
<div class="coordinate">
<span class="longitude">37.82</span>
<span class="latitude">-2.28</span>
</div>
and then in the javascript do something like this
$(".coordinate").each(function(){
//this refers to each "coordinate" div as we loop through them
var long = $(this).find(".longitude").html()
var lat = $(this).find(".lattitude").html()
var pt = new Point(long, lat);
//etc
})
I am doing a ajax request to the server to get the data.When the array is empty, I want it to be displayed in a table row "emptyTable". I get message "emptyTable", if not used aoColumnDefs, but I'm getting warning "Requested unknown parameter ... " . I do not want to receive a warning!
var searchTable = $('#baseTasks').dataTable({
bFilter: false, bInfo: false, "bLengthChange": false,
scrollY:"600px",scrollCollapse: true, paging:false,
"aaData": tasks,
"aoColumns": [
{ "mData": "name"
},{"mData": "schoolClass"
},{"mData": "complexity"
},{"mData": "author"
}]
});
if I use aoColumnDefs, I do not get warning, but I get an empty table without message "emptyTable".
"aoColumnDefs": [
{
"mData": null,
"sDefaultContent": null,
"aTargets": [ -1 ]
}],
How do I get a table with a message "emptyTable", if the aaData is an empty array?
Your code is correct. Run the code below for demonstration.
var tasks = [
{
"name": "Tiger Nixon",
"schoolClass": "System Architect",
"complexity": "$320,800",
"author": "2011\/04\/25"
},
{
"name": "Garrett Winters",
"schoolClass": "Accountant",
"complexity": "$170,750",
"author": "2011\/07\/25"
}
];
var tasksEmpty = [];
$(document).ready( function () {
var table = $('#example').DataTable({
"data": tasksEmpty,
"columns": [
{ "data": "name"},
{ "data": "schoolClass" },
{ "data": "complexity"},
{ "data": "author" }
],
"searching": false,
"info": false,
"lengthChange": false,
"scrollY":"600px",
"scrollCollapse": true,
"paging":false,
});
});
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css" rel="stylesheet" />
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>
<table id="example" class="display" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
</tr>
</thead>
</table>
Most likely cause of Requested unknown parameter error is that your data is not structured properly or some of the properties (name, schoolClass, complexity or author) are not found.
Your data should have the following structure. Make sure that every array item has all the properties required.
var tasks = [
{
"name": "Tiger Nixon",
"schoolClass": "System Architect",
"complexity": "$320,800",
"author": "2011\/04\/25"
},
{
"name": "Garrett Winters",
"schoolClass": "Accountant",
"complexity": "$170,750",
"author": "2011\/07\/25"
}
];
Also please note that your code uses parameters for different versions of DataTables. Although newer DataTables library is backward-compatible, I have updated your code to use initialization parameters for the most recent version. Please see this migration guide for more information.
Add the below line of code to your datatable with your message set to sEmptyTable.
oLanguage: {
"sEmptyTable": "No data found.",
}