Can I please have some help to display text on the YAxis to be displayed vertically in a JQPlot. Here is my current code:
{
label: 'Rating',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
}
Import these two scripts required by the label renderer
<script type="text/javascript" src="../src/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
Related
So I am using ChartJS alongside a Bootstrap 4 and Laravel Project.
The code is fine(see below). Every time I refresh the page, the chart shows up for like a millisecond and goes away.
<div class="col-md-6">
<div>
<canvas id="pie-chart" style="width:100%;"></canvas>
<!-- Pie Chart -->
<script>
new Chart(document.getElementById("pie-chart"), {
type: 'pie',
data: {
labels: ["College Project", "Mind Map", "Designers Club"],
datasets: [{
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f"],
data: [2478,5267,734]
}]
},
options: {
title: {
display: true,
text: 'Tasks Division'
}
}
});
</script>
</div>
</div>
I had the same issue.
The problem was from the defer loading of the app.js in the layout.
<script src="{{ asset('js/app.js') }}" defer></script>
It was loading after my and a Vue instanciation was created. I think this is why the chart was disappearing.
I hope it helps someone.
The solution which was working for me:
Remove async and defer from app.js
<script async src="{{ asset('js/app.js') }}" defer></script>
I wonder if it's possible to specify a delay of starting the animation in Easy Pie Chart?
I added the delay parameter but it does not seem to work.
<div class="chart" data-percent="73" data-scale-color="#ffb400"></div>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- Easy Pie Chart -->
<script src="js/jquery.easypiechart.js"></script>
<script>
$(function() {
$('.chart').easyPieChart({
delay: 3000,
barColor:'#f64c72'
});
});
</script>
I solved this problem myself as follows:
<script>
$(function() {
setTimeout(drawBox1, 6200);
});
function drawBox1(){
$('.chart').easyPieChart({
barColor:'#f64c72',
lineWidth:20
});
};
</script>
I am trying to show two spark line graphs using jQuery Sparklines but for some reason i only shows me one, this is my code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="jquery.sparkline.min.js"></script>
</head>
<body>
<div id="graphs">
<span id="sparkline"></span>
<br>
<span id="sparkline2>"></span>
</div>
</body>
<script>
$("#sparkline").sparkline([74.82290216,
74.82290216,
48.70129726,
70.77921869,
72.07791995,
69.15584211,
74.05548778,
76.91853079,
70.24792886,
80.34237956], {
type: 'line',
width: '100',
height: '50'
});
$("#sparkline2").sparkline([74.82290216,
74.82290216,
48.70129726,
70.77921869,
72.07791995,
69.15584211,
74.05548778,
76.91853079,
70.24792886,
80.34237956], {
type: 'line',
width: '100',
height: '50'
});
</script>
</html>
As you can see i have two spans with two different id's and still i get only the first one.
I even tried to load to the same span but it makes no difference.
Thanks
I have a line chart created in Google Charts API, Now I want to change the LIne Colour and body colour differently,But when i created a chart i can see line and body colour same , please can any one let me know how to change the colours using google API
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['',''],
['',27],
['',25],
['',60],
['',31],
['',25],
['',39],
['',25],
['',31],
['',26],
['',28],
['',80],
['',28],
['',27],
['',31],
['',27],
['',29],
['',26],
['',35],
['',70],
['',25]
]);
var options = {
backgroundColor: {
stroke: '#4322c0',
strokeWidth: 3},
'is3D':true,
series: {0:{color:'#DF013A',lineWidth:2}},
colors:['#D8D8D8'],
backgroundColor: "transparent",
legend: {position: 'none'}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 300px; height: 300px;"></div>
</body>
</html>
<body>
<div id="chart_div"></div>
</body>
</html>
Please refer the below developer documentation to change the line series color and the background color:
Line series color
BG color
I have this google visualization and I would like to maki it full screen on my browser window: http://cl.ly/image/1y0U1m1o2m0m
The code is:
<html>
<head>
<meta charset="utf-8">
<title>
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.2");
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var a = <?=$elos?>;
var data = google.visualization.arrayToDataTable(a);
var options = {
title: 'blah blah blah',
//curveType: "function",
width: $(window).width(),
height: $(window).height(),
vAxis: {
minValue:800,
maxValue:2000,
textStyle: {color: 'black'}
},
legend:{position: 'none'}
};
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="visualization"></div>
</body>
</html>
Even though it is set to window size and it creates a rect for the size of the window there is a lot of free space around the chart
To make chart be full page size:
chartArea: {width: '90%', height: '90%'}