Develop Reference

Google Charts Tooltips-Annotations

My google chart will have 3-4 data series, and when the user puts their mouse on the chart I would like the tooltip to show each series data point in the tooltip at the same time including the date (haxis).
Does anyone know how I might add the tooltips the way I described above?
var data = google.visualization.arrayToDataTable([
['Year', 'Data1', 'Data2', 'Data3'],
[new Date(2001, 01, 01), 30, 20, 1000],
[new Date(2002, 01, 01), 70, 20, 1000],
...
var options = {
colors: ['#ffffff', '#ffffff', '#ffffff'],
hAxis: {
slantedText: true,
slantedTextAngle: 45,
gridlines: {
color: 'f2f2f2'
}
},
vAxis: {
minValue: 0,
gridlines: {
color: 'f2f2f2'
}
},
series: {
0: {
type: 'area',
areaOpacity: 0.25,
lineWidth: 1.5
},
1: {
type: 'line',
lineWidth: 1.5
},
2: {
type: 'line',
lineWidth: 1.5,
targetAxisIndex: 1
},
},

Add the following configuration option...
aggregationTarget: 'category'

how to change size of grid layout cells using flot

I want to change size of grid layout cells. But when i find API of jquery flot, i didn't find any method which use to change size of grid layout cells.
This is image which i want to change size of grid layout cells (horizontal + vertical) to bigger. How can i do this ?
Thanks in advance.
Here is my code:
let options_hour = {
series: {
lines: {
show: true,
lineWidth: 1.2
}
},
grid: {
backgroundColor: "#ffffff",
borderWidth: {
top: 1,
right: 1,
bottom: 1,
left: 1
},
highlightColor: "#FF0000"
},
xaxis: {
mode: "time",
timezone: "browser",
show: true,
ticks: 9,
tickColor: "#000000",
min: initialize_hour - 3600000 * 6,
max: initialize_hour - 600000,
ticks: [
initialize_hour - 3600000 * 6,
initialize_hour - 3600000 * 5,
initialize_hour - 3600000 * 4,
initialize_hour - 3600000 * 3,
initialize_hour - 3600000 * 2,
initialize_hour - 3600000 * 1,
initialize_hour - 600000
],
font: {
size: 9,
color: "#980000"
},
timeformat: "%H:%M"
},
yaxis: {
font: {
size: 9,
color: "#980000"
},
min: 0,
ticks: [
[0, '0'],
[2.25, 'NNW'],
[4.5, 'NW'],
[6.75, 'WNW'],
[9, 'W'],
[11.25, 'WSW'],
[13.5, 'SW'],
[15.75, 'SSW'],
[18, 'S'],
[20.25, 'SSE'],
[22.5, 'SE'],
[24.75, 'ESE'],
[27, 'E'],
[29.25, 'ENE'],
[31.5, 'NE'],
[33.75, 'NNE'],
[36, 'N']
],
tickColor: "#000000"
}
};

Problems using provider in conjunction with a controller for Highcharts graphs in angularjs

I'm building an angular web app with highcharts integration (highcharts-ng)
What I did was set up a factory provider declaring my chart config options object as follows:
angular.module('socialDashboard')
.factory('SentimentChartFactory', function() {
var sentimentGraph = {
options: {
chart: {
type: 'area',
backgroundColor: false,
height: 450,
zoomType: 'x'
}
},
colors: ['#d1d5d8', '#954145', '#41a85f'],
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
gridLineWidth: 1
},
yAxis: {
title: {
text: 'Sentiment %'
},
gridLineWidth: 0,
labels:
{
enabled: false
}
},
series: [
{
name: 'Basic Neutral',
data: [
[Date.UTC(2014, 10, 10), 60],
[Date.UTC(2014, 10, 11), 55],
[Date.UTC(2014, 10, 12), 50],
[Date.UTC(2014, 10, 13), 60],
[Date.UTC(2014, 10, 14), 55],
[Date.UTC(2014, 10, 15), 60],
[Date.UTC(2014, 10, 16), 55],
[Date.UTC(2014, 10, 17), 50],
[Date.UTC(2014, 10, 18), 60],
[Date.UTC(2014, 10, 19), 55],
]
}
],
loading: false
};
return sentimentGraph;
});
I then set up a controller for my graphs where I pull the options object from my factory provider
angular.module('socialDashboard')
.controller('SentimentChartController', function ($scope, $http, SentimentChartFactory) {
// Set up chart on summary page
$scope.SentimentChartSummaryConfig = SentimentChartFactory;
$scope.SentimentChartSummaryConfig.options.chart.height = 250;
// Set up chart on Sentiment Page
$scope.SentimentChartConfigMain = SentimentChartFactory;
$scope.SentimentChartConfigMain.options.chart.height = 450;
});
This is where I declare my chart:
Summary Page:
<div ng-controller="SentimentChartController">
<highchart id="{{link + '_chart'}}" config="SentimentChartSummaryConfig"></highchart>
</div>
Sentiment Page: (Different view)
<div ng-controller="SentimentChartController">
<highchart id="{{link + '_chart'}}" config="SentimentChartConfigMain"></highchart>
</div>
The problem that I am having is that even though I declared a different value for the config atttribute both graphs are displaying as the same height (450). Why is this and how do I fix this?

The problem is because in both cases you deal with the same object, because both SummaryConfig and MainConfig are references to the same SentimentChartFactory object.
The simplest solution in this case is to make service return new object every time:
angular.module('socialDashboard')
.factory('SentimentChartFactory', function() {
return {
getConfig: function() {
return {
options: {
chart: {
type: 'area',
backgroundColor: false,
height: 450,
zoomType: 'x'
}
},
colors: ['#d1d5d8', '#954145', '#41a85f'],
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
gridLineWidth: 1
},
yAxis: {
title: {
text: 'Sentiment %'
},
gridLineWidth: 0,
labels: {
enabled: false
}
},
series: [{
name: 'Basic Neutral',
data: [
[Date.UTC(2014, 10, 10), 60],
[Date.UTC(2014, 10, 11), 55],
[Date.UTC(2014, 10, 12), 50],
[Date.UTC(2014, 10, 13), 60],
[Date.UTC(2014, 10, 14), 55],
[Date.UTC(2014, 10, 15), 60],
[Date.UTC(2014, 10, 16), 55],
[Date.UTC(2014, 10, 17), 50],
[Date.UTC(2014, 10, 18), 60],
[Date.UTC(2014, 10, 19), 55],
]
}],
loading: false
}
}
};
});
and then use it like:
$scope.SentimentChartSummaryConfig = SentimentChartFactory.getConfig();
$scope.SentimentChartSummaryConfig.options.chart.height = 250;
$scope.SentimentChartConfigMain = SentimentChartFactory.getConfig();
$scope.SentimentChartConfigMain.options.chart.height = 450;

FLOT Chart xAxis time

I am using flot chart for charts. Please find following...
js array
data_visits = [
[new Date('06/02/2014 01:00').getTime(), 100],
[new Date('06/05/2014 10:00').getTime(), 200],
[new Date('06/10/2014 13:00').getTime(), 300],
[new Date('06/15/2014 15:00').getTime(), 400],
];
chart code
if($('#flot_overview').length) {
var chart_placeholder = $('#flot_overview');
var options = {
grid: {
clickable: true,
hoverable: true,
autoHighlight: true,
backgroundColor: null,
borderWidth: 0,
color: "#666",
labelMargin: 10,
axisMargin: 0,
mouseActiveRadius: 10,
minBorderMargin: 5
},
series: {
lines: {
show: true,
lineWidth: 2,
steps: false,
fill: true
},
points: {
show:true,
radius: 4,
symbol: "circle",
fill: true
}
},
tooltip: true,
tooltipOpts: {
content: "<span style='display:block; padding:7px;'>%x - <strong style='color:yellow;'>%y</strong></span>",
xDateFormat: "%b %d, %Y %H:%M",
shifts: {
x: 20,
y: 0
},
defaultTheme: false
},
xaxis: {
mode: "time",
minTickSize: [1, "hour"],
timeformat: '%H:%M',
labelWidth: "40"
},
yaxis: { min: 0 },
legend: {
noColumns: 0,
position: "ne"
},
colors: ["#0892cd"],
shadowSize: 0
};
$.plot(chart_placeholder,[{
label: "Click / Visits",
data: data_visits,
points: {fillColor: '#fff'},
lines: {fillColor: 'rgba(8,146,205,.2)'}
}],options);
}
It generates chart properly and shows correct time in tooltip, but it does not show correct time in xAxis as per my settings, it always show 00:00 for all xaxis if i use timeformat: '%H:%M' it works fine if i format this as date.
Please help, thanks.

Since your data spans multiple days, flot is logically placing the tick marks at the start each day. This means that with a time format of '%H:%M', you then get 0:00.
In my mind something like this makes a lot more sense for you data.

Values are setting on place in flot chart

I am trying to plot a chart in my page.Am able to set the chart values properly.But the values are not setting. Because of this am getting space at the end .
var DataSet1 = [
[new Date("2014/03/03").getTime(), 0],
[new Date("2014/03/10").getTime(), 16 ],
[new Date("2014/03/17").getTime(), 32 ],
[new Date("2014/03/24").getTime(), 189],
[new Date("2014/03/31").getTime(), 250] ];
var DataSet2 = [
[new Date("2014/03/03").getTime(), 0],
[new Date("2014/03/10").getTime(), 40],
[new Date("2014/03/17").getTime(), 20 ],
[new Date("2014/03/24").getTime(), 180],
[new Date("2014/03/31").getTime(), 230] ];
/* to find last 4 weeks mondays */
var newDate = new Date();
var day = newDate.getDay();
var date = newDate.getDate();
var xaxisArray = [];
for(var i = 0;i<5;i++){if(i!=0){
var tempnewDate = new Date(setNewDate);
setNewDate =tempnewDate.setDate(tempnewDate.getDate()-(7));
xaxisArray.push(setNewDate);
} else {
setNewDate =newDate.setDate(date-day+1);
xaxisArray.push(setNewDate);
}
}
$.plot($("#chart-revenue2"),[
{ data: DataSet1,label: "#FST",},
{ data: DataSet2, label: "SCND",
points: { show: true },
lines: { show: true,fill: false},
yaxis: 2,color:"#C76C6B"} ] ,
{
xaxis:
{
mode: "time",
min: xaxisArray[4],
max:xaxisArray[0],
timeformat: "%d/%m/%y",
ticks: xaxisArray.reverse(),
minTickSize :30
}
, yaxes: [
{
min:0, max: 400, tickSize: 50
},
{
position: "right",
min:0, max: 300, tickSize: 50
}
],
series: {
lines: {
show: true,
lineWidth: 3,
fill: true
},
shadowSize: 0,
},
grid: {backgroundColor: { colors: ["#ffffff", "#f4f4f4"] }},
colors: ["#294777"],
legend: { show: true, container: '#chart-revenue1-table' }
});
Please check my fiddle..

The problem is how you are calculating the dates for your axis ticks. When you create newDate, it has hours, minutes and seconds, which are then included in each tick. Make sure they are all zero and it will all line up:
var newDate = new Date()
newDate.setHours(0);
newDate.setMinutes(0);
newDate.setSeconds(0);
There's probably a better way to do that, I just haven't looked it up :)
See it working here: http://jsfiddle.net/ryleyb/htsBz/1/

You've set the maximum on the xaxis beyond the last point you have data for. What did you expect it to do? It doesn't have data, so it leaves it blank. If you want your axis to fit, set it's max to max: new Date("2014/03/31").getTime(), or better yet, just don't set the max and let flot autoscale it for you.