JQPlot Plugin Size - javascript

In this code I am using jqplot plugin which I took from this site http://www.jqplot.com/deploy/dist/examples/line-charts.html. What I want is to change the size of height and width. How to do this ?
My code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>JQPlot</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="js/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="js/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="js/jqplot.dateAxisRenderer.min.js"></script>
</head>
<body>
<div id="chart1" style="width:600px; height:250px;"></div>
<script type="text/javascript">
$(document).ready(function () {
var line1 = [['23-May-08', 578.55], ['20-Jun-08', 566.5], ['25-Jul-08', 480.88], ['22-Aug-08', 509.84],
['26-Sep-08', 454.13], ['24-Oct-08', 379.75], ['21-Nov-08', 303], ['26-Dec-08', 308.56],
['23-Jan-09', 299.14], ['20-Feb-09', 346.51], ['20-Mar-09', 325.99], ['24-Apr-09', 386.15]];
var line2 = [['23-May-08', 323], ['20-Jun-08', 222], ['25-Jul-08', 123], ['22-Aug-08', 43],
['26-Sep-08', 454.13], ['24-Oct-08', 379.75], ['21-Nov-08', 303], ['26-Dec-08', 544],
['23-Jan-09', 654], ['20-Feb-09', 234], ['20-Mar-09', 543], ['24-Apr-09', 323]];
var plot1 = $.jqplot('chart1', [line1, line2], {
title: 'Data Point Highlighting',
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: {
formatString: '%b %#d'
}
},
yaxis: {
tickOptions: {
formatString: '$%.2f'
}
}
},
highlighter: {
show: true,
sizeAdjust: 300
},
cursor: {
show: false
}
});
});
</script>
</body>
</html>

The size of the plot drawn depends of the dimensions of the container DIV, just change the CSS for width and height (instead of 600px and 250px).
<div id="chart1" style="width:600px; height:250px;"></div>

The width and height need to be specified for the container div itself.
Check out the source of the example.
<div id="chart1" style="height:300px; width:500px;"></div>

Related

Including image as datalabels in packedbubble chart highcharts

Trying to include an image in the datalabel of a packedbubble chart. The image is inserted into the datalabel but it wont align in the center. Sometimes it does and sometimes it does not. My approch is as :
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/highcharts.css"/>
</head>
<body bgcolor="#ffffff">
<div id="container1" style="width: 100%; height: auto; margin-right: 0 "
align="right"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="{% static 'js/lang.js'%}"></script>
<script>
var screen_name={{screen_name|safe}}
var id={{id|safe}}
var chart1=Highcharts.chart('container1', {
chart: {
type: 'packedbubble',
height:'100%'
},
title: {
text: '<p data-mlr-text>أبرز 10 مغردین</p>',
useHTML:true
},
legend: {
enabled: false
},
tooltip: {
useHTML:true,
formatter:function(){
var headerFormat=this.point.name;
var pointFormat='<br /><b>'+this.point.y+'</b>'
return [headerFormat,pointFormat]
}
},
plotOptions: {
packedbubble: {
minSize: '40',
maxSize: '80',
zMin: 0,
zMax: 5000,
layoutAlgorithm: {
splitSeries: false,
gravitationalConstant: 0.02
},
dataLabels: {
align:'center',
enabled: true,
useHTML:true,
formatter: function(){
width=this.point.marker.radius
return '<img
src="https://avatars.io/twitter/'+this.point.name+'" style="max-
width:'+width+'px;max-height:'+width+'px"></img><br />'
},
},
style: {
color: 'black',
textOutline: 'none',
fontWeight: 'normal'
}
}
},
series: [{
name: 'Top 10 Users',
data: (screen_name),
}]
});
As the size of the bubble is dynamic have included the max-height and width property of the image so that they stay inside of the bubble. But the image does not begin at the center of the circle. Its position changes everytime.
Want the image to completely fill the circle and does not go outside of the circle

Screen blank after loading highcharts-3d.js

I am using csvURL function to create a highchart. Below script works, however the moment I add highcharts-3d.js to create a 3D chart, the screen turns blank.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<!-- 2. Add the JavaScript to initialize the chart on DOM loaded -->
<body>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
Highcharts.chart('container', {
chart: {
type: 'bar',
options3d: {
enabled: true,
alpha: 15,
beta: 0,
depth: 50,
viewDistance: 25
}
},
data: {
csvURL: 'https://raw.githubusercontent.com/peoplecure/FunTravel/master/fake%20column.csv'
},
title: {
text: 'Made up Data'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontFamily: 'Arial',
fontSize: '12px'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Number of Cups'
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
}
})
});
function showValues() {
$('#alpha-value').html(chart.options.chart.options3d.alpha);
$('#beta-value').html(chart.options.chart.options3d.beta);
$('#depth-value').html(chart.options.chart.options3d.depth);
}
// Activate the sliders
$('#sliders input').on('input change', function() {
chart.options.chart.options3d[this.id] = parseFloat(this.value);
showValues();
chart.redraw(false);
});
showValues();
</script>
<!-- 3. Add the container -->
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>
I inserted this inside the head:
<script src="/https://code.highcharts.com/highcharts-3d.js"><script>
What do I have to do to create a 3D chart? Obviously, my method is not working.
By the way, sorry for the wide spaces. I'm limited to using a notepad, and the tab arrangements do not paste beautifully here.
Script tag has typos and added incorrectly. change this
<script src="/https://code.highcharts.com/highcharts-3d.js"><script>
to
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
</head>
<!-- 2. Add the JavaScript to initialize the chart on DOM loaded -->
<body>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
Highcharts.chart('container', {
chart: {
type: 'bar',
options3d: {
enabled: true,
alpha: 15,
beta: 0,
depth: 50,
viewDistance: 25
}
},
data: {
csvURL: 'https://raw.githubusercontent.com/peoplecure/FunTravel/master/fake%20column.csv'
},
title: {
text: 'Made up Data'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontFamily: 'Arial',
fontSize: '12px'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Number of Cups'
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
}
})
});
function showValues() {
$('#alpha-value').html(chart.options.chart.options3d.alpha);
$('#beta-value').html(chart.options.chart.options3d.beta);
$('#depth-value').html(chart.options.chart.options3d.depth);
}
// Activate the sliders
$('#sliders input').on('input change', function() {
chart.options.chart.options3d[this.id] = parseFloat(this.value);
showValues();
chart.redraw(false);
});
showValues();
</script>
<!-- 3. Add the container -->
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>

Google Charts Bar Background Color Not Working

All I want to do is change the background color to transparent, yet I can't even change the color at all no matter the combination of options I see anywhere in the (fantastic!...) documentation.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title></title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {
'packages': ['bar']
});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Opening Move', 'Percentage'],
["King's pawn (e4)", 44],
["Queen's pawn (d4)", 31],
["Knight to King 3 (Nf3)", 12],
["Queen's bishop pawn (c4)", 10],
['Other', 3]
]);
var options = {
title: 'Chess opening moves',
width: 900,
legend: {
position: 'none'
},
chart: {
title: 'Chess opening moves',
subtitle: 'popularity by percentage'
},
bars: 'horizontal',
axes: {
x: {
0: {
side: 'top',
label: 'Percentage'
} // Top x-axis.
}
},
bar: {
groupWidth: "90%"
}
};
var chart = new google.charts.Bar(document.getElementById('top_x_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="top_x_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
In options of course for Classic GViz:
backgroundColor: {fill:'transparent'},
This will not work if you are using Materials BETA
But the following will work for Classic and Materials
Make a <style> block at the closing tag of </head>
Add this ruleset:
rect {
fill:transparent;
}
OP is using Materials and it is documented at the Materials Bar Chart section the following:
The Material Charts are in beta. The appearance and interactivity are largely final, but many of the options available in Classic Charts are not yet available in them. You can find a list of options that are not yet supported in this issue.
Also, the way options are declared is not finalized, so you must convert your options by replacing this line:
chart.draw(data, options);
...with this:
chart.draw(data, google.charts.Bar.convertOptions(options));
In Snippet 2 one can plainly see that we can indeed make GViz chart background transparent. The core graphics are SVG, so if we want to have more control of our charts graphically, we would need to know a little SVG.
SNIPPET 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>Basic GVis ChartWrapper Setup</title>
<style>
body {background:url(http://www.koolchart.com/images/background.jpg)no-repeat; background-size:cover;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
var options = {
backgroundColor: {fill:'transparent'},
title: 'Google Visualization ChartWrapper Setup',
titleTextStyle: {
color: 'blue',
fontName: 'Arial',
fontSize: 22
},
hAxis: {
textStyle: {
color: '#993300'
},
title: 'Subjects',
titleTextStyle: {
color: '#993300',
fontName: 'Verdana',
fontSize: 22
}
},
vAxis: {
maxValue: 1000,
textStyle: {
fontName: 'Verdana',
color: '#993300'
},
title: 'A Quick Basic ChartWrapper Setup from a Remote Google Sheet Source',
titleTextStyle: {
color: 'blue',
fontName: 'Arial',
fontSize: 16
}
}
};
function drawChart() {
chart = new google.visualization.ChartWrapper();
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//Place your URL within setDataSourceUrl(...HERE...)
chart.setDataSourceUrl('https://docs.google.com/spreadsheets/d/1_ljk07nqJf_A5tM5BJyVCHTc5Uw8jxBqdCDudJJgvmA/edit#gid=1248768532');
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
chart.setChartType('LineChart');
chart.setContainerId('chart');
chart.setOptions(options);
chart.draw();
}
</script>
</head>
<body>
<header>
<details>
<summary>
<p><a href='http://embed.plnkr.co/GKvadm3yOBYHJoOjisWs/'>Snippet</a> and <a href='http://plnkr.co/edit/GKvadm3yOBYHJoOjisWs?p=info'>README.md</a> file available at: Plunker.</p>
<p><a href='https://developers.google.com/chart/interactive/docs/reference#chartwrapperobject'>ChartWrapper Reference</a>
</p>
</summary>
</details>
</header>
<section id="chart"></section>
</body>
</html>
SNIPPET 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>G04B32</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {
'packages': ['bar']
});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Opening Move', 'Percentage'],
["King's pawn (e4)", 44],
["Queen's pawn (d4)", 31],
["Knight to King 3 (Nf3)", 12],
["Queen's bishop pawn (c4)", 10],
['Other', 3]
]);
var options = {
backgroundColor: {
fill: 'transparent'
},
title: 'Chess opening moves',
width: 900,
legend: {
position: 'none'
},
chart: {
title: 'Chess opening moves',
subtitle: 'popularity by percentage'
},
backgroundColor: {
fill: 'transparent'
},
bars: 'horizontal',
axes: {
x: {
0: {
side: 'top',
label: 'Percentage'
} // Top x-axis.
}
},
bar: {
groupWidth: "90%"
}
};
var chart = new google.charts.Bar(document.getElementById('top_x_div'));
chart.draw(data, options);
};
</script>
<style>
body {
background: url(http://previews.123rf.com/images/vitalli/vitalli1401/vitalli140100012/25204290-Chessboard-background-texture-Stock-Photo.jpg)no-repeat;
background-size: cover;
}
rect {
fill: transparent;
}
</style>
</head>
<body>
<div id="top_x_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

AngularJS - Angularchart - Error has no method 'width'

when I try to use Angular-chart, I have got this error :
TypeError: Object [object Object] has no method 'width'
at e (http://localhost:8080/lib/angular/angular-charts.min.js:1:10690)
at http://localhost:8080/lib/angular/angular.js:6680:44
at nodeLinkFn (http://localhost:8080/lib/angular/angular.js:6271:13)
at compositeLinkFn (http://localhost:8080/lib/angular/angular.js:5678:15)
at nodeLinkFn (http://localhost:8080/lib/angular/angular.js:6265:24)
at compositeLinkFn (http://localhost:8080/lib/angular/angular.js:5682:15)
at compositeLinkFn (http://localhost:8080/lib/angular/angular.js:5685:13)
at compositeLinkFn (http://localhost:8080/lib/angular/angular.js:5685:13)
at publicLinkFn (http://localhost:8080/lib/angular/angular.js:5587:30)
at http://localhost:8080/lib/angular/angular.js:1306:27 <div ac-chart="chartType" ac-data="data" ac-config="config" id="chart" class="chart ng-isolate-scope">
Do you know how to fix this ? I haven't found anything helpful on internet.
Here is my code :
HTML
<!doctype html>
<html lang="en" ng-app="MYaPP">
<head>
<meta charset="utf-8">
<title>myApp</title>
<link rel="stylesheet" href="css/app.css">
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="lib/angular/angular-charts.min.js"></script>
<script src="js/app.js"></script>
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<div class="top" align="center"> Risk Proxy Manager </div>
<br></br>
<div class="plotGraph" ng-controller='plotGraph'>
<div ac-chart="chartType" ac-data="data" ac-config="config" id='chart' class='chart'></div>
</div>
</body>
</html>
App:
var myApp = angular.module('myApp', ['angularCharts']);
function plotGraph($scope){
console.log("And here is the graph part");
//Graph
$scope.data = {
series: ['Sales', 'Income', 'Expense', 'Laptops', 'Keyboards'],
data : [{
x : "Sales",
y: [100,500, 0],
tooltip:"this is tooltip"
},
{
x : "Not Sales",
y: [300, 100, 100]
},
{
x : "Tax",
y: [351]
},
{
x : "Not Tax",
y: [54, 0, 879]
}]
}
$scope.chartType = 'bar';
$scope.config = {
labels: false,
title : "Not Products",
legend : {
display:true,
position:'left'
}
}
$scope.config1 = {
labels: false,
title : "Products",
legend : {
display:true,
position:'right'
}
}
}
And the css :
.graph{
float:left;
width: 50%;
height:400px;
}
///////////////////////////////////////////////////////////////////////////////////////////////////
Thank you
Hello I had the same issue. Make sure you look at the installation instructions on here http://chinmaymk.github.io/angular-charts/ .
I solved it first by making sure my dependencies were loading in the correct order. This extension relies on d3 and Jquery.
This is the order it recommends
<script type='text/javascript' href='./bower_components/jquery/jquery.min.js'></script>
<script type='text/javascript' href='./bower_components/angular/angular.min.js'></script>
<script type='text/javascript' href='./bower_components/d3/d3.min.js'></script>
<script type='text/javascript' href='./bower_components/angular-charts/dist/angular-charts.min.js'></script>
After I fixed this the next error I got was...
Error: Please set height and width for the chart element
It turns out in order for the height and width of the graph to be set you have to set the height and width of the chart with CSS. I found this answer through this issue on the angular-charts repo. https://github.com/chinmaymk/angular-charts/issues/12
I added this code to my css...
#chart {
height: 400px;
width: 800px;
}
And viola it worked! Hopes this helps :)
The problem has been solved, very important set
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
and
<script data-require="angular.js#1.2.2" src="http://code.angularjs.org/1.2.2/angular.js" data-semver="1.2.2"></script>
on the top!!!

Changing the width of the y-axis label area in jqplot

Ok, I've got a bar chart.
And it basically works... but the labels on the y-axis are kinda long and wrap and then run into each other.
I've tried changing the css, but it gets overidden by JS.
I tried scanning thru the jqplot library to find out where it happens but i got lost.
Any ideas? is there just an option i can set?
You can see here:
Here is my html file:
<html>
<head>
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="jqplot.barRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="jqplot.categoryAxisRenderer.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
<script>
$(function() {
graph_me('chart1',[ 'This is a label', 'This is another label..', 'Is this too long? This looks like it might break','Im not sure, but '], [40, 20, 5, 1]);
});
function graph_me(div_name, labels_in, values_in) {
var labels = labels_in.reverse();
var values = values_in.reverse();
$.jqplot(div_name, [values], {
series:[{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barDirection: 'horizontal',
varyBarColor: true
}
}
],
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: labels,
tickOptions: {
showGridline: false,
markSize: 0
}
}
}
});
}
</script>
</head>
<body>
<div id="chart1" style="height:400px;width:500px; margin: 0 auto;"></div>
</body>
</html>
You could try this in your css:
.jqplot-yaxis {
margin-left:-80px !important;
width:80px !important;
}

Categories