I'm using Sparklines and am trying to draw a simple blox plot with predetermined min, max, whiskers, quartiles, and one additional value -- the user's value that might fall within the quartile or outside (the whole point is to show the user where his/her value falls in the distribution)
What is the appropriate way to do this? I can get a basic box up but can't see how to lay a point on top of it. Also I can't see how to set min and max but it looks like the outliers sort of do this.
Here's my code:
<script type="text/javascript">
$(function() {
var myboxvalues = [0, 200, 450, 500, 550, 800, 1000];
$('.inlinebox').sparkline( myboxvalues, {type: 'box', raw: true });
});
</script>
</head>
<body>
<p>
My box: <span class="inlinebox"></span>
</p>
Thanks!
The flag is "target: ..."
{type: 'box', raw: true, target: 713 }
Related
I am using Plotly.js to show a heatmap of electrochemical data. It works really well, however, sometimes the data matrix can be a bit large (3000x4000). I paste the code here if it is of any help, as it is a method of a class you will see many references to "this" to get the array, name strings, etc.
My main problem is that for large data arrays, the heatmap takes a lot to render when I load the data or press a button to replot, for example, after filtering. It usually takes approximately between 1500 - 2000 ms. By looking into Plotly.js issues, I have tried several things which did not work, or made it worse:
Use 'heatmapgl' as plot type instead of 'heatmap' when the data goes beyond a million points.
Use plotly.react() instead of plotly.newPlot(). It did not change although in the plotly.js reference they claim it is more efficient when replotting in the same division.
Remove the axes and ticks.
I have also tried to use a canvas to show the heatmap as an image.. but the fact that I need to cast the array to 0-255 and therefore lose resolution in the range of values is also not great for this particular application.
I was wondering if anyone new any other way to improve the performance of heatmaps in plotly.js or if they know of any other workaround. Thanks in advance!
//Function to plot the main color plot.
var graph_data = [{
z:this.current.array,
x:this.cycling_time.array,
type:this.plot_type,
colorscale:this.color_palette,
colorbar: {len:0.5, xpad:30, title:this.current.name+' ('+this.current.units+')'},
zsmooth: false
}];
this.plot_layout = this.plot_settings.plot_layout;
this.plot_layout.title.text = "<b>"+this.name_of_file+"</b>";
this.plot_layout.xaxis = {
title:this.cycling_time.name+' ('+this.cycling_time.units+')'
};
this.plot_layout.yaxis = {
title:'Samples'
};
console.time('plot');
Plotly.newPlot(div, graph_data, this.plot_layout, this.plot_settings.plot_configuration);
_(div).on('plotly_click', function(data){main_graph_clicked(data)});
console.timeEnd('plot');
Edit
The plot settings and configurations are below. I keep them separated because I use them in several different plots and it saves space to save them in the class.
this.plot_configuration = {
showEditInChartStudio: true,
plotlyServerURL: "https://chart-studio.plotly.com",
displayModeBar: true,
displaylogo: false,
responsive: true,
toImageButtonOptions: {
format: 'svg',
filename: 'plot',
height: 600,
width: 800,
scale: 1
}};
this.plot_layout = {
autosize: true,
title: {
text: '<b> Blank </b>',
font: {
size: 20,
family:'Arial'
},
x: 0.05,
y: 1.2,
xanchor: 'left',
yanchor: 'bottom',
}
};
I'm using Chart.js v1.0.1-beta.3. I'm creating an interactive bar chart where users can click on a bar to increase the value of that bar.
By default, the histogram begins with empty values. The y-axis in that case defaults to a [0,1] scale. When users start adding data to the histogram, the y-axis maximum changes to adjust, which causes a jarring shift in the appearance of the graph at low values.
I'd like to have the y-axis default to, say, a [0,10] scale even when no data is entered. This StackOverflow question is the most relevant info I can find on how to address problems like this; the best solution on that page is to use the 'suggestedMax' parameter in the chart options:
scales: {
yAxes: [{
ticks: {
suggestedMax : 10
}
}]
},
although this might apply only to v2+ of the library, it's hard to tell. In any event, this doesn't work, and the y-axis defaults to [1,0] when there's no data. I've also tried every combination of every other suggestion on that page, including
using scaleOverride : true, display : true, setting explicit min and max parameters within 'ticks', scaleBeginsAtZero : true, beginAtZero : true, and scaleStartValue : 0,
If I try to upgrade to the most current release, v2.7.3, the charts don't appear on the rendered page at all. I don't have the time or inclination to debug what's happening there, so I'm stuck with v1.0.1.
How do I have a bar chart default to a suggested maximum in this version? Is it even possible?
Looking through the documentation included with v1.0.1 (zip file), there doesn't appear to be a way to do this. I can't see any option to set the scale values.
In v2.7.3 this is quite simple. A working example is below. The chart starts empty, with a y-axis scale from 0-10. Clicking 'Add Series' adds a new bar with a value of 5. Clicking a bar increments value by 1.
let btn1 = document.getElementById('add'),
canvas = document.getElementById('chart'),
chart = new Chart(canvas, {
type: 'bar',
data: {
labels: [],
datasets: []
},
options: {
scales: {
yAxes: [{
ticks: {
min: 0,
suggestedMax: 10
}
}]
}
}
});
canvas.addEventListener('click', function(e) {
let idx = chart.getDatasetAtEvent(e)[0]._datasetIndex;
chart.config.data.datasets[idx].data[0]++;
chart.update();
});
btn1.addEventListener('click', function() {
chart.config.data.datasets.push({
data: [5]
});
chart.update();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<button id="add">Add Series</button> Click a bar to increment its value by 1.
<canvas id="chart"></canvas>
First of all, I'm pretty new to jQuery but with the help of http://css-tricks.com/examples/Circulate/ I managed to figure out how to create ellipses in my code.
Here's the thing though, I want to create an input field/text box for users to type in their own "speed" value (which is now set at "500") and then click a submit button to start the ellipse.
$("#ball").circulate({
speed: 500,
height: 500,
width: 200,
loop: true,
zIndexValues: [1, 1, 1, 1]
});
I figured out the submit button part, but I keep running in circles when it comes to finding a way for a visitor of my website to manually input the "speed". I would be much obliged if someone could point me in the right direction/could give me a starting point.
Try this:
$('#submitButton').click(function() {
var userSpeed = +$('#inputBox').val();
if (!userSpeed) {userSpeed == 500};
$("#ball").circulate({
speed: userSpeed,
height: 500,
width: 200,
loop: true,
zIndexValues: [1, 1, 1, 1]
});
});
Then, when the user clicks on the submit button, your code gets the new value and sets the speed for the function. If the user clicks the button without having entered a number, a default speed is used.
You have to use .val() function to get the value from an input and then use it to set the speed.
var input = $("#YOUR_INPUT_ID");
$("#ball").circulate({
speed: input.val(),
height: 500,
width: 200,
loop: true,
zIndexValues: [1, 1, 1, 1]
});
I have the following markup
<div id="slider"></div>
<p id="ID"></p>
<p id="COUNTRY"></p>
<p id="DESC"></p>
and my Jquery script
var Country = ['100~USA~UsaDescr', '101~SPAIN~SpainDescr', '102~ITALY~ItalyDescr'], p=$('#ID');
$('#slider').slider({
max: 10,
min: 0,
slide: function(event, ui){
p.text(Country[ui.value]);
}
});
I would like upon moving the slider...
For the first slider position update the ID control with 100, the COUNTRY control with USA and the DESC with UsaDescr
For the second slider position update the ID control with 101, the COUNTRY control with SPAIN and the DESC with SpainDescr
I know i am doing horrible things here, but hey! This is my Jquery start!
For anyone willing to help here is the JSFiddle
I wouldn't track properties of objects such as an ID, Country_Name and Description in a concatenated string like that, but this should get you started.
http://jsfiddle.net/wUhm7/1/
html
<div id="slider"></div>
<p id="ID"></p>
<p id="COUNTRY"></p>
<p id="DESC"></p>
javascript
var Country = ['100~USA~UsaDescr', '101~SPAIN~SpainDescr', '102~ITALY~ItalyDescr'];
var splitValues = Country[0].split("~");
$('#ID').html(splitValues[0]);
$('#COUNTRY').html(splitValues[1]);
$('#DESC').html(splitValues[2]);
$('#slider').slider({
max: 2,
min: 0,
slide: function(event, ui){
var splitValues = Country[ui.value].split("~");
$('#ID').html(splitValues[0]);
$('#COUNTRY').html(splitValues[1]);
$('#DESC').html(splitValues[2]);
}
});
Also, You will need to either do some checking to see if an array position exists or limit your slider max value to 2 in your example. Or else when you move the slider to 3, the Country[3] doesn't exist.
Situation:
I have a function that dumps input data into an HTML block element, eg:
function national(){
x=Number($('#nationalBudget').val());
a=x*2;
$('#one').text(a);}
Then it prints the input into any element with the id="one"
<span id="one"></span>
This is fine, but I would like to incorporate a jQuery Bargraph. The bargraph that I am using is fed by an array:
coolnessGraph = new Array(
[100000,'ROI w/ Local Spending'],
[200000,'ROI w/o Local Spending']
$("#ROIchart").jqBarGraph({
data: coolnessGraph, // array of data for your graph
title: false, // title of your graph, accept HTML
barSpace: 10, // this is default space between bars in pixels
width: 400, // default width of your graph
height: 200, //default height of your graph
color: '#F8981D', // if you don't send colors for your data this will be default bars color
colors: false, // array of colors that will be used for your bars and legends
lbl: '', // if there is no label in your array
sort: false, // sort your data before displaying graph, you can sort as 'asc' or 'desc'
position: 'bottom', // position of your bars, can be 'bottom' or 'top'. 'top' doesn't work for multi type
prefix: '', // text that will be shown before every label
postfix: '', // text that will be shown after every label
animate: true, // if you don't need animated appearance change to false
speed: 2, // speed of animation in seconds
legendWidth: 100, // width of your legend box
legend: false, // if you want legend change to true
legends: false, // array for legend. for simple graph type legend will be extracted from labels if you don't set this
type: false, // for multi array data default graph type is stacked, you can change to 'multi' for multi bar type
showValues: true, // you can use this for multi and stacked type and it will show values of every bar part
showValuesColor: '#fff' // color of font for values
});
Problem:
I would like to replace the hard numbers (e.g. 100000 & 200000) in the array with the output that is dumped into my HTML object. I've tried the following:
var TestVariable = <span id="one"></span>;
coolnessGraph = new Array(
[TestVariable,'ROI w/ Local Spending'],
and just about every other iteration of syntax I could think up to make the process work. I also tried waiting to fire the graph after the first calculation has been run.
Is there an error my logic?...syntax?...any help would be greatly be appreciated.
If I'm reading correctly, you only need to pass $('#one').text(), or a variation of that, into the array. Am I missing something?