Related
I have a scatter plot made using plotly.py and I would like to color certain points in the scatter plot with a different color based on a certain condition. I have attached a sample code below :
import plotly.plotly as py
import plotly.graph_objs as go
from plotly.offline import plot
data = [4.1, 2.1, 3.1, 4.4, 3.2, 4.1, 2.2]
trace_1 = go.Scatter(
x = [1, 2, 3, 4, 5, 6, 7],
y = data
)
layout = go.Layout(
paper_bgcolor='rgb(255,255,255)',
plot_bgcolor='rgb(229,229,229)',
title = "Sample Plot",
showlegend = False,
xaxis = dict(
mirror = True,
showline = True,
showticklabels = True,
ticks = 'outside',
gridcolor = 'rgb(255,255,255)',
),
yaxis = dict(
mirror = True,
showline = True,
showticklabels = False,
gridcolor = 'rgb(255,255,255)',
),
shapes = [{
'type': 'line',
'x0': 1,
'y0': 4,
'x1': len(data),
'y1': 4,
'name': 'First',
'line': {
'color': 'rgb(147, 19, 19)',
'width': 1,
'dash': 'longdash'
}
},
{
'type': 'line',
'x0': 1,
'y0': 3,
'x1': len(data),
'y1': 3,
'line': {
'color': 'rgb(147, 19, 19)',
'width': 1,
'dash': 'longdash'
}
}
]
)
fig = dict(data = [trace_1], layout = layout)
plot(fig, filename = "test_plot.html")
Here's the output Output Scatter plot
Here the long dashed horizontal lines have corresponding x values 4 & 3 respectively. As one can see, points 1, 2, 4, 6 and 7 lie outside the dashed lines. Is there a way to color them differently based on the condition (x > 3) and (x<4).
Here's a reference to something I found while searching for a solution :
Python Matplotlib scatter plot: Specify color points depending on conditions
How can I achieve this in plotly.py ?
You can accomplish this by using a numeric array to specify the marker color. See https://plot.ly/python/line-and-scatter/#scatter-with-a-color-dimension.
Adapting your particular example to display red markers below 3, green markers above 4, and gray markers between 3 and 4:
import plotly.graph_objs as go
from plotly.offline import init_notebook_mode, iplot
init_notebook_mode()
data = [4.1, 2.1, 3.1, 4.4, 3.2, 4.1, 2.2]
color = [
-1 if v < 3 else 1 if v > 4 else 0
for v in data
]
colorscale = [[0, 'red'], [0.5, 'gray'], [1.0, 'green']]
trace_1 = go.Scatter(
x = [1, 2, 3, 4, 5, 6, 7],
y = data,
marker = {'color': color,
'colorscale': colorscale,
'size': 10
}
)
layout = go.Layout(
paper_bgcolor='rgb(255,255,255)',
plot_bgcolor='rgb(229,229,229)',
title = "Sample Plot",
showlegend = False,
xaxis = dict(
mirror = True,
showline = True,
showticklabels = True,
ticks = 'outside',
gridcolor = 'rgb(255,255,255)',
),
yaxis = dict(
mirror = True,
showline = True,
showticklabels = False,
gridcolor = 'rgb(255,255,255)',
),
shapes = [{
'type': 'line',
'x0': 1,
'y0': 4,
'x1': len(data),
'y1': 4,
'name': 'First',
'line': {
'color': 'rgb(147, 19, 19)',
'width': 1,
'dash': 'longdash'
}
},
{
'type': 'line',
'x0': 1,
'y0': 3,
'x1': len(data),
'y1': 3,
'line': {
'color': 'rgb(147, 19, 19)',
'width': 1,
'dash': 'longdash'
}
}
]
)
fig = dict(data = [trace_1], layout = layout)
iplot(fig)
Hope that helps!
I am new to plotly.js. I reversed the bars in the bar chart, but the labels are currently staying in the same place. I want to replace the values that the
What I want is the labels in the jsfiddle. I want the y labels to display on the LEFT of the labels instead of the current spot at right labels and I would also like to display the x labels on the opposite side of the bar with the tooltip.
I hope this is clear. Thanks
Here is the jsfiddle.
https://jsfiddle.net/aj5qepv3/
var data = [{
type: 'bar',
x: [20, 14, 23],
y: ['giraffes', 'orangutans', 'monkeys'],
orientation: 'h'
}];
var layout = {
xaxis:{
autorange:'reversed'
},
yaxis:{
side:'right'
}
}
Plotly.newPlot('tester', data, layout);
Does this help you?
var data = [{
type: 'bar',
x: [20, 14, 23],
y: ['giraffes', 'orangutans', 'monkeys'],
orientation: 'h'
}];
var layout = {
xaxis:{
autorange:'reversed'
},
yaxis:{
side:'left'
},
xaxis:{
side:'top'
}
}
Plotly.newPlot('tester', data, layout);
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://d14fo0winaifog.cloudfront.net/plotly-basic.js"></script>
<div id="tester" style="width:600px;height:250px;"></div>
I'm trying to colour the rows of paper-datatable
using the attribute customRowStyle
This Plunk of paper-datatable is working, rows are colored, but it's not enclosed as separate Polymer element.
I need to enclose paper-datatable in separate element.
Need some help to fix this:
how to make customRowStyle(item) to get called on table render and pass the item?
<paper-datatable data="{{data}}"
custom-row-style="{{generateRowCss}}"
on-row-tap="row_tap">
<paper-datatable-column header="title" property="title"></paper-datatable-column>
<paper-datatable-column header="Calories" property="calories"></paper-datatable-column>
<paper-datatable-column header="Fat (g)" property="fat" ></paper-datatable-column>
</paper-datatable>
...
generateRowCss: function (item) {
console.log('theming_2 generateRowCss:');
var levels = ['#FFFFFF', '#FFEBEE', '#FFCDD2', '#EF9A9A'];
var min = 150;
var max = 450;
var level = Math.floor((item.calories - min) / (max - min) * levels.length);
return 'background:' + levels[level] + ';';
},
EDIT:
Plunk with #a1626 solution.
As generateRowCssthat is passed to customRowStyle is a function rather than the return value of the function(which is what your code is passing) you'll have to do something like this. Instead of creating a function generateRowCss create a property with the same name, initialize it as Object and return its value as whole function
properties: {
data: {
type: Array,
notify: true,
value: [
{id: 0, title: 'Frozen yogurt', calories: 159, fat: 6},
{id: 1, title: 'Ice cream sandwich', calories: 237, fat: 9},
{id: 2, title: 'Eclair', calories: 262, fat: 16},
{id: 3, title: 'Cupcake', calories: 305, fat: 3.7},
],
},
generateRowCss:{
type:Object, //this is optional you can skip this also
value:function(){
return function(item){
console.log('app.generateRowCss');
console.log(item);
var levels = ['#FFFFFF', '#FFEBEE', '#FFCDD2', '#EF9A9A'];
var min = 150;
var max = 450;
var level = Math.floor((item.calories - min)/(max-min)*levels.length);
console.log(level);
console.log('background:'+levels[level]+';');
return 'background:'+levels[level]+';';
}
}
}
},
Pasted above are the properties of your custom element. Here is the working plunkr
I have a requirement to render a set of time series data of contiguous blocks.
I need to describe a series of bars which could span many hours, or just minutes, with their own Y value.
I'm not sure if ChartJS is what I should be using for this, but I have looked at extending the Bar type, but it seems very hard coded for each bar to be the same width. The Scale Class internally is used for labels, chart width etc, not just the bars themselves.
I am trying to achieve something like this that works in Excel: http://peltiertech.com/variable-width-column-charts/
Has anyone else had to come up with something similar?
I found I needed to do this and the answer by #potatopeelings was great, but out of date for version 2 of Chartjs. I did something similar by creating my own controller/chart type via extending bar:
//controller.barw.js
module.exports = function(Chart) {
var helpers = Chart.helpers;
Chart.defaults.barw = {
hover: {
mode: 'label'
},
scales: {
xAxes: [{
type: 'category',
// Specific to Bar Controller
categoryPercentage: 0.8,
barPercentage: 0.9,
// grid line settings
gridLines: {
offsetGridLines: true
}
}],
yAxes: [{
type: 'linear'
}]
}
};
Chart.controllers.barw = Chart.controllers.bar.extend({
/**
* #private
*/
getRuler: function() {
var me = this;
var scale = me.getIndexScale();
var options = scale.options;
var stackCount = me.getStackCount();
var fullSize = scale.isHorizontal()? scale.width : scale.height;
var tickSize = fullSize / scale.ticks.length;
var categorySize = tickSize * options.categoryPercentage;
var fullBarSize = categorySize / stackCount;
var barSize = fullBarSize * options.barPercentage;
barSize = Math.min(
helpers.getValueOrDefault(options.barThickness, barSize),
helpers.getValueOrDefault(options.maxBarThickness, Infinity));
return {
fullSize: fullSize,
stackCount: stackCount,
tickSize: tickSize,
categorySize: categorySize,
categorySpacing: tickSize - categorySize,
fullBarSize: fullBarSize,
barSize: barSize,
barSpacing: fullBarSize - barSize,
scale: scale
};
},
/**
* #private
*/
calculateBarIndexPixels: function(datasetIndex, index, ruler) {
var me = this;
var scale = ruler.scale;
var options = scale.options;
var isCombo = me.chart.isCombo;
var stackIndex = me.getStackIndex(datasetIndex);
var base = scale.getPixelForValue(null, index, datasetIndex, isCombo);
var size = ruler.barSize;
var dataset = me.chart.data.datasets[datasetIndex];
if(dataset.weights) {
var total = dataset.weights.reduce((m, x) => m + x, 0);
var perc = dataset.weights[index] / total;
var offset = 0;
for(var i = 0; i < index; i++) {
offset += dataset.weights[i] / total;
}
var pixelOffset = Math.round(ruler.fullSize * offset);
var base = scale.isHorizontal() ? scale.left : scale.top;
base += pixelOffset;
size = Math.round(ruler.fullSize * perc);
size -= ruler.categorySpacing;
size -= ruler.barSpacing;
}
base -= isCombo? ruler.tickSize / 2 : 0;
base += ruler.fullBarSize * stackIndex;
base += ruler.categorySpacing / 2;
base += ruler.barSpacing / 2;
return {
size: size,
base: base,
head: base + size,
center: base + size / 2
};
},
});
};
Then you need to add it to your chartjs instance like this:
import Chart from 'chart.js'
import barw from 'controller.barw'
barw(Chart); //add plugin to chartjs
and finally, similar to the other answer, the weights of the bar widths need to be added to the data set:
var data = {
labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.7)",
highlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 30, 56, 65, 40],
weights: [1, 0.9, 1, 2, 1, 4, 0.3]
},
]
};
This will hopefully get someone onto the right track. What I have certainly isn't perfect, but if you make sure you have the right number of weight to data points, you should be right.
Best of luck.
This is based on the #Shane's code, I just posted to help, since is a common question.
calculateBarIndexPixels: function (datasetIndex, index, ruler) {
const options = ruler.scale.options;
const range = options.barThickness === 'flex' ? computeFlexCategoryTraits(index, ruler, options) : computeFitCategoryTraits(index, ruler, options);
const barSize = range.chunk;
const stackIndex = this.getStackIndex(datasetIndex, this.getMeta().stack);
let center = range.start + range.chunk * stackIndex + range.chunk / 2;
let size = range.chunk * range.ratio;
let start = range.start;
const dataset = this.chart.data.datasets[datasetIndex];
if (dataset.weights) {
//the max weight should be one
size = barSize * dataset.weights[index];
const meta = this.chart.controller.getDatasetMeta(0);
const lastModel = index > 0 ? meta.data[index - 1]._model : null;
//last column takes the full bar
if (lastModel) {
//start could be last center plus half of last column width
start = lastModel.x + lastModel.width / 2;
}
center = start + size * stackIndex + size / 2;
}
return {
size: size,
base: center - size / 2,
head: center + size / 2,
center: center
};
}
For Chart.js you can create a new extension based on the bar class to do this. It's a bit involved though - however most of it is a copy paste of the bar type library code
Chart.types.Bar.extend({
name: "BarAlt",
// all blocks that don't have a comment are a direct copy paste of the Chart.js library code
initialize: function (data) {
// the sum of all widths
var widthSum = data.datasets[0].data2.reduce(function (a, b) { return a + b }, 0);
// cumulative sum of all preceding widths
var cumulativeSum = [ 0 ];
data.datasets[0].data2.forEach(function (e, i, arr) {
cumulativeSum.push(cumulativeSum[i] + e);
})
var options = this.options;
// completely rewrite this class to calculate the x position and bar width's based on data2
this.ScaleClass = Chart.Scale.extend({
offsetGridLines: true,
calculateBarX: function (barIndex) {
var xSpan = this.width - this.xScalePaddingLeft;
var x = this.xScalePaddingLeft + (cumulativeSum[barIndex] / widthSum * xSpan) - this.calculateBarWidth(barIndex) / 2;
return x + this.calculateBarWidth(barIndex);
},
calculateBarWidth: function (index) {
var xSpan = this.width - this.xScalePaddingLeft;
return (xSpan * data.datasets[0].data2[index] / widthSum);
}
});
this.datasets = [];
if (this.options.showTooltips) {
Chart.helpers.bindEvents(this, this.options.tooltipEvents, function (evt) {
var activeBars = (evt.type !== 'mouseout') ? this.getBarsAtEvent(evt) : [];
this.eachBars(function (bar) {
bar.restore(['fillColor', 'strokeColor']);
});
Chart.helpers.each(activeBars, function (activeBar) {
activeBar.fillColor = activeBar.highlightFill;
activeBar.strokeColor = activeBar.highlightStroke;
});
this.showTooltip(activeBars);
});
}
this.BarClass = Chart.Rectangle.extend({
strokeWidth: this.options.barStrokeWidth,
showStroke: this.options.barShowStroke,
ctx: this.chart.ctx
});
Chart.helpers.each(data.datasets, function (dataset, datasetIndex) {
var datasetObject = {
label: dataset.label || null,
fillColor: dataset.fillColor,
strokeColor: dataset.strokeColor,
bars: []
};
this.datasets.push(datasetObject);
Chart.helpers.each(dataset.data, function (dataPoint, index) {
datasetObject.bars.push(new this.BarClass({
value: dataPoint,
label: data.labels[index],
datasetLabel: dataset.label,
strokeColor: dataset.strokeColor,
fillColor: dataset.fillColor,
highlightFill: dataset.highlightFill || dataset.fillColor,
highlightStroke: dataset.highlightStroke || dataset.strokeColor
}));
}, this);
}, this);
this.buildScale(data.labels);
// remove the labels - they won't be positioned correctly anyway
this.scale.xLabels.forEach(function (e, i, arr) {
arr[i] = '';
})
this.BarClass.prototype.base = this.scale.endPoint;
this.eachBars(function (bar, index, datasetIndex) {
// change the way the x and width functions are called
Chart.helpers.extend(bar, {
width: this.scale.calculateBarWidth(index),
x: this.scale.calculateBarX(index),
y: this.scale.endPoint
});
bar.save();
}, this);
this.render();
},
draw: function (ease) {
var easingDecimal = ease || 1;
this.clear();
var ctx = this.chart.ctx;
this.scale.draw(1);
Chart.helpers.each(this.datasets, function (dataset, datasetIndex) {
Chart.helpers.each(dataset.bars, function (bar, index) {
if (bar.hasValue()) {
bar.base = this.scale.endPoint;
// change the way the x and width functions are called
bar.transition({
x: this.scale.calculateBarX(index),
y: this.scale.calculateY(bar.value),
width: this.scale.calculateBarWidth(index)
}, easingDecimal).draw();
}
}, this);
}, this);
}
});
You pass in the widths like below
var data = {
labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.7)",
highlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 30, 56, 65, 40],
data2: [10, 20, 30, 20, 10, 40, 10]
},
]
};
and you call it like so
var ctx = document.getElementById('canvas').getContext('2d');
var myLineChart = new Chart(ctx).BarAlt(data);
Fiddle - http://jsfiddle.net/moye0cp4/
I have used an example and can successfully read data using php and mysql and plot it (timebase vs a variable), all works fine. I have taken that and used it as a template and used a different db that doesn't use a timebase but the graph isn't rendering. The graph is meant to display data from an SQL query that collates the frequency of occurrence of a variable with the variable on the x axis and the frequency of occurrence on the Y axis.
The chart pops up with the x and y axis values as expected. It looks right; except the plot is missing. To assist my troubleshooting I have listed the data on the screen albeit not pretty- this proves the db is being called correctly and there are no obvious SQL errors and that data is being returned.
db_code`
<?php
$con = mysql_connect("localhost","root","hal9000");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("sqm", $con);
$result = mysql_query("SELECT magnitude, COUNT(*) AS xxx FROM data WHERE magnitude > 1 GROUP by magnitude");
while($row = mysql_fetch_array($result)) {
echo $row['magnitude'] . "\t" . $row['xxx']. "\n";
}
mysql_close($con);
?> `
main_page code
<script type="text/javascript">
var chart;
$(document).ready(function() {
var options = {
chart: {
renderTo: 'common_LHS',
defaultSeriesType: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Magnitude',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
plotOptions: {
series: {
marker: {
enabled: true,
symbol: 'circle',
radius: 0
}
}
},
xAxis: {
type: 'linear',
tickWidth: 0,
gridLineWidth: 1,
labels: {
align: 'center',
x: -3,
y: 20
}
},
yAxis: {
title: {
text: 'Frequency of occurrence'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
tooltip: {
crosshairs: [{
width: 2,
color: 'red'
}, {
width: 2,
color: 'red'
}],
},
series: [{
name: 'Occurrence',
}]
}
jQuery.get('data.php', null, function(tsv) {
var lines = [];
traffic = [];
try {
// split the data return into lines and parse them
tsv = tsv.split(/\n/g);
jQuery.each(tsv, function(i, line) {
line = line.split(/\t/);
traffic.push ([
parseFloat(line[0]), //need to parseFloat to convert data to float from string
parseFloat(line[1])
]);
});
} catch (e) { }
options.series[0].data = traffic;
chart = new Highcharts.Chart(options);
});
});
The data looks as I expected when graphed in LibreCalc, apart from the line not rendering it is almost done in Highcharts.
Appreciate any advice. Unfortunately since I am new to this forum I can't submit images but happy to send them to someone if it helps.
Expect it is something simple, usually is :)
I think the problem comes from the way you build your traffic array. It might not be well sorted. Try to sort it by the first element, using something like:
function Comparator(a,b){
if (a[0] < b[0]) return -1;
if (a[0] > b[0]) return 1;
return 0;
}
traffic.sort(Comparator);
options.series[0].data = traffic;
Does it give you a different result ? Also, does your browser console log something when rendering the chart ?
Well I said it would be simple and it was.
I added ,10 to make sure it was decimal and it didn't make any difference. I changed it to 16 and was expecting the values to change and it did so it was definitely reading the data although it still didn't plot the data.
I then added .replace(',', '') to the y axis and it worked.
parseFloat (line[1],10),
parseFloat (line[1].replace(',', ''), 10)
Seems it doesn't like comma's in the data value!