I have been trying for three hours now with the Google Charts API to change the color of the next that I have displayed below. As you can see I've gotten the X/Y axis drawing in White, but That's about all I could do albeit changing the background color.
I've been reading the documentation located here: https://developers.google.com/chart/interactive/docs/gallery/table
Many labels in the chart have associated textStyle options. In your case, you want to use hAxis.textStyle, vAxis.textStyle, legend.textStyle, and titleTextStyle:
hAxis: {
textStyle: {
color: '#ffffff'
}
},
vAxis: {
textStyle: {
color: '#ffffff'
}
},
legend: {
textStyle: {
color: '#ffffff'
}
},
titleTextStyle: {
color: '#ffffff'
}
legend.textStyle and tooltip.textStyle control this as documented for scatter charts for instance here
I think, I have understood the main properties of Google Charts. Here they are:
// options
var options = {
// title
title: 'What is your favourite season?',
titleTextStyle: {color: '#006633'},
// horizontal axis
hAxis: {
textStyle: {
color: '#ffffff',
fontName: 'Tahoma',
fontSize: 12},
slantedText: false,
minTextSpacing: 1,
},
// vertical axis
vAxis: {
textStyle: {
color: '#ffffff',
fontName: 'Tahoma',
fontSize: 12},
slantedText: false,
minTextSpacing: 1,
},
// legend
legend: {
textStyle: {
color: '#c7d781',
fontSize:14,
bold:true,
italic:false
}
},
// tooltip
tooltip: {
textStyle: {
color: '#ff0000',
fontSize:14,
bold:true,
italic:false
}
},
// chart
width:740,
height:200,
backgroundColor: 'transparent',
baselineColor: 'white'
};
var chart = new google.visualization.ColumnChart(document.getElementById('chartContainer-03'));
chart.draw(data, options);
}
Source code and demo here
Related
We have been working on one client requirement where most of the graphs are Combination of line and column chart. We need drop down of minimum two level in each graph and sometimes it goes to three or four level. Now of value axis that is left side we displayed number value of column and on opposite right side we need to show percentage (%) of that value in the form of line. The issue is on the right side of value axis value remain same as of left axis instead of 1 to 100% in percentage if left side is A,B,C,D on right it shows again like A%,B%,C%,D% instead of 1to 100% and whenever we dig into bar graph the line doesn't appear on graph just column with percentage. We want to change it dynamically. We are implementing it in PHP in YII2.
We are passing value of percentage like following:
$('#customchart').highcharts({
chart: {
type: 'column',
style: {
fontFamily: 'Inter'
}
},
title: {
text: 'country',
align: 'left',
margin: 20,
x:15,
style: {
fontWeight: '700',
fontSize: '16px',
}
},
xAxis: {
type: 'category',
labels: {
style: {
color: 'red'
}
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
marker: {
fillColor: '#211F1F',
// lineWidth: ,
lineColor: null // inherit from series
},
dataLabels: {
enabled: true,
formatter: function() {
var pcnt = (this.y / this.series.data.map(p => p.y).reduce((a, b) => a + b, 0)) * 100;
return Highcharts.numberFormat(pcnt) + '%';
}
}
}
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[1],
fontSize: '12px',
fontWeight: '400'
}
},
title: {
text: 'arriving',
style: {
color: Highcharts.getOptions().colors[1],
fontSize: '12px',
fontWeight: '600',
color: '#211F1F'
}
}
}, { // Secondary yAxis
title: {
text: '% arriving',
style: {
color: Highcharts.getOptions().colors[0],
fontSize: '12px',
fontWeight: '600',
color: '#211F1F'
}
},
labels: {
style: {
color: Highcharts.getOptions().colors[1],
fontSize: '12px',
fontWeight: '400'
},
formatter:function() {
// var pcnt = (this.value / this.series.data.map(p => p.y).reduce((a, b) => a + b, 0)) * 100;
return Highcharts.numberFormat(this.value, 0, ',') + '%';
}
},
linkedTo: 0,
opposite: true
}],
series: [{
name: 'No. of Patients',
colorByPoint: false,
color:'#F7A4A4',
data: <?php echo $countryJson?>,
type: 'column',
yAxis: 1
},
{
name: '% of Patients',
colorByPoint: false,
color:'#A82828',
data: <?php echo $countryJson?>,
type: 'spline'
}],
drilldown: {
series: <?=$countrystateArrJson ?>
}
})
Attached is screenshot for same.
First of all, if the left axis is related to columns, the series.yAxis should be 0, and 1 for the spline series.
Secondly, the yAxis.linkedTo option duplicates the scales, which as I understand is not expected. I set min=0 and max= 100 for the right axis to simulate the percentage scale.
When it comes to the line data, you edit them only in the dataLabels.formatter(), which means, they are really the same, but only the labels change. If you want to count your data and show them as they are on the scale it has to be done i.e. in the chart load() event.
I simplified your config to make it more understandable.
Check the following demo: https://jsfiddle.net/BlackLabel/5c4367wg/
API Reference:
https://api.highcharts.com/highcharts/yAxis.linkedTo
https://api.highcharts.com/highcharts/chart.events.load
How to avoid the negative values from google chart, I tried viewWindow: { min: 0,} in my Y axis, but still it showing negative values only.
please help some one please. Thanks in advance
<div class="timeline-item">
<div id="top_x_div" style="width: 100%; height: 300px;"></div>
</div>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawStacked);
function drawStacked() {
var data = new google.visualization.arrayToDataTable([
['Courses', 'Students'],
["Electronics", 2 ],
]);
var options = {
legend: { position: 'none' },
isStacked: true,
colors: ['green'],
bars: 'vertical', // Required for Material Bar Charts.
axes: {
x: {
0: { side: 'bottom', label: 'Percentage'} // Top x-axis.
}
},
axes: {
y: {
0: { side: 'bottom', label: 'Students'}, // Top x-axis.
/* viewWindow: {
min: 0,
},*/
}
},
vAxis: {
viewWindow: {
min: 0
}
},
bar: { groupWidth: "90%" }
};
var chart = new google.charts.Bar(document.getElementById('top_x_div'));
chart.draw(data, options);
};
</script>
You need to set the viewWindow on the vAxis option.
vAxis: {
viewWindow: {
min: 0
}
}
Source
I have the following string:
{
legend: {
position: 'top',
textStyle: {
color: '#676a6c'
}
},
colors: ["#1c84c6", "#f8ac59", "#1ab394", "ed5565", "5bc0de", "f0ad4e"],
title: "",
titleTextStyle: {
color: '#676a6c'
},
hAxis: {
title: 'Gemiddelde marge per verkooporder',
textStyle: {
color: '#676a6c',
},
titleTextStyle: {
color: '#676a6c',
italic: 'false',
bold: 'false',
},
format: 'currency'
},
vAxis: {
title: '# verkooporders per product',
textStyle: {
color: '#676a6c',
},
titleTextStyle: {
color: '#676a6c',
italic: 'false',
bold: 'false',
}
},
bubble: {
textStyle: {
color: 'transparent',
auraColor: 'none',
},
},
width: "100%",
isStacked: true,
fontName: 'open sans', //Choose from Times-Roman, Arial
fontSize: 13,
height: 350,
};
I want to convert this to an php array, which i can JSON_encode() later on. What's the best way to iterate through this JSON array?
Do i need to loop through the string with foreach()?
If you use the json_decode() function it should do the trick:
$str = "...your JSON string here...";
$parsed = json_decode($str, true);
Notes:
1) Passing true to json_decode() will make it return an array rather than objects. If you leave it off you'll get objects back; it's down to which you prefer.
2) You should check the result of json_last_error() to see if any errors occurred. If it returns JSON_ERROR_NONE it means the string was parsed correctly.
I'm trying to do a realtime Bar Chart. On left (Y axis) i have clients Name
and on bottom (X axis) i have a number (a count from mysql).
Simply i cant understand why wont go the redraw. I've been trying solving the problem alone and searching on google and here last 2 days without any success.
Here is the code:
`
<script>
var rawData = [<?php echo getDataLog(); ?>];
var dataSet = [{ label: "Numero di Allarmi", data: rawData, color: "#E8E800" }];
var ticks = [<?php echo getDataLogName(); ?>];
var options = {
series: {
bars: {
show: true
}
},
bars: {
align: "center",
barWidth: 0.5,
horizontal: true,
fillColor: { colors: [{ opacity: 0.5 }, { opacity: 1}] },
lineWidth: 1
},
xaxis: {
axisLabel: "Allarmi",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10,
max: 2000,
tickColor: "#5E5E5E",
color: "black"
},
yaxis: {
axisLabel: "Clienti",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3,
tickColor: "#5E5E5E",
ticks: ticks,
color: "black"
},
legend: {
noColumns: 0,
labelBoxBorderColor: "#858585",
position: "ne"
},
grid: {
hoverable: true,
borderWidth: 2,
backgroundColor: { colors: ["#171717", "#4F4F4F"] }
}
};
function updateGraph(){
var rawData = [<?php echo getDataLog(); ?>];
var dataSet = [{ label: "Numero di Allarmi", data: rawData, color: "#E8E800" }];
var ticks = [<?php echo getDataLogName(); ?>];
$.plot($("#flot-placeholder"), dataSet, options);
$("#flot-placeholder").UseTooltip();
}
var previousPoint = null, previousLabel = null;
$.fn.UseTooltip = function () {
$(this).bind("plothover", function (event, pos, item) {
if (item) {
if ((previousLabel != item.series.label) ||
(previousPoint != item.dataIndex)) {
previousPoint = item.dataIndex;
previousLabel = item.series.label;
$("#tooltip").remove();
var x = item.datapoint[0];
var y = item.datapoint[1];
var color = item.series.color;
//alert(color)
//console.log(item.series.xaxis.ticks[x].label);
showTooltip(item.pageX,
item.pageY,
color,
"<strong>" + item.series.label + "</strong><br>" + item.series.yaxis.ticks[y].label +
" : <strong>" +x+ "</strong> Allarmi");
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
};
function showTooltip(x, y, color, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y - 10,
left: x + 10,
border: '2px solid ' + color,
padding: '3px',
'font-size': '9px',
'border-radius': '5px',
'background-color': '#fff',
'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
opacity: 0.9
}).appendTo("body").fadeIn(200);
}
setInterval(function(){
updateGraph();
console.log("a");
},1000)
</script>`
I really give up on try to understand why wont refresh the graph
I am show graphs from Google Charts, using a horizontal column chart. I want to remove the blank space above and below the graph.
Here is the code called (some info removed due to NDA):
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
[null, "...","...","...","...","...","...","...","...","Total Average"],
[null, 100,100,100,100,100,88.89,100,100,98.70]
]);
var options = {
height: 540,
title: 'Title here',
vAxis: { textPosition: 'none', viewWindowMode: 'maximized' },
colors:["#0B0842","#ADAEAE","#BE3351","#498101","#0D80CA","#A3C116","#91A96B","#E8F72B","#424242"],
hAxis: { textPosition: 'none', minValue: 0, maxValue: 100 },
chartArea: { left: 0, width: "78%" },
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
The space above and below the bars is normally there to separate bar groups when you have multiple rows of data. If you don't want that space, then you can set the bar.groupWidth option in your chart to a larger percentage (up to 100%; default is the golden ratio, roughly 61.8%):
var options = {
height: 540,
title: 'Title here',
vAxis: { textPosition: 'none', viewWindowMode: 'maximized' },
colors:["#0B0842","#ADAEAE","#BE3351","#498101","#0D80CA","#A3C116","#91A96B","#E8F72B","#424242"],
hAxis: { textPosition: 'none', minValue: 0, maxValue: 100 },
chartArea: { left: 0, width: "78%" },
bar: {groupWidth: '100%'}
};
Try this, it worked for me:
var chart_height = data.getNumberOfRows() * 40;
var options = {
chartArea: {
top: 0,
left: '30%',
width: '70%',
bottom: 0
},
height: chart_height
};