I am new to plotly and am working of a bar chart example. What I want to do is have the bar chart run from right to left. Here is a link to my jsfiddle.
https://jsfiddle.net/ksaluja/w0cx3sw1/1/
Currently it is going the default way from right to left. Thanks!
index.html
<div id="tester" style="width:600px;height:250px;"></div>
scripts.js
var data = [{
type: 'bar',
x: [20, 14, 23],
y: ['giraffes', 'orangutans', 'monkeys'],
orientation: 'h'
}];
Plotly.newPlot('tester', data);
You need to use the autorange: reversed property of xaxis in layout object.
Refer the below example.
JSFiddle Demo
JS:
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);
References:
Plotly reversed axis
Plotly Autorange
Related
My chart is not displaying properly, here is how it displays and how it is suppose to display:
How it displays:
How it is suppose to look like:
My html code:
<div style="display:block; width: 400px; height: 400px">
<canvas id="dashboardChart" width="400" height="400"></canvas>
</div>
My typescript component code:
var data = {
datasets: [{
data: [10, 20, 30]
}],
labels: [
'Red',
'Yellow',
'Blue'
]
};
var ctx = document.getElementById("dashboardChart") as HTMLCanvasElement;
var myDoughnutChart = new Chart(ctx, {
type: 'doughnut',
data: data,
options: {
rotation: 1 * Math.PI,
circumference: 1 * Math.PI
}
});
If anyone can assist, it would get greatly appreciated.
Doughnut rotation option is now in degrees
Try these changes:
circumference: 180,
rotation: -90,
Migration docs
My problem is that when I paste this code into my angular project (in the component.html part), it does not appear.
How ever, it works fine as an individual html document.
I have this HTML code (taken off of sample):
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var dps = [{x: 1, y: 10}, {x: 2, y: 13}, {x: 3, y: 18}, {x: 4, y: 20}, {x: 5, y: 17},{x: 6, y: 10}, {x: 7, y: 13}, {x: 8, y: 18}, {x: 9, y: 20}, {x: 10, y: 17}]; //dataPoints.
var chart = new CanvasJS.Chart("chartContainer",{
title :{
text: "Stocks"
},
axisX: {
title: "Axis X Title"
},
axisY: {
title: "Units"
},
data: [{
type: "line",
dataPoints : dps
}]
});
chart.render();
var xVal = dps.length + 1;
var yVal = 15;
var updateInterval = 1000;
var updateChart = function () {
yVal = yVal + Math.round(5 + Math.random() *(-5-5));
dps.push({x: xVal,y: yVal});
xVal++;
if (dps.length > 10 )
{
dps.shift();
}
chart.render();
// update chart after specified time.
};
setInterval(function(){updateChart()}, updateInterval);
}
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
</body>
</html>
I created a component, stocks, and withing stocks.component.html, i placed this code. There is no graph displaying. However, if i add text inside the body, it displays fine.
What am i doing wrong here?
The HTML associated with a component is just an HTML fragment, not an HTML page. It should not include the <html> or <head> tags. This is because the fragment defined in the component is inserted into the index.html page.
And for security purposes, Angular strips out any <script> tags. So that is why it won't work.
See this post for more information: How to load script file from component html?
I am trying to create line breaks or word wrapping on the series labels of my chart. Using '\n' works when I am creating a chart with horizontal orientation:
However, as soon as I attempt a line break in the vertical orientation, the label ends with '...', even though there is enough width on the vertical series axis (blue outline from mouse hover) for the text:
Notes: I am using Google Charts as my chart generator and Google Sheets as my container.
Thanks!
Code snippet with orientation set as 'vertical':
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Metric 1\n Desc of Metric', 20, 28, 38, 45, 50],
['Metric 2\n Desc of Metric', 31, 38, 55, 66, 50],
['Metric 2\n Desc of Metric', 50, 55, 77, 80, 50],
['Metric 2\n Desc of Metric', 77, 77, 66, 50, 50]
// Treat first row as data as well.
], true);
var options = {
title : 'Metrics and Values',
vAxis: {title: 'Values'},
hAxis: {title: 'Metrics'},
seriesType: 'candlesticks',
isStacked: true,
orientation: 'vertical',
series: {
//0: {color: 'white', stroke-width: 4},
1: {type: 'line', pointShape: 'circle', pointSize: 15, lineWidth: 0}
},
chartArea: { width: "50%", height: "70%" }
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
I'm creating a pie chart inside my Dashboard page. First, i've been created a bar chart and everything works properly, but now, while i'm creating a pie chart my tooltip doesn't works as expected.
My code:
<canvas id="pie-chart" height="213"></canvas>
<!-- ChartJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<script>
var ctx2 = document.getElementById('pie-chart').getContext('2d');
var green_darkgreen_gradient = ctx2.createLinearGradient(0, 0, 0, 150);
green_darkgreen_gradient.addColorStop(0, '#16D99B');
green_darkgreen_gradient.addColorStop(1, '#22A77C');
var red_darkred_gradient = ctx2.createLinearGradient(0, 0, 0, 150);
red_darkred_gradient.addColorStop(0, '#F22626');
red_darkred_gradient.addColorStop(1, '#BE1111');
var yellow_darkyellow_gradient = ctx2.createLinearGradient(0, 0, 0, 150);
yellow_darkyellow_gradient.addColorStop(0, '#DFD337');
yellow_darkyellow_gradient.addColorStop(1, '#C5B929');
var pieChart = new Chart(ctx2,{
type: 'pie',
data: {
labels: ['Aberto', 'Fechado', 'Transferido'],
datasets: [{
data: [7, 10, 15],
backgroundColor: [green_darkgreen_gradient,red_darkred_gradient, yellow_darkyellow_gradient],
hoverBackgroundColor:[green_darkgreen_gradient,red_darkred_gradient, yellow_darkyellow_gradient],
hoverBackgroundColor: [green_darkgreen_gradient,red_darkred_gradient, yellow_darkyellow_gradient],
hoverBorderWidth: 0,
hoverBorderColor: [green_darkgreen_gradient,red_darkred_gradient, yellow_darkyellow_gradient],
borderColor: [green_darkgreen_gradient,red_darkred_gradient, yellow_darkyellow_gradient]
}]
},
options: {
legend: {
display: false,
labels: {
fontColor: "#000",
fontSize: 18
}
},
tooltips: {
backgroundColor: '#000',
titleFontSize: 16,
ttitleFontColor: '#0066ff',
bodyFontColor: '#000',
bodyFontSize: 14,
displayColors: false
},
backgroundColor: '#000',
titleFontSize: 16,
titleFontColor: '#ddd',
bodyFontColor: '#ddd',
bodyFontSize: 14,
displayColors: false
}
});
See results with a bar chart (same code basically):
Bar chart with tooltip
See results with a pie chart:
Pie chart with tooltip
All you need to do is just set tooltips bodyFontColor value to white (#FFfFFF)
....
tooltips: {
backgroundColor: '#000',
bodyFontColor: '#FFFFFF',
bodyFontSize: 14,
displayColors: false
}
...
Here is fiddle link to see result : https://jsfiddle.net/xf7nx5nc/
I have a simple column chart. using the google-charts API:
JS code:
function drawChart() {
var data = google.visualization.arrayToDataTable(<?php echo $str ?>);
var options = {
title: 'Business Optimization Per Predicted Conversion Rate',
bar: {groupWidth: "70%"},
colors: ['purple','grey'],
fontSize:20,
legend: { position: "none" },
width: 900,
backgroundColor: { fill: '#efeff0'},
};
var chart = new google.charts.Bar(document.getElementById('chart_div_1'));
chart.draw(data, google.charts.Bar.convertOptions(options));
My question is: How can i draw simple line here?
Horizontly to the X-axis.