By following the documentation I try to change width of Y axis gridlines and outline.
First I create series:
$series = new Chart\Series($label, $seriesDataAsc);
$series->setShowSeriesName(false);
$series->setShowValue(false);
$series->setShowLeaderLines(true);
$series->setShowCategoryName(false);
Then outline:
$oOutline = new Outline();
$oOutline->getFill()->setFillType(Fill::FILL_SOLID);
$oOutline->setWidth(2); // not working
$series->setOutline($oOutline);
Then gridlines:
$oGridLines = new Gridlines();
$oGridLines->getOutline()->setWidth(1); // not working
$oGridLines->getOutline()->getFill()->setFillType(Fill::FILL_SOLID)->setStartColor(new Color('FFF5F5F5'));
$oShape->getPlotArea()->getAxisY()->setMajorGridlines($oGridLines);
For both line types setWidth() method is not working. Everything else in chart is as expected. What is wrong with setWidth?
Related
I am working on a dual-y axis line chart and am trying to show the data in x axis in reverse order.
The direction attribute dont seem to be working for me.
original - https://jsfiddle.net/api/post/library/pure/
here is my change - https://jsfiddle.net/3m8vjows/
I have tried to give the direction to the x axis as below. But is not working.
var materialOptions = {
chart: {
title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
},
width: 900,
height: 500,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {axis: 'Temps'},
1: {axis: 'Daylight'}
},
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
Temps: {label: 'Temps (Celsius)'},
Daylight: {label: 'Daylight'}
},
x:{direction:'-1'}
}
};
the following config option is not supported by material charts
{hAxis,vAxis,hAxes.*,vAxes.*}.direction
there are several options material charts do not support,
see --> Tracking Issue for Material Chart Feature Parity
material = google.charts.Line & packages: ['line']
classic = google.visualization.LineChart & packages: ['corechart']
there is an option you can use to make classic charts look similar to material
theme: 'material'
if you choose to use classic instead...
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]);
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.
I'm trying to show Polylines in Leaflet but it doesn't seem to work. Am I missing anything or...? p.s. Coordinate pairs do not contain the same values, so it should yield lines...
//this adds markers to the map, which works
var d = {};
d.coordinates = [[lat,lng],[lat,lng]]
var latLngs = d.coordinates.map(function (c) {
var marker = L.marker(c).addTo(map);
return {
lat: c[0],
lng: c[1]
};
});
//This 'should' add polylines but doesn't ...
var polyline = L.polyline(d.coordinates, { color: 'red', weight: 12 }).addTo(map);
I tried all sorts of variations on the code above, varying with instantiation/factory method like: new L.polyline() vs L.polyline() and trying upper- and lowercase Polyline. I tried passing arrays of [double, double] and [L.LatLng, L.LatLng] and even [{lat:lat,lng:lng}] but nothing seems to work... I really must be overlooking a simple thing...
I'm using Leaflet 0.7.
Edit:
As shown in the jsFiddle by ghybs it should work. I updated my code to the following:
var firstpolyline = L.polyline(d.coordinates, {
color: 'red',
weight: 12
}).addTo(map);
I also added identical logging statements in both the jsFiddle and my solution.
console.log(firstpolyline); //polyline for jsFiddle
console.log(map);
console.log(d.coordinates);
Those yield this (left is custom solution which is not showing a line, right is jsFiddle which is showing a line). Manually copy-pasting different coordinates pairs of my solution to the jsFiddle just works...:
I'm really lost here :(
There is no reason to add an extra .polyline after the factory L.polyline().
var polyline2 = L.polyline(d.coordinates, {color: 'red', weight: 12}).addTo(map);
Demo: http://jsfiddle.net/ve2huzxw/48/
Side note: you should use a single equal sign (=) for assignment in d.coordinates == [[lat,lng],[lat,lng]]
I've added a nvd3 chart to my sencha touch app.
Apparently though the size of the box where the chart will be inserted is undefined at the time the chart is created. This turns out in a graph with standard dimensions (960x350 approx), way too large!
How can I modify the widht and height of the chart? The visual error I get is that the chart has a larger width, the component containing it are smaller and the chart is not completely
visible (it's like it misses a resize effect to adapt its size to the containing box).
My code, which is inside a sencha component goes like this:
nv.addGraph(Ext.bind(function(){
var chart = nv.models.discreteBarChart()
.x(function(d) { return d.label; })
.y(function(d) { return d.value; })
.staggerLabels(true)
.tooltips(false)
.showValues(true);
var w = 550;
var h = 280;
var svg = d3.select(this.innerElement.dom).append('svg');
// setting axis property doesn't work:
var x = d3.scale.ordinal()
.domain(d3.range(10))
.rangeRoundBands([0, w], 1);
chart.xAxis
.tickFormat(d3.format(',f'));
chart.xAxis.scale(x);
chart.yAxis
.tickFormat(d3.format(',f'));
//setting svg properties doesn't work:
svg.attr("width", w)
.attr("height", h);
svg.datum(this.getChartData()).transition().duration(500).call(chart);
//if I comment this, nothing changes, what is this method for?
nv.utils.windowResize(chart.update);