I am using Google Scatter Chart APIs to try to plot a punch card chart like the one Github has. I don't know how to change the marker size of each point shown. Is it possible in this API?
Yes, this is possible, though not if using the new Material Design scatter plot (created with new google.charts.Scatter()). If using the normal Scatter Plot though (created with new google.visualization.ScatterChart()), you do this by passing a style parameter for each point along with your data.
So for instance, if each point is usually defined [x, y], instead you would define it as [x, y, point_style].
An example of point_style would be 'point { size: 12; shape-type: circle; fill-color: #FFFFFF; color: #CCCCCC }';
Thus a sample data point would be [10, 5, 'point { size: 12; shape-type: circle; fill-color: #FFFFFF; color: #CCCCCC }']
Finally, you need to make sure you've added a style column to your set of data columns, like so:
var data = new google.visualization.DataTable();
data.addColumn('number', x_axis_title);
data.addColumn('number', y_axis_title);
data.addColumn( {'type': 'string', 'role': 'style'} ); // Defines point style
If you've done these things --- added a style data column and defined a style for each individual point --- then your custom styles will appear on the chart.
You can also define a pointSize and pointShape in the graph's options if you want to set them for all points at once, but you can't define individual points that way, so the above method is better if you want more granular control.
Related
Im newbie in js and anychart
I have anychart chart like this
how can i fill the color based on range like risk matrix.
*Result What i want
This is my code
// create data
var data = [
{x: 2.88, value: 3.12},
{x: 1.9, value: 2.3}
];
// create a chart
var chart = anychart.scatter();
// adjust scale min/max
chart.xScale().minimum(0).maximum(5.0);
chart.yScale().minimum(0).maximum(5.0);
// divide scale by three ticks
chart.xScale().ticks().interval(1.0);
chart.yScale().ticks().interval(1.0);
// create a bubble series and set the data
var series = chart.marker(data);
// enable major grids
chart.xGrid().enabled(true).stroke('0.1 blue');
chart.yGrid().enabled(true).stroke('0.1 blue');
var yAxis = chart.xAxis();
// set the chart title
chart.title("Quadrant-like Scatter Bubble Chart");
// set the container id
chart.container("container").draw();
});```
To get a risk matrix in the result, it’s better to use the Heatmap module.
Heatmap from your screenshot is recreated in this sample here: https://playground.anychart.com/0RAcumgI/3
Did we understand your question correctly?
Can someone provide an explanation on how to use the Leaflet Marker Icon XY Coordinates listed here:
http://leafletjs.com/examples/custom-icons/
Is lng/lat directly mapped to x/y? For example, sometimes in game engines, the Y pixel increases in value, but goes down the page.
Here is it the same? I can't quite wrap my head around it.
Not exactly sure what you mean by "Is lng/lat directly mapped to x/y?", but here are some explanations that should talk enough:
(tile courtesy MapQuest)
As in most image manipulation software:
X increases from left to right
Y increases from top to bottom
When specifying iconAnchor and shadowAnchor for Leaflet custom icons, these directions still apply. Furthermore, like in most image software as well, the origin is the top left corner of your image.
var myIcon = L.icon({
iconUrl: 'path/to/image.png', // relative to your script location, or absolute
iconSize: [25, 41], // [x, y] in pixels
iconAnchor: [12, 41]
});
As explained in the doc, if you specify iconSize but not iconAnchor, Leaflet will assume your icon tip is at the center of your image and position it accordingly (same for shadow).
But if you do specify neither iconSize nor iconAnchor, Leaflet will position your icon image "as is", i.e. as if its tip was its top left corner. Then you can apply a className option and define it in CSS with negative left and top margins to re-position your image.
var myIcon = L.icon({
iconUrl: 'path/to/image.png',
// iconSize: [25, 41],
// iconAnchor: [12, 41], // [x, y]
className: 'custom-icon'
});
.custom-icon {
margin-left: -12px; /* -x */
margin-top: -41px; /* -y */
}
This usage might be more interesting when using a DivIcon, for which you may not know the size in advance, and use CSS transforms to position it.
As for the popupAnchor, it uses the icon tip as origin, so you will most likely specify a negative y value, so that the popup appears above the icon.
popupAnchor: [1, -34] // [x, y]
Finally when adjusting your anchor values, a useful trick is to add a normal default marker at the exact same Lat/Lng location as the marker with your custom icon, so that you can compare both icon tip positions easily.
Is there any way to access and set plot marker property in Matlab?
In some case especially when user defined Marker is used (like the image below), it is necessary to set NodeLabel's position, font and color, to make it distinct in the figure.
g_obj = graph(sources, targets);
gp = plot(g_obj);
gp is a Matlab GraphPlot object and even though gp.NodeLabel is located in above layer, but has visual interference with user-defined markers' black lines and for example AL1, NAL1 and S6R2 are not readable.
Is there any way to set the Marker's font and position, using the gp itself?
I tried this solution which gives some flexibility, just copied the position and labels then used text instead of NodeLabel with more flexibility in color, font and etc.
%%---
gp = plot(graph_object,'Layout','layered');
labels = gp.NodeLabel;
gp.NodeLabel = [];
gp.LineStyle = 'none'; gp.Marker = 'none';
for i=1:length(labels)
text(gp.XData(i)+2, gp.YData(i)-5,labels(i),...
'fontsize', 8,'FontName', 'Arial', 'Color',[0 0.25 0],...
'FontWeight', 'bold');
end
I'm trying to find a way to change the position of the labels on my vertical axis. By default, a line chart renders the labels to the left of the chart, I'd like them to display on the right instead. It seems as if this isn't possible but I'm not too aware of ways to extend the line graph implementation to make it behave like I want it to.
you can use the series configuration option to change the targetAxisIndex
the documentation says...
targetAxisIndex: Which axis to assign this series to, where 0 is the default axis, and 1 is the opposite axis. Default value is 0; set to 1 to define a chart where different series are rendered against different axes. At least one series much be allocated to the default axis. You can define a different scale for different axes.
but seems to work without assigning anything to the default axis...
see following example...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Amount');
data.addRows([
['Label 1', 10],
['Label 2', 20],
['Label 3', 30],
['Label 4', 40]
]);
new google.visualization.LineChart(document.getElementById('chart_div')).draw(data, {
series: {
0: {
targetAxisIndex: 1
}
}
});
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
The Flot chart api supports dual v-axis scales, as shown by this example.
I'm using Google Charts - is this possible also with Google? I've had a look through the examples and docs, but can't find any examples / references to indicate it does support dual axis charts.
It took me a while, to figure this out, but Google Charts does support dual Y-axis (v-axis). I want to use the Javascript API and not the HTML interface.
This example can be tested here:
http://code.google.com/apis/ajax/playground/?type=visualization#line_chart
Replace all of that code with this code showing how to have two different Y-axis scales:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'x');
data.addColumn('number', 'Cats');
data.addColumn('number', 'Blanket 1');
data.addColumn('number', 'Blanket 2');
data.addRow(["A", 1, 1, 0.5]);
data.addRow(["B", 2, 0.5, 1]);
data.addRow(["C", 4, 1, 0.5]);
data.addRow(["D", 8, 0.5, 1]);
data.addRow(["E", 7, 1, 0.5]);
data.addRow(["F", 7, 0.5, 1]);
data.addRow(["G", 8, 1, 0.5]);
data.addRow(["H", 4, 0.5, 1]);
data.addRow(["I", 2, 1, 0.5]);
data.addRow(["J", 3.5, 0.5, 1]);
data.addRow(["K", 3, 1, 0.5]);
data.addRow(["L", 3.5, 0.5, 1]);
data.addRow(["M", 1, 1, 0.5]);
data.addRow(["N", 1, 0.5, 1]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function", width: 500, height: 400,
vAxes: {0: {logScale: false},
1: {logScale: false, maxValue: 2}},
series:{
0:{targetAxisIndex:0},
1:{targetAxisIndex:1},
2:{targetAxisIndex:1}}}
);
}
By adding maxValue: 2 to the code, and setting series 1 & 2 to that axis, they work properly on a second axis.
Non-JavaScript solution
Assuming that you are looking for a series that shares that same X-axis (horizontal) but has different values (and scales) for the Y-axis (vertical) then you can do this without recourse to JavaScript as follows:
Select Insert | Chart from the menu.
Double-click the chart, and in the chart editor select Chart Type | Line chart.
Click the grid icon in the "Data range" box to get the data range dialog.
Click the worksheet containing the data you're interested in for the Y-axis lines and highlight from the top left to the bottom right so you cover all the Y-axis lines. You can tidy up the columns later.
Click OK and you'll see a collection of series has been extracted. Use the "dot menu" for each series to remove those you're not interested in.
Click the grid icon in the "X-axis" box to the get the data range dialog once again.
Click the worksheet containing the data you're interested in for the X-axis line and highlight from the top to the bottom.
Click OK and you'll see the X-axis has been filled in and both Y-axis lines are sharing the same left axis label.
Click on the line you want to use the right axis label for and use the "Axis" box in the chart editor dialog to select "Right axis".
You can now edit the various other properties of the chart to get it to look the way you want in terms of presentation.
I did it.
Click on the data series
A small box will appear with 2 small squares with only two bold sides each
Click on the second one
Might be done then.