Develop Reference

Draw straight line on google bar chart (combo)

I'm kinda bound to use google charts for one of my projects. What I need is, to display a bar chart, and in the bars a line intersecting each bar the represents another value. If you look at the jsfiddle below, you'll notice that the line chart only intersects the bars at the middle and continues to move forward towards other bars.
https://jsfiddle.net/ark7qbsc/
I would instead have, for example if you look at "Apples", for the line to intersect the entire bar (from start to finish) at y=2.5 and end within the bar, not to linger in the white spaces, nor make its way to the other bars.
Could anyone help me with this (Using only google charts.)
I've tired to inject null values after each data row, that at least removes the line from the white spaces. However, now there is just a dot on the centre of the bar. Looking a way to extend that to the entire bar width.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Fruit', 'Jane', 'Average'],
['Apples', 3, 2.5],
['Oranges', 2, 1.5],
['Pears', 4, 3],
['Bananas', 3, 2],
['Plums', 4, 3]
]);
// Set chart options
var options = {
title : 'Fruits distribution',
vAxis: {title: 'Fruits'},
hAxis: {title: 'Person'},
seriesType: 'bars',
series: {1:{type: 'line'}}
};
// Instantiate and draw the chart.
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Can't seem to get a line to be contained in the bar, from start to finish

not possible using standard methods / options,
but we can draw custom lines on the chart's ready event.
add nulls in between the rows to break the line.
['Fruit', 'Jane', 'Average'],
['Apples', 3, 2.5],
[null, null, null],
['Oranges', 2, 1.5],
[null, null, null],
we can use the following option to bring the bars closer together.
bar: {
groupWidth: '95%'
},
then we can use the circles to place the custom lines.
and we can use the chart's layout interface to find the width of the bars.
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Fruit', 'Jane', 'Average'],
['Apples', 3, 2.5],
[null, null, null],
['Oranges', 2, 1.5],
[null, null, null],
['Pears', 4, 3],
[null, null, null],
['Bananas', 3, 2],
[null, null, null],
['Plums', 4, 3]
]);
var options = {
bar: {
groupWidth: '95%'
},
title : 'Fruits distribution',
vAxis: {title: 'Fruits'},
hAxis: {title: 'Person'},
seriesType: 'bars',
series: {1:{type: 'line'}}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.ComboChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
// get chart layout and svg
var chartLayout = chart.getChartLayoutInterface();
var svg = document.querySelector('#chart_div svg');
var svgNS = svg.namespaceURI;
// process each circle
Array.prototype.forEach.call(container.getElementsByTagName('circle'), function(circle, index) {
// find width of the bar
var bounds = chartLayout.getBoundingBox('bar#0#' + (index * 2));
// create line
var line = document.createElementNS(svgNS, 'rect');
line.setAttribute('x', parseFloat(circle.getAttribute('cx')) - (bounds.width / 2));
line.setAttribute('y', parseFloat(circle.getAttribute('cy')));
line.setAttribute('width', bounds.width);
line.setAttribute('height', 1);
line.setAttribute('stroke', circle.getAttribute('fill'));
line.setAttribute('stroke-width', 2);
line.setAttribute('fill', circle.getAttribute('fill'));
circle.parentNode.appendChild(line);
});
});
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Can we change the style of selected points?

In this boxplot generated by plotly.js, after selecting points, the non-selected points get an opacity of 0.2.
Is it possible to change the styling of selected and non-selected points ?
var trace1 = {
y: [0, 1, 2, 3, 4, 5, 6],
type: 'box',
selectedpoints : [1,2,5],
boxpoints: 'all'
};
var data = [trace1];
var layout = {};
Plotly.newPlot('myDiv', data, layout);
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<div id="myDiv"></div>
<script>
/* JAVASCRIPT CODE GOES HERE */
</script>
</body>

If you look at the reference, you can see that there are properties for "selected" and "unselected" markers which allows you to change their styling:
var trace1 = {
y: [0, 1, 2, 3, 4, 5, 6],
type: 'box',
selectedpoints: [1, 2, 5],
boxpoints: 'all',
selected: {
marker: {
color: '#ff0000',
opacity: 0.8
}
},
unselected: {
marker: {
color: '#00ff00',
opacity: 0.5
}
}
};
var data = [trace1];
var layout = {};
Plotly.newPlot('myDiv', data, layout);
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<div id="myDiv"></div>
<script>
/* JAVASCRIPT CODE GOES HERE */
</script>
</body>

How to remove background line of plotly area graph

I don't want line in background of plotly area graph. My graph is coming like this.
I want to remove this lines from graph. But I didn't get any solution for it.
I referred this code.
And following is my code:
demo.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="myDiv" style="width: 480px; height: 400px;"><!-- Plotly chart will be drawn inside this DIV --></div>
<script>
var trace1 = {
x: ['2013-10-04 22:23:00', '2016-10-06 22:23:00', '2013-11-04 22:23:00', '2013-11-07 22:23:00','2013-12-04 22:23:00', '2013-12-08 22:23:00'],
y: [1, 3, 6,9, 4, 5],
fill: 'tozeroy',
fillcolor: 'red',
text: server1,
hoverinfo: "x+y+text",
name:"Server 1",
type: 'scatter',
mode:"markers",
marker:
{
size:5,
color:"gray"
},
uid:"c2e171"
};
var layout = {
margin: {
l: 35,
r: 40,
b: 50,
t: 10
},
legend: {
"orientation": "h"
},
yaxis : {
fixedrange: true
},
};
var data = [trace1];
Plotly.newPlot('myDiv', data,layout);
var plotDiv = document.getElementById('myDiv');
</script>
</body>
</html>
And when I'm expanding graph means dragging graph x axis date is hiding,
Please give me solution for it. I'm new with plotly.js

You can use showgrid:
xaxis: {
showgrid: false
},
yaxis: {
showgrid: false,
showline: true
}
More plot.ly layout reference: https://plot.ly/javascript/reference/#layout-xaxis

plotly js: location and length of color scale in heatmap

Using plotly.js, you can make a heatmap, and the heatmap comes with a color scale on the right side, as do some of the 3d charts.
Here is an example in codepen.
Plotly.d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
var data = [{
z: figure.z,
colorscale: 'Jet',
type: 'heatmap'
}
];
var layout = {title: 'Jet'};
Plotly.newPlot('myDiv', data, layout);
});
I am struggling to see if the api allows the color scale location and length to be modified. Does plotly.js allow manipulation of these attributes, and do you have an example of this for a heatmap and/or 3d graph?

You can set the position and length of the colorbar by adding the following line to your data:
colorbar: {x: -.5, len: 0.5}
Below is a snippet with a colorbar pushed to the left and half the regular size.
Plotly.d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
var data = [{
z: figure.z,
colorscale: 'Jet',
type: 'heatmap',
colorbar: {x: -.5, len: 0.5}
}
];
var layout = {title: 'Jet'};
Plotly.newPlot('myDiv', data, layout);
});
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv" style="width: 480px; height: 400px;"></div>

Adding this answer to show more tweaks you can do on Plotly colorbar
var plotData8kW = [{
z: data8kW,
hoverinfo:"z",
colorbar:{
// len: 0.35, //Change size of bar
title: 'Speed(RPM)<br\><br\>', //set title
titleside:'top', //set postion
//tickvals:[0,50,100],
titlefont: {color: 'blue'} //title font color
},
type: 'heatmap',
colorscale: enhancedScale,
},
];

How do I color plot.ly js legend and why is it black?

When my graph renders, everything is great EXCEPT the legend only shows the colors black. The grouped bar chart graph is displaying how I would expect. All of the data and colors are wonderful, but the legend is not right.
I am loading a plotly graph into a salesforce Visualforce page as follows:
<apex:panelGroup styleClass="charts" layout="block">
<div id="myDiv" style="width: 480px; height: 400px;"><!-- Plotly chart will be drawn inside this DIV --></div>
</apex:panelGroup>
<script>
var trace1 = {
y: ['B2B', 'Commercial', 'Retail'],
x: [20, 14, 23],
marker: {
color: ['#f8b98d', '#f8b98d', '#f8b98d']
},
name: 'Annual Quota',
type: 'bar',
orientation: 'h'
};
var trace2 = {
y: ['B2B', 'Commercial', 'Retail'],
x: [12, 18, 29],
marker: {
color: ['#f58b3f', '#f58b3f', '#f58b3f']
},
name: 'Current Market Size',
type: 'bar',
orientation: 'h'
};
var data = [trace1, trace2];
var layout = {barmode: 'group'};
Plotly.newPlot('myDiv', data, layout, {displayModeBar: false});
</script>

I had a similar problem to this - custom colours on stacked bars looked great, but the legend swatches all black.
I couldn't find an official solution, so manually set the colours in the legend after the chart was generated using Plotly's built in d3, e.g:
var legendBoxes = document.getElementById("div-id-for-plot").getElementsByClassName("legendbar");
Plotly.d3.select(legendBoxes[0]).style("fill", "put your colour definition here");
(this example just styles a single box)