Related
I am new to Stackoverflow and google charts.
I am facing a problem in one of my project which uses google charts api, I am drawing two legends but they are overlapping on preview.
I tried various solution on stackoverflow and jsfiddle but none of them worked.
Here are some of my code snippet and output:
Configuration Object for Chart :
var options = {
hAxis : {
title : xAxis,
textStyle:{
color: 'black',
fontSize : '8px'
},
slantedText : true,
slantedTextAngle : 90,
titleTextStyle : {
fontSize : '15px',
italic : false
},
},
vAxis : {
title : yAxis,
format:format,
textStyle:{
color: 'black',
fontSize : '8px'
},
titleTextStyle : {
fontSize : '15px',
italic : false
},
viewWindowMode : 'explicit',
viewWindow : {
min : 0,
//max: 1200000
}
},
backgroundColor : 'transparent',
interpolateNulls: false,
width : 350,
height : 180,
chartArea : {
left : 40,
width : '45%',
height : '45%'
},
legend: {
position: 'top',
maxLines: 3,
},
series : {
0 : {
color : line1Color,
visibleInLegend : true,
pointShape: 'square',
pointSize: 10,
},
1 : {
color : line2Color,
visibleInLegend : true,
pointShape: 'diamond',
pointSize: 10,
}
}
};
Output:
https://snag.gy/Yd2qjX.jpg
unfortunately, there isn't an option for forcing multiple lines on the legend
I could never get the legends to overlap as in the screen shot,
instead each would be cutoff, with '...' at the end
but the only way I could get the legend text to drop to another line and not cutoff,
was by increasing the width by a rediculous amout
needed to adjust chartArea.width as well
so you might be able to continue to adjust both width and chartArea.width,
until you get the desired result
one other note, anytime you use fontSize in the chart options,
it should be a number, instead of a string, i.e.
fontSize : 8
vs.
fontSize : '8px'
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Month', 'Tool - Long title could not read', 'Tool - Something to Prod Start'],
[new Date('08/01/2015'), 0.2, 0.0],
[new Date('09/01/2015'), 0.8, 0.0],
[new Date('10/01/2015'), 1.0, 2.2],
[new Date('11/01/2015'), 1.3, 1.2],
[new Date('12/01/2015'), 1.8, 1.4],
[new Date('01/01/2016'), 2.4, 1.5],
[new Date('02/01/2016'), 2.5, 1.4],
[new Date('03/01/2016'), 2.6, 1.5],
[new Date('04/01/2016'), 2.5, 1.5],
[new Date('05/01/2016'), 2.4, 1.6],
[new Date('06/01/2016'), 2.3, 1.6],
[new Date('07/01/2016'), 2.2, 1.5]
]);
var options = {
hAxis : {
title : 'xAxis',
format: 'MMM-yy',
textStyle:{
color: 'black',
fontSize : 8
},
slantedText : true,
slantedTextAngle : 90,
titleTextStyle : {
fontSize : 15,
italic : false
},
},
vAxis : {
title : 'yAxis',
format: '#,##0.0',
textStyle:{
color: 'black',
fontSize : 8
},
titleTextStyle : {
fontSize : 15,
italic : false
},
viewWindowMode : 'explicit',
viewWindow : {
min : 0
}
},
backgroundColor : 'transparent',
interpolateNulls: false,
width : 780,
height : 180,
chartArea : {
left : 40,
width : 310,
height : '45%'
},
legend: {
position: 'top',
maxLines: 3
},
series : {
0 : {
color : '#154360',
visibleInLegend : true,
pointShape: 'square',
pointSize: 10,
},
1 : {
color : '#5499C7',
visibleInLegend : true,
pointShape: 'diamond',
pointSize: 10,
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I know this questions has been asked but the op didn't provide any code and I can't edit his answer obviously, so I'll start a new one. My objective is to replace the dot with a custom drop-pin marker that I will eventually have some other action for it. So as a kicker, such action must be identified somehow (perhaps and id) so that I can call it from jQuery, CSS, or javascript and give it some use.
Background:
I extracted the map of Pennsylvania from jVectorMaps and the code from the section that explains how to use marker images from this link marker-icons.
This is the original code:
$(function(){
var plants = [
{name: 'KKG', coords: [49.9841308, 10.1846373], status: 'activeUntil2018'},
{name: 'KKK', coords: [53.4104656, 10.4091597], status: 'closed'},
{name: 'KWG', coords: [52.0348748, 9.4097793], status: 'activeUntil2022'},
{name: 'KBR', coords: [53.850666, 9.3457603], status: 'closed', offsets: [0, 5]}
];
new jvm.Map({
container: $('#map'),
map: 'de_merc',
markers: plants.map(function(h){ return {name: h.name, latLng: h.coords} }),
labels: {
markers: {
render: function(index){
return plants[index].name;
},
offsets: function(index){
var offset = plants[index]['offsets'] || [0, 0];
return [offset[0] - 7, offset[1] + 3];
}
}
},
series: {
markers: [{
attribute: 'image',
scale: {
'closed': '/img/icon-np-3.png',
'activeUntil2018': '/img/icon-np-2.png',
'activeUntil2022': '/img/icon-np-1.png'
},
values: plants.reduce(function(p, c, i){ p[i] = c.status; return p }, {}),
legend: {
horizontal: true,
title: 'Nuclear power station status',
labelRender: function(v){
return {
closed: 'Closed',
activeUntil2018: 'Scheduled for shut down<br> before 2018',
activeUntil2022: 'Scheduled for shut down<br> before 2022'
}[v];
}
}
}]
}
});
});
And this is my version which it does display the map, it does display the location, but only as a dot, not the marker. (See screenshot below) p.s. I don't care about the legend. I'm doing something else for that.
My code:
//------------- Vector maps -------------//
var prison = [
{name: 'Albion', coords: [41.890611, -80.366454], status: 'active', offsets: [0, 2]}
];
$('#pa-map').vectorMap({
map: 'us-pa_lcc_en',
scaleColors: ['#f7f9fe', '#29b6d8'],
normalizeFunction: 'polynomial',
hoverOpacity: 0.7,
hoverColor: false,
backgroundColor: '#fff',
regionStyle:{
initial: {
fill: '#dde1e7',
"fill-opacity": 1,
stroke: '#f7f9fe',
"stroke-width": 0,
"stroke-opacity": 0
},
hover: {
"fill-opacity": 0.8
},
selected: {
fill: 'yellow'
}
},
markers: prison.map(function(h){ return {name: h.name, latLng: h.coords} }),
labels: {
markers: {
render: function(index){
return prison[index].name;
},
offsets: function(index){
var offset = prison[index]['offsets'] || [0, 0];
return [offset[0] - 7, offset[1] + 3];
}
}
},
series: {
markers: [{
attribute: 'image',
scale: { 'active': '/img/map-marker-icon.png'},
values: prison.reduce(function(p, c, i){ p[i] = c.status; return p }, {}),
}]
}
});
My HTML:
<div id="pa-map" style="width: 100%; height: 470px"></div>
My CSS:
Irrelevant. I'll design accordingly later.
Thank you in advance!
To change dot to custom marker DEMO
If you read there source code they have option for initializing markerStyle in jvm.Map.defaultParam and for markerStyle you can define it as image or fill (switch case is used here) i think in jvm.Legend.prototype.render
They also has Some Event
jvm.Map.apiEvents = {
onRegionTipShow: "regionTipShow",
onRegionOver: "regionOver",
onRegionOut: "regionOut",
onRegionClick: "regionClick",
onRegionSelected: "regionSelected",
onMarkerTipShow: "markerTipShow",
onMarkerOver: "markerOver",
onMarkerOut: "markerOut",
onMarkerClick: "markerClick",
onMarkerSelected: "markerSelected",
onViewportChange: "viewportChange"
}
So here the code UPDATE you can also attach your function to onMarkerClick option
function doWhatever(event, code, obj) {
alert("Hello");
console.log(event);
}
var prison = [{
name: 'Albion',
coords: [41.890611, -80.366454],
status: 'active',
offsets: [0, 2]
}];
var ab = $('#pa-map').vectorMap({
map: 'us-pa_lcc_en',
scaleColors: ['#f7f9fe', '#29b6d8'],
normalizeFunction: 'polynomial',
hoverOpacity: 0.7,
hoverColor: false,
backgroundColor: '#fff',
regionStyle: {
initial: {
fill: '#dde1e7',
"fill-opacity": 1,
stroke: '#f7f9fe',
"stroke-width": 0,
"stroke-opacity": 0
},
hover: {
"fill-opacity": 0.8
},
selected: {
fill: 'yellow'
}
},
markers: prison.map(function(h) {
return {
name: h.name,
latLng: h.coords
}
}),
labels: {
markers: {
render: function(index) {
return prison[index].name;
},
offsets: function(index) {
var offset = prison[index]['offsets'] || [0, 0];
return [offset[0] - 7, offset[1] + 3];
}
}
},
markersSelectable: true,
markerStyle: {
initial: {
image: "http://jvectormap.com/img/icon-np-2.png",
},
},
onMarkerClick: function(event, code) {
doWhatever(event, code, this);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="http://jvectormap.com/css/jquery-jvectormap-2.0.3.css" rel="stylesheet" />
<script src="http://jvectormap.com/js/jquery-jvectormap-2.0.3.min.js"></script>
<script src="https://raw.githubusercontent.com/bjornd/jvectormap/master/tests/assets/us/jquery-jvectormap-data-us-pa-lcc-en.js"></script>
<div id="pa-map" style="width: 100%; height: 470px"></div>
I am currently working with a jvectormap. Each county has a data-code (example: 48201). Here is my code for the counties that I have colored so far...
jvm.Map.maps = {};
jvm.Map.defaultParams = {
map: 'us_lcc_en',series: {
regions: [{
values: {
/* --------------- Active Franchise --------------- */
'42029':'#eb2e4d',
'42091':'#eb2e4d',
'42101':'#eb2e4d',
'42045':'#eb2e4d',
'42017':'#eb2e4d',
'42077':'#eb2e4d',
'42095':'#eb2e4d',
'48085':'#eb2e4d',
'48113':'#eb2e4d',
'48439':'#eb2e4d',
'48121':'#eb2e4d',
/* --------------- Available Franchise --------------- */
'42129':'#5d9eec',
'42007':'#5d9eec',
'42125':'#5d9eec',
'42019':'#5d9eec',
'42003':'#5d9eec',
'13067':'#5d9eec',
'13121':'#5d9eec',
'13057':'#5d9eec',
'13135':'#5d9eec',
'13089':'#5d9eec',
'13063':'#5d9eec',
'13151':'#5d9eec',
'13297':'#5d9eec',
'13117':'#5d9eec',
'48339':'#5d9eec',
'48201':'#5d9eec',
'48157':'#5d9eec',
'48167':'#5d9eec',
'48039':'#5d9eec',
'48029':'#5d9eec',
'48187':'#5d9eec',
'48091':'#5d9eec',
'04013':'#5d9eec',
'09003':'#5d9eec',
'09013':'#5d9eec',
'09001':'#5d9eec',
'09009':'#5d9eec',
'09007':'#5d9eec',
'09005':'#5d9eec',
/* --------------- Pending Franchise --------------- */
'48491':'#83a85d',
'48453':'#83a85d',
'48209':'#83a85d',
},
attribute:'fill',
"stroke-width": 4
}]
},
backgroundColor: '#ffffff',
zoomButtons: true,
zoomOnScroll: false,
panOnDrag: true,
zoomMax: 8,
zoomMin: 1,
zoomStep: 1.6,
zoomAnimate: true,
regionsSelectable: false,
markersSelectable: false,
bindTouchEvents: true,
regionStyle: {
initial: {
fill: 'rgb(204, 204, 204)',
"fill-opacity": 1,
stroke: 'rgb(204, 204, 204)',
"stroke-width": 0,
"stroke-opacity": 1,
},
hover: {
"fill-opacity": 0.7,
cursor: 'pointer'
},
selected: {
fill: 'yellow'
},
selectedHover: {
}
},
regionLabelStyle: {
initial: {
'font-family': 'Verdana',
'font-size': '12',
'font-weight': 'bold',
cursor: 'default',
fill: 'black',
},
hover: {
cursor: 'pointer'
}
},
markerStyle: {
initial: {
fill: 'grey',
stroke: '#505050',
"fill-opacity": 1,
"stroke-width": 1,
"stroke-opacity": 1,
r: 5
},
hover: {
stroke: 'black',
"stroke-width": 2,
cursor: 'pointer'
},
selected: {
fill: 'blue'
},
selectedHover: {
}
},
markerLabelStyle: {
initial: {
'font-family': 'Verdana',
'font-size': '12',
'font-weight': 'bold',
cursor: 'default',
fill: 'black'
},
hover: {
cursor: 'pointer'
}
}
};
jvm.Map.apiEvents = {
onRegionTipShow: 'regionTipShow',
onRegionOver: 'regionOver',
onRegionOut: 'regionOut',
onRegionClick: 'regionClick',
onRegionSelected: 'regionSelected',
onMarkerTipShow: 'markerTipShow',
onMarkerOver: 'markerOver',
onMarkerOut: 'markerOut',
onMarkerClick: 'markerClick',
onMarkerSelected: 'markerSelected',
onViewportChange: 'viewportChange'
};
As you can see at the bottom...the attribute is set to 'fill'. I also want to add 'stroke'. How do I go about adding that second attribute?
Attributes in a javaScript object are separated by commas. Suppose you wanted to add a stroke-width attribute:
In this case, you would change the tail end, near the bottom, to look something like this:
'48491':'#83a85d',
'48453':'#83a85d',
'48209':'#83a85d',
},
attribute: 'fill',
stroke-width: 4
}]
},
Which should make you happy. Though, as an aside, stroke-width will actually be the third attribute of 'regions': you'll note that values is written in the form of "values: {...}," -- it's an attribute too!
I'm using highCharts, and creating a highChart in fancybox. I want animation off in highCharts. but when I set 'animation: false' the bars in the charts disappears
I don't know what's the problem I've tried many things, if I create highChart without fancybox it creates ok, but fancybox is the requirement. below is my code createHighChart() function create HighChart from the settings that user would set on the page.
$.fancybox.open({
'href' : '#container',
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
prevEffect : 'none',
nextEffect : 'none',
afterShow: function(){
for(var i=0; i<10000; i++);
createHighChart();
$("#container").show();
}
});
and createHighChart function:
function createHighChart() {
var xData = getXdata();
var yAxisData = getYAxisData();
var t = getInt("threshold_id");
var type = getType();
var backColors = getBackgroundColor();
var isAreaOrLineChart = false;
var customColors = false;
var customPlotOptions = Highcharts.getOptions().plotOptions;
/*uncomment following two lines to provide your custom
* colors (an array of colors) for the bars in bar chart*/
/*customColors = true;
customPlotOptions.column.colors = customPlotOptions.bar.colors =
['#FF0000', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572'];*/
/***************************change font style****************************/
/*Highcharts.setOptions({
chart: {
style: {
fontSize: '25px',
fontWeight: 'bold',
fontFamily: 'serif',
}
}
});*/
if(type == "pie") {
createPieChart();
return;
}
if(type == "line" || type == "area") {
isAreaOrLineChart = true;
}
/******************Bar chart specific settings************************/
var barColor = getStr("barcolor_id");
var isMultiColor = false;
if(barColor == "multicolor") {
barColor = null;
isMultiColor = true;
}
else if(barColor == "") {
barColor = null;
}
if(isStacking() == "normal"){
barColor = isMultiColor = null;
}
var isGrouping = true;
if(getStr("barlayout_id") == "overlap") {
isGrouping = false;
barColor = isMultiColor = null;
}
/******************Line chart specific settings************************/
var thickLine = 2;
if(isCheckBoxEnabled("thickline_id")){
thickLine = 5;
}
/*if(isCheckBoxEnabled("show3d_id")) {
loadjsfile();
}
else {
$("#scripto").remove();
//removejsfile();
}
*/
/*******************Creates the bar chart************************/
var chart = new Highcharts.Chart({
chart : {
//backgroundColor: getStr("chrtbkgndcolor_id"),
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
stops: [
[0, backColors[0]],
[1, backColors[1]]
]
},
renderTo : 'container',
type : type,
margin: 75,
//animation: false,
options3d: {
enabled: isCheckBoxEnabled("show3d_id") && !isAreaOrLineChart,
alpha: 10,
beta: 10,
depth: 50,
viewDistance: 25
},
borderColor: '#A9A9A9',
borderRadius: isRoundCorner(),
borderWidth: isBorder(),
width: getInt("width_id"),
height: getInt("height_id")
},
title : {
text : getStr("title_id"),
style: {
fontWeight: getFontWeight("fonttypetitle_id"),
fontStyle: getFontStyle("fonttypetitle_id")
}
},
subtitle: {
text: getStr("subtitle_id"),
style: {
fontWeight: getFontWeight("fonttypetitle_id"),
fontStyle: getFontStyle("fonttypetitle_id")
}
},
tooltip: {
enabled: isCheckBoxEnabled("tooltip_id")
},
credits: {
text: getStr("source_id"),
href: '#'
},
legend: {
enabled: isCheckBoxEnabled("legend_id"),
},
xAxis : {
title:{
text: getStr("xtitle_id"),
style: {
fontWeight: getFontWeight("fonttypetitle_id"),
fontStyle: getFontStyle("fonttypetitle_id")
}
},
categories : xData,
labels: {
rotation: getRotation(),
style: {
fontWeight: getFontWeight("fonttypelabel_id"),
fontStyle: getFontStyle("fonttypelabel_id")
}
},
/*below two lines are for x-axis line, it is not working
* due to inclusion of the 3D charts library
* (namely this line:
* <script src="http://code.highcharts.com/highcharts-3d.js"></script>)
* in the include/ChartGoLiteJSFiles.jsp */
lineWidth: 1,
lineColor: '#FF0000',
gridLineWidth: false
},
yAxis :
{
//lineWidth: 20,
min: getMinMaxY("min_yaxis_id"),
max: getMinMaxY("max_yaxis_id"),
plotLines: [{
color: '#FF0000',
width: 2,
value: t,
dashStyle: 'shortdash',
id: 'plotline-1'
}],
title : {
text : getStr("ytitle_id"),
style: {
fontWeight: getFontWeight("fonttypetitle_id"),
fontStyle: getFontStyle("fonttypetitle_id")
}
},
labels: {
style: {
fontWeight: getFontWeight("fonttypelabel_id"),
fontStyle: getFontStyle("fonttypelabel_id")
}
},
/*below two lines are for x-axis line, it is not working
* due to inclusion of the 3D charts library
* (namely this line:
* <script src="http://code.highcharts.com/highcharts-3d.js"></script>)
* in the include/ChartGoLiteJSFiles.jsp */
lineWidth: 1,
lineColor: '#FF0000',
gridLineColor: '#197F07',
gridLineWidth: isCheckBoxEnabled("gridlines_id")
},
plotOptions: {
series: {
animation: false,//this is not working right
shadow: isShadow(),
color: barColor,
//colorByPoint: isMultiColor || customColors,
stacking: isStacking(),
marker: {
enabled: isCheckBoxEnabled("shape_id")
},
lineWidth: thickLine
},
column: {
//animation: false,
colorByPoint: isMultiColor || customColors,
depth: 25,
grouping: isGrouping
},
bar: {
colorByPoint: isMultiColor || customColors,
},
},
series : yAxisData
});
chart.container.onclick = isCheckBoxEnabled("mouse_interaction_id");
if(t == 0)
chart.yAxis[0].removePlotLine('plotline-1');
}
I have created a user graph for my codeigniter project. The bar fill is set at the default. But I would like the BARS to change it so it looks like the bars on this image: http://www.riwakawebsitedesigns.com/offsite/images/userchart.PNG
I echo the data from my controller. But just would like to know how to make bars and bar-border look like the image above.
When I add these shadowSize: 0, colors: ['#9FD5F1', '#1065D2'], to the series bar it does not work.
<script type="text/javascript">
$(document).ready(function () {
var data = <?php echo $data;?>;
$.plot($("#chart-user"), [data], {
series: {
bars: {
shadowSize: 0,
show: true,
fill: true,
//fillColor: '#9FD5F1'
},
grid: {
backgroundColor: '#FFFFFF',
hoverable: true
}
}
});
});
</script>
I had to do this below to make it work added color below series
<script type="text/javascript">
$(document).ready(function () {
var data = <?php echo $data;?>;
$.plot($("#chart-user"), [data], {
series: {
color: '#1065D2',
bars: {
shadowSize: 0,
show: true,
fill: true,
},
grid: {
backgroundColor: '#FFFFFF',
hoverable: true
}
}
});
});
</script>
I finally found an answer to this. For Bars you specify the fillColor for each series. Then the global Series Colors. The Bar will be filled with the fillColor and use the Colors for the lines.
The below example is using 2 different data arrays d1 (Absent Time), d2 (Time Worked) and stacks for each bar for different time spans
E.g:
var chartOptions = {
xaxis: {
min: 0,
max: 100,
ticks: [[25, '25%'], [50, '50%'], [75, '75%'], [100, '100%']]
},
yaxis: {
ticks: [[1, 'Today'], [2, 'Yesterday'], [3, 'This Week'],[4, 'Last Week']],
position: 'right',
font: { size: 12 }
},
series: {
stack : true,
bars: {
horizontal: true,
show: true
}
},
colors: ['rgb(52,95,14)', 'rgb(108,105,19)'],
};
$.plot($('#placeHolder'), [{ data:d1, bars:{fillColor: 'rgb(194, 238, 155)', fill: 0.9}}, { data:d2, bars:{fillColor: 'rgb(241, 239, 177)', fill: 0.9}}], chartOptions);
The displayed chart