I am implementing graphs in materializecss using canvasJS but the text and image is fuzzy and blurry Here is the code which I have taken from the official website of canvasjs
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2", // "light1", "light2", "dark1", "dark2"
title:{
text: "Top Oil Reserves"
},
axisY: {
title: "Reserves(MMbbl)"
},
data: [{
type: "column",
showInLegend: true,
legendMarkerColor: "grey",
legendText: "MMbbl = one million barrels",
dataPoints: [
{ y: 300878, label: "Venezuela" },
{ y: 266455, label: "Saudi" },
{ y: 169709, label: "Canada" },
{ y: 158400, label: "Iran" },
{ y: 142503, label: "Iraq" },
{ y: 101500, label: "Kuwait" },
{ y: 97800, label: "UAE" },
{ y: 80000, label: "Russia" }
]
}]
});
chart.render();
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>
Looks like the y axis text is pixelated. You can use titleFontFamily on axisY to use a font that renders more to your liking. In the snippet below I used verdana.
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2", // "light1", "light2", "dark1", "dark2"
title:{
text: "Top Oil Reserves"
},
axisY: {
title: "Reserves(MMbbl)",
titleFontFamily: "verdana"
},
data: [{
type: "column",
showInLegend: true,
legendMarkerColor: "grey",
legendText: "MMbbl = one million barrels",
dataPoints: [
{ y: 300878, label: "Venezuela" },
{ y: 266455, label: "Saudi" },
{ y: 169709, label: "Canada" },
{ y: 158400, label: "Iran" },
{ y: 142503, label: "Iraq" },
{ y: 101500, label: "Kuwait" },
{ y: 97800, label: "UAE" },
{ y: 80000, label: "Russia" }
]
}]
});
chart.render();
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
Related
Here's an issue I have been battling for a long time.
I found a Javascript gridview table that I installed on my server, it's currently being populated with a JSON file. However, I'm trying to populate it with my parse database, possible with PHP.
Is this even possible with Javascript?
<body>
<div style="margin-left:20px;margin-top:100px">
<table width="100%"id="jqGrid"></table>
<div style="margin-left:150px;margin-top:100px;padding-
bottom:110px;"="jqGridPager"></div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#jqGrid").jqGrid({
url:
'http://trirand.com/blog/phpjqgrid/examples/jsonp/getjsonp.php?c
allback=?&qwery=longorders',
mtype: "GET",
styleUI : 'Bootstrap',
datatype: "jsonp",
colModel: [
{ label: 'OrderID', name: 'OrderID', key: true, width: 75 },
{ label: 'Customer ID', name: 'CustomerID', width: 150 },
{ label: 'Order Date', name: 'OrderDate', width: 150 },
{ label: 'Freight', name: 'Freight', width: 150 },
{ label:'Ship Name', name: 'ShipName', width: 150 }
],
viewrecords: true,
height: 250,
rowNum: 20,
pager: "#jqGridPager"
});
});
</script>
<body>
I am trying to pull data from mysql and display on highchart bar graph, but I am not sure where my code is incorrect. The result is a blank page.
The code could not be wrong as I have taken it from the index.html file that highchart provides, but it doesn't work for some reason. Could anyone check and let me knpw where I am making any error?
<!DOCTYPE HTML><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/modules/exporting.js"></script>
<?php
$host="localhost";
$username="root";
$password="";
$db="isat";
// Create connection
$con = mysqli_connect($host,$username,$password,$db) or die("Error Message: <br>". mysqli_error($con));
$data=array();
$query= "SELECT standard FROM domainlist";
$result=mysqli_query($con,$query);
while($row=mysqli_fetch_assoc($result)){
$data[]=$row['standard'];
}
?>
<script type="text/javascript">
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: [<?php echo join($data, ','); ?>]
},
series: [{
data: [],
pointStart: 0,
pointInterval
}]
}); $(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Compliance'
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});}); </script></head>
<body><div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div></body></html>
I've created a column chart from data I've retrieved from mysql.
The data are two series of data.
Chart is working.
However in the resulting graph I would like to give the series a different pointWidth.
PHP script for retrieving the Mysql data:
<?php
$con = mysql_connect("localhost","xxxx","xxxx");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("pvdag", $con);
$query = mysql_query("SELECT maand, OpbrengstPV, OpbrengstTheor FROM maandgegevens where YEAR(periode) = 2013");
$category = array();
$category['name'] = 'maand';
$series1 = array();
$series1['name'] = 'OpbrengstPV';
$series2 = array();
$series2['name'] = 'OpbrengstTheor';
while($r = mysql_fetch_array($query)) {
$category['data'][] = $r['maand'];
$series1['data'][] = $r['OpbrengstPV'];
$series2['data'][] = $r['OpbrengstTheor'];
}
$result = array();
array_push($result,$category);
array_push($result,$series1);
array_push($result,$series2);
print json_encode($result, JSON_NUMERIC_CHECK);
mysql_close($con);
?>
script for generating the graph:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>maandopbrengsten</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// First, let's make the colors transparent
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
return Highcharts.Color(color)
.setOpacity(0.5)
.get('rgba');
});
var options = {
chart: {
renderTo: 'container',
type: 'column',
marginRight: 130,
marginBottom: 70
},
title: {
text: 'maandopbrengsten 2013',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'opbrengst kWh'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'top',
verticalAlign: 'top',
x: 100,
y: 0,
borderWidth: 3
},
plotOptions: {
column: {
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
},
grouping: false,
shadow: false
}
},
series: []
}
$.getJSON("data.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
chart = new Highcharts.Chart(options);
});
});
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 400px; width: 75%; height: 400px; margin: 0 auto"></div>
</body>
</html>
You can set pointWidth on particular serie, not in plotOptions, like in the example:
series: [{
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
pointWidth: 50,
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
}]
http://jsfiddle.net/bwbF7/1/
I am using MVC for Entity Framework & developing aa application & I want to upload data from database to show it into highchart's column-drilldown chart ?
My Code For Binding is as below:
$result = mysql_query("select s.id, s.stage_name as stage, coalesce(sum(o.potential) * (s.stage_weight / 100),0) as w_pot FROM s_stages as s
left join opps as o
WHERE o.buy_stage = s.id");
$model["chart"]=array();
while($row = mysql_fetch_array($result)){
array_push($model["chart"],
array(
"id"=>$row["s.id"],
"name"=>$row["stage"],
"w_pot"=>$row["w_pot"]
));
}
and in view I have written code as below with its script code:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" class="span6" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
var colors = Highcharts.getOptions().colors,
categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
name = 'Browser brands',
data = [{
y: 55.11,
color: colors[0],
drilldown: {
name: 'MSIE versions',
categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
data: [10.85, 7.35, 33.06, 2.81],
color: colors[0]
}
}, {
y: 21.63,
color: colors[1],
drilldown: {
name: 'Firefox versions',
categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
data: [0.20, 0.83, 1.58, 13.12, 5.43],
color: colors[1]
}
}, {
y: 11.94,
color: colors[2],
drilldown: {
name: 'Chrome versions',
categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0',
'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'],
data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22],
color: colors[2]
}
}, {
y: 7.15,
color: colors[3],
drilldown: {
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 4.1'],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
color: colors[3]
}
}, {
y: 2.14,
color: colors[4],
drilldown: {
name: 'Opera versions',
categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'],
data: [ 0.12, 0.37, 1.65],
color: colors[4]
}
}];
function setChart(name, categories, data, color) {
chart.xAxis[0].setCategories(categories, false);
chart.series[0].remove(false);
chart.addSeries({
name: name,
data: data,
color: color || 'white'
}, false);
chart.redraw();
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Browser market share, April, 2011'
},
subtitle: {
text: 'Click the columns to view versions. Click again to view brands.'
},
xAxis: {
categories:
},
yAxis: {
title: {
text: ''
}
},
plotOptions: {
column: {
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
} else { // restore
setChart(name, categories, data);
}
}
}
},
dataLabels: {
enabled: true,
color: colors[0],
style: {
fontWeight: 'bold'
},
formatter: function() {
return this.y +'%';
}
}
}
},
tooltip: {
formatter: function() {
var point = this.point,
s = this.x +':<b>'+ this.y +'% market share</b><br/>';
if (point.drilldown) {
s += 'Click to view '+ point.category +' versions';
} else {
s += 'Click to return to browser brands';
}
return s;
}
},
series: [{
name: name,
data: data,
color: 'white'
}],
exporting: {
enabled: false
}
});
});
});
</script>
Try like this:
<html>
<head>
<title>Graph</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<?php
$result = mysql_query("select s.id, s.stage_name as stage, coalesce(sum(o.potential) * (s.stage_weight / 100),0) as w_pot FROM s_stages as s
left join opps as o
WHERE o.buy_stage = s.id");
$stagearray=array();
$wt_arr=array();
while($row = mysql_fetch_array($result)){
$sname="'".$row["stage"]."'";
array_push($stagearray,$sname);
array_push($wt_arr,$row["w_pot"]);
}
$categories=implode(",",$stagearray);
$ponts_str=implode(",",$wt_arr);
?>
<div id="container" class="span6" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Stages'
},
subtitle: {
text: ''
},
xAxis: {
categories: [<?php echo $categories;?>]
},
yAxis: {
min: 0,
title: {
text: 'Points'
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
shadow: true
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' mm';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Stages',
data: [<?php echo $ponts_str;?>]
}]
});
});
});
</script>
</body>
</html>
click here for jsfiddle highchart link: Column - Bar High Chart
this code is the actual code of the Column bar highchart, is there a way to make its graph base on php varible.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type='text/javascript' src='js/jquery.min.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
]
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
shadow: true
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' mm';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [100, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: 'New York',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
}, {
name: 'London',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}, {
name: 'Berlin',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}]
});
});
});
//]]>
</script>
</head>
<body>
<script src="js/highcharts.js"></script>
<script src="js/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Question
is this possible "
[100, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]"
to became
[<?php $newval1.",".$newval2.",".$newval3.",".$newval4.",".$newval5.",".$newval6.",".$newval7.",".$newval8.",".$newval9.",".$newval10.",".$newval11.",".$newval12 ?>]
so that the value are from php variables, correct me.. thanks
make a string of this in PHP something like this:
<?php
$newval1 = "100";
$newval2 = "250";
..... // Your variables
// Now pass the values to make the string
$str = "[$newval1, $newval2, $newval3, $newval4, $newval5, $newval6, $newval7]";
?>
and apply in javascript like :
data: <?php echo $str; ?>
It is possible but you have to do:
[<?php echo $newval1.",".$newval2.",".$newval3.",".$newval4.",".$newval5.",".$newval6.",".$newval7.",".$newval8.",".$newval9.",".$newval10.",".$newval11.",".$newval12; ?>]
this is the exact same as you have now except you forgot the added echo.