Unable to display Axis title in google timeline chart - google-visualization

I have following code to display all the pool cars with engagement for a day. First thing I want is to display a fixed hAxis of 24 hours. And the axis title would be a plus. But as of now, it is displaying the time axis only till it has an engagement. And the title is not displaying at all. Thanks in advance for any help.
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('chart_div');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Vehicle' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'SEDAN 10', 'Default Function', new Date(0,0,0,17,00,0), new Date(0,0,0,19,00,0) ],
[ 'SEDAN 11', 'IDLE', new Date(0,0,0,0,0,0), new Date(0,0,0,0,0,0) ],
[ 'SEDAN 12', 'IDLE', new Date(0,0,0,0,0,0), new Date(0,0,0,0,0,0) ],
[ 'SEDAN 13', 'IDLE', new Date(0,0,0,0,0,0), new Date(0,0,0,0,0,0) ],
[ 'SEDAN 14', 'IDLE', new Date(0,0,0,0,0,0), new Date(0,0,0,0,0,0) ] ]);
var options = {
hAxis: { title: 'Hours'},
viewWindow: {min: 0, max: 24},
ticks: [0, 6, 12, 18, 24]
timeline: {colorByRowLabel: true},
height: 800
};
chart.draw(dataTable, options);
}

Related

Combining style, interval and certainty in Google Charts

Have a look at https://jsfiddle.net/DavidHyde/fkuonb5s/. This is based on an example from the Google Charts documentation along with the code that I'm running. I didn't write the code and am not a Charts expert by any means, so don't understand all the code yet.
Anyway, I'm having trouble combining the style, interval and certainty roles. It seems that I can apply any one, but when I have two or more, only the first is applied.
Specifying "certainty" gives this:
Applying "style" gives this:
and this is just "interval"
What I really want to do is apply the certainty role for the hatching, and the interval role for the horizontal bar.
Can anyone help? Thanks
StackOverflow says that any jsfiddle.net must be accompanied by code, so here it is...
google.charts.load('current', { packages: ['corechart', 'bar'] });
google.charts.setOnLoadCallback(drawRightY);
function drawRightY() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain label col.
data.addColumn('number', 'Sales'); // Implicit series 1 data col.
data.addColumn({ type: 'boolean', role: 'certainty' }); // certainty col.
data.addColumn({ type: 'string', role: 'style' }); // style col.
data.addColumn({ type: 'number', role: 'interval' }); // interval role col.
data.addColumn({ type: 'number', role: 'interval' }); // interval role col.
data.addColumn({ type: 'string', role: 'annotation' }); // annotation role col.
data.addColumn({ type: 'string', role: 'annotationText' }); // annotationText col.
data.addRows([
['April', 1000, true, 'stroke-color: #703593; stroke-width: 4', 900, 1100, 'A', 'Stolen data'],
['May', 1170, true, 'stroke-color: #703593; stroke-width: 4; color: #C5A5CF', 1000, 1200, 'B', 'Coffee spill'],
['June', 660, true, 'fill-color: red; fill-opacity:.3', 550, 800, 'C', 'Wumpus attack'],
['July', 1030, false, null, 100, 300, null, null]
]);
var barOptions = new google.visualization.ComboChart(document.getElementById('chart_div'));
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 2]);
var barSetting = {
seriesType: "bars",
areaOpacity: 0.1,
orientation: 'horizontal',
series: { 2: { 'lineWidth': 5, 'barWidth': 1, 'color': '#000000', type: 'line' } },
legend: 'none',
vAxis: {
maxValue: 100,
minValue: 0,
format: "#'%'"
},
hAxis: {
textStyle: {
fontSize: 9
}
},
colors: ["#fbbd86", "#000000", "#000000", "#000000"],
height: 200,
width: 420
};
barSetting.intervals = { 'lineWidth': 5, 'barWidth': 1, style: 'box', 'color': '#000000' };
barOptions.draw(view, barSetting);
}

Here is the updated jsfiddle from #dlaliberte showing the chart working - https://jsfiddle.net/dlaliberte/cvu3t7se/6/.
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawRightY);
function drawRightY() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain label col.
data.addColumn('number', 'Sales'); // Implicit series 1 data col.
data.addColumn({ type: 'boolean', role: 'certainty' }); // certainty col.
data.addColumn({ type: 'string', role: 'style' }); // style col.
data.addColumn({ type: 'number', role: 'interval' }); // interval role col.
data.addColumn({ type: 'number', role: 'interval' }); // interval role col.
data.addColumn({ type: 'string', role: 'annotation' }); // annotation role col.
data.addColumn({ type: 'string', role: 'annotationText' }); // annotationText col.
data.addRows([
[
'April'
, 1000
, true
, 'stroke-color: #703593; stroke-width: 4'
, 900
, 1100
, 'A'
, 'Stolen data'
],
[
'May'
, 1170
, true
, 'stroke-color: #703593; stroke-width: 4; color: #C5A5CF'
, 1000
, 1200
, 'B'
, 'Coffee spill'
],
[
'June'
, 660
, true
, 'fill-color: red; fill-opacity:.3'
, 550
, 800
, 'C'
, 'Wumpus attack'
],
[
'July'
, 1030
, false
, null
, 100
, 300
, null
, null
]
]);
var barOptions = new google.visualization.ColumnChart(document.getElementById('chart_div'));
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 2, 3, 4, 5, 6, 7]);
var barSetting = {
// seriesType: "bars",
//intervals: { 'lineWidth': 5, 'barWidth': 1, style: 'box', 'color': '#000000' },
areaOpacity: 0.1,
orientation: 'horizontal',
xseries: { 0: { 'lineWidth': 5, 'barWidth': 1, 'color': '#000000', type: 'line' } },
legend: 'none',
vAxis: {
maxValue: 100,
minValue: 0,
format: "#'%'"
},
hAxis: {
textStyle: {
fontSize: 9
}
},
colors: ["#fbbd86", "#000000", "#000000", "#000000"],
height: 200,
width: 420
};
barSetting.intervals = { 'lineWidth': 5, 'barWidth': 1, style: 'box', 'color': '#000000' };
barOptions.draw(view, barSetting);
}

Google line chart with multiple data

The below code to generate google line chart works fine with 2 values (Date and Mean) assigned. When I added more data (including Mode and Variance as shown below), it just shows the original datas (Date and Mean). The other data are not displayed. What am I doing wrong here? please. I am still learning google charts. Any help would be appreciated greatly. thanks.
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "mydb";
$con = new mysqli($servername, $username, $password, $dbname);
if ($con->connect_error) {
die("Connection failed: " . $con->connect_error);
}
else
{
);
}
$query = "SELECT Date, Mean, Mode, Variance FROM datatb";
$aresult = $con->query($query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Multiple Data</title>
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart(){
var data = new google.visualization.DataTable();
var data = google.visualization.arrayToDataTable([
['Date','Mean','Mode','Variance'],
<?php
while($row = mysqli_fetch_assoc($aresult)){
echo "['".$row["Date"]."', ".$row["Mean"].", ".$row["Mode"].", ".$row["Variance"]."],";
}
?>
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}]);
var options = {
title: 'Data',
hAxis : {textStyle : {fontSize: 8}},
'tooltip' : { trigger: 'none'},
enableInteractivity: false,
width: '100%',
height: '700',
chartArea:{
left:10,
top: 100,
width: '100%',
height: '450',
},
pointSize:4,
vAxis: { textPosition: 'none', gridlines: { count: 10 }, baselineColor: 'gray' },
annotations: { stemColor: 'white', textStyle: { fontSize: 11 } },
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curvechart'));
chart.draw(data, options);
chart.draw(view, options);
}
</script>
</head>
<body>
<div id="curvechart" style="width: 2500px; height: 600px"></div>
</body>
</html>
Whitehat's suggestion:
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "mydb";
$con = new mysqli($servername, $username, $password, $dbname);
if ($con->connect_error) {
die("Connection failed: " . $con->connect_error);
}
else
{
);
}
$query = "SELECT Date, Mean, Mode, Variance FROM datatb";
$aresult = $con->query($query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Multiple Data</title>
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart(){
var data = new google.visualization.DataTable();
data.addColumn('number', 'Mode');
data.addColumn('number', 'Variance');
var data = google.visualization.arrayToDataTable([
['Date','Mean','Mode','Variance'],
<?php
while($row = mysqli_fetch_assoc($aresult)){
echo "['".$row["Date"]."', ".$row["Mean"].", ".$row["Mode"].", ".$row["Variance"]."],";
}
?>
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}, 2, {
calc: 'stringify',
sourceColumn: 2,
type: 'string',
role: 'annotation'
}, 3, {
calc: 'stringify',
sourceColumn: 3,
type: 'string',
role: 'annotation'
}, ]);
var options = {
title: 'Data',
hAxis : {textStyle : {fontSize: 8}},
'tooltip' : { trigger: 'none'},
enableInteractivity: false,
width: '100%',
height: '700',
chartArea:{
left:10,
top: 100,
width: '100%',
height: '450',
},
pointSize:4,
vAxis: { textPosition: 'none', gridlines: { count: 10 }, baselineColor: 'gray' },
annotations: { stemColor: 'white', textStyle: { fontSize: 11 } },
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curvechart'));
chart.draw(data, options);
chart.draw(view, options);
}
</script>
</head>
<body>
<div id="curvechart" style="width: 2500px; height: 600px"></div>
</body>
</html>

after correcting the echo statement, just need to add column to the view...
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}, 2, 3]);
or if you want all to have annotations...
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}, 2, {
calc: 'stringify',
sourceColumn: 2,
type: 'string',
role: 'annotation'
}, 3, {
calc: 'stringify',
sourceColumn: 3,
type: 'string',
role: 'annotation'
}, ]);

Color in Google's Timeline Chart bars based in the a specific value

I would like to create groups of colors for the bars. The example below is raw. I would like to add a column with a category type, and based on that category I will color the bar.
Something like:
Column
dataTable.addColumn({ type: 'string', id: 'Category' });
Line
[ 'GROUP #1', 'CategoryA', 'C00001', new Date(2014, 0, 1), new Date(2014, 0, 31) ],
[ 'GROUP #1', 'CategoryA', 'C00002', new Date(2014, 1, 1), new Date(2014, 1, 28) ],
[ 'GROUP #1', 'CategoryA', 'C00003', new Date(2014, 3, 1), new Date(2014, 3, 15) ],
[ 'GROUP #1', 'CategoryB', 'C00003', new Date(2014, 0, 21), new Date(2014, 2, 19) ],
[ 'GROUP #1', 'CategoryA', 'C00004', new Date(2014, 0, 1), new Date(2014, 0, 15) ],
[ 'GROUP #2', 'CategoryC', 'C00005', new Date(2014, 2, 8), new Date(2014, 2, 15) ],
[ 'GROUP #3', 'CategoryC', 'C00006', new Date(2014, 5, 1), new Date(2014, 5, 15) ],
[ 'GROUP #4', 'CategoryA', 'C00007', new Date(2014, 1, 15), new Date(2014, 1, 25) ]]);
Based on Category the bar should have a specific color.
Fiddle
google.load("visualization", "1", {packages: ["timeline"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example4.2');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Group' });
dataTable.addColumn({ type: 'string', id: 'ID' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'GROUP #1', 'C00001', new Date(2014, 0, 1), new Date(2014, 0, 31) ],
[ 'GROUP #1', 'C00002', new Date(2014, 1, 1), new Date(2014, 1, 28) ],
[ 'GROUP #1', 'C00003', new Date(2014, 3, 1), new Date(2014, 3, 15) ],
[ 'GROUP #1', 'C00003', new Date(2014, 0, 21), new Date(2014, 2, 19) ],
[ 'GROUP #1', 'C00004', new Date(2014, 0, 1), new Date(2014, 0, 15) ],
[ 'GROUP #2', 'C00005', new Date(2014, 2, 8), new Date(2014, 2, 15) ],
[ 'GROUP #3', 'C00006', new Date(2014, 5, 1), new Date(2014, 5, 15) ],
[ 'GROUP #4', 'C00007', new Date(2014, 1, 15), new Date(2014, 1, 25) ]]);
var rowHeight = 41;
var chartHeight = (dataTable.getNumberOfRows() + 1) * rowHeight;
var options = {
timeline: {
groupByRowLabel: true,
rowLabelStyle: {
fontName: 'Roboto Condensed',
fontSize: 14,
color: '#333333'
},
barLabelStyle: {
fontName: 'Roboto Condensed',
fontSize: 14
}
},
avoidOverlappingGridLines: true,
height: chartHeight,
width: '100%'
};
chart.draw(dataTable, options);
}

There's nothing in the Timeline visualization that will do this for you, but you can set the colors option to whatever you need to get the bars the right color. You can parse the DataTable to build the colors array, and then use a DataView to hide your category column from the Timeline (since the Timeline wouldn't know what to do with it). Here's an example:
function drawChart() {
var container = document.getElementById('example4.2');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Group' });
dataTable.addColumn({ type: 'string', id: 'Category' });
dataTable.addColumn({ type: 'string', id: 'ID' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'GROUP #1', 'CategoryA', 'C00001', new Date(2014, 0, 1), new Date(2014, 0, 31) ],
[ 'GROUP #1', 'CategoryA', 'C00002', new Date(2014, 1, 1), new Date(2014, 1, 28) ],
[ 'GROUP #1', 'CategoryA', 'C00003', new Date(2014, 3, 1), new Date(2014, 3, 15) ],
[ 'GROUP #1', 'CategoryB', 'C00003', new Date(2014, 0, 21), new Date(2014, 2, 19) ],
[ 'GROUP #1', 'CategoryA', 'C00004', new Date(2014, 0, 1), new Date(2014, 0, 15) ],
[ 'GROUP #2', 'CategoryC', 'C00005', new Date(2014, 2, 8), new Date(2014, 2, 15) ],
[ 'GROUP #3', 'CategoryC', 'C00006', new Date(2014, 5, 1), new Date(2014, 5, 15) ],
[ 'GROUP #4', 'CategoryA', 'C00007', new Date(2014, 1, 15), new Date(2014, 1, 25) ]
]);
var colors = [];
var colorMap = {
// should contain a map of category -> color for every category
CategoryA: '#e63b6f',
CategoryB: '#19c362',
CategoryC: '#592df7'
}
for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
colors.push(colorMap[dataTable.getValue(i, 1)]);
}
var rowHeight = 41;
var chartHeight = (dataTable.getNumberOfRows() + 1) * rowHeight;
var options = {
timeline: {
groupByRowLabel: true,
rowLabelStyle: {
fontName: 'Roboto Condensed',
fontSize: 14,
color: '#333333'
},
barLabelStyle: {
fontName: 'Roboto Condensed',
fontSize: 14
}
},
avoidOverlappingGridLines: true,
height: chartHeight,
width: '100%',
colors: colors
};
// use a DataView to hide the category column from the Timeline
var view = new google.visualization.DataView(dataTable);
view.setColumns([0, 2, 3, 4]);
chart.draw(view, options);
}
google.load('visualization', '1', {packages:['timeline'], callback: drawChart});
See it working here: http://jsfiddle.net/asgallant/7A88H/

Use the undocumented 'style' role as seen in my working example:
http://jsfiddle.net/af8jq9aa/1/
function drawChart() {
var container = document.getElementById('example5.4');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Role' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'string', role: 'style' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'red/green/blue', 'NAME OF BAR (should be RED) (ff0000)', '#ff0000', new Date(1789, 3, 29), new Date(1797, 2, 3) ],
[ 'red/green/blue', 'NAME OF BAR (should be GREEN) (00ff00)','#00ff00', new Date(1796, 2, 3), new Date(1801, 2, 3) ],
[ 'red/green/blue', 'NAME OF BAR (should be BLUE) (0000ff)','#0000ff', new Date(1801, 2, 3), new Date(1809, 2, 3) ]]);
var options = {
};
chart.draw(dataTable, options);
}
google.load('visualization', '1', {packages:['timeline'], callback: drawChart});

I have tried something like this and it worked and was able to set different colors to different row labels in the grid.
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'string', id: 'ShiftDetails' });
dataTable.addColumn({ type: 'string', role: 'style' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addColumn({ type: 'string', role: 'RowDetails' });
dataTable.addRows([['APHANEE WORARUCHEE','','',new Date(0,0,0,0,0,0),new
Date(0,0,0,18,0,0),'asdf'],
['CHEW SEOW LEE','','',new Date(0,0,0,0,0,0),new Date(0,0,0,9,0,0),'qwerty'],['TOTAL
MANPOWER PER HOUR','5','color: red',new Date(0,0,0,0,0,0),new
Date(0,0,0,1,0,0),'TOTAL'],
['TOTAL MANPOWER PER HOUR','4','color: red',new Date(0,0,0,1,0,0),new
Date(0,0,0,2,0,0),'TOTAL']]);
var options = {
timeline: { singleColor: '#8d8', barLabelStyle: { fontName: 'Arial Black', fontSize:
12 } },backgroundColor: '#ffd'};

You have to put the role style on the middle of the array. it must be on the middle for it to work. I have tried pushing it on the end of my array and it did not work.
function drawChart() {
var container = document.getElementById('example4.2');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Group' });
dataTable.addColumn({ type: 'string', id: 'Category' });
dataTable.addColumn({ type: 'string', role: 'style' }); <===========
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
}

You have to use option:
timeline: {
colorByRowLabel: true
}
From google docs: timeline.colorByRowLabel default value boolean false
If set to true, colors every bar on the row the same. The default is to use one color per bar label.

I did like this, its working fine for me.
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'string', id: 'JobType' });
dataTable.addColumn({ type: 'string', role: 'style' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
for (var j = 0; j < model.JobType.length; j++)
{
var jbt = model.JobType;
var ColorValue = null;
if (jbt == "Job A"){
ColorValue = "#AF0BEA";
}
else if (jbt == "Job B")
{
ColorValue = "#19c362";
}
else if (jbt == "Job C")
{
ColorValue = "#091F8B";
}
else if (jbt == "Job D")
{
ColorValue = "#592df7";
}
else if (jbt == "Job E")
{
ColorValue = "#d3401b";
}
dataTable.addRows([[name, jbt, ColorValue, startdate, endDate]]);
}

//set fixed colors
var colors = [];
var colorMap = {
'Maschine in Produktion': '#7baaf7',
'Behälterwechsel': '#e67c73',
'Auftragsgemäßes Rüsten von W.Z. und Material': '#f7cb4d',
'Unterbrechung': '#57ba8a',
'neues Werkzeug einfahren': '#c47ed0',
'Produktqualität(vermessen der Teile)': '#4dc5d4',
'frei': '#ff9b7b',
'Werkzeugschaden': '#bbba66',
'Coilmaterial (nicht geeignet)': '#8d97d3',
'neues Werkzeug einfahren': '#f5cfff'
}
for (var i = 0; i < data.getNumberOfRows(); i++) {
colors.push(colorMap[data.getValue(i, 0)]);
}
var unique = colors.filter(function(itm, i, a) {
return i == colors.indexOf(itm);
});
var options = {
height: 800,
hAxis: {format: isDay == 1 ? 'HH:MM:SS' : 'dd.MM.yyyy HH:MM:SS'},
tooltip: {isHtml: true},
legend: 'none',
avoidOverlappingGridLines: false,
colors: unique
};
chart.draw(data, options);
This works perfectly for me. The main Problem with the old code is, that the colors array....is just an array and not a unique Hashmap. You can just use the custom filter function in order to get the unique colors.

Show Data Value in Column Chart Google Chart

I have created a chart using google-visualization but unable to get the data value for the second column
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2]);
var options = {
title: 'Company Performance',
hAxis: { title: 'Users', titleTextStyle: { color: 'red', fontSize: 16} },
legend: { position: 'bottom', textStyle: { color: 'blue', fontSize: 16} }
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(view, options);
The data value comes for the sales but not to expense column

You need to add another annotation column to the view:
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
}, 2, {
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
}]);

dataView.setColumns([{ calc: function (data, row) { return data.getFormattedValue(row, 0); }, type: 'string' }, 1,2]);

store columnwidth in cookies

I am using extjs grid and want to store the order and width of the columns for the users.
I have added:
var dateExpires = new Date().getTime()+(1000*60*60*24*300);
Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
expires: new Date(dateExpires) //300 days from now
}));
Now is the order of the columns stored but still missing the size for the columns. I don't use forcefit because i saw that could be an issue.
This is how a column look like
{
xtype: 'gridpanel',
id: 'GridPanel',
titleCollapse: false,
store: 'gridStore',
stateId: 'gridPanelState',
region: 'center',
viewConfig: {},
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'vehicle',
text: 'Vehicle'
},
{
xtype: 'gridcolumn',
dataIndex: 'speed',
text: 'Speed'
},
{
xtype: 'gridcolumn',
dataIndex: 'routeId',
text: 'RouteId'
},
{
xtype: 'gridcolumn',
dataIndex: 'direction',
text: 'Direction'
},
{
xtype: 'gridcolumn',
dataIndex: 'description',
text: 'Description'
}
],