Loading json data to highcharts with multiple series - c#
Please help. Been banging my head against the wall on this for a week, trying every option I can find on line but no luck...
Am using HighCharts with a C#/Razor/WebMatrix site. Trying to create a Stacked column chart - have my Categories loading dynamically but can't get the series loaded.
I am new to Javascript and web programming in general so please be kind!
The JSON return data is:
["Clubs","1850","2600","5600","4950","8535","6050","8640",
"Fesitvals","0","0","1000","750","0","1500","3250",
"Private","650","2300","1600","2500","0","400","900",
"Weddings","0","1400","3600","0","0","0","0",
"Other Income","0","0","70","540","50","0","0"]
I am trying to load the series data prior to rendering the chart...
The following is the entire script with formatting, etc.
script bombs out on the function to process and load the Json Data set (see Bold/Italic).
Chart looks great if hard code the series data, but since the site is database driven and the data changes regularly....
Here is the script:
$(function () {
var ChartType = document.getElementById("CType").value;
var SelectMember = document.getElementById("SMbmr").value;
Highcharts.theme = {
chart: {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, 'rgb(0, 0, 0'],
[1, 'rgb(0, 0, 0)']
]
},
borderWidth: 0,
borderRadius: 15,
plotBackgroundColor: null,
plotShadow: false,
plotBorderWidth: 0
},
title: {
style: {
color: '#FFF',
font: '16px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
}
},
subtitle: {
style: {
color: '#DDD',
font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
}
},
xAxis: {
gridLineWidth: 0,
lineColor: '#999',
tickColor: '#999',
labels: {
style: {
color: '#999',
fontWeight: 'bold'
}
},
title: {
style: {
color: '#AAA',
font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
}
}
},
yAxis: {
alternateGridColor: null,
minorTickInterval: null,
gridLineColor: 'rgba(255, 255, 255, .1)',
minorGridLineColor: 'rgba(255,255,255,0.07)',
lineWidth: 0,
tickWidth: 0,
labels: {
style: {
color: '#999',
fontWeight: 'bold'
}
},
title: {
style: {
color: '#AAA',
font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
}
}
},
legend: {
itemStyle: {
color: '#CCC'
},
itemHoverStyle: {
color: '#FFF'
},
itemHiddenStyle: {
color: '#333'
}
},
labels: {
style: {
color: '#CCC'
}
},
tooltip: {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, 'rgba(96, 96, 96, .8)'],
[1, 'rgba(16, 16, 16, .8)']
]
},
borderWidth: 0,
style: {
color: '#FFF'
}
},
plotOptions: {
series: {
shadow: true
},
line: {
dataLabels: {
color: '#CCC'
},
marker: {
lineColor: '#333'
}
},
spline: {
marker: {
lineColor: '#333'
}
},
scatter: {
marker: {
lineColor: '#333'
}
},
candlestick: {
lineColor: 'white'
}
},
toolbar: {
itemStyle: {
color: '#CCC'
}
},
navigation: {
buttonOptions: {
symbolStroke: '#DDDDDD',
hoverSymbolStroke: '#FFFFFF',
theme: {
fill: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0.4, '#606060'],
[0.6, '#333333']
]
},
stroke: '#000000'
}
}
},
// scroll charts
rangeSelector: {
buttonTheme: {
fill: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0.4, '#888'],
[0.6, '#555']
]
},
stroke: '#000000',
style: {
color: '#CCC',
fontWeight: 'bold'
},
states: {
hover: {
fill: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0.4, '#BBB'],
[0.6, '#888']
]
},
stroke: '#000000',
style: {
color: 'white'
}
},
select: {
fill: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0.1, '#000'],
[0.3, '#333']
]
},
stroke: '#000000',
style: {
color: 'yellow'
}
}
}
},
inputStyle: {
backgroundColor: '#333',
color: 'silver'
},
labelStyle: {
color: 'silver'
}
},
navigator: {
handles: {
backgroundColor: '#666',
borderColor: '#AAA'
},
outlineColor: '#CCC',
maskFill: 'rgba(16, 16, 16, 0.5)',
series: {
color: '#7798BF',
lineColor: '#A6C7ED'
}
},
scrollbar: {
barBackgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0.4, '#888'],
[0.6, '#555']
]
},
barBorderColor: '#CCC',
buttonArrowColor: '#CCC',
buttonBackgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0.4, '#888'],
[0.6, '#555']
]
},
buttonBorderColor: '#CCC',
rifleColor: '#FFF',
trackBackgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#000'],
[1, '#333']
]
},
trackBorderColor: '#666'
},
// special colors for some of the demo examples
legendBackgroundColor: 'rgba(48, 48, 48, 0.8)',
legendBackgroundColorSolid: 'rgb(70, 70, 70)',
dataLabelsColor: '#444',
textColor: '#E0E0E0',
maskColor: 'rgba(255,255,255,0.3)'
};
// Apply the theme
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
var CatName = new Array();
var DataSeries = new Array();
var currentDate = new Date();
var currentYear = currentDate.getFullYear();
for (var i = 2007; i <= currentYear; i++) {
CatName.push(i.toString());
}
***$.getJSON('/Admin/Accounting/ChartJSon/' + ChartType + '/0', function (DataSet) {
options.series = DataSet;
});***
$('#container').highcharts(
{
chart:
{
renderTo: 'container',
defaultSeriesType: 'column',
plotBorderWidth: 1,
plotBorderColor: '#3F4044'
},
credits: { enabled: false },
title:
{
text: 'Sales by Type and Year'
},
xAxis:
{
categories: CatName
},
yAxis:
{
allowDecimals: false,
min: 0,
title:
{
text: 'Sales'
}
},
tooltip:
{
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions:
{
column:
{
stacking: 'normal'
}
},
series: []
});
});
Well I see some problems here. First try to replace the highchart code with the below mentioned code. As you need to specify data for each series in the series option. and provide with the unique name.
$('#container').highcharts(
{
chart:
{
renderTo: 'container',
defaultSeriesType: 'column',
plotBorderWidth: 1,
plotBorderColor: '#3F4044'
},
credits: { enabled: false },
title:
{
text: 'Sales by Type and Year'
},
xAxis:
{
categories: CatName
},
yAxis:
{
allowDecimals: false,
min: 0,
title:
{
text: 'Sales'
}
},
tooltip:
{
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions:
{
column:
{
stacking: 'normal'
}
},
series: [{
name: 'Clubs',
data: []
}, {
name: 'Festivals',
data: []
}, {
name: 'Private',
data: [],
}, {
name: 'Weddings',
data: [],
}, {
name: 'OtherIncome',
data: [],
}]
});
});
And your JSON should be an array consisting only numbers.
Chart initialization should in insie getJSON body, because you try to initialize chart, earlier then data is get from URL
In JSON you need to use numbers, not strings. If it is not possbile, you need to parse values in javascript by parseFloat on each data value.
Your series data object, should contian only numbers, not names like "Fesitvals". If you wuld like to have a few series, and each of them has own name, you need to parse your json and praaper correct array structure.
Related
C# define array like PHP
I have PHP array code like this: $waypoint = [ 10 => [ [80, 432], [320, 432], [1160, 432], ], 20 => [ [80, 432], [320, 432], [1160, 432], ], ]; How can I do in C#?
Maybe you want a Dicitionary<TKey, TValue>:
var keyValues = new Dictionary<int, int[,]>
{
{ 10, new int[,]{ { 80, 432 }, { 320, 432 }, { 1160, 432 } } },
{ 20, new int[,]{ { 80, 432 }, { 320, 432 }, { 1160, 432 } } },
{ 30, new int[,]{ { 80, 432 }, { 320, 432 }, { 1160, 432 } } }
};
Read more about Dictionary<TKey, TValue>
Chart to display data recorded by month
I have a table where the records have date field column with values like Date (column 1) 11/1/2019 12/1/2012 12/1/2012 1/3/2013 1/3/2013 1/3/2013 1/3/2013 etc. Orders (column 2) project project project project I want to display a number of records interred by month to chart. I don't know anything about this Like this
1.First You need to download from nuget.
highcharts.js and
highchartexporting.js
2.Then Declare w where you want show the graph.
like,,
<div id="MonthlyColLine" style="width: 700px; height: 250px; margin: 0 auto"></div>
3.Then add To render Graph
like,
//link your dowloaded higcharts.js and highchartexporting.js to those where you show the graph
<script language="javascript" type="text/javascript">
Highcharts.setOptions({
lang: {
decimalPoint: '.',
thousandsSep: ' '
}
});
$("#MonthlySales").highcharts({
chart: {
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: 'Month Wise Sales',
style: {
color: '#44994a',
fontWeight: 'bold'
}
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Amount in Crore.'
}
},
legend: {
enabled: true
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b> of total<br/>'
},
"series": [
{
"name": "Sales",
"colorByPoint": true,
"data": [
{
"name": "Jan",
"y": 18000,//Ypur data here
},
{
"name": "Feb",
"y": 20000,
},
{
"name": "March",
"y": 20000,
},
{
"name": "April",
"y": 2000,
},
{
"name": "May",
"y": 2000,
},
{
"name": "June",
"y": 2000,
},
{
"name": "July",
"y": 2000,
},
{
"name": "Aug",
"y":2000,
},
{
"name": "Sep",
"y": 2000,
},
{
"name": "Oct",
"y": 2000,
},
{
"name": "Nov",
"y": 2000,
},
{
"name": "Dec",
"y": 2000,
}
]
}
]
});
}
</script>
Refresh Kendo dropdownlist after event change of another dropdownlist
When I change the value from the first ddl I get the data from Ajax of the other ddl but it doesnt refresh.
This is my grid
$("#grid").kendoGrid({
dataSource:
height: 500,
toolbar: ["create"],
columns: [
{ command: ["edit"], title: " ", width: "150px", locked: true },
{ field: "RowLabels", title: "Row Labels", width: "180px", locked: true },
{ field: "IdValueStream", title: "VS", width: "90px", locked: true, editor: vsDropDownEditor, template: "#=getVsName(IdValueStream)#" }, //, template: "#=IdValueStream.ValueStream#"
{ field: "IdLine", title: "Line", width: "180px", locked: true, editor: linesDropDownEditor }, //, template: "#=getLineName(IdLine)#"
{ field: "W1", title: Weeks[0].W1.substring(0, 10), width: "98px" }, //
{ field: "W2", title: Weeks[0].W2.substring(0, 10), width: "90px" },
{ field: "W3", title: Weeks[0].W3.substring(0, 10), width: "90px" },
{ field: "W4", title: Weeks[0].W4.substring(0, 10), width: "90px" },
{ field: "W5", title: Weeks[0].W5.substring(0, 10), width: "90px" },
{ field: "W6", title: Weeks[0].W6.substring(0, 10), width: "90px" },
{ field: "W7", title: Weeks[0].W7.substring(0, 10), width: "90px" },
{ field: "W8", title: Weeks[0].W8.substring(0, 10), width: "90px" },
{ field: "W9", title: Weeks[0].W9.substring(0, 10), width: "90px" },
{ field: "W10", title: Weeks[0].W10.substring(0, 10), width: "90px" },
{ field: "W11", title: Weeks[0].W11.substring(0, 10), width: "90px" },
{ field: "W12", title: Weeks[0].W12.substring(0, 10), width: "90px" },
{ field: "W13", title: Weeks[0].W13.substring(0, 10), width: "90px" }
],
editable: "inline"
});
This is the method from the editor of the first ddl
function vsDropDownEditor(container, options) {
$('<input id="ddlVs" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "ValueStream",
dataValueField: "Id",
dataSource: categories,
select: onSelect
});
}
And this the other method from editor of the second ddl
function linesDropDownEditor(container, options) {
$('<input data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "Line",
dataValueField: "Id",
dataSource: lines
});
}
So when I select an item of the first ddl I want to refresh the second ddl
Put an id attribute for your second dropdown then in onSelect function of ddVs you can add this line of code.
$("#nameOfYourSecondDropdownHere").data('kendoDropDownList').dataSource.read();
You can also check out the following example - Cascading DropDownLists used as editors in Grid: Add Cascading DropDownList Editors
jqxGrid: conditionally add edit button per row
i have jqxGrid and display data fine using ajax request and everything is workig fine .
My problem : in grid coulmns i added edit button but i want to add this button conditionally depended on values of another field
My Code :
$(document).ready(function () {
$("#btnsearchHistory").click(function () {
var txtfrom = $('#txtfrom').val();
var txtto = $('#txtto').val();
var terminalId = $('#txtMerchantAccounthistory').val();
var SOFAccount = $('#txtsalesNumber').val();
var statMsg = $('#drpStatMsg').val();
var formatedData = '';
var totalrecords = 0;
if (txtfrom == "") {
alert("Select Valid From Date");
event.returnValue = false;
return false;
}
if (txtto == "") {
alert("Select Valid To Date");
event.returnValue = false;
return false;
}
var source = {
datatype: "json",
datafields: [
{ name: 'Id' },
{ name: 'TerminalId' },
{ name: 'UserName' },
{ name: 'Error' },
{ name: 'Date' },
{ name: 'SalesAccount' },
{ name: 'BillTypeCode' },
{ name: 'Amount' },
{ name: 'BillerCode' },
{ name: 'BankID' },
{ name: 'ReqId' }
],
sort: function () {
$("#grid").jqxGrid('updatebounddata', 'sort');
},
filter: function () {
$("#grid").jqxGrid('updatebounddata', 'filter');
},
beforeprocessing: function (data) {
var returnData = {};
data = data.d;
totalrecords = data.count;
returnData.totalrecords = data.count;
returnData.records = data.data;
if (data.data != null) {
return returnData;
}
return data;
},
type: 'Get',
sortcolumn: 'Id',
sortdirection: 'desc',
formatdata: function (data) {
data.pagenum = data.pagenum || 0;
data.pagesize = data.pagesize || 10;
data.sortdatafield = data.sortdatafield;
data.sortorder = data.sortorder || 'asc';
data.filterscount = data.filterscount || 0;
formatedData = buildQueryString(data);
return formatedData;
},
url: '/WS/WS.asmx/SearchTransferLog',
data: { fromDate: JSON.stringify(txtfrom), toDate: JSON.stringify(txtto), terminalId: JSON.stringify(terminalId), SOFAccount: JSON.stringify(SOFAccount), statMsg: JSON.stringify(statMsg) },
};
var dataAdapter = new $.jqx.dataAdapter(source, {
contentType: 'application/json; charset=utf-8',
loadError: function (xhr, status, error) {
alert(error);
}
});
var cols = [
{ text: 'Id', dataField: 'Id', hidden: true },
{ text: 'رقم حساب التاجر', dataField: 'TerminalId', width: '28%', align: "right", cellsalign: "right", hidden: true },
{ text: '', dataField: 'UserName', width: '28%', align: "right", cellsalign: "right", hidden: true },
{ text: 'الحالة', dataField: 'Error', width: '28%', align: "right", cellsalign: "right" },
{ text: 'تاريخ الدفع', dataField: 'Date', width: '18%', align: "right", cellsalign: "right" },
{ text: 'حساب الدفع', dataField: 'SalesAccount', width: '15%', align: "right", cellsalign: "right" },
{ text: 'توقعات الاغلاق على', dataField: 'BillTypeCode', width: '15%', align: "right", cellsalign: "right", hidden: true },
{ text: 'القيمة المحولة', dataField: 'Amount', width: '15%', align: "right", cellsalign: "right" },
{ text: 'توقعات الاغلاق على', dataField: 'BillerCode', width: '15%', align: "right", cellsalign: "right", hidden: true },
{ text: 'توقعات الاغلاق على', dataField: 'BankID', width: '15%', align: "right", cellsalign: "right", hidden: true },
{ text: 'توقعات الاغلاق على', dataField: 'ReqId', width: '15%', align: "right", cellsalign: "right", hidden: true },
{
text: '', datafield: 'Edit', columntype: 'button', width: '100px', cellsrenderer: function () {
return "استعلام عن الحالة";
}, buttonclick: function (row) {
var id = $("#detail_grid").jqxGrid('getcellvalue', row, "Id");
alert(id);
//RefreshTransferStatus();
}
}
];
$("#detail_grid").jqxGrid({
source: dataAdapter,
pageable: true,
autoheight: true,
virtualmode: true,
sorttogglestates: 1,
filterable: true,
sortable: true,
rtl: true,
altrows: true,
width: '100%',
rendergridrows: function (args) {
return args.data;
},
columns: cols
});
});
});
Highcharts are not redraw
I am trying below codes in my C# page but my highcharts are not able to auto redraw.
It always remain same chart as when it was at first time load.
When I go to the view source of the page I can see new data but it not drawn.
Can anybody here help me out to find the problem
<script src="/_layouts/ChartDemo/jquery-1.7.min.js" type="text/javascript"></script>
<script src="/_layouts/ChartDemo/highcharts.js" type="text/javascript"></script>
<asp:Literal ID="lblErrorMsg" runat="server" Text=""></asp:Literal>
<script type="text/jscript">
function chart() {
$('#container').highcharts({
credits : {enabled :0 },
title: {
text: null
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { minute: '%l:%M<br>%p' },
max: <%= MilliTimeStamp(_closingTime) %>,
min: <%= MilliTimeStamp(_openingTime) %>,
tickInterval: 0.5 * 3600 * 1000,
minorTickInterval: 0.1 * 3600 * 1000,
title: {
text: null
},
lineWidth: 1,
minorGridLineWidth: 1,
endOnTick : true,
gridLineWidth: 1
},
yAxis: {
title: {
text: null
},
tickInterval : <%= _tickIntervalY %>,
max : <%= _maxY %>,
min: <%= _minY %>,
},
tooltip: {
shared: true
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
},
line : {
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'Price Index'
},
{
type: 'line',
name: 'Price',
color: 'Red',
index: -1
}]
});
var chart1 = $('#container').highcharts();
chart1.series[0].setData(<%=output3%>);
chart1.series[1].setData(<%=output%>);
}
$(document).ready(function() {
$.ajaxSetup({ cache: false});
chart();
setInterval(function() {chart();}, 5000);
});
</script>
<div id="container" style="Width:390px;Height:265px;" > </div >
<asp:Literal ID="lblIntraday" runat="server" Visible="false"></asp:Literal>
This is my View source
<script type="text/jscript">
function chart() {
$('#container').highcharts({
credits : {enabled :0 },
title: {
text: null
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { minute: '%l:%M<br>%p' },
max: 1366210680000,
min: 1366189200000,
tickInterval: 0.5 * 3600 * 1000,
minorTickInterval: 0.1 * 3600 * 1000,
title: {
text: null
},
lineWidth: 1,
minorGridLineWidth: 1,
endOnTick : true,
gridLineWidth: 1
},
yAxis: {
title: {
text: null
},
tickInterval : 29,
max : 7024,
min: 6881,
},
tooltip: {
shared: true
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
},
line : {
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'Price Index'
},
{
type: 'line',
name: 'Price',
color: 'Red',
index: -1
}]
});
var chart1 = $('#container').highcharts();
chart1.series[0].setData([[1366189200000,6939.37],[1366210680000,6939.37]]);
chart1.series[1].setData([[1366189931000,6938.64],[1366189997000,6939.4], [1366190063000,6938.53],[1366190129000,6943.05],[1366190195000,6942.73],[1366190261000,6943.86],[1366190327000,6944.75],[1366190393000,6941.99],[1366190459000,6941.99],[1366190525000,6945.68],[1366190591000,6943.87],[1366190657000,6947.65],[1366190723000,6942.59],[1366190789000,6941.3],[1366190855000,6943.45],[1366190921000,6946.95],[1366190987000,6949.75],[1366191053000,6952.11],[1366191119000,6950.53],[1366191185000,6951.58],[1366191251000,6953.94],[1366191317000,6954.86],[1366191383000,6955.88],[1366191449000,6957.07],[1366191515000,6956.87],[1366191581000,6956.45],[1366191647000,6958.76],[1366191713000,6956.84],[1366191779000,6956.97],[1366191845000,6955.68],[1366191911000,6957.18],[1366191977000,6960.6],[1366192043000,6959.11],[1366192109000,6960.15],[1366192175000,6960.79],[1366192241000,6962.1],[1366192307000,6964.19],[1366192373000,6963.18],[1366192439000,6966.65],[1366192505000,6964.51],[1366192571000,6963.36],[1366192637000,6960.11],[1366192703000,6958.91],[1366192769000,6959.24],[1366192835000,6955.61],[1366192901000,6955.03],[1366192967000,6955.27],[1366193033000,6954.94],[1366193099000,6954.32],[1366193165000,6953.34],[1366193231000,6951.17],[1366193297000,6951.88],[1366193363000,6955.12],[1366193429000,6956.47],[1366193495000,6954.09],[1366193561000,6953.49],[1366193627000,6953.49],[1366193693000,6953.49],[1366193759000,6953.49],[1366193825000,6953.49],[1366193891000,6953.49],[1366193957000,6953.49],[1366194023000,6953.49],[1366194089000,6953.49],[1366194155000,6953.49],[1366194221000,6953.49],[1366194287000,6953.49],[1366194353000,6953.49],[1366194419000,6953.49],[1366194485000,6953.49],[1366194551000,6953.49],[1366194617000,6953.49],[1366194683000,6953.49],[1366194749000,6953.49],[1366194815000,6953.49],[1366194881000,6953.49],[1366194947000,6953.49],[1366195013000,6953.49],[1366195079000,6953.49],[1366195145000,6953.49],[1366195211000,6953.49],[1366195277000,6953.49],[1366195343000,6953.49],[1366195409000,6953.49],[1366195475000,6953.49],[1366195541000,6953.49],[1366195607000,6953.49],[1366195673000,6953.49],[1366195739000,6953.49],[1366195805000,6953.49],[1366195871000,6953.49],[1366195937000,6953.49],[1366196003000,6953.49],[1366196069000,6953.49],[1366196135000,6953.49],[1366196201000,6953.49],[1366196267000,6953.49],[1366196333000,6953.49],[1366196399000,6953.49],[1366196465000,6953.49],[1366196531000,6953.49],[1366196597000,6953.49],[1366196663000,6953.49],[1366196729000,6953.49],[1366196795000,6953.49],[1366196861000,6953.49],[1366196927000,6953.49],[1366196993000,6953.49],[1366197059000,6953.49],[1366197125000,6953.49],[1366197191000,6953.49],[1366197257000,6953.49],[1366197323000,6953.49],[1366197389000,6953.49],[1366197455000,6953.49],[1366197521000,6953.49],[1366197587000,6953.49],[1366197653000,6953.49],[1366197719000,6953.49],[1366197785000,6953.49],[1366197851000,6953.49],[1366197917000,6953.49],[1366197983000,6953.49],[1366198049000,6953.49],[1366198115000,6953.49],[1366198181000,6953.49],[1366198247000,6953.49],[1366198313000,6953.49],[1366198379000,6953.49],[1366198445000,6953.49],[1366198511000,6953.49],[1366198577000,6953.49],[1366198643000,6953.49],[1366198709000,6953.49],[1366198775000,6953.49],[1366198841000,6953.49],[1366198907000,6953.49],[1366198973000,6953.49],[1366199039000,6953.49],[1366199105000,6953.49],[1366199171000,6953.49],[1366199237000,6953.49],[1366199303000,6953.49],[1366199369000,6953.49],[1366199435000,6953.49],[1366199501000,6953.49],[1366199567000,6953.49],[1366199633000,6953.49],[1366199699000,6953.49],[1366199765000,6953.49],[1366199831000,6953.49],[1366199897000,6953.49],[1366199963000,6953.49],[1366200029000,6953.49],[1366200095000,6953.49],[1366200161000,6953.49],[1366200227000,6953.49],[1366200293000,6953.49],[1366200359000,6953.49],[1366200425000,6953.49],[1366200491000,6953.49],[1366200557000,6953.49],[1366200623000,6953.49],[1366200689000,6953.49],[1366200755000,6953.49],[1366200821000,6953.49],[1366200887000,6953.49],[1366200953000,6953.49],[1366201019000,6953.49],[1366201085000,6953.49],[1366201151000,6953.49],[1366201217000,6953.49],[1366201283000,6953.49],[1366201349000,6953.49],[1366201415000,6953.49],[1366201481000,6953.49],[1366201547000,6953.49],[1366201613000,6953.49],[1366201679000,6953.49],[1366201745000,6953.49],[1366201811000,6953.49],[1366201877000,6953.49],[1366201943000,6953.49],[1366202009000,6953.49],[1366202075000,6953.49],[1366202141000,6953.49],[1366202207000,6953.49],[1366202273000,6953.49],[1366202339000,6953.49],[1366202405000,6953.49],[1366202471000,6953.49],[1366202537000,6953.49],[1366202603000,6953.49],[1366202669000,6953.49],[1366202735000,6953.49],[1366202801000,6953.49],[1366202867000,6953.49],[1366202933000,6953.49],[1366202999000,6953.49],[1366203065000,6953.49],[1366203131000,6953.49],[1366203197000,6953.49],[1366203263000,6953.49],[1366203329000,6953.49],[1366203395000,6953.49],[1366203461000,6953.49],[1366203527000,6953.49],[1366203593000,6953.49],[1366203659000,6953.49],[1366203725000,6953.49],[1366203791000,6953.49],[1366203857000,6953.49],[1366203923000,6953.49],[1366203989000,6953.49],[1366204055000,6953.49],[1366204121000,6953.49],[1366204187000,6953.49],[1366204253000,6953.49],[1366204319000,6953.6],[1366204385000,6954.76],[1366204451000,6954.75],[1366204517000,6953.47],[1366204583000,6950.78],[1366204649000,6949.79],[1366204715000,6949.41],[1366204781000,6951.84],[1366204847000,6950.22],[1366204913000,6947.8],[1366204979000,6949.15],[1366205045000,6949.23],[1366205111000,6950.83],[1366205177000,6952.41],[1366205243000,6952.42],[1366205309000,6950.59],[1366205375000,6951.86],[1366205441000,6953.94],[1366205507000,6954.89],[1366205573000,6954.11],[1366205639000,6952.1],[1366205705000,6951.83],[1366205771000,6953.92],[1366205837000,6956.96],[1366205903000,6956.65],[1366205969000,6957.34],[1366206035000,6955.55],[1366206101000,6954.53],[1366206167000,6954.29],[1366206233000,6955.17],[1366206299000,6954.43],[1366206365000,6954.11],[1366206431000,6951.62],[1366206497000,6955.09],[1366206563000,6953.16],[1366206629000,6954.58],[1366206695000,6953.19],[1366206761000,6953.71],[1366206827000,6952.52],[1366206893000,6949.97],[1366206959000,6951.15],[1366207025000,6949.91],[1366207091000,6950.05],[1366207157000,6949.72],[1366207223000,6948.89],[1366207289000,6949.17],[1366207355000,6950.68],[1366207421000,6946.5],[1366207487000,6948.74],[1366207553000,6949.1],[1366207619000,6950.1],[1366207685000,6950.64],[1366207751000,6950.16],[1366207817000,6949.36],[1366207883000,6950.28],[1366207949000,6950.92],[1366208015000,6947.01],[1366208081000,6946.68],[1366208147000,6945.1],[1366208213000,6940.49],[1366208279000,6941],[1366208345000,6941.92],[1366208411000,6940.79],[1366208477000,6938.13],[1366208543000,6940.11],[1366208609000,6941.44],[1366208675000,6938.81],[1366208741000,6939.83],[1366208807000,6942.09],[1366208873000,6941.54],[1366208939000,6941.58],[1366209005000,6942.39],[1366209071000,6940.98],[1366209137000,6939.87],[1366209203000,6940.65],[1366209269000,6941.29],[1366209335000,6940.24],[1366209401000,6940.26],[1366209467000,6943.39],[1366209533000,6944.74],[1366209599000,6948.32],[1366209665000,6950.42],[1366209731000,6950.06],[1366209797000,6945.72],[1366209863000,6945.49],[1366209929000,6944.25],[1366209995000,6942.01],[1366210061000,6942.06],[1366210127000,6940.87],[1366210193000,6939.34],[1366210259000,6939.76]]);
}
$(document).ready(function() {
$.ajaxSetup({ cache: false});
chart();
setInterval(function() {chart();}, 5000);
});
Well I come up with solution with making different page where I will generate series on Page Load method in json format and Response.write than I will call that page with $.ajax call to get the data and push it to the series. I will also call that page very 1 minute to get new data. Check out my code for client side which may help to somebody.
var options = {
chart : {
renderTo: 'container',
},
credits : {enabled :0 },
title: {
text: null
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { minute: '%l:%M<br>%p' },
max: <%= MilliTimeStamp(_closingTime) %>,
min: <%= MilliTimeStamp(_openingTime) %>,
tickInterval: 0.5 * 3600 * 1000,
minorTickInterval: 0.1 * 3600 * 1000,
title: {
text: null
},
lineWidth: 1,
minorGridLineWidth: 1,
endOnTick : true,
gridLineWidth: 1,
labels : { style: {font: '7.5pt Trebuchet MS'}},
reversed: true // true for arabic layout and false for english layout
},
yAxis: {
title: {
text: null
},
tickInterval : <%= _tickIntervalY %>,
max : <%= _maxY %>,
min: <%= _minY %>,
labels : { style: {font: '7.5pt Trebuchet MS'}},
opposite : true // true for arabic layout and false for english layout
},
tooltip: {
shared: true
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
},
line : {
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: []
};
function recieveData()
{
$.getJSON('/_layouts/ChartDemo/AjaxTest.aspx', function(data) {
var series = {type: 'area',name: 'Price Index'}; // <-------------------- moved and changed to object
series.data = data;
options.series.push(series); // <-------- pushing series object
var series3 = {
type: 'line',
name: 'Price',
color: 'Red',
index: -1,
data : <%=output %>
};
options.series.push(series3);
var chart = new Highcharts.Chart(options);
while(chart.series.length > 2)
chart.series[1].remove(true);
});
}
$(document).ready(function() {
$.ajaxSetup({ cache: false });
recieveData();
setInterval("recieveData()", 100000);
});