I made a google line chart using the following options.
var options = {
pointSize: 10,
pointShape: 'circle',
backgroundColor: '#FFFFFF',
legend: {position: 'none'},
vAxis: {
viewWindowMode: 'explicit',
viewWindow: {min: 0},
gridlines: {color: '#CCCCCC'},
textStyle: {color: '#444444'}
},
hAxis: {
viewWindowMode: 'explicit',
viewWindow: {min: 0},
textStyle: {color: '#444444'}
},
chartArea: {left: 40, top: 10, width: 900, height: 150},
colors: ['#FF9900', '#2A96FF', '#424242'],
animation: {duration: 1000, easing: 'out'},
smoothLine: true,
tooltip: {isHtml: true}
};
This line chart was generated using the above options.
When the values are changes the number of x axes is always 5. How can i set this to be dynamic so that there will be no decimal labels/values in the y axis.
For the above example i need only 0 and 1. 0.25, 0.50 and 0.75 are not needed.
you can provide your own tick marks for either axis...
vAxis: {
ticks: [0, 1],
...
Related
I am using google chart. I want to slate text on x-axis and should be minimum value is 0 in y-axis. After some google i put some snippet not it working.
Here is my code:-
var data = google.visualization.arrayToDataTable(loadDaysLeadGraphData);
var options = {
hAxis: {
title: "Month",
textPosition: 'out',
slantedText: true,
slantedTextAngle: 90
},
vAxis: {
title: 'Revenue',
minValue: 0,
viewWindow: { min: 0 },
format: '0',
},
height: 260,
colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
};
var chart = new google.charts.Bar(document.getElementById('days-leads'));
chart.draw(data, options);
there are many options that simply do not work with material charts, including...
{hAxis,vAxis,hAxes.*,vAxes.*}.slantedText
{hAxis,vAxis,hAxes.*,vAxes.*}.slantedTextAngle
{hAxis,vAxis,hAxes.*,vAxes.*}.minValue
see --> Tracking Issue for Material Chart Feature Parity #2143
material chart --> google.charts.Bar -- packages:['bar']
core chart --> google.visualization.ColumnChart -- packages:['corechart']
however, for core charts, there is an option for...
theme: 'material'
see following working snippet...
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var loadDaysLeadGraphData = [
['Year', 'Value'],
['2005', 58],
['2006', 63],
['2007', 66],
['2008', 66],
['2009', 81],
['2010', 85],
['2011', 86],
['2012', 86],
['2013', 89],
['2014', 90],
['2015', 90]
];
var data = google.visualization.arrayToDataTable(loadDaysLeadGraphData);
var options = {
hAxis: {
title: "Month",
textPosition: 'out',
slantedText: true,
slantedTextAngle: 90
},
vAxis: {
title: 'Revenue',
minValue: 0,
viewWindow: { min: 0 },
format: '0',
},
height: 260,
colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'],
theme: 'material'
};
var chart = new google.visualization.ColumnChart(document.getElementById('days-leads'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="days-leads"></div>
I am trying to add a visual map according to the y axis in echarts.
Taking one of their example:
https://echarts.apache.org/examples/en/editor.html?c=area-pieces
The results looks as follow:
what I'm trying to achieve is:
Obviously here, I have just rotated the picture by 90 degree.
How can this be achieve in echarts directly (so not by saving the picture first)?
The simplest solution would be inverting the axis, data index, and visual map axis. See chart options below:
option = {
backgroundColor: '#fff',
xAxis: {
type: 'value',
boundaryGap: [0, '30%'],
position: 'top'
},
yAxis: {
type: 'category',
boundaryGap: false
},
visualMap: {
type: 'piecewise',
show: false,
dimension: 1,
seriesIndex: 0,
pieces: [{
gt: 1,
lt: 3,
color: 'rgba(0, 180, 0, 0.5)'
}, {
gt: 5,
lt: 7,
color: 'rgba(0, 180, 0, 0.5)'
}]
},
series: [
{
type: 'line',
smooth: 0.6,
symbol: 'none',
lineStyle: {
color: 'green',
width: 5
},
markLine: {
symbol: ['none', 'none'],
label: {show: false},
data: [
{yAxis: 1},
{yAxis: 3},
{yAxis: 5},
{yAxis: 7}
]
},
areaStyle: {},
data: [
[200, '2019-10-10'],
[400, '2019-10-11'],
[650, '2019-10-12'],
[500, '2019-10-13'],
[250, '2019-10-14'],
[300, '2019-10-15'],
[450, '2019-10-16'],
[300, '2019-10-17'],
[100, '2019-10-18']
]
}
]
};
Result:
See on Imgur
have add google chart with below options, I want spacing between labels at horizontal axis and actual axis, is there option available in chart library or any other way?
var options = { colors: ['#4ED8DA'], curveType: 'none', fontName: 'Montserrat', chartArea: {left: 40, top: 10, bottom: 30, width: '95%', height: '100%'}, legend: {position: 'none'}, pointSize: 5, lineWidth: 3, hAxis: {textPosition: 'out', minTextLines: '2', slantedText: false, baselineColor: '#D6D6D6', gridlines: {color: '#D6D6D6'}, textStyle: {color: '#383939', fontSize: '12', bold: true}}, vAxis: {baselineColor: '#D6D6D6', gridlines: {color: '#D6D6D6', interval: 1}, textStyle: {color: '#383939', fontSize: '12'}} };
there are no standard config options to create space between the x-axis labels and the axis.
however, you can manually move the labels on the chart's 'ready' event.
first, we find the x-axis labels, then increase the "y" attribute of the label.
the following example increases the distance from the axis by the value of the font size.
google.visualization.events.addListener(chart, 'ready', function () {
// get all chart labels
var labels = chart.getContainer().getElementsByTagName('text');
Array.prototype.forEach.call(labels, function (label) {
// determine if x-axis label
if (label.getAttribute('text-anchor') === 'middle') {
// increase distance from axis by the font size of the label
var fontSize = parseFloat(label.getAttribute('font-size'));
var yCoord = parseFloat(label.getAttribute('y'));
label.setAttribute('y', yCoord + fontSize);
}
});
});
note: depending on how far you move the labels,
you may need to increase the area at the bottom of the chart.
chartArea.bottom
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['x', 'y0'],
[0, 0],
[1, 0],
[2, 0],
[3, 1],
[4, 1],
[5, 2],
[6, 2],
[7, 3],
[8, 3],
[9, 3]
]);
var options = {
colors: ['#4ED8DA'],
curveType: 'none',
fontName: 'Montserrat',
chartArea: {left: 40, top: 10, bottom: 30, width: '95%', height: '100%'},
legend: {position: 'none'},
pointSize: 5,
lineWidth: 3,
hAxis: {textPosition: 'out', minTextLines: '2', slantedText: false, baselineColor: '#D6D6D6', gridlines: {color: '#D6D6D6'}, textStyle: {color: '#383939', fontSize: '12', bold: true}},
vAxis: {baselineColor: '#D6D6D6', gridlines: {color: '#D6D6D6', interval: 1}, textStyle: {color: '#383939', fontSize: '12'}}
};
var chart = new google.visualization.LineChart(document.getElementById('chart'));
google.visualization.events.addListener(chart, 'ready', function () {
var labels = chart.getContainer().getElementsByTagName('text');
Array.prototype.forEach.call(labels, function (label) {
if (label.getAttribute('text-anchor') === 'middle') {
var fontSize = parseFloat(label.getAttribute('font-size'));
var yCoord = parseFloat(label.getAttribute('y'));
label.setAttribute('y', yCoord + fontSize);
}
});
});
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
Here, I am drawing route and assigning stop to route using Leaflet Routing Machine Leaflet Routing Machine
var control = L.Routing.control(L.extend(window.lrmConfig, {
waypoints: [array object of stops],
geocoder: L.Control.Geocoder.nominatim(),
routeWhileDragging: true,
reverseWaypoints: true,
showAlternatives: true,
altLineOptions: {
styles: [
{color: 'black', opacity: 0.15, weight: 9},
{color: 'white', opacity: 0.8, weight: 6},
{color: 'blue', opacity: 0.5, weight: 2}
]
}
})).addTo(map);
In waypoints object array I have bind custom marker like:
L.marker([item.latLng.lat, item.latLng.lng], {icon: stopIcon}).addTo(map).bindPopup(item.name);
But I am getting 2 markers 1 is default and second is my custom icon. You can see in my screen-shot one is default(blue marker) and custom icon(stop image)
So I want to replace default (blue marker) with my custom and remove the default marker. Thanks.
you can use this code :
L.Routing.control({
waypoints: [
L.latLng(36.3603179, 59.5041424),
L.latLng(36.3279067, 59.5248145)
],
routeWhileDragging: true,
lineOptions: {
styles: [{ color: 'green', opacity: 1, weight: 5 }]
},
createMarker: function (i: number, waypoint: any, n: number) {
const marker = L.marker(waypoint.latLng, {
draggable: true,
bounceOnAdd: false,
bounceOnAddOptions: {
duration: 1000,
height: 800,
function() {
(bindPopup(myPopup).openOn(map))
}
},
icon: L.icon({
iconUrl: './assets/global/img/mapmarker-red.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
shadowUrl: './assets/global/img/marker-shadow.png',
shadowSize: [68, 95],
shadowAnchor: [22, 94]
})
});
return marker;
}
}).addTo(map);
Finally, I found a solution.
Added property
createMarker: function() { return null; },
I have an automatic weather station that collects four different types of data for precipitation:
On/Off for precipitation event
total volume over time period in mm
intensity mm/hour and
precipitation type
i.e.:
0 No precipitation
40 Precipitation present
51 Light drizzle
52 Moderate drizzle
53 Heavy drizzle
Stacked bars can manage volume by precipitation type over time.
I would like to graph intensity by type by time. I think changing marker colours based on type is an answer to this. Is there a better solution please?
One suggestion based on your requirements could be a combination bar and line chart, using dual axes (as Grzegorz Blachliński mentioned).
As you noted, stacked bars would be helpful for showing comparative volume of each precipitation type. You could then overlay lines to show the intensity of each type over time.
I would suggest choosing colors that the user can easily relate to each precipitation type, especially between the two chart types.
Here's a rough draft I coded based on one of the demo charts from the Highcharts website:
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Precipitation'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: [{
min: 0,
title: {
text: 'Preipitation volume (mm)'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},{
min: 0,
title: {
text: 'Preipitation intensity (mm/hr)'
},
opposite: true
}],
legend: {
//align: 'bottom',
//x: -30,
//verticalAlign: 'bottom',
//y: 25,
//floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
series: [{
name: 'rain',
data: [5, 3, 4, 7, 2],
color: '#b3b3ff'
}, {
name: 'sleet',
data: [2, 2, 3, 2, 1],
color: '#d9b3ff'
}, {
name: 'snow',
data: [3, 4, 4, 2, 5],
color: '#c2c2f0'
},{
name: 'rain intensity',
data: [5, 3, 4, 7, 2],
color: 'blue',
type: 'line',
yAxis: 1
}, {
name: 'sleet intensity',
data: [2, 2, 3, 2, 1],
color: 'purple',
type: 'line',
yAxis: 1
}, {
name: 'snow intensity',
data: [3, 4, 4, 2, 5],
color: 'indigo',
type: 'line',
yAxis: 1
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
If you like, you're also welcome to work from this code at the fiddle I created here: http://jsfiddle.net/brightmatrix/kbk53n43/
I hope this is helpful for you.