At the end of a functioning JS I have three arrays of x- and y-coordinates, return [theta_plot, omega_plot, e_plot];, that I would like to send to Flot for plotting:
function myPlot(theta_plot, omega_plot, e_plot) {
"use strict";
function doPlot(position) {
$.plot("#placeholder", [
{
data: theta_plot,
label: "Angle (rad)",
yaxis: 1,
color: "red"
},
{
data: omega_plot,
label: "Angular Velocity (rad/sec)",
yaxis: 2,
color: "green"
},
{
data: e_plot,
label: "Energy (J)",
yaxis: 3,
color: "blue"
}
],
{
yaxes: [
{
font: { color: "red" }
},
{
font: { color: "green" }
},
{
font: { color: "blue" }
},
{ alignTicksWithAxis: position === "left" ? 1 : null }
],
legend: { position: "nw" }
}
);
}
doPlot("left");
}
The outer function is my latest attempt to pass these arrays to Flot, without success. The inner function is obviously Flot. Placing doPlot in my JS produces the desired result, though JSLint complains that they are not defined, as it should. However, for purposes of organization I would like doPlot in my HTML. Question: How do I make doPlot aware of my arrays?
Just replace
function doPlot(position) {
with
function doPlot(theta_plot, omega_plot, e_plot, position) {
and call the new function directly without using the myPlot() function.
Related
How can I get the values of a column and paint the background color depending on the value.
I have the column: "Stock" and I need to know when the value is 0 to make the background red.
in this way I paint the first row of the header. Is it possible to implement the logic to obtain the mentioned values?
ws.eachRow((row, rowNumber) => {
row.eachCell((cell) => {
console.log(rowNumber);
if (rowNumber == 1) {
cell.fill = {
type: "pattern",
pattern: "solid",
fgColor: { argb: "2563EB" },
};
}
cell.font = {
color: { argb: "FFFFFF" },
bold: true,
};
cell.border = {
top: { style: "thin" },
left: { style: "thin" },
bottom: { style: "thin" },
right: { style: "thin" },
};
});
row.commit();
});
ws.addRows(arrProducts);
.......
I'm creating polygons in MapBox using Mapbox draw as follows:
polyshapeoutzone = {
id: 'polyOut',
type: 'Feature',
properties: {},
geometry: { type: 'Polygon', coordinates: [mysql2poly(values[1])]}
};
I want to be able to change the polygon line and fill color on the fly (basically I have 2 polygons, I want 1 to be red and the other to be green). Is there a simple way to apply/change the colours on the fly for a given polygon (I don't care about vertex colours or the polygon colour when it's selected, I just want to be able to set each polygon's line and fill colour and change them dynamically).
$(function() {
if (!mapboxgl.supported()) {
alert('Your browser does not support Mapbox GL');
}
var initMap = function(){
mapboxgl.accessToken = 'pk.eyJ1IjoiamFtZXNwYWNrIiwiYSI6ImNqMDI5amtvZzAwNjIzM3QwYTZkbjk5c3MifQ.9jiCjBzXNG1IqvezOddnHA';
var map = new mapboxgl.Map({
container: 'multiple_poly',
style: 'mapbox://styles/mapbox/satellite-v9',
center: [103.32718927498,2.0123503108086],
zoom: 15
});
map.on('load', function () {
map.addSource("polygon_one",
{
"type":"geojson",
"data":{
"type":"FeatureCollection",
"features":[
{"type":"Feature","properties":[],"geometry":{"coordinates":[[[73.045157852226,26.303612426466],[73.045501174966,26.291685547272],[73.051166000414,26.299611287628],[73.045157852226,26.303612426466]]],"type":"Polygon"}},
]
}
});
map.addSource("polygon_two",
{
"type":"geojson",
"data":{
"type":"FeatureCollection",
"features":[
{"type":"Feature","properties":[],"geometry":{"coordinates":[[[73.01923698434584,26.286793889676773],[73.01726287851736,26.274403503526514],[73.02696174635398,26.277635905719848],[73.02972176719453,26.28963931883034],[73.01923698434584,26.286793889676773]]],"type":"Polygon"}},
]
}
});
map.addLayer({
"id": "quota-one",
"type": "line",
"source": "polygon_one",
"layout": {
"line-cap": "round",
"line-join": "round"
},
"paint": {
"line-color": "red",
"line-width": 3
},
"filter": ["==", "$type", "Polygon"]
});
map.addLayer({
"id": "quota-two",
"type": "line",
"source": "polygon_two",
"layout": {
"line-cap": "round",
"line-join": "round"
},
"paint": {
"line-color": "green",
"line-width": 3
},
"filter": ["==", "$type", "Polygon"]
});
map.flyTo({center:[73.01923698434584,26.286793889676773],zoom: 13});
});
}
initMap();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css" rel="stylesheet">
<div id="multiple_poly" style="width: 400px;height: 400px"></div>
I need x-axis labels in different colors, I am using "chart.js". I tried below code but it is not working, just showing single color-
scales: {
xAxes: [{
ticks: {
fontColor: [
'rgba(245,88,97,1)',
'rgba(245,88,97,1)',
'rgba(245,88,97,1)',
'rgba(145,151,163,1)',
'rgba(70,180,220,1)',
'rgba(70,180,220,1)',
'rgba(70,180,220,1)'
]
}
}]
}
Output:
Need:
You can make use of the Plugin Core API. It offers different hooks that may be used for executing custom code. In below code snippet, I use the afterDraw hook to draw text of the same color as the corresponding bar.
chart.data.labels.forEach((l, i) => {
var value = chart.data.datasets[0].data[i];
var x = xAxis.getPixelForValue(l);
ctx.fillStyle = chart.data.datasets[0].backgroundColor[i];
ctx.fillText(l, x, yAxis.bottom + 17);
});
When drawing your own tick labels, you need to instruct Chart.js not to display the default labels. This can be done through the following definition inside the chart options.
scales: {
xAxes: [{
ticks: {
display: false
}
}],
You also need to define some padding for the bottom of the chart, otherwise you won't see your custom tick labels.
layout: {
padding: {
bottom: 20
}
},
Please take a look at the following sample code that illustrates how to change the labels on the x-axis depending on the values.
new Chart('myChart', {
type: 'bar',
plugins: [{
afterDraw: chart => {
var ctx = chart.chart.ctx;
var xAxis = chart.scales['x-axis-0'];
var yAxis = chart.scales['y-axis-0'];
ctx.save();
ctx.textAlign = 'center';
ctx.font = '12px Arial';
chart.data.labels.forEach((l, i) => {
var value = chart.data.datasets[0].data[i];
var x = xAxis.getPixelForValue(l);
ctx.fillStyle = chart.data.datasets[0].backgroundColor[i];
ctx.fillText(l, x, yAxis.bottom + 17);
});
ctx.restore();
}
}],
data: {
labels: ["-3", "-2", "-1", "0", "+1", "+2", "+3"],
datasets: [{
label: "My First Dataset",
data: [60, 59, 80, 81, 60, 55, 40],
fill: false,
backgroundColor: ['rgba(245,88,97,1)', 'rgba(245,88,97,1)', 'rgba(245,88,97,1)', 'rgba(145,151,163,1)', 'rgba(70,180,220,1)', 'rgba(70,180,220,1)', 'rgba(70,180,220,1)'],
borderWidth: 1
}]
},
options: {
layout: {
padding: {
bottom: 20
}
},
scales: {
xAxes: [{
ticks: {
display: false
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
canvas {
max-width: 300px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>
What we are trying to do is to:
display crosshairs only if number of visible series > 1 (color: black)
otherwise disable crosshairs or alternatively set color transparent
Here are our problems:
independent of the number of visible series the crosshairs is not shown for the first hover (but for all subsequent hovers)
our main problem is that the color is not changing although the console.log displays that the color is correctly set due to the number of visible series
Please see the fiddle: example
Thanks for your suggestions!
$(function () {
var chart = new Highcharts.Chart({
chart: {
type: 'area',
renderTo: 'container'
},
title: {
text: 'Historic and Estimated Worldwide Population Growth by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Billions'
},
labels: {
formatter: function () {
return this.value / 1000;
}
}
},
tooltip: {
formatter: function () {
// show crosshairs only if visible series >1, else transparent
var nVisible = 0;
for (var i = 0; i < chart.series.length; i++) {
if (chart.series[i].visible) {
nVisible++;
};
if (nVisible > 1) {
break;
};
};
if (nVisible > 1) {
chart.options.tooltip.crosshairs = {
width: 1.5,
dashStyle: 'solid',
color: 'black'
};
} else {
chart.options.tooltip.crosshairs = {
color: 'transparent'
};
};
console.log(chart.options.tooltip.crosshairs.color);
return this.y + ' Billions';
},
backgroundColor: 'rgba(255,255,255,0.95)'
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
series: [{
name: 'Asia',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'Africa',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Europe',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'America',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'Oceania',
data: [2, 2, 2, 6, 13, 30, 46]
}]
});
});
Don't add crosshair in real time, instead when chart is initialized, enable crosshair and then manage color by attr() updating. For example: http://jsfiddle.net/D5DME/3/
Code:
tooltip: {
crosshairs: [{
width: 1.5,
dashStyle: 'solid',
color: 'black'
}, false],
formatter: function () {
// show crosshairs only if visible series >1, else transparent
var nVisible = 0;
for (var i = 0; i < this.series.chart.series.length; i++) {
if (this.series.chart.series[i].visible) {
nVisible++;
};
};
if(this.series.chart.tooltip.crosshairs[0]) {
if (nVisible > 1) {
this.series.chart.tooltip.crosshairs[0].attr({
stroke: 'black'
});
} else {
this.series.chart.tooltip.crosshairs[0].attr({
stroke: 'rgba(0,0,0,0)'
});
}
}
return this.y + ' Billions';
},
backgroundColor: 'rgba(255,255,255,0.95)'
},
It looks to me that the tooltip code is the wrong place to be trying this. I would use the series hide and show event handlers to detect how many series were showing (a simple counter which increments in show and decrements in hide would work).
http://api.highcharts.com/highstock#plotOptions.series.events.hide
You could try the chart setting options depending on the count.
However, I'm not sure that simply settting chart.options.tootlip. will work dynamically the way you want.
Can i add color dynamically by calling through a function passed by the user.
I already have the options variable defined by default, the color which the user passes should sit in the option variable. Is this possible? please help
var options = {
series: {
lines: {
show: true
},
points: {
show: true
},
color: '#00c7ce'--> user should pass dynamically
},
xaxis: {
mode: "time",
tickSize: [1, "month"],
tickLength: 0,
},
yaxis: {
show: false
}
}
};
You should be able to pass a color to the options. Setup your input then use that variable as your color.
<input id="userInput"></input>
var usrColor = $("#userInput").val();
var options = {
series: {
lines: { show: true},
points: {show: true, radius: 4},
color: usrColor
}
};
fiddle - http://jsfiddle.net/Rnusy/4/