Related
I am working on a report and it is very static. I was asked to change some of the numbers into a pie-chart or cool graph. So been looking at canvasjs but cannot figure it out.
The code I work with simple
<tr><td><?php echo __( 'Average Pagespeed', 'mainwp-pro-reports-extension' ); ?></td><td>[pagespeed.average.desktop] / 100</td></tr>
[/remove-if-empty]
The output is very basic
Average Pagespeed 39 / 100
I want to learn how to transform this into a pie-chart and spice it up a little. If just know how it fits together, I can figure this out for the other values I think.
Can someone guide me?
This is my attempt : I am new to coding as you can see
<tr><td><?php echo __( 'Average Pagespeed', 'mainwp-pro-reports-extension' ); ?></td><td>[pagespeed.average.desktop] / 100</td></tr>
<?php
$dataPoints = array(
array("label"=>"Speed", "y"=>[pagespeed.average.desktop]),
array("label"=>"Optimal", "y"=>100),
)
?>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title: {
text: "Page Speed"
},
subtitles: [{
text: "November 2017"
}],
data: [{
type: "pie",
yValueFormatString: "#,##0.00\"%\"",
indexLabel: "{label} ({y})",
dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
}]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
[/remove-if-empty]
Good day!
My code doesn't display the chart.
I am trying to plot my json data into a google material line chart to output a chart like these:
here's my javascript code:
google.charts.load('current', {'packages': ['line', 'corechart', 'bar','controls', 'table']});
google.charts.setOnLoadCallback(drawChartCountry);
function drawChartCountry() {
var jsonData1 = $.ajax({
url: "analytics/country-sales.php",
dataType: "json",
async: false
}).responseText;
var data1 = new google.visualization.DataTable(jsonData1);
var options = {
title: 'Top 20 Countries with the highest sales',
pointSize: 5
};
var formatter_amount1 = new google.visualization.NumberFormat({prefix: 'HKD ', negativeColor: 'red', negativeParens: true});
// formatter_amount1.format(data1, 1);
var chart = new google.visualization.LineChart(document.getElementById('chart_div_country'));
chart.draw(data1, options);
}
and here's my json data
{"cols":[[[{"label":"Date","type":"string"},{"label":"TAIWAN","type":"string"},{"label":"HONG KONG","type":"string"},{"label":"JAPAN","type":"string"},{"label":"INDONESIA","type":"string"},{"label":"THAILAND","type":"string"},{"label":"UNITED STATES","type":"string"},{"label":"PHILIPPINES","type":"string"},{"label":"UNITED KINGDOM","type":"string"},{"label":"MALAYSIA","type":"string"},{"label":"AUSTRALIA","type":"string"},{"label":"SINGAPORE","type":"string"},{"label":"SPAIN","type":"string"},{"label":"SWEDEN","type":"string"},{"label":"GERMANY","type":"string"},{"label":"VIET NAM","type":"string"},{"label":"SOUTH KOREA","type":"string"},{"label":"NORWAY","type":"string"},{"label":"FRANCE","type":"string"},{"label":"CANADA","type":"string"},{"label":"NETHERLANDS","type":"string"}]]],"rows":[{"c":[{"v":"Date(2014,1,1)"},{"v":48876},{"v":3970},{"v":2505},{"v":1824},{"v":982},{"v":676},{"v":491},{"v":387},{"v":238},{"v":173},{"v":162},{"v":108},{"v":101},{"v":98},{"v":96},{"v":91},{"v":88},{"v":84},{"v":82},{"v":72}]}]}
here's the html code (removed some elements not related to this topic)
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="analytics/sales-country.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-12 col-sm-12">
<div id='chart_div_country' style='width: 100%; height: 600px;'></div>
</div>
</div>
</body>
Can anyone help me please. Thank you.
any answer is highly appreciated.
first, the "cols" are wrapped in too many arrays
[[[]]] vs. []
{"cols":[[[{"label":"Date","type":"string"},...,{}]]],
should be...
{"cols":[{"label":"Date","type":"string"},...,{}],
next, the column type for the line series should be 'number'
and recommend 'date' for the first column
this...
"cols": [
{"label":"Date","type":"date"},
{"label":"TAIWAN","type":"number"},
{"label":"HONG KONG","type":"number"},
not this...
"cols": [
{"label":"Date","type":"string"},
{"label":"TAIWAN","type":"string"},
{"label":"HONG KONG","type":"string"},
also, if you want a Material line chart,
just need the 'line' package and...
google.charts.Line
the Core chart version is...
google.visualization.LineChart
and highly recommend not using async: false, use .done and .fail callbacks instead
see following working snippet, move code from .fail to .done to test locally...
google.charts.load("current", {
callback: drawChartCountry,
packages: ["line", "corechart"]
});
function drawChartCountry() {
$.ajax({
url: "analytics/country-sales.php",
dataType: "json"
}).done(function (jsonData) {
}).fail(function (jqXHR, textStatus) {
var jsonData = {
"cols": [
{"label":"Date","type":"date"},
{"label":"TAIWAN","type":"number"},
{"label":"HONG KONG","type":"number"},
{"label":"JAPAN","type":"number"},
{"label":"INDONESIA","type":"number"},
{"label":"THAILAND","type":"number"},
{"label":"UNITED STATES","type":"number"},
{"label":"PHILIPPINES","type":"number"},
{"label":"UNITED KINGDOM","type":"number"},
{"label":"MALAYSIA","type":"number"},
{"label":"AUSTRALIA","type":"number"},
{"label":"SINGAPORE","type":"number"},
{"label":"SPAIN","type":"number"},
{"label":"SWEDEN","type":"number"},
{"label":"GERMANY","type":"number"},
{"label":"VIET NAM","type":"number"},
{"label":"SOUTH KOREA","type":"number"},
{"label":"NORWAY","type":"number"},
{"label":"FRANCE","type":"number"},
{"label":"CANADA","type":"number"},
{"label":"NETHERLANDS","type":"number"}
],
"rows":[
{"c":[
{"v":"Date(2014,1,1)"},
{"v":48876},
{"v":3970},
{"v":2505},
{"v":1824},
{"v":982},
{"v":676},
{"v":491},
{"v":387},
{"v":238},
{"v":173},
{"v":162},
{"v":108},
{"v":101},
{"v":98},
{"v":96},
{"v":91},
{"v":88},
{"v":84},
{"v":82},
{"v":72}
]},
{"c":[
{"v":"Date(2015,1,1)"},
{"v":48876},
{"v":3970},
{"v":2505},
{"v":1824},
{"v":982},
{"v":676},
{"v":491},
{"v":387},
{"v":238},
{"v":173},
{"v":162},
{"v":108},
{"v":101},
{"v":98},
{"v":96},
{"v":91},
{"v":88},
{"v":84},
{"v":82},
{"v":72}
]}
]
};
var data = new google.visualization.DataTable(jsonData);
var options = {
title: 'Top 20 Countries with the highest sales',
pointSize: 5
};
var chart = new google.charts.Line(document.getElementById('chart_div_country'));
chart.draw(data, options);
//console.log('error', textStatus);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="row">
<div class="col-md-12 col-sm-12">
<div id='chart_div_country' style='width: 100%; height: 600px;'></div>
</div>
</div>
I am having an issue with Google Charts. I have created the exact format it shows in the example inside a PHP vaiable
['Time','Devices'],['08-12-2015 09:19:00',12],['08-12-2015 09:20:00',26],['08-12-2015 09:21:00',23],['08-12-2015 09:22:00',16],['08-12-2015 09:23:00',29],['08-12-2015 09:24:00',21],['08-12-2015 09:25:00',18],['08-12-2015 09:26:00',28],['08-12-2015 09:27:00',19],['08-12-2015 09:28:00',15],['08-12-2015 09:29:00',25],['08-12-2015 09:30:00',18],['08-12-2015 09:31:00',18],['08-12-2015 09:32:00',26],['08-12-2015 09:33:00',13],['08-12-2015 09:34:00',16],['08-12-2015 09:35:00',19],['08-12-2015 09:36:00',14],['08-12-2015 09:37:00',23],['08-12-2015 09:38:00',16],['08-12-2015 09:39:00',12],['08-12-2015 09:40:00',27],['08-12-2015 09:41:00',17],['08-12-2015 09:42:00',16],['08-12-2015 09:43:00',32],['08-12-2015 09:44:00',20],['08-12-2015 09:45:00',18],['08-12-2015 09:46:00',30],['08-12-2015 09:47:00',14],['08-12-2015 09:48:00',19],['08-12-2015 09:49:00',24],['08-12-2015 09:50:00',12],['08-12-2015 09:51:00',23],['08-12-2015 09:52:00',21],['08-12-2015 09:53:00',12],['08-12-2015 09:54:00',26],['08-12-2015 09:55:00',23],['08-12-2015 09:56:00',12],['08-12-2015 09:57:00',32],['08-12-2015 09:58:00',16],['08-12-2015 09:59:00',18],['08-12-2015 10:00:00',23],['08-12-2015 10:01:00',17],['08-12-2015 10:02:00',19],['08-12-2015 10:03:00',39],['08-12-2015 10:04:00',16],['08-12-2015 10:05:00',17],['08-12-2015 10:06:00',27],['08-12-2015 10:07:00',21],['08-12-2015 10:08:00',18],['08-12-2015 10:09:00',40],['08-12-2015 10:10:00',20],['08-12-2015 10:11:00',18],['08-12-2015 10:12:00',28],['08-12-2015 10:13:00',25],['08-12-2015 10:14:00',17],['08-12-2015 10:15:00',32],['08-12-2015 10:16:00',25],['08-12-2015 10:17:00',16],['08-12-2015 10:18:00',31]
I now want to place this inside the Chart example below but it does not work.
The variable that holds the above information is $outp. I tried to place it in but it does not work.
<html>
<head>
<script type="text/javascript"
src="https://www.google.com/jsapi?autoload={
'modules':[{
'name':'visualization',
'version':'1',
'packages':['corechart']
}]
}"></script>
<script type="text/javascript">
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
<?php echo $optp; ?>
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>
If anyone can assist please, its driving me crazy.
Thanks
Rob
I tried to use the example given in highcharts website. But when i use it all i am getting is a blank html page. Someone please help me with the code. I do not understand why the code is not loading properly please tell me if i should add something extra to this, and please do let me know how to use a php array to make this graph work also
<html>
<head>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
I believe your problem is in the order you included the scripts. Try placing jQuery first:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
Demo (working / not working).
Update: to load your data from MySQL using PHP, please see this example. However, as you pointed out yourself, encoding it using JSON might be a better option:
$data = array();
while($row = mysql_fetch_array($results)) {
$data[] = array($row[1], $row[0]);
}
echo json_encode($data);
This last echo can be used either to return the whole array using ajax (like the linked example above), or when generating the page itself (i.e. "hardcoding" it in the script):
series: [{
type: 'pie',
name: 'Browser share',
data: <?php echo json_encode($data)?>
}]
This will work since your array, when JSON encoded, can be used in place of a JavaScript literal (and the json_encode should take care of escaping everything, preventing XSS vulnerabilities).
The order of including javascripts should be:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
By this I mean, you have to include the jQuery library first before any other script.
I'm developing an application with zend framework and i'd like to add dojo framework.
I've done the following :
Bootstrap.php :
public function _initViewHelpers()
{
$this->bootstrap('layout');
$layout = $this->getResource('layout');
$view = $layout->getView();
$view->addHelperPath('Zend/Dojo/View/Helper',
'Zend_Dojo_View_Helper');
$view->dojo()->enable();
}
my layout.phtml
<?php echo $this->doctype() ?>
<html>
<head>
<?php echo $this->headTitle() ?>
<?php echo $this->headMeta() ?>
<?php echo $this->headLink() ?>
<?php echo $this->headStyle() ?>
<?php if ($this->dojo()->isEnabled()){
$this->dojo()->setLocalPath('/js/dojo/dojo.js')
->addStyleSheetModule('dijit.themes.claro');
echo $this->dojo();
}
?>
<?php echo $this->headScript() ?>
</head>
<body class="claro">
<?php echo $this->layout()->content ?>
<?php echo $this->inlineScript() ?>
</body>
finally my index.phtml :
<script type="text/javascript">
dojo.addOnLoad(function() {
// our test data store for this example:
var store4 = new dojo.store.JsonRest({
target: '/guestbook/test'
});
storeData = new dojo.data.ItemFileReadStore(
{ data:store4 }
);
// set the layout structure:
var layout4 = [{
field: 'Title',
name: 'Title of Movie',
width: '200px'
},
{
field: 'Year',
name: 'Year',
width: '50px'
},
{
field: 'Producer',
name: 'Producer',
width: 'auto'
}];
// create a new grid:
var grid4 = new dojox.grid.DataGrid({
query: {
Title: '*'
},
store: storeData,
clientSort: true,
rowSelector: '20px',
structure: layout4
},
document.createElement('div'));
// append the new grid to the div "gridContainer4":
dojo.byId("gridContainer4").appendChild(grid4.domNode);
// Call startup, in order to render the grid:
grid4.startup();
});
<div id="gridContainer4" style="width: 100%; height: 100%;">
</div>
<?php // setup required dojo elements:
$this->dojo()->enable()
->setDjConfigOption('parseOnLoad', true)
->requireModule('dojo.store.JsonRest')
->requireModule('dojo.data.ObjectStore')
->requireModule('dojo.data.ItemFileReadStore')
->requireModule('dojox.data.QueryReadStore')
->requireModule('dojox.grid.DataGrid')
->addStyleSheet('/js/dojox/grid/resources/claroGrid.css')
->addStyleSheet('/js/dojox/grid/resources/Grid.css'); ?>
when i'm trying to access the page localhost/guestbook, the page is rendered but no datagrid, it's like javascript is not enabled...
the url /guestbook/test return a json object.
And in firebug, there is no javascript error, the dojo.js is loaded, the dojo modules and the css too.
I don't understand what is happening !
Thanks :)
You are creating the grid and putting it in an unattached div. Instead, attach the grid gridContainer4
// create a new grid:
var grid4 = new dojox.grid.DataGrid({
query: {
Title: '*'
},
store: storeData,
clientSort: true,
rowSelector: '20px',
structure: layout4
},
dojo.byId("gridContainer4"));