Rickshaw Log scale graphs and slider scaling - d3.js

I've been trying to understand how the sliders in Rickshaw/D3 interact with the scaling of a graph. It seems that when I use both together for a dynamic graph which displays a subset of the data selected by the slider, the log scale is not correct. Is there something I'm not doing right? Here is a jsfiddle and a subset of the code is here.
The HTML used to initialise the graphs:
<div id="time">
<div id="yearindicator"></div>
<div id="slider-range"></div>
</div>
<div id="charts" class="clearfix">
<div class="chart">
<h3>Total</h3>
<div id="y_axis"></div>
<div id="chart_one"></div>
</div>
</div>
And a subset of the javascript is
logScale = d3.scale.log().domain([1, 1000]).range([0, 1]);
var data = [ {.... data not shown }];
var graph_one = new Rickshaw.Graph({
element: document.querySelector("#chart_one"),
height: 400,
width: 400,
renderer: 'scatterplot',
series: data
});
new Rickshaw.Graph.Axis.X({
graph: graph_one
});
new Rickshaw.Graph.Axis.Y.Scaled({
graph: graph_one,
orientation: 'left',
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
element: document.getElementById('y_axis'),
scale: logScale
});
graph_one.render();
var slider_one = new Rickshaw.Graph.RangeSlider({
element: document.querySelector('#slider-range'),
graph: graph_one
});
var y_ticks = new Rickshaw.Graph.Axis.Y.Scaled({
graph: graph_1,
orientation: 'left',
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
element: document.getElementById('y_axis'),
scale: logScale
});

Related

metronic datatable 6*4 grid of user-images

I would like to know if it is possible to use datatables (Metronic Laravel Theme) to display a 6*4 grid of user-images instead of displaying the images row-by-row (the standard datatable behavior). Anyone able to help?
ive just started on this so i don't want to waste a lot of time if it's not possible at all, this is what i have so far:
let members_datatable,
members_element = $('...');
members_datatable = members_element.MyCustomDataTable({
columns: [
{
field: 'id',
title: members_element.data('column-id'),
width: 50,
template: function (row) {
return row.id;
}
},
{
field: 'first_name',
title: members_element.data('column-name'),
width: 150,
template: function (row) {
let user_id = ...;
let user_company = ...;
let company_branche = ...;
return `<div class="mt-card-item">
<div class="mt-card-avatar mt-overlay-4">
<img src="storage/public/userImages/${user_id}.jpg">
<div class="mt-overlay">
<h2>${user_company}</h2>
<div class="mt-info font-white">
<div class="mt-card-content">
${company_branche}
</div>
</div>
</div>
</div>
</div>`;
}
},
],
});

D3: passing object in style method is not working

I am using D3 for the exercise. However, I am having trouble passing an object to the .style() method:
var myStyles = [
'#268BD2',
'#BD3613',
'#D11C24',
'#C61C6F',
'#595AB7',
'#2176C7'
];
This below piece of code is working
d3.selectAll('.item')
.data(myStyles)
.style('background',function(d){return d});
But none of the below two code pieces are working
d3.selectAll('.item')
.data(myStyles)
.style({'background':function(d){return d}});
d3.selectAll('.item')
.data(myStyles)
.style({'color':'white','background':function(d){return d}});
Please explain what is wrong here.
You can apply objects in styles and attributes by using d3-selection-multi.
First, you have to reference the mini library:
<script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>
Then, you have to use styles, not style:
.styles({'color':'white','background':function(d){return d}});
You can see the code working in this fiddle, in which I'm using an object to set the styles: https://jsfiddle.net/gerardofurtado/o54rtrqc/1/
For attributes, use attrs instead of attr.
Here is the API.
I'm also working through the Lynda.com course. Here's an example of the "Binding data to the DOM" exercise using D3 version 4:
JSFiddle
HTML:
<!--
Added these two scripts:
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>
-->
<div class="container">
<h2>D3 Graphic</h2>
<section id="chart">
<div class="item">Darth Vader</div>
<div class="item">Luke Skywalker</div>
<div class="item">Han Solo</div>
<div class="item">Obi-Wan Kenobi</div>
<div class="item">Chewbacca</div>
<div class="item">Boba Fett</div>
</section>
</div>
JS:
var myStyles = [{
width: 200,
color: '#A57706'
}, {
width: 300,
color: '#BD3613'
}, {
width: 150,
color: '#D11C24'
}, {
width: 350,
color: '#C61C6F'
}, {
width: 400,
color: '#595AB7'
}, {
width: 250,
color: '#2176C7'
}];
d3.selectAll('.item')
.data(myStyles)
.styles({
'color': 'white',
'background': function(d) {
return d.color;
},
width: function(d) {
return d.width + 'px';
}
})

Simple SlickGrid's Data not displaying

Just started using SlickGrid, Not sure if I am missing something, but this simple code doesn't seem to work. It is displaying headers, but not the rows.
Grid Code:
var grid;
var data = [
{ ID: 1, VALUE: "Value1"},
{ ID: 2, VALUE: "Value2"},
{ ID: 3, VALUE: "Value3"},
{ ID: 4, VALUE: "Value4"},
{ ID: 5, VALUE: "Value5"}
];
var columns = [
{name:'ID NUM', field:'ID', id:'ID'},
{name:'VALUE', field:'VALUE', id:'VALUE'}
];
var options = {
enableCellNavigation: true,
enableColumnReorder: false
};
grid = new Slick.Grid("#container-div", data, columns, options);
grid.render();
For some reason, only first row's first cell is rendered in html and is not been displayed.
HTML:
<div class="slick-viewport" style="width: 100%; overflow: auto; outline: 0px none; position: relative; height: 0px;">
<div class="grid-canvas" style="height: 150px; width: 880px;">
<div class="ui-widget-content slick-row even" style="top:0px">
<div class="slick-cell l0 r0">1</div>
</div>
</div>
</div>
You are missing the container div to display the data, in your javascript code you are referencing #container-div but it does not exist inside your html code. Typically you don't have to write any html code like you seem to be doing (or is it the result you displayed?), except for the grid container itself. Try simply adding or replacing with this code in your html body: <div id="container-div" style="width:600px;height:500px;"></div> You can see a simple example from SlickGrid here: https://github.com/mleibman/SlickGrid/blob/master/examples/example1-simple.html

Making the jqPlot area smaller

Hi I have got a pie chart which is generated using jqPlot. But the jqPlot area is covering the whole width of the page. I want to show that only at the left half of the page. Can any on please provide me a little help to do this.
My code is given below-
var plot2 = jQuery.jqplot ('month_record', [data],
{
title: "Records saved per month in the previous year",
seriesDefaults: {
// Make this a pie chart.
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
// Put data labels on the pie slices.
showDataLabels: true,
startAngle:-90,
dataLabels: monthRecord,
dataLabelFormatString:'%d',
}
},
legend: { show: true, location: 'e' }
}
);
jqPlot uses the height/width of the container <div> to set the plot dimensions.
<div id="chart" style="width: 400px; height: 260px;" class="jqplot-target">
<!-- plot will render here with the above dimensions -->
</div>

Scriptaculous slider price range slider with two handle

I'm using Scriptaculous to create a price range slider with two handles says minimum and maximum values. How can I store minimum and maximum values in separate hidden field.
Current script as follows,
<div id="price-range" class="filter-track">
<span id="price-min" class="filter-handle" title="Scroll to set your minimum value">>></span>
<span id="price-max" class="filter-handle" title="Scroll to set your maximum value"><<</span>
</div>
<input type="hidden" name="price" id="beds" value="0,100"/>
var loadPriceSlider = function () {
var handles = [$('price-min'), $('price-max')];
// horizontal slider control with preset values
new Control.Slider(handles, 'price-range', {
range:$R(0, 5000, false),
sliderValue: [0, 3000],
values: [0, 100, 200, 300],
restricted: true,
onChange: function(v){
$('price').value = v;
}
});
};
It will store comma separated (min,max) values in price field. but i would like to store this in separate field. How to do this? Any help please?
Your code tries to refer to $('price') but you the input with the name 'price' has the 'id' of 'beds'.
Here's corrected HTML which has the price field, and an additional field:
<div id="price-range" class="filter-track">
<span id="price-min" class="filter-handle"
title="Scroll to set your minimum value">>></span>
<span id="price-max" class="filter-handle"
title="Scroll to set your maximum value"><<</span>
</div>
<ul>
<li>price: <input type="text" name="price" id="price" value="0,100"/></li>
<li>myRange <input type="text" name="myRange" id="myRange" value="0,100"/></li>
</ul>
And the JavaScript:
var handles = [$('price-min'), $('price-max')];
// horizontal slider control with preset values
new Control.Slider(handles, 'price-range', {
range: $R(0, 5000, false),
sliderValue: [0, 3000],
values: [0, 100, 200, 300],
restricted: true,
onChange: function(val){
$('price').value = val;
$('myRange').value = val;
}
});
This works, loading these JavaScript:
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js?load=slider"></script>

Resources