I have created a line graph using highchart js .I want to set a grey color marker at the starting and a red colored mrker at the end of my graph.Is there a way to do it with highcharts?
In the load event (chart.events.load) you can extract first and last point from series. Then call update() function to modify fillColor parameter.
chart:{
events:{
load:function() {
var chart = this,
series = chart.series[0],
data = series.data,
len = data.length;
//first point
data[0].update({
marker:{
fillColor: 'gray'
}
},false);
//last point
data[len - 1].update({
marker:{
fillColor: 'red'
}
});
}
}
},
Example:
http://jsfiddle.net/s9erv8f0/
Related
I am using here maps to display points on the map and I would like to draw a line between two specific points.
I tried to lineString.pushPoint and combined to Polyline, but I only have a linear result. I would like to be able to link two existing markers to another existing one
You can add a marker at the start and/or endpoint like this:
function addPolylineToMap(map) {
var lineString = new H.geo.LineString();
lineString.pushPoint({lat:53.3477, lng:-6.2597});
lineString.pushPoint({lat:51.5008, lng:-0.1224});
lineString.pushPoint({lat:48.8567, lng:2.3508});
lineString.pushPoint({lat:52.5166, lng:13.3833});
map.addObject(new H.map.Polyline(
lineString, { style: { lineWidth: 4 }}
));
var startMarker = new H.map.Marker({lat:53.3477, lng:-6.2597});
map.addObject(startMarker);
var endMarker = new H.map.Marker({lat:52.5166, lng:13.3833});
map.addObject(endMarker);
}
I'd like to set my own defined colors for graphs that appear in Kintone.
I've found out for pie charts, you can upload the below CSS code to the App to have some areas of the pie to become a color of your choice.
.highcharts-series-group .highcharts-series path:nth-of-type(even){
fill:pink;
}
What I'd really like to do though, is apply the same thing to the Line charts in kintone.
I've tried the below CSS:
.highcharts-tracker path {
fill: red;
}
This only changes the points plotted on the graph, but not the lines in between the points.
How can I identify the lines in this graph so that I can end up with lines of the color of my choice??
Updated 6/24/18
Like you mentioned, the code that I showed you displays only on the record detail page. However, if you just make the process to run on the record list event "app.record.index.show", you can show the graph on the top of the record list page.
Also, it will be better to use kintone.app.getHeaderSpaceElement() to append a graph on the record list page.
The following page is an example of how to append something on the record list page using the kintone.app.getHeaderSpaceElement():
kintone developer network - kintone x OpenStreetMap
https://developer.kintone.io/hc/en-us/articles/115003669514
The following page is about the record list header element:
kintone developer network - Get Record List Header Element
https://developer.kintone.io/hc/en-us/articles/213148937-Get-Record-List#getHeaderSpaceElement
=================================================
Original Reply
It's better off not editing the DOM because it might not work after any kintone updates. I recommend creating a custom graph using Chart.js, a javscript library. The following page helps you how to do so.
Example Code
(function() {
"use strict";
// Events for adding and editing records
var eventsCreateShow = ['app.record.create.show', 'app.record.edit.show',
'app.record.index.create.show', 'app.record.index.edit.show'];
kintone.events.on(eventsCreateShow, function(event) {
// Hide the "Chart" Group field
kintone.app.record.setFieldShown('Chart', false);
});
// Display the chart on the record details page (PC and mobile)
var eventsDetailShow = ['app.record.detail.show', 'mobile.app.record.detail.show'];
kintone.events.on(eventsDetailShow, function(event) {
var record = event.record;
var data = {
labels: ["Language Arts", "Math", "Science", "Social Studies", "P.E."],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(0,140,232,.4)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
data: [
record['language_arts']['value'],
record['math']['value'],
record['science']['value'],
record['social_studies']['value'],
record['pe']['value']
]
}
]
};
// Set Chart.js options
var options = {
scaleShowLine: true,
angleShowLineOut: true,
scaleShowLabels: true,
scaleBeginAtZero: true,
angleLineColor: "rgba(0,0,0,.1)",
angleLineWidth: 1,
pointLabelFontFamily: "'Arial'",
pointLabelFontStyle: "normal",
pointLabelFontSize: 16,
pointLabelFontColor: "#666",
pointDot: true,
pointDotRadius: 5,
pointDotStrokeWidth: 1,
pointHitDetectionRadius: 20,
datasetStroke: true,
datasetStrokeWidth: 3,
datasetFill: true,
responsive: true
};
var elRadar;
var elCanvas = document.createElement('canvas');
elCanvas.id = 'canvas';
// Display radar chart onto the Blank space
// Edit display size depending on PC or mobile
if (event.type === 'mobile.app.record.detail.show') {
elRadar = kintone.mobile.app.getHeaderSpaceElement();
elCanvas.style.position = 'relative';
elCanvas.style.top = '10px';
elCanvas.style.left = '10px';
elCanvas.height = '300';
elCanvas.width = '300';
} else {
elRadar = kintone.app.record.getSpaceElement('Radar');
elCanvas.height = '400';
elCanvas.width = '400';
}
elRadar.appendChild(elCanvas);
var myChart = new Chart(elCanvas.getContext("2d")).Radar(data, options);
});
})();
Ref:kintone developer network - Display radar charts with chart.js
https://developer.kintone.io/hc/en-us/articles/115006413388-Display-radar-charts-with-chart-js
I hope this helps
I have a leaflet map in R with a lot of LineStrings in it. The lines default to blue, with a certain thickness. I want to change the line color and have the thickness depend on a weight variable. I create the map by reading a geojson file. Adding a "style" section directly to each linestring feature in the geojson isn't working. Here is my R code for the map:
colchoice = "red"
ptl_str = paste("#! function(feature, latlng){
return L.circleMarker(latlng, {
radius: feature.properties.radius || 5,
fillColor: feature.properties.fillColor || '", colchoice, "',
color: '#000',
weight: 1,
fillOpacity: 0.8
})
} !#", sep="")
m <- Leaflet$new()
m$setView(c(38.892682, -77.031681), zoom = 12)
m$geoJson(geojson,
onEachFeature = "#! function(feature, layer){
layer.bindPopup(feature.properties.popup)
} !#",
pointToLayer = ptl_str)
m
This successfully formats points on the map into dots. But now I want to format the lines differently too. I appreciate any help. Thanks!
Upfront: i know nothing about R and not able to test what i'm saying, but i know my way around Leaflet in Javascript and can tell you how i would go about accomplishing that in JS, so you can translate it to R:
var geoJsonLayer = L.geoJson(data, {
onEachFeature: function (feature, layer) {
if (layer instanceof L.Polyline) {
layer.setStyle({
'color': feature.properties.color
});
}
}
});
Here's a working example on Plunker: http://plnkr.co/edit/g4juen?p=preview
This is the meat of the code I am using and I am not getting errors, but I am not seeing the points that are in the area of the rectangle. Any help would be appreciated:
`enter code here`/** #this {google.maps.Rectangle} */
function showNewRect(event) {
var ne = rectangle.getBounds().getNorthEast();
var sw = rectangle.getBounds().getSouthWest();
google.maps.event.addlistener(rectangle, "bounds_changed", function(){
document.getElementById("map-selected").innerHTML=rectangle.getBounds();
var rectA = (ne*sw);
})
}
function listSelected () {
var inside = $.map( sites, function ( s ) {
var d;
if ( ( (d = google.maps.geometry.poly.containsLocation( s.position )) <= rectA ) )
return s.location + ' ('+(Math.round(d/100)/10)+' km)';
$('#map-selected').html( inside.sort().join('') );
});
}
google.maps.event.addListener(drawingManager, 'rectanglecomplete', function( rectangle ) {
selectedArea = rectangle;
listSelected();
google.maps.event.addListener(rectangle, 'center_changed', listSelected);
google.maps.event.addListener(rectangle, 'bounds_changed', listSelected);I am working with the Google maps API and I have a map I am drawing on with a rectangle. I need to have a user draw the rectangle, and on the map there will be predefined locations, that when the rectangle crosses the locations there will be details of each location put into a list.
This is an example:
http://hmoodesigns.com/ksi/
I have an example using the circle draw tool, which I can get to work fine, but the rectangle tool I have not been able to have this identify the points on the map.
How can I check for these points without having a predefined rectangle on the page?
Thanks,
When the Rectangle has been drawn iterate over the locations and use the method contains() of the Rectangle's bounds to test if the LatLng's are within the bounds of the Rectangle
I am in the midst of converting old googlemap v2 code to v3. Now i stumble upon a problem how to create custom markers for a polyline? I managed to create custom markers just for points on a map. But when i use the "new" google.maps.Polyline to create a route/path i don't now how i can set custom markers.
I don't have a reference to the individul markers
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
i tried flightPlanCoordinates.setIcon("img/icon.jpg");
In my case i like to use 3 different icons (start, doing, finished).
back in v2 i had a switch function
function returnGIcon(type) {
var icon = new GIcon();
switch(type) {
And i used
for(i=1;i<points.length-1;i++) {
marker = new GMarker(points[i],{icon:returnGIcon('doing')});
map.addOverlay(marker);
}
How can i fix this?
A polyline shows a line between the points and does not add markers. If you still want to show a marker on each (specified) point on the polyline you need to add a GMarker on those points. So basically you create both the line and the GMarkers like you did before.