How to change value with count data - json

I have json data with value but instead of display the value i want to display the count of value which is not in my json data. How to make var like select count(*) from ecgvalue?.
This is my code
<script type="text/javascript">
$(function () {
var processed_json = new Array();
$.getJSON('http://localhost:8080/query', function (data) {
// Populate series
for (i = 0; i < data.length; i++) {
processed_json.push([data[i].id_data, data[i].ecgvalue]);
}
// draw chart
$('#container2').highcharts({
chart: {
type: "column"
},
title: {
text: "ECG Graph"
},
xAxis: {
type: 'category',
allowDecimals: false,
title: {
text: "Id Data"
}
},
yAxis: {
title: {
text: "Value"
}
},
series: [{
name: 'ECG value',
data: processed_json
}]
});
});
});
</script>
and this is my json
[{"id_data":1,"ecgvalue":3.3871},{"id_data":2,"ecgvalue":1.56892},{"id_data":3,"ecgvalue":1.60802},{"id_data":4,"ecgvalue":2.09677},{"id_data":5,"ecgvalue":1.99902},{"id_data":6,"ecgvalue":1.97947}]
I want to change value of y axis to count from ecgvalue, is that possible?

If by count you mean how many items are in the processed_json array (as you can with the SQL statement count(*)), then all you need is simply processed_json.length.
Here's a working example using the data you provided: https://jsfiddle.net/brightmatrix/t8pv7csn/
You can then use the processed_json.length however you wish in your code and/or chart options.

<script type="text/javascript">
$(function () {
var processed_json = new Array();
$.getJSON('http://localhost:8080/query', function (data) {
// Populate series
var ecgCount = 0;
for (i = 0; i < data.length; i++) {
ecgCount += data[i].ecgvalue
processed_json.push([data[i].id_data, data[i].ecgvalue]);
}
// draw chart
$('#container2').highcharts({
chart: {
type: "column"
},
title: {
text: "ECG Graph"
},
xAxis: {
type: 'category',
allowDecimals: false,
title: {
text: "Id Data"
}
},
yAxis: {
title: {
text: ecgCount
}
},
series: [{
name: 'ECG value',
data: processed_json
}]
});
});
});
</script>
Is this What you required.

Related

Kendo Grid - how to remember selected row?

http://dojo.telerik.com/eWakO
Kendo Grid - here how should i modify above code to remember selected row? Example, if i have highlighted 4th row on 1st page and then scrolls to pages and come back to 1st page, then 4th row should be highlighted.
Thanks
Datha
Here is an example from the documentation:
http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Selection/persist-row-selection-while-paging
It relies on the change and dataBound events to save and restore selected rows by their IDs.
<div id="grid"></div>
<script>
$(function () {
var selectedOrders = [];
var idField = "OrderID";
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
schema: {
model: {
id: "OrderID",
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 400,
selectable: "multiple",
pageable: {
buttonCount: 5
},
sortable: true,
filterable: true,
navigatable: true,
columns: [
{
field: "ShipCountry",
title: "Ship Country",
width: 300
},
{
field: "Freight",
width: 300
},
{
field: "OrderDate",
title: "Order Date",
format: "{0:dd/MM/yyyy}"
}
],
change: function (e, args) {
var grid = e.sender;
var items = grid.items();
items.each(function (idx, row) {
var idValue = grid.dataItem(row).get(idField);
if (row.className.indexOf("k-state-selected") >= 0) {
selectedOrders[idValue] = true;
} else if (selectedOrders[idValue]) {
delete selectedOrders[idValue];
}
});
},
dataBound: function (e) {
var grid = e.sender;
var items = grid.items();
var itemsToSelect = [];
items.each(function (idx, row) {
var dataItem = grid.dataItem(row);
if (selectedOrders[dataItem[idField]]) {
itemsToSelect.push(row);
}
});
e.sender.select(itemsToSelect);
}
});
});
</script>

HighChart with multple JSON api data

I am creating a linechart which contain data from different JSON files, and the codes below is working but i'd like to know how may i group up these JSON data from different apis into one by a for each loop to shorter the codes.
//consider the vol1- vol10 looks like var vol1 = ['1123', '1234','5436'];
//because i have other method the convert it to an arrray
//Xvol1 is just something like Xvol1=["Jan","Feb","Mar"]
$('#trendChart').highcharts({
chart: {
type: 'spline'
},
title: {
text: false
},
xAxis: {
categories : Xvol1
},
yAxis: {
title: {
text: 'Volume',
},
min: 0
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
name: $(".profileName0").html(),
data: vol1
},
{
name: $(".profileName1").html(),
data: vol2
},
{
name: $(".profileName3").html(),
data: vol3
},
{
name: $(".profileName2").html(),
data: vol4
},
{
name: $(".profileName4").html(),
data: vol5
},
{
name: $(".profileName5").html(),
data: vol6
},
{
name: $(".profileName6").html(),
data: vol7
},
{
name: $(".profileName7").html(),
data: vol8
},
{
name: $(".profileName8").html(),
data: vol9
},
{
name: $(".profileName9").html(),
data: vol10
},
]
});
UPDATE 1:
I have tried but it doesn't seem like working.
var series = [];
for(i = 0; i < 10; i++){
series.push({name: $('.profileName'+i+'"').html(),, data: vol[i]});
}
$('#trendChart').highcharts({
chart: {
type: 'spline'
},
title: {
text: false
},
xAxis: {
categories : Xvol1
},
yAxis: {
title: {
text: 'Volume',
},
min: 0
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [series]
});
});
After i generate the data by a for loop successfully, i am now struggle about how to update the data, i tried to update it using setData() but seem it needs so adjustment in order to work.
var seriesData = [vol1, vol2, vol3, vol4, vol5, vol6 , vol7, vol8, vol9, vol10]; // add all the vols. I have used 2 for example
var series = [];
for(i = 0; i < 5; i++){
series.push({name: names[i], data: seriesData[i]});
}
var trendChart12w = $('#trendChart').highcharts();
trendChart12w.series[0].setData(series);
Solution :
var dataCounting = $(".DataCount").last().html();
var seriesData = [vol1, vol2, vol3, vol4, vol5, vol6 , vol7, vol8, vol9, vol10]; // add all the vols. I have used 2 for example
var trendChart1y = $('#trendChart').highcharts();
trendChart1y.xAxis[0].setCategories(Xvol1);
for(i = 0; i < dataCounting; i++){
trendChart1y.series[i].setData(seriesData[i]);
}
You can an array of the names like var names = [all the names] and an array of your data like var seriesData = [vol1, vol2...]
And then do
var series = [];
for(i = 0; i < names.length; i++){
series.push({name: names[i], data: seriesData[i]});
}
And then set this as your chart series.
UPDATE
Do this outside of your chart.
var seriesData = [vol1, vol2]; // add all the vols. I have used 2 for example
var names = [$(".profileName0").html(), $(".profileName1").html()] // add all names
var series = [];
for(i = 0; i < names.length; i++){
series.push({name: names[i], data: seriesData[i]});
}
And then in your chart, where you set the series, just do
series: series

Get current day values from database to plot on highcharts

Hello i am designing a webserver which shows me a power consumption graph from a mysql database. I am a beginner and have written a code with some help that uses ajax calls to fetch the data from the database and plot it on the highcharts. Problem is that I get all the historic values saved in my database but I want only the values of current day to be plotted on the chart. This is my js code:
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts({
chart: {
type: 'area',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
tickPixelInterval: 100
},
yAxis: {
title: {
text: 'POWER'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%d-%m-%Y %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y);
}
},
legend: {
enabled: true
},
exporting: {
enabled: false
},
series: [{
name: 'Power Consumption',
data: (function () {
var data = [], i, t, d;
var request = {};
request['EndPoint'] = "arduino/charts/analog/fetch";
$.ajax({
type: "POST",
url: "../Server/fyp-processor.php",
data: JSON.stringify(request),
dataType: "json",
async: false,
success: function (result) {
if(result.Code == "1008" && (result.Data != null || result.Data != undefined)) {
for(i = 0; i < result.Data.Historic.length; i++) {
t = result.Data.Historic[i].DateTime.split(/[- :]/);
d = new Date(t[0], t[1]-1, t[2], t[3], t[4], t[5]);
data.push({
x: d,
y: parseInt(result.Data.Historic[i].Value)
});
}
}
}
});
return data;
}())
}]
});
It calls a fyp-processor php script that contains this code:
else if($postData['EndPoint'] == 'arduino/charts/analog/fetch') {
#result set
$resultSet = null;
#get all historic analog chart data
$results = $db->charts();
if(count($results) > 0) {
foreach($results as $result) {
$resultSet['Historic'][] = $result;
}
}
I would be glad if anyone could help me out to get only current DAY's data and also what changes I can do to it then to get current month and current week's data too.

this is showing data json type from query database but can't show chart on page

this is showing data json type from query database but can't show chart on page. what the problem?
The first image shows the results of a database query that I've already done1
whereas the second graphic image display json, but do not appear in my web page]2
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'pendapatan',
type: 'line'
},
title: {
text: 'PENDAPATAN DAN PENGELUARAN'
},
subtitle: {
text: 'Source: Data pendapatan dan pengeluaran harian'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Rupiah'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: []
}
$.getJSON("home/dashboard/show_pendapatan_pengeluaran", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
chart = new Highcharts.Chart(options);
});
});
</script>

Highchart not displaying json data

I can't figure out what I'm doing wrong with my Highchart. It's supposed to read a json array, (really just a date, and a y value and plot it to a chart. However, I can't seem to get any points to plot to a chart. What am I doing wrong?
php code:
$statement = "select count(title) from node where title like 'WEN%'";
$result = mysql_query($statement);
while ($row = mysql_fetch_array($result)) {
$data = $row['count(title)'];
}
$x = time() * 1000;
$y = $data;
$array = array($x,$y);
echo json_encode($array);
html/javascript code:
<p>Chart</p>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto">
<script>
function requestData() {
jQuery.ajax({
url: 'queryp.php',
datatype: 'json',
success: function(point) {
var series = chart.series[0];
// add the point
chart.series[0].addPoint(point, true);
// call it again after one second
setTimeout(requestData, 5000);
},
cache: false
});
}
</script>
<script type="text/javascript">
jQuery(function () {
jQuery(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'spline',
marginRight: 10,
events: {
load: requestData
}
},
title: {
text: 'Live Query Data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
enabled: true
},
exporting: {
enabled: false
},
series: [{
name: 'Query Data',
data: []
}]
});
});
});
</script>
</div>
Your series[0] object has no method named addPoint, you should see this in the console.
If you want to append to the data array, just use push
chart.series[0].data.push(point[1]);
The problem is that you are referencing to chart variable, which is not ready yet - you are using load event handler. Use something like this:
function requestData() {
var series;
if(chart.series[0]){
/* all other cases load chart */
series = chart.series[0];
} else {
/* first load chart */
series = this.series[0];
}
jQuery.ajax({
url: 'queryp.php',
datatype: 'json',
success: function(point) {
series.addPoint(point, true);
setTimeout(requestData, 5000);
}
});
}
Also, make sure that values are numbers. Not strings.