I am trying to bind the kendo chart to the remote json data.
I have a sample example that I created.
I dont know why the chart is incorrectly displayed and the ordering of the axis is messed up in this example.
var data = [
{"Name":1,"Year":2011,"Expense":200.00},
{"Name":1,"Year":2012,"Expense":274.91},
{"Name":1,"Year":2013,"Expense":0},
{"Name":1,"Year":2014,"Expense":0},
{"Name":5,"Year":2011,"Expense":100.00},
{"Name":5,"Year":2012,"Expense":315.84},
{"Name":5,"Year":2013,"Expense":0},
{"Name":5,"Year":2014,"Expense":0},
{"Name":6,"Year":2011,"Expense":100.00},
{"Name":6,"Year":2012,"Expense":0},
{"Name":6,"Year":2013,"Expense":200},
{"Name":6,"Year":2014,"Expense":50},
];
$(document).ready(function() {
$("#chart").kendoChart({
theme: "silver",
title: {
text: "Total records processed"
},
legend: {
position: "bottom"
},
dataSource: {
data: data,
group: {
field: "Name"
}
},
transitions: false,
series: [{
type: "column",
stack: "true",
field: "Expense"
}],
categoryAxis: {
field: "Year"
},
tooltip: {
visible: true,
template: "#= value #"
}
});
});
http://jsfiddle.net/johnok/F2TQ8/92/
You can add a sort property to the dataSource:
dataSource: {
data: data,
group: {
field: "Name"
},
sort: { field: "Year", dir: "asc" }
},
Updated FIDDLE
Related
I'm having a problem with Highcharts drawing points that have no data attached to them. The chart is a column chart with drilldown, showing an average "time" per week on the top level, with a drilldown displaying the actual value per case for the selected week.
My problem is this: When I drill down into a certain week, cases that do not exist are still displayed on the chart if they exist between two existing case IDs.e.
Consider the data being passed for week 6: [[272, 25.07][297, 500.54]], only two cases exist: 272 and 297. However, Highcharts is giving me this:
https://i.stack.imgur.com/MpABB.png
This is the code for the chart itself:
Highcharts.chart('DrilldownChart', {
chart: {
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
type: "",
labels: {
rotation: 90
},
},
yAxis: {
title: {
text: ''
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
column: {
minPointLength: 0
},
series: {
borderWidth: 0,
dataLabels: {
enabled: false,
format: '{point.y:.1f}',
rotation: 270
}
}
},
tooltip: {
pointFormat: '<span style="color:{#000}"></span>{point.y:.2f}<br/>'
},
series: MainDataArray,
drilldown: {
series: DrilldownDataArray,
}
});
Does anyone know how to stop it from drawing the labels/columns between points with actual data?
Thanks!
You just need to convert the x values from your array to String type, then they would be treated as a category name instead of category indexes. In order to convert it, you can use Array.map() function just like that:
var drilldownSeries = [{
id: 'One',
data: [[272, 25.07], [297, 500.54]].map(elem => {
return [elem[0].toString(), elem[1]]
})
}]
However, before that please make sure that your xAxis.type is set to 'category', because I noticed that in your code there is an empty string assigned to type field.
Here is the example which shows how to achieve described effect:
https://jsfiddle.net/8h03urrr/
Im getting crazy over this issue,on my browser and my computer I can see the chart and and its columns ,but after publishing on IIS ,data is there but ,empty chart!,its not a complicated thing but i am wondering why this happen,im sending data as a JSON,i have also checked there if all my javascript file has been copied in the IIS ,all is ok,here is my controller:
List<FaultStatErrorIdViewModel> erro_id = new List<FaultStatErrorIdViewModel>();
foreach (DataRow dr in dt_error.Rows)
{
FaultStatErrorIdViewModel _error = new FaultStatErrorIdViewModel();
_error.cur_year = dr["cur_year"].ToString();
_error.error_dur = dr["error_duration_this_year"].ToString();
_error.m_error_id = dr["m_error_id"].ToString();
erro_id.Add(_error);
}
return Json(erro_id, JsonRequestBehavior.AllowGet);
Here is my chart:
$.ajax({
dataType: "json",
type: "POST",
url: "#Url.Action("faultStatErrorId","Ranking")",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ "regionalManager": tmpString,"error_name":itemname, "dtFrom": dtFrom, "dtTo": dtTo }),
success: function (rslt) {
$("#error_id_Chart").kendoChart({
dataSource: {
data: rslt
},
title: {
text: "Main-Group:" + itemname,
position: "bottom",
},
chartArea: {
background: "#fcfcfc",
width: 700,
},
series: [{
// data: finaldata,
type: "column",
name: "DURATION",
color: "blue",
field: "error_dur",
categoryField: "m_error_id",
}],
legend: {
visible: false
},
valueAxes: {
name: "Duration",
title: { text: "Duration (Hrs)" },
majorGridLines: {
visible: false
},
line: {
visible: true
},
},
tooltip: {
visible: true,
// majorUnit:10,
template: " #= value #"
},
});
}
});
I have problem here.With kendo grid i'm loading data from some action in controller.But in the last column i have link which should fire another action in same controller.When i delete this piece of code
type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("ListFinances", "Jobs"))",
type: "POST",
dataType: "json",
data: additionalData
},
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},
last column is working perfect,bit when is present this piece of code, last column is not working>please here some help, i;m new to mvc.Below is the code:
$("#jobs-grid").kendoGrid({
dataSource: {
data: #Html.Raw(JsonConvert.SerializeObject(Model.FinishedJobs)),
schema: {
model: {
fields: {
JobNumber: { type: "string" },
CustomerId: { type: "number" },
JobCount: { type: "number" },
JobYear: { type: "number" },
Status: { type: "number" },
Position: { type: "number" },
Finished: { type: "boolean" },
HasInvoice: { type: "boolean" },
}
}
},
type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("ListFinances", "Jobs"))",
type: "POST",
dataType: "json",
data: additionalData
},
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},
error: function(e) {
display_kendoui_grid_error(e);
// Cancel the changes
this.cancelChanges();
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
//dataBound: onDataBound,
columns: [
#*{
field: "Status",
title: "Status",
template: '#= Status #'
},*#
{
field: "JobNumber",
title: "jobNumber",
template: '#= JobNumber #'
},
{
field: "CustomerId",
title: "Customer",
template: '#= Customer.Name #'
},
{
field: "Id",
title: "Id"
},
#*{
field: "ShortDesc",
title: "ShortDesc"
},*#
{
field: "DateCompletition",
title: "DateCompletition"
},
{
field: "Id",
title: "#T("Common.Edit")",
width: 130,
template: 'Edit'
}
],
pageable: {
refresh: true,
pageSizes: [5, 10, 20, 50]
},
editable: {
confirmation: false,
mode: "inline"
},
scrollable: false,
// sortable: true,
// navigatable: true,
// filterable: true,
// scrollable: true,
selectable: true
});
});
</script>
It seems you want to add a command to the grid, The way to add a command as described here is as follows
var grid = $("#jobs-grid").kendoGrid({
dataSource: {
pageSize: 20,
data: #Html.Raw(JsonConvert.SerializeObject(Model.FinishedJobs)),
},
pageable: true,
height: 550,
columns: [
{ field: "JobNumber", title: "JobNumber", width: "140px" },
{ field: "CustomerId", title: "Customer", width: "140px" },
{ field: "Id", title:"Id" },
{ field: "DateCompletition", title:"DateCompletition" },
{ command: { text: "Edit",
click: function(e){
// here you can add your code
}},
title: " ",
width: "180px" }]
}).data("kendoGrid");
You might have a look on the documentation of the kendo grid here
Hope this will help you
i create an empty highchart and add a series to the chart.
This is my code:
chart = new Highcharts.Chart({
chart: {
renderTo: 'hccontainer',
zoomType: 'x'
},
title: {
text: 'Telegramme'
},
subtitle: {
text: 'Offline'
},
exporting: {
enabled: false
},
legend: {
enabled: true
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
}
});
And here for example i add a series:
$.ajax({
'url' : 'ajax.php',
'type': 'GET',
'data': {
'action' : 'eibmon_hctel',
'hsid': hsid,
'grp': grp,
'df': datefrom,
'dt': dateto
},
success: function(items) {
chart.addSeries({
name: series_name,
data: items
}, true);
},
cache: false
});
The ajax.php send this result:
{"1441614256000":"1","1441586308000":"0","1441523112000":"1","1441515496000":"0","1441360423000":"1"
,"1441344522000":"1","1441341118000":"0","1441254853000":"1","1441238297000":"0","1441094577000":"1"
,"1441086395000":"0","1441086143000":"1","1441085875000":"0","1441085622000":"1"}
The chart will be redrawn but the line is missing. In the legend the new series get displayed. Is it not possible to start with an empty chart?
Thanks
Looks like your JSON structure is icorrect. You should have a x/y fields and number values.
Example:
{
x:"1441614256000",
y:"1"
}
After loading data, you can convert your json into correct form, parsing data in preprocessing.
i would like do make highchart like this:
http://www.highcharts.com/stock/demo/dynamic-update
The data will be received realtime.
First time i pull data (quote and timestamp).
After this the data will be pushed.
My code:
//drow chart - pull
var highChart = function () {
Highcharts.setOptions({
global : {
useUTC : false
}
});
$('#container').highcharts('StockChart', {
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 0
},
title : {
text : 'Intraday chart'
},
exporting: {
enabled: false
},
series : [{
name : 'DAX DATA',
data :
}]
});
}
var setHighChart = function(lastPriceTimestamp,lastPrice) {
highChart.series[0].setData([lastPriceTimestamp,lastPrice]);
};
...
//push data
setHighChart(lastPriceTimestamp,lastPrice);
Maby you could help me
thx