Highcharts not displaying anything just blank html page - php

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.

Related

PHP how to include a pie-chart

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]

Chart database data connection

I have problem with connecting my mysql database to Highstock chart
Here is my code - it does not show anything when I run it shows just empty page
Can someone tell me what I am doing wrong or send me example for the script with database connection?
I would really appreciate
<!DOCTYPE HTML>
<html>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="../../code/highstock.js"></script>
<script src="../../code/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
<script type="text/javascript">
<?php $conn=mysqli_connect("localhost:3307","sampleuser","samplepass","sampledatabase");
if(!$conn)
{
die("connection in error:".mysqli_connect_error());
}
$result=mysqli_query($conn,"Select time,open,close,high,low,volume From sampletable ");
while ($row = mysql_fetch_array($result)) {
extract $row;
$time *= 1000; // convert from Unix timestamp to JavaScript time
$data[] = "[$time,$open,$close,$high,$low,$volume]";
}
?>
Highcharts.stockChart('container', {
title: {
text: 'AAPL stock price by minute'
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 1,
text: '1D'
}, {
type: 'all',
count: 1,
text: 'All'
}],
selected: 1,
inputEnabled: false
},
series: [{
name: 'AAPL',
type: 'candlestick',
data: data,
tooltip: {
valueDecimals: 2
}
}]
});
</script>
</body>
</html>

How to plot my json data into a Google Material Line Chart using PHP, MySQL, & JavaScript

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>

How to search in a HTML table that does not generate any td's and such?

I've created a table based on the http://www.jtable.org template, my table, and most of the functionality is up and running, however I run into a problem when I want to include a search bar to filter tables results as I type. The problem I believe lies in the fact that most tables I've created using php have created the actual html table in the code so td's and tr's for example, and the search functionality would key off of matching these terms.
Currently however my table is being generated on the front end, without the actual HTML content in the back end, so I am unable to search. Is there any method I can use to search this table with this code, maybe using server side processing, or something else I'm unaware of?
This is the code I'm using:
<html>
<title> title </title>
<head>
<link href="themes/redmond/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<link href="scripts/jtable/themes/metro/darkgray/jtable.css" rel="stylesheet" type="text/css" />
<script src="scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="scripts/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="scripts/jtable/jquery.jtable.js" type="text/javascript"></script>
</head>
<body>
<div class="filtering">
<body>
<input type="text" style="background-color: #e6ffff;" placeholder="Search Any Column" size="70" id="search";/>
</body>
<div id="PeopleTableContainer" style="width: relative;" ></div>
<img src="Sharks-2-Trans-30-150623-2.png" width="150" height="43" style="float:bottom-right; opacity: 10;">
<script type="text/javascript">
$(document).ready(function () {
//Prepare jTable
$('#PeopleTableContainer').jtable({
title: 'ICS Central',
paging: true, //Enable paging
pageSize: 10, //Set page size (default: 10)
sorting: true, //Enable sorting
defaultSorting: 'ISO_Name ASC', //Set default sorting
selecting: true, //Enable selecting
multiselect: true, //Allow multiple selecting
selectingCheckboxes: true, //Show checkboxes on first column
//selectOnRowClick: false, //Enable this to only select using checkboxes
actions: {
listAction: 'PersonActions2.php?action=list',
createAction: 'PersonActions2.php?action=create',
updateAction: 'PersonActions2.php?action=update',
deleteAction: 'PersonActions2.php?action=delete'
},
fields: {
PersonId: {
key: true,
create: false,
edit: false,
list: false
},
ISO_Name: {
title: 'ISO Name',
width: '5%'
},
ICS_Defect: {
title: 'Defect #',
width: '5%'
},
Abstract: {
title: 'Abstract',
width: '30%'
},
problem_description: {
title: 'Problem Description',
width: '30%'
},
fix_description: {
title: 'Fix Description',
width: '30%'
},
levels_approved: {
title: 'Levels Approved',
width: '30%'
},
reboot_required: {
title: 'Reboot Required?',
width: '30%'
},
reapplied_after_ccl: {
title: 'Reapplied After CCL?',
width: '30%'
},
reapplied_after_hmc_rebuild: {
title: 'Reapplied After HMC Rebuild?',
width: '30%'
},
bundle_fix_cmvc: {
title: 'Bundle Fix CMVC',
width: '30%'
}
},
//Register to selectionChanged event to hanlde events
selectionChanged: function () {
//Get all selected rows
var $selectedRows = $('#PeopleTableContainer').jtable('selectedRows');
$('#SelectedRowList').empty();
if ($selectedRows.length > 0) {
//Show selected rows
$selectedRows.each(function () {
var record = $(this).data('record');
$('#SelectedRowList').append(
'<b>ISO_Name</b>: ' + record.ISO_Name +
'<br /><b>Abstract</b>:' + record.Abstract + '<br /><br />'
);
});
} else {
//No rows selected
$('#SelectedRowList').append('No row selected! Select rows to see here...');
}
},
// rowInserted: function (event, data) {
// if (data.record.ISO_Name.indexOf('Add_Info_HB_v1.0.iso') >= 0) {
// $('#PeopleTableContainer').jtable('selectRows', data.row);
//}
//}
});
//Load student list from server
$('#PeopleTableContainer').jtable('load');
//Delete selected students
$('#DeleteAllButton').button().click(function () {
var $selectedRows = $('#PeopleTableContainer').jtable('selectedRows');
$('#PeopleTableContainer').jtable('deleteRows', $selectedRows);
});
});
</script>
</body>
</html>

I use a search text field and filter the result on keyUp, but that is not client side filtering. It makes the ajax call to the list action and uses a variable searchname to do its filtering. We use Hibernate and have a line of code that filters from the DB like: " obj.name like '%searchname%' "
<body>
<div class="filtering">
Name: <input type="text" id="search"/>
</div>
<body>
...
...
<script type="text/javascript">
$(document).ready(function () {
...
$('#search').keyup(function(){
$('#PeopleTableContainer').jtable('load', {searchname: $(this).val()});
});
}

Google pie chart with ajax and php not working

I am trying to create a google pie chart using ajax and php. But its not working for me. Please anyone help me. The code is given below.
My first page is piechart.php
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script>
function get_piechart()
{
$("#std").load("get_piechart.php");
}
</script>
<input type="button" value="piechart" onClick="get_piechart();"/>
<div id="std">
</div>
My ajax page is get_piechart.php
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(load_chart_data);
function load_chart_data() {
$.ajax({
url: 'getData1.php', // provide correct url
type: 'POST',
data: {get_chart: true},
dataType: 'JSON', // <-- since youre expecting JSON
success: function(chart_values) {
console.log(chart_values); // take a peek on the values (browser console)
draw_chart(chart_values); // call your drawing function!
}
});
}
function draw_chart(chart_values) {
var data = google.visualization.arrayToDataTable(chart_values);
var options = {
title: 'Your super chart!',
vAxis: {title: 'Hours Per Day', titleTextStyle: {italic: false}},
hAxis: {title: 'Task', titleTextStyle: {italic: false}},
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
data file is getData1.php
<?php
if(isset($_POST['get_chart'])) {
$values = array(
array('Task', 'Hours Per Day'),
array('Booking', 11),
array('Pending', 89),
);
echo json_encode($values);
exit;
}
?>
On clicking the piechart button i got the error Uncaught ReferenceError: google is not defined. Please help me to solve this problem

Categories