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
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 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
i have to create a single chart showing different series with different type of chart (Ex: one data series with 'areaspline' and one data series with 'column'). I built a db with a lot of data, extracted by sql query into a json file
[
{ "name": "Test", "data": [2.8,2.8,2.8,2.7,2.7,] },
{ "name": "kwc", "data": [10,1,10,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] }
]
The json file is correct, but if i try to select the series for a chart with the $.each function it doesn't work!
Here's my code
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script src="estrazione.php"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$.getJSON("new3.php", function(json) {
$.each(json.data, function(index, item){
// split the data set into ohlc and volume
var temperatura = [],
misura = [],
dataLength = json.length;
for (i = 0; i < dataLength; i++) {
temperatura.push([
data[i][0]
]);
misura.push([
data[i][1]
])
}
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Analisi Temperature e Consumo Generale',
},
xAxis: [{
categories: ['00.00', '00.15', '00.30', '00.45', '01.00', '01.15', '01.30', '01.45', '02.00', '02.15', '02.30', '02.45', '03.00', '03.15', '03.30', '03.45', '04.00', '04.15', '04.30', '04.45', '05.00', '05.15', '05.30', '05.45', '06.00', '06.15', '06.30', '06.45', '07.00', '07.15', '07.30', '07.45', '08.00', '08.15', '08.30', '08.45', '09.00', '09.15', '09.30', '09.45', '10.00', '10.15', '10.30', '10.45', '11.00', '11.15', '11.30', '11.45', '12.00', '12.15', '12.30', '12.45', '13.00', '13.15', '13.30', '13.45', '14.00', '14.15', '14.30', '14.45', '15.00', '15.15', '15.30', '15.45', '16.00', '16.15', '16.30', '16.45', '17.00', '17.15', '17.30', '17.45', '18.00', '18.15', '18.30', '18.45', '19.00', '19.15', '19.30', '19.45', '20.00', '20.15', '20.30', '20.45', '21.00', '21.15', '21.30', '21.45', '22.00', '22.15', '22.30', '22.45', '23.00', '23.15', '23.30', '23.45'],
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
title: {
text: 'Consumo',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value} Kw',
style: {
color: '#4572A7'
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: '#FFFFFF'
},
series: [{
name: 'Misure',
color: '#4572A7',
type: 'column',
yAxis: 1,
data: misura,
tooltip: {
valueSuffix: ' Kw'
}
}, {
name: 'Temperature',
color: '#89A54E',
type: 'spline',
data: temperatura,
tooltip: {
valueSuffix: '°C'
}
}]
});
});
</script>
</head>
<body>
<script src="js/highcharts.js"></script>
<script src="js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>'
this is my php code:
<?php
$data_scelta = "2013-08-08";
$misura = "kwc";
$temperatura = "Test";
$link = mysqli_connect('localhost:3306', 'root', '','telegestione');
if (!$link) {
die('Could not connect: ' . mysqli_error());}
$sth = mysqli_query($link,"SELECT $temperatura FROM temperature WHERE dataora BETWEEN '$data_scelta 00:00:00.000'
AND '$data_scelta 23:59:59.997'");
$rows = array();
$rows['name'] = $temperatura;
while($r = mysqli_fetch_assoc($sth)) {
$rows['data'][] = $r[$temperatura];}
$sth = mysqli_query($link,"SELECT $misura FROM misure WHERE dataora BETWEEN '$data_scelta 00:00:00.000'
AND '$data_scelta 23:59:59.997'");
$rows1 = array();
$rows1['name'] = $misura;
while($rr = mysqli_fetch_assoc($sth)) {
$rows1['data'][] = $rr[$misura];}
$result = array();
array_push($result,$rows);
array_push($result,$rows1);
print json_encode($result, JSON_NUMERIC_CHECK);
?>
I tryed any kind of option, but anything gone right :(
Any hope to display 1 chart, 2 or more data series and 2 or more type of charts?
Thanks in advance
It looks like your highcharts creation call is within your $.each function. So it will try to create 2 highcharts, but they both will be created in the same div, so you'll only end up with one.
Also, the way you are caculating datalength, it'll be 2. When, it appears, you'd like it to be the length of the actual data (which is different for your different series).
I can't do the getJSON in a jsfiddle, so I'm assuming your PHP code is creating the json object you listed (and it looks like it would). You can lose the each loop alltogether and set your 2 series like this:
series: [{
name: 'Misure',
color: '#4572A7',
type: 'column',
yAxis: 1,
data: json[1].data,
tooltip: {
valueSuffix: ' Kw'
}
}, {
name: 'Temperature',
color: '#89A54E',
type: 'spline',
data: json[0].data,
tooltip: {
valueSuffix: '°C'
}
}]
http://jsfiddle.net/bhlaird/dUkuY/
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
};