Related
How to plot heatmap on an image using the Plotly.js,
main aim is to the plot the heatmap on the mobile view.
for example, these are some data points.
var data: any = [
{
z: [[1, 20, 30], [20, 1, 60], [30, 60, 1], [782, 452, 29], [452, 128, 57]],
type: 'heatmap'
}
];
some useful link
https://plotly.com/javascript/heatmaps/
I am building an app that has a dashboard with a graphical representation of data. It's a template. I want the values to be dynamic on the chart, i.e. I want use php to pass the values to the chart.
The problem is that values are set in a '.js' file. How can i pass values from the database to the file in order to display them?
Please help
this is my html
<!-- Chart Widget -->
<div class="widget">
<div class="widget-content border-bottom">
<span class="pull-right text-muted"><?php echo htmlentities(date("Y")); ?></span>
Last Year's Data
</div>
<div class="widget-content border-bottom themed-background-muted">
<!-- Flot Charts (initialized in js/pages/readyDashboard.js), for more examples you can check out http://www.flotcharts.org/ -->
<div id="chart-classic-dash" style="height: 393px;"></div>
</div>
<!--
<div class="widget-content widget-content-full">
<div class="row text-center">
<div class="col-xs-4 push-inner-top-bottom border-right">
<h3 class="widget-heading"><i class="gi gi-wallet text-dark push-bit"></i> <br><small>$ 41k</small></h3>
</div>
<div class="col-xs-4 push-inner-top-bottom">
<h3 class="widget-heading"><i class="gi gi-cardio text-dark push-bit"></i> <br><small>17k Sales</small></h3>
</div>
<div class="col-xs-4 push-inner-top-bottom border-left">
<h3 class="widget-heading"><i class="gi gi-life_preserver text-dark push-bit"></i> <br><small>3k+ Tickets</small></h3>
</div>
</div>
</div>-->
</div>
And then this code triggers the '.js' file
<script>$(function(){ ReadyDashboard.init(); });</script>
And then this is the javascript snippet
var chartClassicDash = $('#chart-classic-dash');
// Data for the chart
var dataEarnings = [[1, 2300], [2, 2300], [3, 3200], [4, 2500], [5, 4200], [6, 3100], [7, 3600], [8, 2500], [9, 4600], [10, 3700], [11, 4200], [12, 5200]];
var dataSales = [[1, 850], [2, 750], [3, 1500], [4, 900], [5, 1500], [6, 1150], [7, 1500], [8, 900], [9, 1800], [10, 1700], [11, 1900], [12, 2550]];
var dataTickets = [[1, 130], [2, 330], [3, 220], [4, 350], [5, 150], [6, 275], [7, 280], [8, 380], [9, 120], [10, 330], [11, 190], [12, 410]];
var dataMonths = [[1, 'Jan'], [2, 'Feb'], [3, 'Mar'], [4, 'Apr'], [5, 'May'], [6, 'Jun'], [7, 'Jul'], [8, 'Aug'], [9, 'Sep'], [10, 'Oct'], [11, 'Nov'], [12, 'Dec']];
// Classic Chart
$.plot(chartClassicDash,
[
{
label: 'Sales',
data: dataEarnings,
lines: {show: true, fill: true, fillColor: {colors: [{opacity: .6}, {opacity: .6}]}},
points: {show: true, radius: 5}
},
{
label: 'Deposits',
data: dataSales,
lines: {show: true, fill: true, fillColor: {colors: [{opacity: .6}, {opacity: .6}]}},
points: {show: true, radius: 5}
},
{
label: 'Withdrawal',
data: dataTickets,
lines: {show: true, fill: true, fillColor: {colors: [{opacity: .6}, {opacity: .6}]}},
points: {show: true, radius: 5}
}
],
{
colors: ['#5ccdde', '#454e59', '#ffffff'],
//colors: ['#5ccdde', '#deb25c', '#de815c'],
legend: {show: true, position: 'nw', backgroundOpacity: 0},
grid: {borderWidth: 0, hoverable: true, clickable: true},
yaxis: {show: false, tickColor: '#f5f5f5', ticks: 3},
xaxis: {ticks: dataMonths, tickColor: '#f9f9f9'}
}
);
I want to dynamically control these values
// Data for the chart
var dataEarnings = [[1, 2300], [2, 2300], [3, 3200], [4, 2500], [5, 4200], [6, 3100], [7, 3600], [8, 2500], [9, 4600], [10, 3700], [11, 4200], [12, 5200]];
var dataSales = [[1, 850], [2, 750], [3, 1500], [4, 900], [5, 1500], [6, 1150], [7, 1500], [8, 900], [9, 1800], [10, 1700], [11, 1900], [12, 2550]];
var dataTickets = [[1, 130], [2, 330], [3, 220], [4, 350], [5, 150], [6, 275], [7, 280], [8, 380], [9, 120], [10, 330], [11, 190], [12, 410]];
Thanks once again
Please post your code, it is easy to help you, and it's simple to pass values to javascript variables through php, below is my sample code to pass dyanamic data comming from database to barchart. It is for your reference not complete code
<script type="text/javascript">
google.charts.setOnLoadCallback(drawChart);
imagepath_comparison="";
function drawChart() {
var data = google.visualization.arrayToDataTable([<?=$data;?>]);
var options = {
title: 'GRAPH ANALYSIS',
vAxis: {title: "SUBJECTS"},
hAxis: {
title: "MARKS"
}
};
</script>
ZingChart has a very compatible plugin for retrieving data and uploading it using php!
We also have several examples to help you better understand compatability
php and AJAX example
MySQL example
ZingChart php wrapper
php dashboard
php demo1
php demo2
If you want to pass data from a database to a dynamic chart, you have to use AJAX. I'd try it with jQuery AJAX.
Have a look at this: Passing data from php to Jquery
Do you have any code snippets? We may help you out, if you're not familiar with ajax.
in your php:
$sql8 = "SELECT marca, COUNT(*) as cnt, DATE_FORMAT(entra, '%m/%d/%Y') FROM equipos "
. "where entra between now() - interval 30 day and now() GROUP BY marca ORDER BY marca";
// execute SQL query and get result
$sql_result = mysql_query($sql8)
or die("Couldn't execute query.");
in your script:
data: [
<?php while($row = mysql_fetch_array($sql_result)){ ?>
{
marca: '<?php echo $row['marca']; ?>',
cnt: '<?php echo $row['cnt']; ?>',
},
<?php } ?>],
Thanks everyone, I simply used AJAX to pass the values too the JavaScript file.
I want to make a stacked column chart with age intervals.
I have a two-dimensional array containing an age key and a value.
The idea is: every single age is stacked on top of each other within their interval, and thereby represent the accumulated number of people within the age interval in a single column.
I want to approach this solution with highcharts' stacked column chart example.
This is my code so far:
// Age stacked column chart.
var ageData = [
[0, 0], [1, 0], [2, 0], [3, 0], [4, 0], [5, 0], [6, 0], [7, 0], [8, 4], [9, 3],
[10, 24], [11, 33], [12, 31], [13, 21], [14, 61], [15, 42], [16, 43], [17, 87], [18, 64], [19, 120],
[20, 134], [21, 142], [22, 184], [23, 221], [24, 234], [25, 211], [26, 198], [27, 94], [28, 79], [29, 34],
[30, 24], [31, 27], [32, 32], [33, 21], [34, 4], [35, 7], [36, 11], [37, 5], [38, 3], [39, 6],
[40, 3], [41, 4], [42, 13], [43, 6], [44, 4], [45, 3], [46, 1], [47, 2], [48, 2], [49, 0],
[50, 0], [51, 34]]
$('#container_stackedColumn').highcharts({
chart: {
type: 'column'
},
title: {
text: 'User age distribution'
},
xAxis: {
categories: [
'0-12',
'13-18',
'19-23',
'24-28',
'29-35',
'36-42',
'43-50',
'>50'
]
},
yAxis: {
min: 0,
title: {
text: 'Number of users'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black, 0 0 3px black'
}
}
}
},
series: [{ /* --- What to do here?! --- */ }]
});
So, with my two-dimensional array in consideration, how do I visualize this stacked column chart?
Any help is greatly appreciated. :)
You need to itearate on you arrays, compare with the limits which you have (categories) and push to correct series array.
See the parser (http://jsfiddle.net/W6AFY/3/) hope that it is correct.
Or another solution, using different series for each part of bar: http://jsfiddle.net/s9qHH/48/
var ranges = [12, 18, 23, 28, 35, 42, 50, 1000],
rangesLen = ranges.length,
series = [];
$.each(ranges, function(i, e){
series.push({ //create series' containers for legend
id: e+'index',
name: e
});
});
$.each(ageData, function(i, e){
var x = e[0],
y = e[1],
index = 0;
while(ranges[index] < x){ // get category index
index ++;
}
series.push({
showInLegend: false,
linkedTo: ranges[index] +'index', // link to container series
data: [ [index, y] ] //add point at specific category
})
});
Still, I think that's Sebastian's solution is faster.
Issue with my xaxis ticks, only the first tick shows at the far right of the graph, and no bars are plotted. I have a feeling i'm missing something obvious.
Desired solution: Show all the xaxis ticks and plot the bars accordingly
Associated code:
$.plot($("#chart"), results, {
grid: {
hoverable: true,
aboveData: true
},
xaxis: {
ticks: [
[1, "AL"],
[2, "AZ"],
[3, "CA"],
[4, "CO"],
[5, "CT"],
[6, "DE"],
[7, "FL"],
[8, "GA"],
[9, "HI"],
[10, "IA"],
[11, "IL"],
[12, "IN"],
[13, "KS"],
[14, "KY"],
[15, "LA"],
[16, "MA"],
[17, "MD"],
[18, "ME"],
[19, "MI"],
[20, "MN"],
[21, "MO"],
[22, "MS"],
[23, "NC"],
[24, "NE"],
[25, "NJ"],
[26, "NM"],
[27, "NY"],
[28, "OH"],
[29, "OK"],
[30, "OR"],
[31, "PA"],
[32, "RI"],
[33, "SC"],
[34, "TN"],
[35, "TX"],
[36, "UT"],
[37, "VA"],
[38, "WA"],
[39, "WV"]
],
tickSize: 1,
tickLength: 1
},
grid: {
hoverable: true,
clickable: false,
borderWidth: 1
},
legend: {
labelBoxBorderColor: "none",
position: "ne",
margin: [-100, 0]
},
series: {
bars: {
show: true,
align: "center",
horizontal: "true"
}
}
});
JSFiddle: http://jsfiddle.net/emaM7/
I think the problem may be simply that you're using non-numeric X values in your data. I added this code before the plot call:
for (i = 0; i < results.length; i++) {
for (j = 0; j < results[i].data.length; j++) {
results[i].data[j][0] = j;
}
}
with this a graph shows up as do the labels.
You'll probably want to use slightly more complex logic to select the proper numeric code for each state, as what I wrote won't work if you have states missing or out of order in the 'results' object.
I have a problem with jQuery flot.
PHP output (not JSON):
[[1, 153], [2, 513], [3, 644]] ~~ [[1, 1553], [2, 1903], [3, 2680]]
jQuery call:
$.ajax({
url: 'xxx.php',
success: function (data) {
var dataArray = data.split('~~'),
dataArray1 = dataArray[0],
dataArray2 = dataArray[1],
plot = $.plot($('#xxx'), [{
data: dataArray1,
color: colours[0]
},
{
data: dataArray2,
color: colours[1],
points: {
show: true,
}
},
], {
series: {
bars: {
show: true,
barWidth: .6,
align: 'center'
}
},
grid: {
show: true,
hoverable: true,
clickable: true,
autoHighlight: true,
borderWidth: true,
borderColor: 'rgba(255, 255, 255, 0)'
},
xaxis: {
show: false
}
});
}
});
Taking the data in this way, I'm trying to use jQuery Flot but does not work...
Whereas, I can by separating data:
First label:
[[1, 153], [2, 513], [3, 644]]
Second label:
[[1, 1553], [2, 1903], [3, 2680]]
I'll share a Simple example jquery Flot with ajax for basic understanding purpose.
See this page and let change it into ajax : http://www.jqueryflottutorial.com/making-first-jquery-flot-line-chart.html
First, you must successful showing the chart as described without ajax. Don't forget to put height and width in div tag if you don't include css file.:
<div id="flot-placeholder" style="width: 100%; height: 260px"></div>
If ok, then follow this step.
STEP 1 : Put the script inside a function:
<script>
function show_chart(data) {
// this will be moved to php file
//var data = [[1, 130], [2, 40], [3, 80], [4, 160], [5, 159], [6, 370], [7, 330], [8, 350], [9, 370], [10, 400], [11, 330], [12, 350]];
var dataset = [{label: "line1",data: data}];
var options = {
series: {
lines: { show: true },
points: {
radius: 3,
show: true
}
}
};
$(document).ready(function () {
$.plot($("#flot-placeholder"), dataset, options);
});
}
</script>
STEP 2 : Create sample.php.
<?php
require 'config.php';
if($_POST)
{
$id = $_POST['id'];
$arr = array();
$arr = [[1, 130], [2, 40], [3, 80], [4, 160], [5, 159], [6, 370], [7, 330], [8, 350], [9, 370], [10, 400], [11, 330], [12, 350]];
echo json_encode($arr);
}?>
Note : $arr that moved from the first script then become only a sample data. You should make a php class or function that fetch data from database and return as array format as shown in $arr.
STEP 3 : Create simple ajax to get the response and render the chart :
var id = 1;
$.post('/..if any folder../sample.php', {
id : id,
}, function(response){
var data = JSON.parse(response);
show_chart(data); // call function and render the chart in <div id="flot-placeholder"></div>
});
Step Finish.
In some cases, we may need two or more data type. Then just add this to the code :
inside sample.php :
$arr1 = array();
$arr2 = array();
$arr1 = [[1, 130], [2, 40], [3, 80], [4, 160], [5, 159], [6, 370], [7, 330], [8, 350], [9, 370], [10, 400], [11, 330], [12, 350]];
$arr2 = [[1, 130], [2, 40], [3, 80], [4, 160], [5, 159], [6, 370], [7, 330], [8, 350], [9, 370], [10, 400], [11, 330], [12, 350]];
// put more if rquired
echo json_encode($arr1,$arr2); // put more array if required
inside ajax :
var data = JSON.parse(response);
var result1 = data[0]; // response data from $arr1
var result2 = data[1]; // response data from $arr2
Sorry for long description. Hope it will help.
Just for fun :
Some people don't want to show 'sample.php' in the console log. For this purpose we can simply change 'sample' as a folder and create index.php inside it and in the ajax we just direct the url to the folder like this :
$.post('/..if any folder../sample/'), { // this will open index.php
You have recieved a string that was not qualified as JSON data. Then you've splitted it on two strings, that are still not JSON. Then you trying to instantiate plot object with data: your_string_value. Here plot waiting of an object, not string.
Try to define data of your plot this way: data:$.parseJSON( dataArray1 )