I am new to Stackoverflow and google charts.
I am facing a problem in one of my project which uses google charts api, I am drawing two legends but they are overlapping on preview.
I tried various solution on stackoverflow and jsfiddle but none of them worked.
Here are some of my code snippet and output:
Configuration Object for Chart :
var options = {
hAxis : {
title : xAxis,
textStyle:{
color: 'black',
fontSize : '8px'
},
slantedText : true,
slantedTextAngle : 90,
titleTextStyle : {
fontSize : '15px',
italic : false
},
},
vAxis : {
title : yAxis,
format:format,
textStyle:{
color: 'black',
fontSize : '8px'
},
titleTextStyle : {
fontSize : '15px',
italic : false
},
viewWindowMode : 'explicit',
viewWindow : {
min : 0,
//max: 1200000
}
},
backgroundColor : 'transparent',
interpolateNulls: false,
width : 350,
height : 180,
chartArea : {
left : 40,
width : '45%',
height : '45%'
},
legend: {
position: 'top',
maxLines: 3,
},
series : {
0 : {
color : line1Color,
visibleInLegend : true,
pointShape: 'square',
pointSize: 10,
},
1 : {
color : line2Color,
visibleInLegend : true,
pointShape: 'diamond',
pointSize: 10,
}
}
};
Output:
https://snag.gy/Yd2qjX.jpg
unfortunately, there isn't an option for forcing multiple lines on the legend
I could never get the legends to overlap as in the screen shot,
instead each would be cutoff, with '...' at the end
but the only way I could get the legend text to drop to another line and not cutoff,
was by increasing the width by a rediculous amout
needed to adjust chartArea.width as well
so you might be able to continue to adjust both width and chartArea.width,
until you get the desired result
one other note, anytime you use fontSize in the chart options,
it should be a number, instead of a string, i.e.
fontSize : 8
vs.
fontSize : '8px'
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Month', 'Tool - Long title could not read', 'Tool - Something to Prod Start'],
[new Date('08/01/2015'), 0.2, 0.0],
[new Date('09/01/2015'), 0.8, 0.0],
[new Date('10/01/2015'), 1.0, 2.2],
[new Date('11/01/2015'), 1.3, 1.2],
[new Date('12/01/2015'), 1.8, 1.4],
[new Date('01/01/2016'), 2.4, 1.5],
[new Date('02/01/2016'), 2.5, 1.4],
[new Date('03/01/2016'), 2.6, 1.5],
[new Date('04/01/2016'), 2.5, 1.5],
[new Date('05/01/2016'), 2.4, 1.6],
[new Date('06/01/2016'), 2.3, 1.6],
[new Date('07/01/2016'), 2.2, 1.5]
]);
var options = {
hAxis : {
title : 'xAxis',
format: 'MMM-yy',
textStyle:{
color: 'black',
fontSize : 8
},
slantedText : true,
slantedTextAngle : 90,
titleTextStyle : {
fontSize : 15,
italic : false
},
},
vAxis : {
title : 'yAxis',
format: '#,##0.0',
textStyle:{
color: 'black',
fontSize : 8
},
titleTextStyle : {
fontSize : 15,
italic : false
},
viewWindowMode : 'explicit',
viewWindow : {
min : 0
}
},
backgroundColor : 'transparent',
interpolateNulls: false,
width : 780,
height : 180,
chartArea : {
left : 40,
width : 310,
height : '45%'
},
legend: {
position: 'top',
maxLines: 3
},
series : {
0 : {
color : '#154360',
visibleInLegend : true,
pointShape: 'square',
pointSize: 10,
},
1 : {
color : '#5499C7',
visibleInLegend : true,
pointShape: 'diamond',
pointSize: 10,
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Related
I am working with chart.js and am trying to add 2 plugins to the same chart, but when applied, both of the plugins disappear and there is no direct error in the console.
Does anyone know how to implement two plugins to the same graph?
First pulgin
Second plugin referance
Basically, the graph has to show data labels on a line chart and at the same time, draw yAxis lines, but only starting from the points on the line chart.
For some reason, the chart will not show either of them when both are applied.
Chart.helpers.merge(Chart.defaults.global.plugins.datalabels, {
color : '#ffffff'
})
// Chart.plugins.unregister(ChartDataLabels);
// var chart = new Chart(ctx, {
// / plugins: [ChartDataLabels],
// options: {
// // ...
// }
// })
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type : 'line',
// The data for our dataset
data : {
labels : [ '', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', '' ],
datasets : [ {
label : 'My first dataset',
borderWidth : 3,
borderColor : 'rgb(255,0, 0)',
data : data1,
} ]
},
// Configuration options go here
options : {
elements : {
point : {
radius : 3
}
},
legend : {
display : false,
labels : {
fontColor : "white",
fontSize : 18
}
},
scales : {
yAxes : [ {
ticks : {
fontSize : 0,
beginAtZero : false,
max : 40,
},
gridLines : {
display : false,
drawBorder : false,
}
} ],
xAxes : [ {
ticks : {
fontColor : "white",
fontSize : 14,
beginAtZero : 0,
},
gridLines : {
display : false,
}
} ]
},
plugins : [ { // this is the magical bit :)
afterRender : function(c, options) {
let
meta = c.getDatasetMeta(0), max;
c.ctx.save();
c.ctx.strokeStyle = c.config.options.scales.xAxes[0].gridLines.color;
c.ctx.lineWidth = c.config.options.scales.xAxes[0].gridLines.lineWidth;
c.ctx.beginPath();
meta.data
.forEach(function(e) {
if (max == undefined
|| c.config.data.datasets[0].data[e._index] > max) {
max = c.config.data.datasets[0].data[e._index];
}
c.ctx.moveTo(e._model.x,
meta.dataset._scale.bottom);
c.ctx
.lineTo(e._model.x,
e._model.y);
});
c.ctx.textBaseline = 'top';
c.ctx.textAlign = 'right';
c.ctx.fillStyle = 'black';
c.ctx.fillText('Max value: ' + max,
c.width - 10, 10);
c.ctx.stroke();
c.ctx.restore();
}
} ],
tooltips : {
callbacks : {
label : function(tooltipItem) {
console.log(tooltipItem)
return tooltipItem.yLabel;
}
}
}
}
});
var data1 = [ 1, 9, 12, 3, 15, 8, 2, -5, 3, 4, 5, 7 ];
myChart(data1);
HTML .js code
<script src="js/chart.js"></script>
<!-- data label .js -->
<script
src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#0.5.0"></script>
<!-- yAxis lines .js -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>
var chart = new Chart(document.getElementById('chart'), {
type : 'line',
data : {
labels : [ '', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', '' ],
datasets : [ {
label : 'My first dataset',
borderWidth : 1,
borderColor : 'rgb(255,0, 0)',
data : [ 1, 9, 12, 3, 15, 8, 2, -5, 3, 4, 5, 7 ],
datalabels: {
align: 'end',
anchor: 'end',
backgroundColor: 'rgb(255, 120, 12, .2)',
borderRadius: 20
}
}]
},
options : {
scales : {
xAxes : [ {
gridLines : {
display : false,
color: 'rgba(255, 120, 12, .2)',
lineWidth: 5
}
} ],
yAxes : [{
gridLines : {
display : false,
color: 'rgba(255, 120, 12, .2)',
lineWidth: 5
},
ticks : {
beginAtZero: true
}
}]
},
},
plugins : [{ // this is the magical bit :)
afterRender : function(c, options) {
let meta = c.getDatasetMeta(0), max;
c.ctx.save();
c.ctx.strokeStyle = c.config.options.scales.xAxes[0].gridLines.color;
c.ctx.lineWidth = c.config.options.scales.xAxes[0].gridLines.lineWidth;
c.ctx.beginPath();
meta.data.forEach(function(e)
{
if (max == undefined || c.config.data.datasets[0].data[e._index] > max) {
max = c.config.data.datasets[0].data[e._index];
}
c.ctx.moveTo(e._model.x,meta.dataset._scale.bottom);
c.ctx.lineTo(e._model.x,e._model.y);
});
c.ctx.textBaseline = 'top';
c.ctx.textAlign = 'right';
c.ctx.fillStyle = 'black';
c.ctx.fillText('Max value: ' + max, c.width - 10, 10);
c.ctx.stroke();
c.ctx.restore();
}
}],
tooltips : {
callbacks : {
label : function(tooltipItem) {
console.log(tooltipItem)
return tooltipItem.yLabel;
}
}
}
});
>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#0.6.0/dist/chartjs-plugin-datalabels.min.js"></script>
<canvas id="chart"></canvas>
I am new to jquery jvectormap. Currently my vectormap function look like below.
$('#locations-div').vectorMap({
map : 'world_mill_en',
normalizeFunction: 'polynomial',
backgroundColor : 'transparent',
scaleColors : ['#C8EEFF', '#0071A4'],
regionStyle : {
initial : {
fill : 'rgba(210, 214, 222, 1)',
'fill-opacity' : 1,
stroke : 'none',
'stroke-width' : 0,
'stroke-opacity': 1
},
selected : {
fill: 'yellow'
},
selectedHover: {}
},
markerStyle : {
initial: {
fill : '#328cc1',
stroke: 'none'
},
hover: {
fill: '#d98310',
cursor: 'pointer',
stroke: 'none'
}
},
series: {
markers: [{
attribute: 'r',
scale: [5, 15],
values: items_sizes
}]
},
markers : items_locations,
onMarkerLabelShow: function (event, label, code) {
var markers = $('#locations-div').vectorMap('get', 'mapObject').markers;
label.css('background-color', '#fff');
label.css('border', 'solid 1px #ddd');
label.css('padding', '0px');
label.css('font-color', 'white');//#292b2c
label.html(markers[code].config.name).css("fontSize", "15px");
},
onRegionLabelShow: function(e, el, code){
e.preventDefault();
}
});
My markers are as follows.
{latLng: [38.90, -98.45], name: 'A long text of about 100 lines of html code'}
Currently, the Marker label looks like below.
I can't scroll the content on the label. When I move the mouse into the label it disappears. How can I fix that?
in an html page I'm trying to use Highcharts Chart to build a chart but the sometimes data label disappear behind the graph (e.g. image below)
This is my js code that build the graph:
var chartBehaviour = new Highcharts.Chart({
chart : {
renderTo : 'driving-behaviour-chart',
type : 'column'
},
xAxis : {
categories : labelXAxis,
lineColor : "#f5f5f5",
tickLength : 0,
labels : {
y: 40,
style : {
'color' : '#666666',
fontSize : '14px',
fontFamily : '\"Helvetica Neue\",Helvetica,Arial,sans-serif'
}
}
},
yAxis : {
title : {
enabled : false
},
gridLineColor : "#f5f5f5",
tickInterval : 10,
labels : {
style : {
'color' : '#666666',
fontSize : '12px',
fontFamily : '\"Helvetica Neue\",Helvetica,Arial,sans-serif'
}
}
},
credits : {
enabled : false
},
title : false,
tooltip : false,
legend : false,
plotOptions : {
series : {
borderWidth : 0,
pointWidth : 22
},
column : {
animation : false,
pointPadding : 0.23,
dataLabels : {
enabled : true,
align : 'left',
enabled : true,
rotation : 0,
verticalAlign : "top",
x : -1,
y : -30,
style : {
"color" : "#68a1b1",
fontFamily : '\"Helvetica Neue\",Helvetica,Arial,sans-serif',
fontSize : "14px"
}
},
states : {
hover : {
enabled : false
}
}
}
},
series : [{
data : trends.drivingBehaviour,
color : "#68a1b1",
borderRadiusTopLeft : 5,
borderRadiusTopRight : 5,
borderRadiusBottomRight : 5,
borderRadiusBottomLeft : 5
}
]
});
What am I doing wrong? How can I fix this graph? Thank you.
I'm having trouble trying to changing the position of the labels in this Google ColumnChart. The chart is rendered via the Keen.io JS SDK. I've got a very tight space to work in and I'm trying to position the labels underneath the chart instead of on the right hand side (where the label text is truncated). Here is a screenshot -
I've included my config object below. Is there an option I'm missing - nothing to seems to shift the labels from the right hand side. Thanks.
{
chartType: 'columnchart',
chartOptions: {
isStacked: true
},
fontName : 'Helvetica',
fontSize : '11px',
width : 270,
height : 220,
chartArea : {
left : 0,
top : 0,
width : '100%',
height : '100%'
},
colors : ['#abdd99', '#8dc7d9', '#eeeeee'],
colorMapping : {
'pro' : '#abdd99',
'basic' : '#8dc7d9'
},
labelMapping: {
"basic": "BASIC",
"pro": "PRO"
},
title : 'PROFILE VIEWS',
vAxis : {
viewWindowMode : 'maximized',
gridlines : { color : '#eeeeee' },
baselineColor : '#eeeeee',
textPosition : 'none'
},
hAxis : {
viewWindowMode : 'maximized',
gridlines : {
color : '#eeeeee'
},
baselineColor : '#eeeeee',
textPosition : 'none'
},
legend : {
position : 'bottom',
textStyle : {
color : '#cccccc',
fontName : 'Helvetica',
fontSize : '11px'
}
}
}
All of those Google-specific configurations should go inside of chartOptions object. Give this a try and let me know how it goes:
{
chartType: 'columnchart',
chartOptions: {
fontName : 'Helvetica',
fontSize : '11px',
isStacked: true,
chartArea : {
left : 0,
top : 0,
width : '100%',
height : '100%'
},
vAxis : {
viewWindowMode : 'maximized',
gridlines : { color : '#eeeeee' },
baselineColor : '#eeeeee',
textPosition : 'none'
},
hAxis : {
viewWindowMode : 'maximized',
gridlines : {
color : '#eeeeee'
},
baselineColor : '#eeeeee',
textPosition : 'none'
},
legend : {
position : 'bottom',
textStyle : {
color : '#cccccc',
fontName : 'Helvetica',
fontSize : '11px'
}
}
},
width : 270,
height : 220,
colors : ['#abdd99', '#8dc7d9', '#eeeeee'],
colorMapping : {
'pro' : '#abdd99',
'basic' : '#8dc7d9'
},
labelMapping: {
"basic": "BASIC",
"pro": "PRO"
},
title : 'PROFILE VIEWS'
}
Update: You might also enjoy working with C3.js more.. we added a C3 adapter in v3.1. Here's a jsFiddle demonstrating how to use it: http://jsfiddle.net/keen/0mL925vr/
I tried to change the spacing between jqplot barchart using both barMargin and barPadding but both did not help. Please help me out in figuring out what I am missing out.
Let me know a way to reduce the space between each bars.
<script>
$(document).ready(function(){
var line1 = [['Nissan', 4],['Porche', 6],['Acura', 2],['Aston Martin', 5],['Rolls Royce', 6],['Maserati',3],['Ferrari',3]];
$('#chart3').jqplot([line1], {
title:'Test with Custom Colors :)',
// Provide a custom seriesColors array to override the default colors.
seriesColors:['#3366cc', '#dc3912', '#ff9900', '#109618', '#ffc607'],
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
// Set varyBarColor to tru to use the custom colors on the bars.
varyBarColor: true,
barWidth: 25,
barPadding:-10,
barMargin: -10
}
},
grid:{
drawGridLines: true,
gridLineColor: '#000000',
background: '#ffffff',
borderColor: 'transparent',
borderWidth: 2.0,
shadow:false,
},
tickOptions:{
// markSize: 1,
showMark: false,
showGridline: false,
},
axes:{
xaxis:{
renderer: $.jqplot.CategoryAxisRenderer,
drawMajorGridlines: false
}
}
});
});
</script>