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
Related
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
I seem to be having an issue trying to bing my JSON result to my Kendo UI grid
This is my JSON result I get back from my web service:
"{
"Data":[{
"ModifiedBy":"Joe Blogs",
"ModifiedDate":"2015-04-27T00:00:00",
"Name":"One",
"Number":"201504260952",
"Status":"Draft",
"Id":3
},
{
"ModifiedBy":"Joe Blogs",
"ModifiedDate":"2015-07-08T11:04:00",
"Name":"fdasfdsa",
"Number":"20150708110209",
"Status":"Draft",
"Id":17},
{
"ModifiedBy":"Joe Blogs",
"ModifiedDate":"2015-07-09T08:44:00",
"Name":"Two",
"Number":"20150709084329",
"Status":"Draft",
"Id":20
}],
"Groups":null,
"Total":3
}"
This is my Grid and data source set up:
$(function () {
var myGrid = $("#myGrid");
myGrid.kendoGrid({
groupable: true,
sortable: true,
filterable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
hidden: true,
field: "Id"
},
{
headerTemplate: ""
},
{
title: "Status",
field: "Status"
},
{
title: "Number",
field: "Number"
},
{
title: "Name",
field: "Name"
}]
});
var myDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/somewhere.svc/Data",
dataType: "json",
type: "GET"
}
},
schema: {
data: 'Data',
groups: 'Groups',
aggregates: 'Aggregates',
total: 'Total',
model: {
id: 'Id',
fields: {
Id: { type: 'number' },
Status: { type: 'string' },
Number: { type: 'string' },
Name: { type: 'string' },
ModifiedBy: { type: 'string' },
ModifiedDate: { type: 'date' }
}
}
},
pageSize: 5,
serverPaging: true,
serverGrouping: true,
serverSorting: true,
serverFiltering: true
});
myGrid.data("kendoGrid").setDataSource(myDataSource);
});
When the page loads I can see that I get the above JSON but I don't get any rows displayed in the grid.
What might I be doing wrong?
I am new to Kendo UI, While I am using the Kendo Grid UI which is consuming the service, the read operation is working fine and the Grid is populated with the data from services but the delete operation is not working
I have tested the delete service using the fiddler getting a perfect response,but I confused why the delete button in kendo grid is not firing the endpoint
I struggled for past one week but no improvement
This is my code,
var carsDataSource1 = new kendo.data.DataSource(
{
batch: true,
transport: {
read: {
url: "/DesktopModules/MyServicesTest/API/DropData/Drop",
dataType: "json",
type: "GET",
contentType: "application/json; charset=utf-8",
},
destroy: {
url: function(options)
{
return 'DesktopModules/MyServicesTest/API/DeleteCategory/
Delete' + options.models[0].id;
},
dataType: "json",
type: "DELETE"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
var CategoryID = options.models[0].id;
console.log(CategoryID);
return CategoryID;
}
}
},
shema:
{
model: {
id: "CategoryID",
field: {
CategoryID:
{
editable: false,
nullable: true,
type: "number"
},
CategoryName:
{
editable: false,
nullable: false,
type: "string"
},
}
}
}
});
$("#grid1").kendoGrid({
dataSource: carsDataSource1,
height: "500px",
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{
field: "CategoryID",
title: "number "
},
{
field: "CategoryName",
title: "Name"
},
{ command:"destroy"}
],
toolbar: ["create"],
editable: "inline",
destroy:true,
});
});
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 ?
I want to know where my json is incorrect... I know that there is a syntax error so please correct it for me.
({
ageRestriction: false,
allowedCountries: [
],
user: {
ip: '184.173.107.5',
name: ''
},
player: {
bufferTime: 60,
debug: false,
window: false,
panel: false,
autoplay: true,
smoothing: true,
scale: 'letterbox'/*none,
stretch,
letterbox,
zoom*/,
iframeControl: false
},
similar: {
path: '/actions/control/similaritems/50e54d84d681c00e603935e3',
preview: '//s.dogannet.tv/q/i/76/600x336/50e54e8cd681c00e603935e4'
},
watermark: {
path: '//s.dogannet.tv/n/s/content/images/watermark.png?v=2',
position: 'bottomright'
},
media: {
id: '50e54d84d681c00e603935e3',
controller: 'osmf',
defaultServiceUrl: 'http: //media.netd.com.tr',
serviceUrl: 'http: //37.48.66.141',
path: 'S1/HLS_VOD/5ea1_1536/index.m3u8?key=49bfee85b05d117a2906368428094e94&app=com.dcom&max=1500',
preview: '//s.dogannet.tv/q/i/76/1600x900/50e54e8cd681c00e603935e4'
},
playlog: {
callback: function(data){
data.Application='com.dcom';data.UserName='';data.SessionId='m443qmsgz3mdlnwing2h4qno';data.AnonymId='d241c910-6ae1-4f73-afc4-7cb5991517d4';data.ItemId='50e54d84d681c00e603935e3';data.Url='http: //www.netd.com/diziler/yerli/kanit/kanit-1-sezon/kanit-1-bolum';data.extraData={
'Agent': navigator.userAgent
};$.ajax({
type: "POST",
url: "http://stats.dogannet.tv/playlog.ashx",
data: data,
global: false,
async: true,
cache: false
});
}
},
heartbeat: {
interval: 10000,
callback: function(data){
data.Application='com.dcom';data.UserName='';data.SessionId='m443qmsgz3mdlnwing2h4qno';data.AnonymId='d241c910-6ae1-4f73-afc4-7cb5991517d4';data.ItemId='50e54d84d681c00e603935e3';data.Url='http: //www.netd.com/diziler/yerli/kanit/kanit-1-sezon/kanit-1-bolum';data.SessionId='m443qmsgz3mdlnwing2h4qno';data.extraData={
'Agent': navigator.userAgent
};$.ajax({
type: "POST",
url: "http://stats.dogannet.tv/heartbeat.ashx",
data: data,
global: false,
async: false,
cache: false
});
}
},
gemius: {
materialIdentifier: '1',
identifier: 'AfVAtKMRq0Ff4WlROmmKr7Po31j_P7s.VdXOiWt3SGL.x7',
hitCollector: 'http: //str.hit.gemius.pl'
},
comscore: {
c1: '1',
c2: '17476642'
},
advert: {
display: true,
skipShowDuration: 9,
preroll: 'http: //app.medyanetads.com/vast.a2?target=netd_videoad_arsivdizi_preroll&channel=50e54d84d681c00e603935e3&category=11534404&keywords=kanit,
prof_dr_sevil_atasoy,
engin_benli,
inci_demirkaya,
deniz_celiloglu&videoid=463_50e54d84d681c00e603935e3',
midroll: 'http: //app.medyanetads.com/vast.a2?target=netd_videoad_arsivdizi_midroll&channel=50e54d84d681c00e603935e3',
postroll: 'http: //app.medyanetads.com/vast.a2?target=netd_videoad_arsivdizi_postroll&channel=50e54d84d681c00e603935e3',
overlay: 'http: //app.medyanetads.com/vast.a2?target=netd_videoad_arsivdizi_overlay&channel=50e54d84d681c00e603935e3',
pauseroll: 'http: //app.medyanetads.com/vast.a2?target=netd_videoad_pauseroll&channel=50e54d84d681c00e603935e3',
viscaleShowDuration: 30,
viscaleRatio: 0.3889,
viscale: "http://app.medyanetads.com/vast.a2?target=netd_videoad_viscale&channel=52fddcab68f7320be461c2e9"
},
survey: {
display: true,
path: 'http: //app.medyanetads.com/survey/survey.swf',
domain: 'netd.com'
}
});
});
PLEASE CORRECT I dont know where is mistake. I wanted to correct it with http://jsonlint.com/ But I can't done
You should wrap your keys inside double quotes like this:
{
"ageRestriction": false,
"allowedCountries": [
],
"user": {
"ip": "184.173.107.5"
...
If your values are also strings, then they should also be inside double quotes, like in the example above.
See here the exact specification: http://www.json.org/