I have following code in my view:
#Styles.Render("~/Content/newcss")
#Scripts.Render("~/bundles/chartscripts")
#Scripts.Render("~/scripts/jquery-1.10.2.js")
#Scripts.Render("~/scripts/jquery.unobtrusive-ajax.js")
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.bundle.min.js">
</script>
<script>
$.ajax({
type: "post",
url: "/GraphicsController/AjaxChart",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function () {
var ctx1 = document.getElementById("Linecanvas").getContext("2d");
window.myBar = new Chart(ctx1,
{ type: 'line',
data: {
labels: [#Html.Raw(Json.Encode(#ViewBag.ContentIds))],
datasets: [{
label: "Common Responses",
backgroundColor: "rgba(75,192,192,0.4)",
borderWidth: 2,
data: [#Html.Raw(Json.Encode(#ViewBag.ContentIds))]
},{
label: "Delayed Responses",
backgroundColor: "rgba(75,192,192,0.4)",
borderWidth: 2,
data:
[#Html.Raw(Json.Encode(#ViewBag.DelayedResponseTimes))]
}]},
options:{title:
{display: true,
text: "Graphic"},
responsive: true,
maintainAspectRatio: true
}});},
error: function OnErrorCall_(repo) {alert("Woops something went wrong,
pls try later !");}});
</script>
</head>
<body>
<div id="wrapper">
<div id="div-chart">
<canvas id="Linecanvas"></canvas>
</div>
...
<body>
And in controller:
[HttpPost]
public ActionResult AjaxChart() {
IEnumerable < DBContent > contents = db.DBContents;
var delayedResponses = contents.Where(r => r.DelayedResponseTime != 0).Select(x => x.DelayedResponseTime);
var commonResponses = contents.Where(r => r.CommonResponseTime != 0).Select(x => x.CommonResponseTime);
ViewBag.DelayedResponseTimes = delayedResponses.ToList();
ViewBag.CommonResponseTimes = commonResponses.ToList();
var ContentIds = new List < int > () {};
for (var i = 1; i <= delayedResponses.Count(); i++) {
ContentIds.Add(i);
}
ViewBag.ContentIds = ContentIds;
return Json(delayedResponses.ToList(), JsonRequestBehavior.AllowGet);
}
I tried to build line chart with chartjs, and without Ajax I have done it, but I want to my chart rebuild automatically without page refreshing and without any actions on page (triggers for Ajax like clicking buttons etc) when I get a new items in the database. With this code I always go to the error block.
You cannot use ViewBag with Ajax, you can only return one single result object. Combine all those returned objects as properties of one parent object:
[HttpGet]
public ActionResult AjaxChart() {
IEnumerable<DBContent> contents = db.DBContents;
var delayedResponses = contents.Where(r => r.DelayedResponseTime != 0)
.Select(x => x.DelayedResponseTime);
var commonResponses = contents.Where(r => r.CommonResponseTime != 0)
.Select(x => x.CommonResponseTime);
var ContentIds = new List<int>();
for (var i = 1; i <= delayedResponses.Count(); i++) {
ContentIds.Add(i);
}
var result = new {
DelayedResponseTimes = delayedResponses.ToList(),
CommonResponseTimes = commonResponses.ToList(),
ContentIds = ContentIds
};
return Json(result, JsonRequestBehavior.AllowGet);
}
Now, in your jQuery, you need to get the data (you're not doing that). Change the line:
success: function () {
to:
success: function (result) {
And then you need to change all those line using ViewBag to using the result parameter:
success: function(result) {
var ctx1 = document.getElementById("Linecanvas").getContext("2d");
window.myBar = new Chart(ctx1, {
type: 'line',
data: {
labels: result.ContentIds,
datasets: [{
label: "Common Responses",
backgroundColor: "rgba(75,192,192,0.4)",
borderWidth: 2,
data: result.CommonResponseTimes
}, {
label: "Delayed Responses",
backgroundColor: "rgba(75,192,192,0.4)",
borderWidth: 2,
data: result.DelayedResponseTimes
}]
},
options: {
title: {
display: true,
text: "Graphic"
},
responsive: true,
maintainAspectRatio: true
}
});
},
And finally, in the URL to your method, you must use the name of the controller without the suffix, so change this line:
url: "/GraphicsController/AjaxChart",
to:
url: "/Graphics/AjaxChart",
It is better to let ASP generate the URL for you, in case you change your routing or rename your method:
url: #Url.Action(nameof(GraphicsController.AjaxChart), "Graphics"),
Thanks ... it Successfully works for me. But there is little change needed:
public ActionResult AjaxChart()
to:
public JsonResult AjaxChart()
Related
I currently have one js file that serves all the html scripts, that is starting to become tedious.
It looks like this:
// Using .html in jQuery big NO NO: https://medium.com/#jenlindner22/the-risk-of-innerhtml-3981253fe217, switched to .text
// Chart Variables
var teamProgressChart
// Get initial value from filters in /table
var seasonSelection = $('#seasonToggle').children(":first").val()
var typeSelection = $('#homeAwayToggle').children(":first").val()
var MatchweekSelection = $('#homeAwayToggle').children(":first").val()
// var leagueTableUpdateTimeStamp = 0
/**
* Team progress chart update in /table
*/
$(".clickable-row").click(function() {
const teamVal = $(this).attr('value')
$.ajax({
type: 'POST',
url: '/table/team?' + $.param({ teamId: teamVal }),
success: (res) => {
var result = res[0]
var points = result.pointsAll
var position = result.positionAll
var labels = result.gameweeks
console.log(points)
console.log(position)
console.log(labels)
if (teamProgressChart) {
teamProgressChart.data.labels = labels
teamProgressChart.data.datasets[0].data = points
teamProgressChart.data.datasets[1].data = position
teamProgressChart.update()
} else {
var ctx = document.getElementById('team-progress-graph').getContext('2d');
Chart.defaults.global.defaultFontSize = 24;
teamProgressChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [
{
label: "Points",
fillColor: "rgba(0,0,0,0)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(200,122,20,1)",
borderColor: "rgba(43, 87, 29, 0.9)",
fill: false,
data: points,
yAxisID: 'points'
},
{
label: "Position",
fillColor: "rgba(172, 26, 26, 0.9)",
strokeColor: "rgba(172, 26, 26, 0.9)",
pointColor: "rgba(172, 26, 26, 0.9)",
borderColor: "rgba(14, 86, 168, 0.9)",
fill: false,
data: position,
yAxisID: 'position'
},
],
},
options: {
scales: {
xAxes: [
{
ticks: {
fontSize: 24,
autoSkip: false,
beginAtZero: true
}
}
],
yAxes: [
{
id: 'points',
min: 0,
position: 'left',
ticks: {
fontSize: 24,
beginAtZero: true
}
},
{
id: 'position',
suggestedMin : 0,
suggestedMax : 20,
position: 'right',
ticks: {
fontSize: 24
}
},
]
},
display: false,
},
})
}
}
})
})
/**
* Button to updata data in /table
*/
$('#updateDataButton').bind('click', function(event){
console.log(event.timeStamp)
$.ajax({
type: 'POST',
url: '/table',
success: () => {
console.log('success')
window.location = "/";
}
})
});
/**
* Click eventlistner for home-page player stats
*/
const homeTable = document.querySelectorAll(".stats-item");
homeTable.forEach(element => {
element.addEventListener('click', homeTableToggle)
})
function homeTableToggle(event){
var queryVal = event.target.value
console.log(queryVal)
if (queryVal == 1){
$.ajax({
type: 'POST',
url: '/?' + $.param({ statsType: queryVal}),
success: (newVals) => {
$('#stats-placehld').text("AvgPlayTime")
$('#stats-placehld1').text("AvgPasses")
console.log($('#stats-placehld1').textContent)
$('#playerStatsAvg').empty();
for(let i = 0; i < 50; i++) {
let filteredTr = newVals[i]
let newHtml = `<tr>
<td>${filteredTr.name}</td>
<td>${filteredTr.teamName}</td>
<td>${filteredTr.position}</td>
<td>${filteredTr.averagePlaytime}</td>
<td>${filteredTr.averagePasses}</td>
</tr>`
$('#playerStatsAvg').append(newHtml)
}
}
})
} else if (queryVal == 2){
$.ajax({
type: 'POST',
url: '/?' + $.param({ statsType: queryVal}),
success: (newVals) => {
$('#stats-placehld').text("AvgShots")
$('#stats-placehld1').text("AvgOnTarget")
$('#playerStatsAvg').empty();
for(let i = 0; i < 50; i++) {
let filteredTr = newVals[i]
let newHtml = `<tr>
<td>${filteredTr.name}</td>
<td>${filteredTr.teamName}</td>
<td>${filteredTr.position}</td>
<td>${filteredTr.averageShotsPerGame}</td>
<td>${filteredTr.averageShotsOnTarget}</td>
</tr>`
$('#playerStatsAvg').append(newHtml)
}
}
})
}
}
//Click eventlistner for all table-filters
const selection = document.querySelectorAll(".dropdown-item");
selection.forEach(element => {
element.addEventListener('click', pickSelection)
})
function pickSelection(event) {
let text = ""
switch(event.target.parentElement.id){
case 'seasonToggle':
text = event.target.textContent
$('#seasonvalue').text(text)
seasonSelection = event.target.value
break
case 'homeAwayToggle':
text = event.target.textContent
$('#typevalue').text(text)
typeSelection = event.target.value
break
case 'matchWeekToggle':
text = event.target.textContent
$('#matchDropDownMenyButton').text(text)
MatchweekSelection = event.target.value
break
}
//Get request for
$.ajax({
type: 'POST',
url: '/table?' + $.param({ seasonVal: seasonSelection,
typeVal: typeSelection,
matchWeekVal: MatchweekSelection}),
success: (filteredSeasonValues) => {
$('#league-table-rows').empty();
for(let i = 0; i < 20; i++) {
let filteredTr = filteredSeasonValues[i]
let newHtml = `<tr>
<td>${i+1}</td>
<td><img src='badges/${filteredTr.team_shortName}.png' />
${filteredTr.team_shortName}</td>
<td>${filteredTr.played}</td>
<td>${filteredTr.won}</td>
<td>${filteredTr.drawn}</td>
<td>${filteredTr.lost}</td>
<td>${filteredTr.goalsFor}</td>
<td>${filteredTr.goalsAgainst}</td>
<td>${filteredTr.goalsDifference}</td>
<td>${filteredTr.points}</td>
</tr>`
$('#league-table-rows').append(newHtml)
}
}
})
}
How would one go about splitting it into multiple files, let's say page specific and importing them to a global js-file that later gets served, so the structure looks like this?
home.js
//home specific jquery functions
table.js
//table specific jquery functions
client.js
import home.js
import table.js
index.html
<script src="js/client.js" defer ></script>
I have an .aspx file which has drop-down lists and on selected index changed a javascript function is being called to update the series data points on a highchart rather than rendering the entire chart again. I have created the below function but this doesnt seem to be updating the highchart table.It works when updating the chart.
Used this example to create the chart and table that synchronize together:
https://www.highcharts.com/blog/tutorials/synchronize-selection-bi-directionally-between-chart-and-table/
But when I click an item on the dropdown which refreshes the points using setData the table is not updating the values!!!
function salesPurchaseScatter() {
console.log("I am in the function");
var scatterData = [];
var xAxisLabels = [];
var scatterDatas;
$.ajax({
type: "POST",
async: false,
url: "Index.aspx/ReturnData",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
scatterDatas = data.d;
}
});
const chart = window.chart;
console.log("CHart: ", chart);
chart.series[0].setData(scatterDatas.map(item => item["bucket5"]));
chart.series[1].setData(scatterDatas.map(item => item["bucket10"]));
chart.series[2].setData(scatterDatas.map(item => item["bucket15"]));
chart.series[3].setData(scatterDatas.map(item => item["bucket20"]));
chart.series[4].setData(scatterDatas.map(item => item["bucket25"]));
chart.series[5].setData(scatterDatas.map(item => item["bucket30"]));
chart.viewData();
}
The above is not updating the data points on the data table!
My original function to create the chart in the first place which works fine is below:
var scatterData = [];
var xAxisLabels = [];
var scatterDatas;
$.ajax({
type: "POST",
async: false,
url: "Index.aspx/ReturnData",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
scatterDatas = data.d;
}
});
let chart = Highcharts.chart('container1', {
chart: {
type: 'scatter',
events: {
selection: selectPointsByDrag,
click: unselectByClick
},
// necesssary to be able to select by dragging
zoomType: 'xy'
},
title: {
text: '(' + minDWT + ' <DWT ' + ' < ' + maxDWT + ')',
style: {
fontWeight: 'bold',
fontSize: '20px'
}
},
plotOptions: {
scatter: {
lineWidth: 2,
dashStyle: 'dot'
},
series: {
connectNulls: true,
allowPointSelect: true,
pointPadding: 0,
point: {
events: {
select: function (e) {
selectTableCell(this, true);
},
unselect: function (e) {
selectTableCell(this, false);
}
}
},
marker: {
states: {
select: {
fillColor: 'tomato',
borderColor: 'green'
}
}
}
}
},
series: [{
name: 'bucket5',
data: scatterDatas.map(item => item["bucket5"]),
turboThreshold: 0,
id: 'Results1',
marker: {
symbol: 'circle'
},
},
{
name: 'bucket10',
data: scatterDatas.map(item => item["bucket10"]),
turboThreshold: 0,
id: 'Results2',
marker: {
symbol: 'circle'
},
},
{
name: 'bucket15',
data: scatterDatas.map(item => item["bucket15"]),
turboThreshold: 0,
id: 'Results3',
marker: {
symbol: 'circle'
},
},
{
name: 'bucket20',
data: scatterDatas.map(item => item["bucket20"]),
turboThreshold: 0,
id: 'Results4',
marker: {
symbol: 'circle'
},
},
{
name: 'bucket25',
data: scatterDatas.map(item => item["bucket25"]),
turboThreshold: 0,
id: 'Results5',
marker: {
symbol: 'circle'
},
}, {
name: 'bucket30',
data: scatterDatas.map(item => item["bucket30"]),
turboThreshold: 0,
id: 'Results6',
marker: {
symbol: 'circle',
fillColor: 'red',
radius: 10
},
}],
xAxis: {
categories: scatterDatas.map(item => item["date"])
},
tooltip: {
formatter: function () {
var s = '<span style="color:' + this.point.color + '">\u25CF</span> ' + this.point.series.name + '<br /><b>Date: ' + this.x + '</b><br/><b>Sales Price: ' + this.y + '</b>';
return s;
}
},
exporting: {
showTable: true
},
});
UPDATE:
I have managed to get a step further. The chart is updating with the new data points but the table is not :
exporting: {
showTable: true
},
The fix i put in place:
const chart = window.chart;
console.log("CHart: ", chart);
for (i = 0; i < chart.series.length; i++) //Added this
chart.series[i].setData([]);
chart.series[0].setData(scatterDatas.map(item => item["bucket5"]));
chart.series[1].setData(scatterDatas.map(item => item["bucket10"]));
chart.series[2].setData(scatterDatas.map(item => item["bucket15"]));
chart.series[3].setData(scatterDatas.map(item => item["bucket20"]));
chart.series[4].setData(scatterDatas.map(item => item["bucket25"]));
chart.series[5].setData(scatterDatas.map(item => item["bucket30"]));
chart.viewData();
chart.redraw(); //Added this
Have i missed something out? Struggling to debug and identify what is going wrong
Found a JSFiddle which is similar to my current set up. http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/export-data/showtable/
The above JS Fiddle has a similar chart and table output. When i click on a drop down item I am trying to setData (the data point values) as per above code and this should update the chart and table. In my case it is only updating the chart and not the table. The function I am calling is salesPurchaseScatter on dropdown selected index changed event.
ATTEMPTED THIS:
const table = window.table;
table.series[0].setData(scatterDatas.map(item => item["saleagebucket5"]));
table.series[1].setData(scatterDatas.map(item => item["saleagebucket10"]));
table.series[2].setData(scatterDatas.map(item => item["saleagebucket15"]));
table.series[3].setData(scatterDatas.map(item => item["saleagebucket20"]));
table.series[4].setData(scatterDatas.map(item => item["saleagebucket25"]));
table.series[5].setData(scatterDatas.map(item => item["imo"]));
chart.redraw();
table.redraw();
but series is not possible using a table. How can i update the data using setData for the table? I tried using chart.viewData() but this doesnt seem to work either.
My guess is: const chart= window.chart; is only referring to the chart but dont know how to re-do the entire high chart canvas just the chart on it own!
A JSFiddle I tried to follow - https://jsfiddle.net/hxgp0yvj/
but same issue happening- Table not updating in this but chart does. I moved the code into my own solution to test it out. What am i missing?
Thank you for sharing it, after digging into I found out that it is a regression. I reported it on the Highcharts GitHub issue channel where you can follow this thread. If you don't need any new functionalities please use the previous version of the Highcharts until the bug will be fixed.
https://github.com/highcharts/highcharts/issues/14320
i am new to angular js and chart js. I want to plot graph with chart js with dynamic data, here is the result when server return:
I get the "nameArray" and "values" from the server and want to put inside chart.js
$scope.drawChart = function () {
console.log("start draw");
var name = $scope.result.nameArray
var value = $scope.result.values
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'bar',
// The data for our dataset
data: {
labels: name,
datasets: [{
// label: "My First dataset",
label: name,
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
// data: [0, 10, 5, 2, 20, 30, 45],
data: value,
}]
},
// Configuration options go here
options: {}
});
}
And my angular controller part:
$scope.result = [];
$scope.getPosts = function () {
$http({
method: 'POST',
url: 'http://localhost/test.php',
data: {
"action": "getchartdata",
"username": "username",
"deptname": "departname",
"officename": "office",
"softwarename": "this",
"StartTime": "time",
"EndTime": "time",
"ipaddress": "10.0.90.1"
},
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
transformRequest: function (data) {
var str = [];
for (var p in data)
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(data[p]));
return str.join("&");
}
}).then(function (result) {
$scope.result = result.data
console.log($scope.result);
console.log($scope.result.nameArray)
$scope.drawChart();
}, function (error) {
console.log("error")
});
};
I get this error:
I not sure what happening there, or is that chartjs doest support like this?
I have code like this
public static string summarydata(string RegNo)
{
try
{
TrackDataEntities1 sd = new TrackDataEntities1();
var mdata = new TrackDataEntities1().spsumdata(RegNo)
.Select(s => new { month = s.Month }).ToArray();
var sdata = new TrackDataEntities1().spsumdata(RegNo)
.Select(s => new { s.VName, s.total }).ToArray();
return Newtonsoft.Json.JsonConvert.SerializeObject(mdata) + "*" + Newtonsoft.Json.JsonConvert.SerializeObject(sdata);
}
catch (Exception)
{
throw new Exception();
}
}
now this return me data like this
"[{\"month\":\"July\"},{\"month\":\"June\"},{\"month\":\"June\"},
{\"month\":\"August\"},{\"month\":\"July\"},{\"month\":\"June\"},
{\"month\":\"May\"},{\"month\":\"June\"}]*[{\"VName\":\"DDSB\",\"total\":1},
{\"VName\":\"DPSB\",\"total\":1},{\"VName\":\"DSB\",\"total\":1},
{\"VName\":\"MV\",\"total\":5},{\"VName\":\"MV\",\"total\":11},
{\"VName\":\"MV\",\"total\":7},{\"VName\":\"MV\",\"total\":1},
{\"VName\":\"PSB\",\"total\":1}]"
jquery
UPDATED JQUERY
$(function () {
$('#tabledata').on('click', 'tr', function () {
var row = $(this);
var regno = row.find('td')[0].firstChild.data;
var obj = {};
obj.RegNo = regno;
Getsumdata(obj);
return false;
});
});
function Getsumdata(obj) {
$.ajax({
type: "POST",
url: "WebForm1.aspx/summarydata",
data: JSON.stringify(obj),
contentType: "application/json;charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function (result) {
alert(JSON.stringify(result.d));
var data1 = result.d.split('*')[0];
console.log(typeof (data1)); //Still a String...
var data11 = JSON.parse(data1);
console.log(data11); //
$('#sum').highcharts({
title: {
text: 'Combination chart'
},
xAxis: {
categories: data11,
title: {
text: null
}
},
labels: {
items: [{
html: 'Total fruit consumption',
style: {
left: '50px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
// series:data2
series: [{
type: 'column',
name: 'Jane',
data: [3, 2, 1, 3, 4]
}, {
type: 'column',
name: 'John',
data: [2, 3, 5, 7, 6]
}, {
type: 'column',
name: 'Joe',
data: [4, 3, 3, 9, 0]
},
]
});
}
});
}
</script>
but chart look like this
Now the question is JSON look correct i think so why data is not populated in chart .. i use BAR highchart
any solution please?
data2 is still a string, you have to parse it.
Take a look at the Docs on how to add chart data, you have to transform your current data.
var a = "[{\"month\":\"July\"},{\"month\":\"June\"},{\"month\":\"June\"}, {\"month\":\"August\"},{\"month\":\"July\"},{\"month\":\"June\"}, {\"month\":\"May\"},{\"month\":\"June\"}]*[{\"VName\":\"DDSB\",\"total\":1}, {\"VName\":\"DPSB\",\"total\":1},{\"VName\":\"DSB\",\"total\":1}, {\"VName\":\"MV\",\"total\":5},{\"VName\":\"MV\",\"total\":11}, {\"VName\":\"MV\",\"total\":7},{\"VName\":\"MV\",\"total\":1}, {\"VName\":\"PSB\",\"total\":1}]";
var d = a.split('*')[1];
console.log(typeof(d)); //Still a String...
var e = JSON.parse(d);
console.log(e); //Yay an object.
It seems that you are not passing correct data to categories and series's.
Please transform your data in such a way that,
data1 represent categories, should look like this
["May","June","July","August"]
while your data2 represent the series data which you want to plot for a given month, should look like below.
[1,10,12,5]
I'm working on creating a dynamically created chart that will add a series if there isn't one and if there is one add a point. I'm getting an Uncaught TypeError: Cannot call method 'addSeries' of undefined. I've looked around and I can't find why it says that method is undefined.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
$(document).ready(function () {
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
events: {
load: requestData
}
},
title: {
text: 'Survey Chart'
},
xAxis: {
categories: [],
title: {
text: 'Question Number'
}
},
yAxis: {
title: {
text: 'Total Answered'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true
},
series: []
});
with the document ready function taking up the entire script i have the following functions
function requestData() {
ajaxCall(chartCreate, createSeries, "services/Survey.svc/DoWork", "{}");
chart1.redraw();
};
function chartCreate(point) {
var temp;
temp = $.parseJSON(point.d);
$.each(temp, function (key, p) {
var seriesObj;
seriesObj = seriesExists(p.mcAnswer);
if (seriesObj.status == false) {
chart1.addSeries({name: '' + p.mcAnswer + '', data: [] });
chart1.series[seriesObj.count].addPoint(p.total, false);
} else {
chart1.series[seriesObj.count].addPoint(p.total, false);
}
});
};
//loops through all the series to see if the series exists.
//if true returns index and true if not just returns false
function seriesExists(name) {
var ct = 0;
//var len = chart1.series.length;
var len = 0;
if (len > 0) {
$.each(chart1.series, function (count, curSeries) {
if (curSeries.name == name) {
return { 'count': count, 'status': true };
}
ct = count;
});
}
return { 'count': ct, 'status': false };
}; function createSeries() {
alert("error");
};
//$.ajaxCall({successFun: function, errorFun: function, source: "", data: {}});
function ajaxCall(myFunSuccess, myFunError, url, data) {
//chart1 = chartTemp;
$.ajax({
type: "POST",
async: false,
url: url,
data: data,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: myFunSuccess,
error: myFunError
});
//return chart1;
};
I'm able to use the ajax function call fine it's when I get to my chartCreate where I run into the problem.
The problem is that you're trying to add the serie before chart1 get your chart reference. That's why chart1 doens't have addSeries method.
You can see this issue here.
To fix it you can set manually the chart reference to chart1 before call requestData.
Like the following.
load: function() {
chart1 = this; // `this` is the reference to the chart
requestData();
}