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>
Related
I am trying to use PLOTLY.JS to plot 2 line graphs. But nothing is showing up on the screen except an empty graph. Any help? It works fine with one lines, bar charts, etc.
var plot_data = {}
var trace1 = {
x: [4, 3, 1],
y: [1, 3, 6],mode: 'lines',
type: 'scatter'
};
var trace2 = {
x: [6, 8, 9],
y: [1, 2, 4],mode: 'lines',
type: 'scatter'
};
var data = [trace1, trace2];
plot_data.push(data);
var layout =
{
title: { text: 'Task Plot', font: { family: 'Courier New, monospace', size: 24 }, xref: 'paper', x: 0.05,}
};
//var config = {responsive : true};
Tester = document.getElementById('myDash');
Plotly.newPlot(Tester, plot_data, layout);
If you look at the documentation here, you'll want to pass an array of traces to Plotly.newPlot, so you can replace plot_data with data:
Plotly.newPlot(Tester, data, layout);
Is there a library that handles drawing an HTML horizontal bar chart, but with a goal line included, so the gap between the progress and the goal can be seen? I'd call this a 'horserace bar chart', but apparently no one else does.
Something like this:
you can use the library Chart.js
Example: Here is the jquery code to draw a horizontal line.
var data = {
labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
datasets: [{
data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1]
}]
};
var ctx = document.getElementById("LineWithLine").getContext("2d");
Chart.types.Line.extend({
name: "LineWithLine",
initialize: function () {
Chart.types.Line.prototype.initialize.apply(this, arguments);
},
draw: function () {
Chart.types.Line.prototype.draw.apply(this, arguments);
var point = this.datasets[0].points[this.options.lineAtIndex]
var scale = this.scale
console.log(this);
// draw line
this.chart.ctx.beginPath();
this.chart.ctx.moveTo(scale.startPoint+12, point.y);
this.chart.ctx.strokeStyle = '#ff0000';
this.chart.ctx.lineTo(this.chart.width, point.y);
this.chart.ctx.stroke();
// write TODAY
this.chart.ctx.textAlign = 'center';
this.chart.ctx.fillText("TODAY", scale.startPoint + 35, point.y+10);
}
});
new Chart(ctx).LineWithLine(data, {
datasetFill : false,
lineAtIndex: 2
});
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 am working on Doughnut chart.js. Here I am showing all the legends if the value is 0 then also its showing. I need to give a link for each legend how i can implement this.
There is no information about this in chart.js documents
here is my code
<body>
<div id="canvas-holder">
<canvas id="chart-area" width="500" height="500"/>
</div>
<div id="js-legend" class="chart-legend"></div>
</body>
Java Script
<script>
var doughnutData = [
{
value: 1,
label: "One"
},
{
value: 2,
label: "Two"
},
{
value: 3,
label: "Three"
},
{
value: 4,
label: "Four"
},
{
value: 5,
label: "Five"
},
{
value: 0,
label: "Six"
}
];
window.onload = function(){
var ctx = document.getElementById("chart-area").getContext("2d");
window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
document.getElementById('js-legend').innerHTML = myDoughnut.generateLegend();
};
here its showing six also if at all the value is 0
Need to include chart.js
Thank you
In version 2.x, you have to use the prototype method generateLegend scroll down here: http://www.chartjs.org/docs/#advanced-usage-prototype-methods
{
generateLegend: function(chartInstance) {
//return html legend string here
}
}
The legendTemplate option allows you to control your legend content, like so
...
window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {
responsive: true,
legendTemplate: '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<segments.length; i++){ if (segments[i].value) { %><li><span style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}}%></ul>'
});
myDoughnut.links = ["mylink1", "mylink2", "mylink3", "mylink4", "mylink5", "mylink6"];
...
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!