jqplot json_encode data not rendering line graph - json

I return these 2 string from controller in codeigniter using json_encode for jqplot line grapgh
here i fetch the data
$(document).ready(function(){
$(".stats").click(function(){
var site_id = $(this).attr("id");
$.ajax({
url: site_url+"statistics/fetch_stats_data/"+site_id,
async: false,
type: "POST",
data: "type=article",
dataType: "json",
success: function(data) {
stat_events_plot_graph(data['activity_events'], data['activity_tricks']);
}
})
});
});
plot data structure returned as php string from above ajax
[["10/21/2014 05:50",1]]
plot ticks structure returned as php string from above ajax
[[1,"Today"]]
when i send this data to the plot the graph is not rendered
function stat_events_plot_graph(activity_events_live, activity_tricks_live) {
var plot2 = $.jqplot('events', [activity_events_live], {
title: 'Events',
seriesDefaults: {
rendererOptions: {
smooth: false,
animation: {
show: true
}
}
},
legend: { show: false },
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: { formatString: '%b %#d, %#I %p',angle: -90 }
},
yaxis: {
ticks : activity_tricks_live,
}
},
series: [{ lineWidth: 4,
markerOptions: { style: 'square' }
}],
series: [
{ label: 'Toronto' },
{ label: 'New York' }
],
});
}
how do I convert those 2 strings to work with the line graph ?

Related

Highcharts with ajax/ json and SQL Server ASP.NET

I am new to Highcharts and Json data. I am trying to draw pretty simple column chart but failing to do so. below is my code.
HTML:
<div id="container"></div>
Javascript:
$(document).ready(function () {
$.ajax({
url: 'HighCharts.aspx/GetServices',
type: 'POST',
async: true,
dataType: 'json',
contentType: 'application/json',
data: '{}',
success: function (response) {
DrawServices(response.d);
},
error: function () {
window.open("ErrorPage.aspx", "_self")
}
});
});
function DrawServices(data) {
debugger;
if (data == null) {
window.open("ErrorPage.aspx","_self")
}
else {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Services Data'
},
xAxis: {
categories: data[0].Name
},
yAxis: {
title: {
text: 'Total Servcies Requested'
}
},
series: data[0].Total
});
}
}
JSON response
[{"Name":"Access the company internet","Total":489},{"Name":"Application Enhancement","Total":97},{"Name":"Catering Service","Total":250},{"Name":"Desktop","Total":350},{"Name":"Development and Consultation","Total":566},{"Name":"Email","Total":175},{"Name":"Laptop","Total":200},{"Name":"Maintenance","Total":32},{"Name":"Push Email","Total":700},{"Name":"Vehicle Sticker","Total":1200}]
Please guide me what i am doing wrong. blank chart is displaying
You can set x-axis type to category and map your data to the format required by Highcharts, for example: [point.name, point.y]
xAxis: {
type: 'category'
},
series: [{
data: data.map(el => [el.Name, el.Total])
}]
Live demo: http://jsfiddle.net/BlackLabel/r709soxe/
API Reference:
https://api.highcharts.com/highcharts/xAxis.type
https://api.highcharts.com/highcharts/series.column.data

Using Chart JS in Asp.net MVC

I have a table having no of files and their month. i want to show line chart for progress of every month. but i am not able to show the data in the chart,
in console.log date is also not in the required form. how should i put month names which are generated from the sql query on label fields and and every month counting of file on the data
DataSet ds = dbop.GetViews();
List<ListReg> list = new List<ListReg>();
foreach (DataRow dr in ds.Tables[0].Rows)
{
list.Add(new ListReg
{
eFile_registered = Convert.ToInt32(dr["eFile_registered"]),
eFile_Month = Convert.ToDateTime(dr["eFile_Month"]).ToString()
});
}
return Json(list, JsonRequestBehavior.AllowGet);`
//model
$(document).ready(function () {
$.ajax({
type: "POST",
url: "/test/LineChart",
method: 'GET',
dataType: "JSON",
success: function (dr) {
console.log(dr);
var month=dr[0];
var count=dr[1];
var ctx = document.getElementById("canvas").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
height: "230px",
width: "300px",
responsive: false,
animation: false,
legend: { position: 'bottom' },
data: {
//labels: ["M", "T", "W", "T", "F", "S", "S"],
labels: month,
datasets: [{
label: 'Monthly Expenses',
data: count,
backgroundColor: "rgb(66, 134, 244)"
}]
}, options: {
events: ['click'],
scaleShowValues: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
ticks: {
autoSkip: false
}
}]
}
}
});
},
"error": function (list) {
alert("Some Error Occured!");
}
});
})

Ajax highcharts PieChart not displaying data

Here is my code :
$.ajax({
url: 'dashboard/gender',
type: 'post',
async: true,
dataType: "json",
success: function (data) {
visitorData(data);
}
});
function visitorData (data) {
$('#gender-pie').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Genders'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: data,
});
}
Here is the response : {"males":9,"females":2}
My controller is 200 ok. Passing data correctly . But data aren't biding inside my div . Title is displayed correctly .
Your JSON formatting for the series data is incorrect. It should be formatted like this:
series: [{
data: [{
name: 'Males',
y: 9
}, {
name: 'Females',
y: 2
}]
}]
Working JSFiddle example

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.