I want to make a chart that showing data with 4 month interval (3 period/year).
and i want the x-axis label showing the year and the period like image below:
http://i.stack.imgur.com/eerSy.png
what i've done so far :
var data = [[1262278800000,87.5],[1293814800000,750],[1325350800000,100],[1356973200000,25],[1371229200000,87.5],[1388422800000,0],[1388509200000,375],[1402765200000,100],[1419958800000,1000]];
var tahunsekarang=new Date(2015, 12, 31).getTime();
$.plot("#chartTabamaProduktifitas", [data], {
xaxis: { mode: "time",tickSize: [4, "month"] , timeformat: "%Y",panRange: [1262217600000, tahunsekarang]},
yaxis: {panRange: [0, 1500] },
pan: { interactive: true},
series: {lines: {show: true},points: {show: true}},
});
but since I made it pan: { interactive: true} so when i drag the chart, the tickline is always change value, it made the chartline not fit in the tick line
1) If you want fixed ticks when you drag the chart you have to give a fixed ticks array instead of the tickSize option.
2) To give the Roman number for the trimester you can use a tickFormatter function instead of the timeformat option.
New options object:
xaxis: {
mode: "time",
ticks: ticks,
tickFormatter: function (val, axis) {
var d = new Date(val);
var trimester = '';
for (var i = 1; i <= (1 + d.getMonth() / 4); i++){
trimester += "I";
};
return trimester + "<br>" + d.getFullYear();
},
panRange: [1262217600000, tahunsekarang]
},
See the code snippet below (or this fiddle) for a working example:
var data = [
[1262278800000, 87.5],
[1293814800000, 750],
[1325350800000, 100],
[1356973200000, 25],
[1371229200000, 87.5],
[1388422800000, 0],
[1388509200000, 375],
[1402765200000, 100],
[1419958800000, 1000]
];
var ticks = [
new Date(2010, 0, 1).valueOf(),
new Date(2010, 4, 1).valueOf(),
new Date(2010, 8, 1).valueOf(),
new Date(2011, 0, 1).valueOf(),
new Date(2011, 4, 1).valueOf(),
new Date(2011, 8, 1).valueOf(),
new Date(2012, 0, 1).valueOf(),
new Date(2012, 4, 1).valueOf(),
new Date(2012, 8, 1).valueOf(),
new Date(2013, 0, 1).valueOf(),
new Date(2013, 4, 1).valueOf(),
new Date(2013, 8, 1).valueOf(),
new Date(2014, 0, 1).valueOf(),
new Date(2014, 4, 1).valueOf(),
new Date(2014, 8, 1).valueOf(),
new Date(2015, 0, 1).valueOf(),
new Date(2015, 4, 1).valueOf(),
new Date(2015, 8, 1).valueOf(),
];
var tahunsekarang = new Date(2015, 12, 31).getTime();
$.plot("#chartTabamaProduktifitas", [data], {
xaxis: {
mode: "time",
//tickSize: [4, "month"],
ticks: ticks,
//timeformat: "%Y",
tickFormatter: function (val, axis) {
var d = new Date(val);
var trimester = '';
for (var i = 1; i <= (1 + d.getMonth() / 4); i++){
trimester += "I";
};
return trimester + "<br>" + d.getFullYear();
},
panRange: [1262217600000, tahunsekarang]
},
yaxis: {
panRange: [0, 1500]
},
pan: {
interactive: true
},
series: {
lines: {
show: true
},
points: {
show: true
}
},
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.time.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.navigate.min.js"></script>
<div style="height: 400px; width: 600px;" id="chartTabamaProduktifitas"></div>
Related
I have this Google chart and I cannot get the lower part (where date and time is) to show hours from 00 to 23, it always shows it with AM/PM.
I mean the area that is always visible, the other value that apepars on tooltip was formated OK, but not that lower part.
What am I doing wrong ?
I tried by that dateformatter code (it only seems to affect the tooltip date value).
And by this (not doing anything):
hAxis: {
format: 'dd/MM/yyyy HH:mm',
gridlines: {count: 15}
},
The jsfiddle
<script>
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('datetime');
data.addColumn('number', "Temp");
data.addColumn('number', "Humidity");
data.addRows([
[new Date(2020, 11, 04, 15, 00), 25.50, 62.76],
[new Date(2020, 11, 04, 15, 10), 25.58, 62.63],
[new Date(2020, 11, 04, 15, 20), 25.60, 62.47],
[new Date(2020, 11, 04, 15, 30), 25.60, 62.38],
[new Date(2020, 11, 04, 15, 40), 25.62, 62.16],
[new Date(2020, 11, 04, 15, 50), 25.60, 62.00],
[new Date(2020, 11, 04, 16, 00), 25.60, 61.79],
[new Date(2020, 11, 04, 16, 10), 25.77, 61.72],
[new Date(2020, 11, 04, 16, 20), 25.97, 60.93],
[new Date(2020, 11, 04, 16, 30), 26.07, 60.38],
]);
// give date a certain format
var dateFormatter = new google.visualization.DateFormat({pattern: 'dd/MM/yyyy HH:mm'});
dateFormatter.format(data, 0);
var materialOptions = {
// trying to format date/time on lower line, not working :/
hAxis: {
format: 'dd/MM/yyyy HH:mm',
gridlines: {count: 15}
},
legend: {position: 'none'},
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {axis: 'Temp'},
1: {axis: 'Humidity'},
},
axes: {
y: {
Temp: {label: 'Temps (Celsius)', range: {max: 15, min: 40 }},
Humidity: {label: 'Humidity (%)', /*range: {max: 30, min: 90 }*/},
},
},
colors: ['#B00000', '#1bdec4']
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
materialChart.draw(data, materialOptions);
}
drawMaterialChart();
}
</script>
when drawing a material chart,
need to convert the options using static method --> google.charts.Line.convertOptions
materialChart.draw(data, google.charts.Line.convertOptions(materialOptions));
this will ensure the supported options are included properly,
see following working snippet...
google.charts.load('current', {
'packages': ['line', 'corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('datetime');
data.addColumn('number', "Temp");
data.addColumn('number', "Humidity");
data.addRows([
[new Date(2020, 11, 04, 15, 00), 25.50, 62.76],
[new Date(2020, 11, 04, 15, 10), 25.58, 62.63],
[new Date(2020, 11, 04, 15, 20), 25.60, 62.47],
]);
// give date a certain format
var dateFormatter = new google.visualization.DateFormat({
pattern: 'dd/MM/yyyy HH:mm'
});
dateFormatter.format(data, 0);
var materialOptions = {
// trying to format date/time on lower line, not working :/
hAxis: {
format: 'dd/MM/yyyy HH:mm',
gridlines: {
count: 15
}
},
legend: {
position: 'none'
},
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {
axis: 'Temp'
},
1: {
axis: 'Humidity'
},
},
axes: {
y: {
Temp: {
label: 'Temps (Celsius)',
range: {
max: 15,
min: 40
}
},
Humidity: {
label: 'Humidity (%)',
range: {max: 30, min: 90 }
},
},
},
colors: ['#B00000', '#1bdec4']
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
materialChart.draw(data, google.charts.Line.convertOptions(materialOptions));
}
drawMaterialChart();
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
</body>
</html>
note: there are several options that are not supported by material charts,
see Tracking Issue for Material Chart Feature Parity
Here is the chart https://jsfiddle.net/damiantt/t2skaegg/2/
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<input id="Draw" type="button" value="Draw" onclick="drawChart();" />
<div id="chart_div_container" style="overflow-x: auto;min-height:0%;">
<div id="chart_div" style="overflow: visible;min-height:0%;"></div>
</div>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['timeline', 'table']
});
var initWidth = $('#chart_div').innerWidth();
var colorMap;
function drawChart() {
$('#chart_div').off();
$('#chart_div').empty();
var data = google.visualization.arrayToDataTable([
['Maszyna', 'Kolor', {
type: 'string',
role: 'tooltip',
'p': {
'html': true
}
}, 'Start Time', 'End Time'],
['one', 'pi1', 'brr',
new Date(2014, 10, 15, 12, 30, 0),
new Date(2014, 10, 15, 12, 30, 20)
],
['one', 'pu3', 'brr',
new Date(2014, 10, 15, 12, 30, 20),
new Date(2014, 10, 15, 12, 30, 45)
],
['one', 'pu3', 'brr',
new Date(2014, 10, 15, 12, 30, 45),
new Date(2014, 10, 15, 12, 30, 55)
],
['two', 'g2', 'brr1',
new Date(2014, 10, 15, 12, 30, 35),
new Date(2014, 10, 15, 12, 30, 55)
],
['two', 'pi1', 'brr2',
new Date(2014, 10, 15, 12, 30, 55),
new Date(2014, 10, 15, 14, 31, 55)
],
['three', 'pu3', 'brr',
new Date(2014, 10, 15, 12, 29, 30),
new Date(2014, 10, 15, 14, 30, 0)
],
['three', 'pi1', 'brr',
new Date(2014, 10, 15, 14, 30, 0),
new Date(2014, 10, 15, 14, 35, 0)
],
['three', 'g2', 'Zbrr',
new Date(2014, 10, 15, 14, 35, 0),
new Date(2014, 10, 15, 15, 25, 10)
],
['three', 'pu3', 'KR1',
new Date(2014, 10, 15, 15, 25, 10),
new Date(2014, 10, 15, 15, 26, 00)
],
['three', 'g2', 'KR2',
new Date(2014, 10, 15, 15, 26, 00),
new Date(2014, 10, 15, 15, 26, 45)
],
['three', 'pi1', 'KR3',
new Date(2014, 10, 15, 15, 26, 45),
new Date(2014, 10, 15, 15, 27, 15)
],
['three', 'pu3', 'brr',
new Date(2014, 10, 15, 15, 27, 15),
new Date(2014, 10, 15, 20, 30, 1)
],
['three', 'pi1', 'brr',
new Date(2014, 10, 15, 20, 30, 1),
new Date(2014, 10, 16, 10, 30, 10)
],
['three', 'pu3', 'brr',
new Date(2014, 10, 16, 10, 30, 10),
new Date(2014, 10, 16, 18, 30, 10)
],
]);
var colors = [];
colorMap = {
// should contain a map of category -> color for every category
pi1: '#e63b6f',
g2: '#19c362',
pu3: '#592df7',
c4: '#000000',
'000000': '#000000'
}
for (var i = 0; i < data.getNumberOfRows(); i++) {
colors.push(colorMap[data.getValue(i, 1)]);
}
var options = {
enableInteractivity: false,
height: 210,
width: initWidth,
colors: colors,
avoidOverlappingGridLines: false,
timeline: {
showBarLabels: false
},
hAxis: {
format: 'dd/MM\nHH:mm'
},
tooltip: {
isHtml: true
}
};
var chart = new google.visualization.Timeline(document.getElementById('chart_div'));
chart.draw(data, options);
afterDraw(data, colors);
$(document).ready(function() {
var zoom = 1000;
var leftSpace = $('rect:first-child+path').position().left - $('#chart_div svg').position().left;
var svgOffset = $('#chart_div svg').offset().left;
var $chartDivCont = $('#chart_div_container');
var x, left, down;
$('#chart_div').on({
'mousemove': function(evt) {
if (down) {
var newX = evt.pageX;
$chartDivCont.scrollLeft(left - newX + x);
}
},
'mousedown': function(evt) {
$('html').css('cursor', 'col-resize');
evt.preventDefault();
down = true;
x = evt.pageX;
left = $chartDivCont.scrollLeft();
},
'mouseup': function() {
down = false;
$('html').css('cursor', 'auto');
},
'mousewheel DOMMouseScroll': function(evt) {
evt.preventDefault();
if (evt.originalEvent.wheelDelta > 0 || evt.originalEvent.detail < 0) {
if (options.width < 31000) {
options.width += zoom;
var prevScrollLeft = $chartDivCont.scrollLeft();
var prop = ($chartDivCont.scrollLeft() + evt.originalEvent.clientX - leftSpace - svgOffset) / ($('#chart_div svg').width() - leftSpace);
chart.draw(data, options);
afterDraw(data, colors);
$chartDivCont.scrollLeft(prevScrollLeft + (prop * 1000));
}
} else {
if (options.width >= initWidth + zoom) {
options.width -= zoom;
var prevScrollLeft = $chartDivCont.scrollLeft();
var prop = ($chartDivCont.scrollLeft() + evt.originalEvent.clientX - leftSpace - svgOffset) / ($('#chart_div svg').width() - leftSpace);
chart.draw(data, options);
afterDraw(data, colors);
$chartDivCont.scrollLeft(prevScrollLeft - (prop * 1000));
}
}
}
});
});
}
function afterDraw(data, colors) {
$rects = $('#chart_div svg > g:nth-child(5) > rect');
for (var i = 0; i < $rects.length; i++) {
$('#chart_div svg > g:nth-child(5) > rect:nth-child(' + (i + 1) + ')').css({
"fill": colors[i]
});
}
}
When i run it on Chrome, memory usage is ~75k. After Draw and max zoom in (zoom it by mouse scroll) memory meter shows 140k, then max zoom out - 180k memory usage, zoom in - 225k, zoom out - 265k.
Is any way to free memory after every draw()? I tried to delete HTML elements, to null variables, but nothing helps me
I'm trying to remove labels(c1,c2,c3,c4) from my bars.
I tried styling with:
timeline: {barLabelStyle: ...}
but nothing works for me (I thought about set font color to color of bar, but docs says ,,You can't set the color of barLabel text."
jsfiddle: https://jsfiddle.net/550wb2t0/1/
You can use --> timeline: { showBarLabels: false }
google.charts.load('44', {
callback: drawChart,
packages: ['timeline']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Activity', 'Category', 'Start Time', 'End Time'],
['Sleep', 'c1',
new Date(2014, 10, 15, 12, 30, 0, 120),
new Date(2014, 10, 15, 14, 30, 20, 550)
],
['Eat Breakfast', 'c2',
new Date(2014, 10, 15, 12, 30, 55),
new Date(2014, 10, 15, 14, 31, 55)
],
['Commute Home', 'c3',
new Date(2014, 10, 15, 12, 29, 30),
new Date(2014, 10, 15, 14, 30, 0)
],
['Commute Home', 'c4',
new Date(2014, 10, 15, 14, 30),
new Date(2014, 10, 15, 18)
]
]);
var colors = [];
var colorMap = {
// should contain a map of category -> color for every category
c1: '#e63b6f',
c2: '#19c362',
c3: '#592df7',
c4: '#000000'
}
for (var i = 0; i < data.getNumberOfRows(); i++) {
colors.push(colorMap[data.getValue(i, 1)]);
}
console.log(JSON.stringify(colors));
var options = {
height: 450,
colors: colors,
timeline: { showBarLabels: false }
};
var chart = new google.visualization.Timeline(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
My fiddle : https://jsfiddle.net/vbdy7fLe/1/
I'm trying to use google column chart and display multiple fields of data and by date. But I'm not sure why it doesn't display 02 Jan 2015 and 04 Jan 2015.
The data is there and here is my js code :
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['date', 'person A', 'person B'],
[new Date(2015, 0, 1), 1, 4, ],
[new Date(2015, 0, 2), 1, 4, ],
[new Date(2015, 0, 3), 6, 11, ],
[new Date(2015, 0, 4), 10, 5, ],
[new Date(2015, 0, 5), 10, 5, ]
]);
var options = {
chart: {
title: 'Meeting by weeks'
},
bars: 'vertical',
height: 400,
colors: ['#3498db', '#9b59b6', '#16a085'],
hAxis: {
format: 'dd MMM yyyy'
}
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
It's not showing because googles function to draw the chart has decided that there is not enough space to write text on every single column.
Either try the setting for hAxis.slantedTextor try making your chart wider.
I need to add multiple trendlines to my google line chart but I just can't figure out how to do it with more than one line.
Here is my code example with a single line based on a date and value to build the chart:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
function drawMultipleTrendlineChart() {
var chart;
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sales value');
data.addRow([new Date(2013, 3, 11), 10]);
data.addRow([new Date(2013, 4, 02), 650]);
data.addRow([new Date(2013, 5, 03), 55]);
data.addRow([new Date(2013, 6, 04), 95]);
data.addRow([new Date(2013, 7, 05), 400]);
data.addRow([new Date(2013, 8, 06), 600]);
data.addRow([new Date(2014, 0, 07), 800]);
data.addRow([new Date(2014, 1, 08), 900]);
data.addRow([new Date(2014, 2, 09), 3127]);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 2,
prefix: 'R$:'
});
formatter.format(data, 1);
var dateFormatter = new google.visualization.NumberFormat({
pattern: 'MMM yyyy'
});
dateFormatter.format(data, 0);
var chartHeight = 400;
var chartWidth = 600;
var chartOptions = {
tooltip:{isHtml: true},
trendlines: {
0: {color: 'red'}
},
title: 'Trendlines with multiple lines',
isStacked: true,
width: chartWidth,
height: chartHeight,
colors: ['#0000D8'],
hAxis: {
title: 'example title',
slantedText: false,
slantedTextAngle: 45,
textStyle: {
fontSize: 10
},
format: 'dd-MM-yyyy'
},
chartArea: {
left: 100,
top: 20,
width: (chartWidth - 10),
height: (chartHeight - 90)
}
};
chart = new google.visualization.LineChart(document.getElementById('multipleTrendChart'));
chart.draw(data, chartOptions);
}
google.load('visualization', '1', {packages:['corechart'], callback: drawMultipleTrendlineChart});
</script>
</head>
<body>
<div id="multipleTrendChart"></div>
</body>
I wan't to do it like this image:Image_example
jsfiddle example: http://jsfiddle.net/w3ez9gwb/
Just add more columns of your data:
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sales value A');
data.addColumn('number', 'Sales value B');
data.addRows([
[new Date(2013, 3, 11), 100, 10],
[new Date(2013, 4, 02), 50, 650],
[new Date(2013, 5, 03), 70, 55],
[new Date(2013, 6, 04), 80, 95],
[new Date(2013, 7, 05), 50, 400],
[new Date(2013, 8, 06), 10, 600],
[new Date(2014, 0, 07), 20, 800],
[new Date(2014, 1, 08), 300, 900],
[new Date(2014, 2, 09), 100, 312]
]);
Then add the trendlines to your chart options like so:
var chartOptions = {
tooltip: {
isHtml: true
},
trendlines: {
0: {
color: 'red'
},
1: {
color: 'yellow'
},
},
...
};
Full example: JSFiddle