I am using below code to create a google chart where I show the alerts on Y axis and the Months on X axis ,Here I am trying to show data with bar charts and also a trend line for it, issue I am facing is that data is coming sorted i.e say current month is sep i.e 09 then data is coming on y - axis as from 01 to 12 months, but what I want is data to be placed in the order where 09 is at last i.e current month is last 10 11 12 01 02 03 04 05 06 07 08 09
in the code ticks variable contains value "10 11 12 01 02 03 04 05 06 07 08 09 "
var options = {
title: '<?php echo "Alerts Trend Analysis $TEAM";?>',
hAxis: {title: 'MONTH' ,gridlines: { count: 12 },ticks: [ <?php echo $TICKS;?>] },
vAxis: {title: 'Alerts'},
curveType: 'function',
titleFontSize:15,
fontName : 'Arial',
titleFontName: 'Arial',
trendlines: {
0: {type: 'polynomial', lineWidth: 2, opacity: .5},
1: {type: 'polynomial', lineWidth: 2, opacity: .5},
2: {type: 'polynomial', lineWidth: 2, opacity: .5},
3: {type: 'polynomial', lineWidth: 2, opacity: .5},
4: {type: 'polynomial', lineWidth: 2, opacity: .5}
},
series: {
0: { color: 'green' },
1: { color: 'orange' },
2: { color: 'blue' },
3: { color: 'red' },
4: { color: 'purple' },
5: { color: 'black' }
},
legend: { position: 'right',textStyle: {fontSize: 12}}
};
var chart = new google.visualization.ColumnChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
The data I am using from a csv file to upload in the variables
VHPLUSLIVE,0:0:0:0:0:0:0,0:0:0:0:0:0:0,4:0:0:1:0:0:0,0:0:0:0:0:0:0,0:0:0:0:0:0:0,0:0:0:0:0:0:0,4:0:0:1:0:0:0
VHPLUSQA,0:0:0:0:0:0:0,0:0:0:1:0:0:0,22:3:0:5:0:0:0,0:0:0:0:0:0:0,0:0:0:0:0:0:0,0:0:0:0:0:0:0,22:3:0:6:0:0:0
VHLIVE,0:0:0:0:0:0:0,0:0:0:0:1:0:0,18:5:0:4:0:0:0,0:0:0:0:0:0:0,0:0:0:0:0:0:0,0:0:0:0:0:0:0,18:5:0:4:1:0:0
LIVE,0:0:0:0:0:0:0,152:17:1:42:2:0:0,197:28:2:66:2:0:0,0:0:0:0:0:0:0,0:0:0:0:0:0:0,0:0:0:0:0:0:0,349:45:3:108:4:0:0
QA,0:0:0:0:0:0:0,28:2:1:7:1:1:0,152:17:0:36:0:3:0,0:0:0:0:0:0:0,0:0:0:0:0:0:0,0:0:0:0:0:0:0,180:19:1:43:1:4:0
TEST,0:0:0:0:0:0:0,7:2:0:4:1:0:0,14:3:0:0:0:0:0,0:0:0:0:0:0:0,0:0:0:0:0:0:0,0:0:0:0:0:0:0,21:5:0:4:1:0:0
OTHERS,0:0:0:0:0:0:,83:13:0:14:1:0:,49:8:0:13:1:0:,0:0:0:3:0:0:0,0:0:0:0:0:0:0,0:0:0:0:0:0:,132:21:0:30:2:0:0
ALL,0:0:0:0:0:0:0,270:34:2:68:6:1:0,456:64:2:125:3:3:0,0:0:0:3:0:0:0,0:0:0:0:0:0:0,0:0:0:0:0:0:0,726:98:4:201:9:4:0
Also , code that I am using to put data in the variables is as below
for ($MONTH=$CURMONTH + 1;$MONTH<=12;$MONTH++)
{
if ( $MONTH < 10 )
{
$MONTH="0" . $MONTH;
}
else
{
$MONTH="". $MONTH;
}
if ( "$STAT" == "Ack_time" )
{
$FILE="/OVO/ALERTS/${TEAM}_${MONTH}.ack.count";
}
elseif ( "$STAT" == "Own_time" )
{
$FILE="/OVO/ALERTS/${TEAM}_${MONTH}.own.count";
}
$filer=fopen("${FILE}","r");
$pattern="/\b$Env\b/";
while (!feof($filer))
{
$line = fgets($filer);
if (preg_match("$pattern", $line, $match))
{
$line=explode(",",$line);
break;
}
}
fclose($filer);
if ( "$Criticity" == "Critical" )
{
$line=$line[1];
$line=explode(":",$line);
}
elseif ( "$Criticity" == "Major" )
{
$line=$line[2];
$line=explode(":",$line);
}
elseif ( "$Criticity" == "Minor" )
{
$line=$line[3];
$line=explode(":",$line);
}
elseif ( "$Criticity" == "Warning" )
{
$line=$line[4];
$line=explode(":",$line);
}
elseif ( "$Criticity" == "Normal" )
{
$line=$line[5];
$line=explode(":",$line);
}
elseif ( "$Criticity" == "OTHERS" )
{
$line=$line[6];
$line=explode(":",$line);
}
elseif ( "$Criticity" == "ALL" )
{
$line=$line[7];
$line=explode(":",$line);
}
$count_8=$line[0];
$count_24=$line[1];
$count_48=$line[2];
$count_120=$line[3];
$count_240=$line[4];
$count_480=$line[5];
$count_rest=$line[6];
$count_all=$count_8+$count_24+$count_48+$count_120+$count_240+$count_480+$count_rest;
if ( "$MONTH" == "01" )
{
$MON="January";
}
if ( "$MONTH" == "02" )
{
$MON="February";
}
if ( "$MONTH" == "03" )
{
$MON="March";
}
if ( "$MONTH" == "04" )
{
$MON="April";
}
if ( "$MONTH" == "05" )
{
$MON="May";
}
if ( "$MONTH" == "06" )
{
$MON="June";
}
if ( "$MONTH" == "07" )
{
$MON="July";
}
if ( "$MONTH" == "08" )
{
$MON="August";
}
if ( "$MONTH" == "09" )
{
$MON="September";
}
if ( "$MONTH" == "10" )
{
$MON="October";
}
if ( "$MONTH" == "11" )
{
$MON="November";
}
if ( "$MONTH" == "12" )
{
$MON="December";
}
if ( "$MONTH" == "13" )
{
$MON="Quarter_1";
}
if ( "$MONTH" == "14" )
{
$MON="Quarter_2";
}
if ( "$MONTH" == "15" )
{
$MON="Quarter_3";
}
if ( "$MONTH" == "16" )
{
$MON="Quarter_4";
}
//pushing some variables to the array so we can output something in this example.
//pushing some variables to the array so we can output something in this example.
if ( $STAT == "Ack_time" )
{
array_push($values, array("MONTH" => "${MONTH}","Ack <8h" => $count_8,"Ack 8h-24h" => $count_24,"Ack 24h-48h" => $count_48,"Ack 48h-120h" => $count_120,"Ack 120h-240h" => $count_240,"Ack 240h-480h" => $count_480,"Ack > 480h" => $count_rest ));
}
if ( $STAT == "Own_time" )
{
array_push($values, array("MONTH" => "${MONTH}","Own <8h" => $count_8,"Own 8h-24h" => $count_24,"Own 24h-48h" => $count_48,"Own 48h-120h" => $count_120,"Own 120h-240h" => $count_240,"Own 240h-480h" => $count_480,"Own > 480h" => $count_rest ));
}
}
for ($MONTH=01;$MONTH<=$CURMONTH;$MONTH++)
{
if ( $MONTH < 10 )
{
$MONTH="0" . $MONTH;
}
else
{
$MONTH="". $MONTH;
}
if ( "$STAT" == "Ack_time" )
{
$FILE="/OVO/ALERTS/${TEAM}_${MONTH}.ack.count";
}
elseif ( "$STAT" == "Own_time" )
{
$FILE="/OVO/ALERTS/${TEAM}_${MONTH}.own.count";
}
$filer=fopen("${FILE}","r");
$pattern="/\b$Env\b/";
while (!feof($filer))
{
$line = fgets($filer);
if (preg_match("$pattern", $line, $match))
{
$line=explode(",",$line);
break;
}
}
fclose($filer);
if ( "$Criticity" == "Critical" )
{
$line=$line[1];
$line=explode(":",$line);
}
elseif ( "$Criticity" == "Major" )
{
$line=$line[2];
$line=explode(":",$line);
}
elseif ( "$Criticity" == "Minor" )
{
$line=$line[3];
$line=explode(":",$line);
}
elseif ( "$Criticity" == "Warning" )
{
$line=$line[4];
$line=explode(":",$line);
}
elseif ( "$Criticity" == "Normal" )
{
$line=$line[5];
$line=explode(":",$line);
}
elseif ( "$Criticity" == "OTHERS" )
{
$line=$line[6];
$line=explode(":",$line);
}
elseif ( "$Criticity" == "ALL" )
{
$line=$line[7];
$line=explode(":",$line);
}
$count_8=$line[0];
$count_24=$line[1];
$count_48=$line[2];
$count_120=$line[3];
$count_240=$line[4];
$count_480=$line[5];
$count_rest=$line[6];
$count_all=$count_8+$count_24+$count_48+$count_120+$count_240+$count_480+$count_rest;
//pushing some variables to the array so we can output something in this example.
if ( "$MONTH" == "01" )
{
$MON="January";
}
if ( "$MONTH" == "02" )
{
$MON="February";
}
if ( "$MONTH" == "03" )
{
$MON="March";
}
if ( "$MONTH" == "04" )
{
$MON="April";
}
if ( "$MONTH" == "05" )
{
$MON="May";
}
if ( "$MONTH" == "06" )
{
$MON="June";
}
if ( "$MONTH" == "07" )
{
$MON="July";
}
if ( "$MONTH" == "08" )
{
$MON="August";
}
if ( "$MONTH" == "09" )
{
$MON="September";
}
if ( "$MONTH" == "10" )
{
$MON="October";
}
if ( "$MONTH" == "11" )
{
$MON="November";
}
if ( "$MONTH" == "12" )
{
$MON="December";
}
if ( "$MONTH" == "13" )
{
$MON="Quarter_1";
}
if ( "$MONTH" == "14" )
{
$MON="Quarter_2";
}
if ( "$MONTH" == "15" )
{
$MON="Quarter_3";
}
if ( "$MONTH" == "16" )
{
$MON="Quarter_4";
}
//pushing some variables to the array so we can output something in this example.
if ( $STAT == "Ack_time" )
{
array_push($values, array("MONTH" => "${MONTH}","Ack <8h" => $count_8,"Ack 8h-24h" => $count_24,"Ack 24h-48h" => $count_48,"Ack 48h-120h" => $count_120,"Ack 120h-240h" => $count_240,"Ack 240h-480h" => $count_480,"Ack > 480h" => $count_rest ));
}
if ( $STAT == "Own_time" )
{
array_push($values, array("MONTH" => "${MONTH}","Own <8h" => $count_8,"Own 8h-24h" => $count_24,"Own 24h-48h" => $count_48,"Own 48h-120h" => $count_120,"Own 120h-240h" => $count_240,"Own 240h-480h" => $count_480,"Own > 480h" => $count_rest ));
}
}
}
//counting the length of the array
$countArrayLength = count($values);
as you've discovered, the chart will sort a continuous axis in the logical order
this cannot be changed
however, you can use object notation, both in the data table values and the ticks,
to use one value and display another
using object notation, you can provide the value (v:) and the formatted value (f:)
for the month numbers, if the first three rows = 10,11,12
the next row needs to be 13
in the data table use...
{v: 13, f: '1'}
this will allow the give you the order you need, and the tooltip will show '1'
to correct the x-axis, the tick for this row would be the same object...
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['month', 'alerts'],
[10, 97],
[11, 100],
[12, 80],
[{v: 13, f: '1'}, 105],
[{v: 14, f: '2'}, 60],
[{v: 15, f: '3'}, 88],
[{v: 16, f: '4'}, 77],
[{v: 17, f: '5'}, 90],
[{v: 18, f: '6'}, 67],
[{v: 19, f: '7'}, 52],
[{v: 20, f: '8'}, 67],
[{v: 21, f: '9'}, 80]
]);
var ticks = [
10, 11, 12,
{v: 13, f: '1'},
{v: 14, f: '2'},
{v: 15, f: '3'},
{v: 16, f: '4'},
{v: 17, f: '5'},
{v: 18, f: '6'},
{v: 19, f: '7'},
{v: 20, f: '8'},
{v: 21, f: '9'}
];
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {
hAxis: {ticks: ticks},
trendlines: {0: {}}
});
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>if this is difficult to achieve in php,
use the following snippet to manipulate the data and ticks in JavaScript
note: in this scenario, the data table needs to be in the desired order
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['month', 'alerts'],
[10, 97],
[11, 100],
[12, 80],
[1, 105],
[2, 60],
[3, 88],
[4, 77],
[5, 90],
[6, 67],
[7, 52],
[8, 67],
[9, 80]
]);
var ticks = [];
var firstMonth;
for (var i = 0; i < data.getNumberOfRows(); i++) {
var rowMonth = data.getValue(i, 0);
if (i === 0) {
firstMonth = rowMonth;
} else {
if (rowMonth < firstMonth) {
data.setCell(i, 0, rowMonth + 12, rowMonth.toString());
}
}
ticks.push({
v: data.getValue(i, 0),
f: rowMonth.toString()
});
}
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {
hAxis: {ticks: ticks},
trendlines: {0: {}}
});
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>