GWT googleCharts bar trimmed - gwt

I am using GWT api for google charts and having some issues:
colums from the start and end values missing for the column chart
BarChart width is trimmed is half for first/last value
To solve this I tried viewWindowMode property
HorizontalAxisOptions opt = HorizontalAxisOptions.create();
opt.set("viewWindowMode","pretty");
but this does not work.
Any ideas on how to solve?
Code:
private Options createOptions(ChartDataProxy response) {
Options options = Options.create();
options.setWidth(chartPanel.getOffsetWidth() - 2 * chartBorderWidth);
options.setHeight(chartPanel.getOffsetHeight() - 2 * chartBorderWidth);
HorizontalAxisOptions opt = HorizontalAxisOptions.create();
opt.setTitle(response.getxAxisName());
opt.setSlantedText(true);
opt.set("viewWindowMode","pretty");
options.setHAxisOptions(opt);
AxisOptions vopt = AxisOptions.create();
vopt.setTitle( response.getyAxisName());
vopt.set("viewWindowMode","pretty");
options.setVAxisOptions(vopt);
options.setTitle(response.getCaption() + " " + response.getSubCaption());
options.setLegend( LegendPosition.BOTTOM );
options.setPointSize(4);
return options;
}

I'm having similar problem, although I was using javascript. Maybe, you can adapt it into GWT.
Basically DataView can fix it. You just need to handle the first column with DataView and return whatever you need to return when not using DataView -- however, as string. I (don't) know, it's weird.
Given I had two columns: date, number. I will use this kind of code:
var data = new google.visualization.DataTable();
data.addColumn('date', 'month');
data.addColumn('number', 'users');
// trick to prevent the bar chart from being cut in half at both edge of our graph
var dataView = new google.visualization.DataView(data);
dataView.setColumns([{calc: function(data, row) { return data.getFormattedValue(row, 0); }, type:'string'}, 1]);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_monthly_users'));
chart.draw(dataView, options);
Hope it helps. I merely gather the scattered solutions.

Related

Google Bar charts - ToolTips not showing

I have created a bar chart using google charts, this is a CORE Chart
I have tried getting the bar chart to change colours and adding an additional tooltip information to it, so that the tooltip shows a bit more information
I have gone through the google documentation and i cant see what i am doing wrong
For easy reading this is the output of my code on the source
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var exams = [["Date", "Score",({type: 'string', role: 'tooltip'})], ["18 Oct", 39,"TEST"], ["26 Oct", 20,"TEST"], ["26 Oct", 0,"TEST"], ["27 Oct", 0,"TEST"], ["27 Oct", 0,"TEST"]];
if(exams.length > 1){
var data = google.visualization.arrayToDataTable(exams);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1]);
var options = {
title: "Results",
width: 1170,
height: 700,
bar: {groupWidth: "95%"},
legend: { position: "none" }
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
else{
$("#columnchart_values").html('No Data found to show graph');
}
}
This is the google documentation i have been following, its slightly different
to mine as i am getting my data from a database, but it should give the same output.
I have gone through many examples and i am replicating them as close as possible and just not having any luck
https://developers.google.com/chart/interactive/docs/customizing_tooltip_content
I also have the exact same problem with color, i cant get colors on bar charts to change both having the same problem that it just doesn't do anything
Am i missing something??
the tooltip column is not being included in the data view.
view.setColumns([0, 1]);
to add the tooltip...
view.setColumns([0, 1, 2]);

WPF Toolkit - Binding LineSeries in code behind

I've spent a few days trying to bind my data model to a lineseries. I works fine; however, I want to change the line color. I knew where to change the color, yet the chart and series would ignore my binding (was a SolidColorBrush). If I hard-coded the color in XAML it would work; however, if I tried to bind the same property to the color property in my view model it would not work. After too much time was spent I gave up for 2 reasons.
It just wouldn't work
I realized I was going to need to bind 'x'
number of view models to the chart to show more than one line series
at a time.
I eventually just defined my line series in the code behind like so...
LineSeries BuildLine(DosePointsViewModel model)
{
LineSeries series = new LineSeries();
// styles
Style poly = new Style(typeof(Polyline));
poly.Setters.Add(new Setter(Polyline.StrokeProperty, model.LineColor));
poly.Setters.Add(new Setter(Polyline.StrokeThicknessProperty, 3d));
series.PolylineStyle = poly;
Style pointStyle = new Style(typeof(LineDataPoint));
pointStyle.Setters.Add(new Setter(LineDataPoint.BackgroundProperty, model.LineColor));
series.DataPointStyle = pointStyle;
// binding
series.IsSelectionEnabled = false;
series.IndependentValueBinding = new System.Windows.Data.Binding("Distance");
series.DependentValueBinding = new System.Windows.Data.Binding("Dose");
// X axis
LinearAxis xAxis = new LinearAxis();
xAxis.Title = "Distance";
xAxis.ShowGridLines = false;
xAxis.Interval = 1;
xAxis.Orientation = AxisOrientation.X;
series.IndependentAxis = xAxis;
// Y axis
LinearAxis yAxis = new LinearAxis(); //series.DependentRangeAxis as LinearAxis;
yAxis.Maximum = 5000d;
yAxis.Minimum = -100d;
yAxis.Minimum = model.Points.Min(d => d.Dose) - model.Points.Min(d => d.Dose) * 0.50;
yAxis.Maximum = model.Points.Max(d => d.Dose) + model.Points.Max(d => d.Dose) * 0.05;
yAxis.ShowGridLines = true;
yAxis.Orientation = AxisOrientation.Y;
yAxis.Title = "Dose";
Style s = new Style(typeof(Line));
s.Setters.Add(new Setter(Line.StrokeProperty, new SolidColorBrush(Colors.LightBlue)));
s.Setters.Add(new Setter(Line.StrokeThicknessProperty, 1d));
yAxis.GridLineStyle = s;
series.DependentRangeAxis = yAxis;
return series;
}
Now, the color for my line series works. Of course, the primary reason for this is that I'm directly setting the color via ...
poly.Setters.Add(new Setter(Polyline.StrokeProperty, model.LineColor));
pointStyle.Setters.Add(new Setter(LineDataPoint.BackgroundProperty, model.LineColor));
So, my question is this. I want to be able to add multiple line series to the chart; however, when I try to do this, only the last item is being bound. Inside the code, this is done for each line series being created. Only the last line series is added to the chart.
DosePointsViewModel model = new DosePointsViewModel(_snc, m.Id);
LineSeries series = BuildLine(model);
DoseChart.Series.Clear();
DoseChart.Series.Add(series);
Wow, as I'm reading my question I realize that I am calling
DoseChart.Series.Clear();
Well that was an interesting find.

Pie chart custom tooltip

I tried to customize tooltip for google pie chart but I cannot success. Is there anyway to custom the pie tooltip? I need a tooltip like this: Pie with tooltip
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addColumn({type: 'string', role: 'tooltip', p: {html:true}});
data.addRows([
['Woman',100,'Woman Number'],['Man',200,'Man Number'],['Couple',300,'Couple Number']
]);
var options = {
'width':360,
'height':200,
tooltip: {isHtml: true},
colors: ['#fda4b7', '#7eb9de', '#a5d454']
};
var chart = new google.visualization.PieChart(document.getElementById('chartid'));
chart.draw(data, options);
Finally I found the way to change the tooltip HTML for Pie Chart.
google.visualization.events.addListener(chart, 'onmouseover', function (e) {
// e.row contains the selected row number in the data table
$(".google-visualization-tooltip").html("your html here");
});
Maybe this will be usefull to you. I made a piechart by myself. It's light and you can customize it: http://jsfiddle.net/cbWC4/5/
You create a cake:
//create the pieces of the pie (size, Name, color, relative size-will be calculatet later)
var p1= new Kuchenstueck(33,"Stueck1","949bc2",0);
var p2= new Kuchenstueck(10,"Stueck2","5d5f6c",0);
var p2= new Kuchenstueck(20,"Stueck3","96ccae",0);
var kuchen = {kuchenstuecke: [p1,p2,p3], auffuellen:true, absoluteGroesse:0, mx:180, my:180, r:180, imgSizeX:360, imgSizeY:360};
and apend it to a html element:
$(".torte").append(createKuchen(kuchen));
please note: some parameters are not yet implemented and kuchen is the german word for pie :)

Slick grid set value on autocomplete cell

I'm trying to set values in a slick grid from jQuery thru val and text e.g. .find('div.slick-cell.l2.r2').text('xyz'). There is a jquery autocomplete on the cell in question but it only gets activated on click. So when I click the cell in question it get overwritten by the initial defaultValue in the editor:
function ComboBoxEditor(args) {
...
this.loadValue = function (item) {
defaultValue = item[args.column.field] || "";
$input.val(defaultValue);
$input[0].defaultValue = defaultValue;
$input.select();
};
...
Can I get the jQuery text value from within the world of the slick grid.
Think of slickgrid as a rendering engine and dataView as the data interface (You are using dataView right?) Jquery or javascript editing of dom elements isn't gong to work so think about how jquery/javascript can use the dataView methods to do the updating.
I ran into this same issue when adding drag and drop of files into SlickGrid
I detect the elementID of the drop and map it back to the dataView row and column.
Here is the function I used for text pasting:
function insertText(textString, location) {
grid.resetActiveCell();
$(location).click();
var startCell = grid.getActiveCell();
if (startCell) {
// only paste text into active cells for now
var columnDef = grid.getColumns();
var colField = columnDef[startCell.cell].field;
if (!dataView.getItem(startCell.row)) {
// new row
var tobj = {'id': "new_" + (Math.random() + 1).toString(36).substring(7)};
tobj[colField] = textString;
dataView.addItem(tobj);
} else {
// modify existing cell
var item = dataView.getItem(startCell.row);
item[colField] = textString;
dataView.updateItem(item.id, item);
}
grid.resetActiveCell();
grid.render();
dataView.refresh();
}
}

Sinatra to Google Geochart - Passing Data

I am new to web development, and I am trying to create a Sinatra app. In my app, I have an instance variable that references a two-dimensional array like so:
#my_var = [ ['NY', 55], ['NJ', 37] ]
I am also using the Google Charts API to create some visualizations with my data; in particular, I am trying to use the Geochart library in my view to create a state-by-state heat map of the U.S.
I'd like to use the array mentioned earlier (#my_var) in my template to populate the Google DataTable that's used to create the chart. My DataTable will have two columns, the first representing state and the second representing score, and I would like each nested array in #my_var to map to these two columns like so:
STATE SCORE
NY 55
NJ 37
Does anybody know how to do this? As far as I can see from the documentation, you have to populate the table with static values. I'm not sure how to pass the data from my application (Ruby code) to the processes that create the chart (Javascript code).
To further complicate the matter, I'm creating my template with haml. What I have so far is this:
%script{ :type => "text/javascript" }
:plain
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = new google.visualization.DataTable();
data.addRows(2);
data.addColumn('string', 'State');
data.addColumn('number', 'Score');
data.setValue(0, 0, 'NY');
data.setValue(0, 1, 55);
data.setValue(1, 0, 'NJ');
data.setValue(1, 1, 37);
var options = {region: 'US',
resolution: 'provinces',
backgroundColor: '#CCC',
colors: ['red','blue'],
width: 500,
height: 370};
var container = document.getElementById('map_canvas');
var geochart = new google.visualization.GeoChart(container);
geochart.draw(data, options);
};
The map is rendered with the correct size and the correct colors in the legend. However, I'm not seeing NY or NJ colored in. Also note that I'm using static values here--I want to get this step down before trying to create the table dynamically.
Any help would be appreciated.
I figured out how to populate the table. I used Ruby interpolation to convert the Ruby array into a Javascript array, and then used the JS array to fill the DataTable like so:
%script{ :type => "text/javascript" }
:plain
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = new google.visualization.DataTable();
var scores_by_state = #{#scores_by_state}
data.addRows(scores_by_state.length)
data.addColumn('string', 'State');
data.addColumn('number', 'Average Score');
for(var i = 0; i < scores_by_state.length; i++)
{
data.setValue(i, 0, scores_by_state[i][0]);
data.setValue(i, 1, scores_by_state[i][1]);
}
var options = {region: 'US',
resolution: 'provinces',
backgroundColor: '#CCC',
colors: ['red','blue'],
width: 500,
height: 370};
var container = document.getElementById('map_canvas');
var geochart = new google.visualization.GeoChart(container);
geochart.draw(data, options);
};