Develop Reference

Highchart JS Set data not updating Export: ShowTable on Dropdown Event but chart updates fine

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

Make chartjs pie chart wiyh dynamic data

I can't display my ChartJS pie chart with dynamic data, I googled a lot and I couldn't find a solution, so I'm here for your help.
window.onload = function() {
$.ajax({
url: 'https://jsonplaceholder.typicode.com/todos/1',
dataType: "json",
method: "GET",
headers: {
"Accept": "application/json; odata=verbose"
},
success: function(data) {
// var dataResults = data.d.results;
var tempData = [{
EnterpriseProjectTypeName: 'first project'
},
{
EnterpriseProjectTypeName: 'first project'
},
{
EnterpriseProjectTypeName: 'first project'
},
{
EnterpriseProjectTypeName: 'second project'
},
{
EnterpriseProjectTypeName: 'third project'
},
{
EnterpriseProjectTypeName: 'test'
}
];
var itermeidiaryObject = {};
$.each(tempData, function(key, value) {
var epn = value.EnterpriseProjectTypeName;
var som = 0;
if (epn != null) {
itermeidiaryObject[epn] = ++itermeidiaryObject[epn] || 1;
}
var somme = som;
});
var finalObject = Object.keys(itermeidiaryObject).map(function(key) {
return {
label: key,
y: itermeidiaryObject[key]
}
});
var ctx = document.getElementById('myChart').getContext('2d');
var lables=tempData
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: finalObject,
datasets: [{
data: finalObject,
}]
},
options: {
responsive: false,
scales: {
xAxes: [{
ticks: {
maxRotation: 90,
minRotation: 80
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}
});
}
And this is the html part
<canvas id="myChart"></canvas>
</div><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
Can any one help me please?

Do you want a pie chart or a bar chart ? Edited things a little so that it makes a pie chart, although you can just go back to the bar chart with a few edits regarding mostly the way labels were handled since it looks like they need to be single values in an array. Probably a better way, but this should help. This is for the pie chart. You had a rogue div in the HTML also.
window.onload = function() {
$.ajax({
url: 'https://jsonplaceholder.typicode.com/todos/1',
dataType: "json",
method: "GET",
headers: {
"Accept": "application/json; odata=verbose"
},
success: function(data) {
// var dataResults = data.d.results;
var tempData = [{
EnterpriseProjectTypeName: 'first project'
},
{
EnterpriseProjectTypeName: 'first project'
},
{
EnterpriseProjectTypeName: 'first project'
},
{
EnterpriseProjectTypeName: 'second project'
},
{
EnterpriseProjectTypeName: 'third project'
},
{
EnterpriseProjectTypeName: 'test'
}
];
var itermeidiaryObject = {};
$.each(tempData, function(key, value) {
var epn = value.EnterpriseProjectTypeName;
var som = 0;
if (epn != null) {
itermeidiaryObject[epn] = ++itermeidiaryObject[epn] || 1;
}
var somme = som;
});
var finalObject = Object.keys(itermeidiaryObject).map(function(key) {
return {
label: key,
y: itermeidiaryObject[key]
}
});
var pievalues = finalObject.map(function(value, index) {
return value.y;
});
var labels = finalObject.map(function(value, index) {
return value.label;
});
var colorscheme = colors.slice(0, labels.length);
console.log(labels);
console.log(pievalues);
console.log(finalObject);
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: labels,
datasets: [{
data: pievalues,
backgroundColor: colorscheme
}]
},
options: {
responsive: false,
}
});
}
});
}
var colors = ["#0074D9", "#FF4136", "#2ECC40", "#FF851B", "#7FDBFF", "#B10DC9", "#FFDC00", "#001f3f", "#39CCCC", "#01FF70", "#85144b", "#F012BE", "#3D9970", "#111111", "#AAAAAA"];
<canvas id="myChart"></canvas>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
I am presuming that the data you provided in the handler success is pretty much what you get back as JSON ?

How to convert String Format data [duplicate]

This question already has answers here:
Convert string with commas to array
(18 answers)
Closed 4 years ago.
I have a Json format like:
var d = "1,3,2,4"
How do I convert it into
var d = [3,5,3,6]
I tried this:
success: function (Response) {
debugger;
var du = (Response.d);
var final_string = '[' + du + ']'
// final_string = [1, 3, 2, 4];
console.log(final_string);
But this is not working, I want to final_string value as final_string = [1, 3, 2, 4];
actually i am trying to making a graph by this data
JvaScript
<script>
$(document).ready(function(){
debugger;
$.ajax({
type: "Post",
url: "Default.aspx/getdata",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (Response) {
debugger;
var d = Response.d.toString();
var final_string = '[' + d + ']'
console.log(final_string);
//final_string = [1,3,2,4];
var options = {
chart: {
height: 250,
width:500,
type: 'line',
},
series: [{
name: ' ',
type: 'column',
data: final_string
}, {
name: '',
type: 'line',
data: final_string
}],
stroke: {
width: [0, 4]
},
title: {
text: 'Total Count'
},
labels: ['Birthady', 'Anniversary', 'Special', 'Total'],
xaxis: {
type: 'text'
},
yaxis: [{
title: {
text: 'Count Blog',
},
}, {
opposite: true,
title: {
text: ''
}
}]
}
debugger;
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
},
error: function (result) {
}
});
});
</script>
here the series data format is [1,3,2,4] and when i am passing data = [1,3,2,4] in series data graph is display in correct format and when i am passing final_string in series data graph is not display in correct format what is the main issue in this format final_string can any one help me
?

Why not use split(",") function. Since you're using the array on a chart you can use map(Number) to convert each item of the array to a Number type instead of a String.
var d = "1,3,2,4"
var res = d.split(",").map(Number);
console.log(res)
I based my response on the example in: ApexCharts
You need an array of Numbers like:
[2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2]

success: function (Response) {
debugger;
var d = Response.toString();
var final_string = '[' + d + ']'
console.log(final_string);
}

How to build ajax-chartjs line-chart in asp mvc application?

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()

onClick takes two clicks to populate results, HighCharts

My issue revolves around having to click a button twice to populate the results desired. I am using HighCharts to draw a chart, but the updateTime3Period() function must be called twice before the chart is properly displayed. Below I have included all my code, except for the updateTime6Period() function, since it is the same as updateTime3Period() in most ways. They both have the same issue. I would like to have the button be clicked once, and then populate the desired chart. I apologize for the lengthy post. Thank you in advance! Note: This does work if updateTime3Period() is clicked twice.
HTML:
<div id="timelinePeriods">
<ul class="timeSelection">
<li><a href="#" onclick="updateTime6Period();" > Past 6 Periods</a></li>
<li> Past 3 Periods</li>
</ul>
</div>
JS/AJAX for updateTime3Period:
function updateTime3Period() {
timeFrameUpdate = 'Past 3 Periods';
displayParam();
$.ajax({
url: 'PHP/getValues.php',
type: 'post',
data: {
type: "A",
type2: B,
type3: C,
type4: D,
type5: E,
type6: F,
type7: "getChartCurr"
},
success: function(response2) {
obj2 = JSON.parse(response2);
}
});
$.ajax({
url: 'PHP/getValues.php',
type: 'post',
data: {
type: "A",
type2: B,
type3: C,
type4: D,
type5: E,
type6: F,
type7: "getChartPrev"
},
success: function(response3) {
obj3 = JSON.parse(response3);
}
});
updateCharts(obj2, obj3, measureUpdate);
}
Functions that are called above (same file):
function displayParam() {
document.getElementById("params").innerHTML = timeFrameUpdate;
}
function updateCharts(data1, data2, measureData) {
} else if (timeFrameUpdate == 'Past 6 Periods') {
updateSixMonthPeriodChart(data1, data2, measureData);
} else if (timeFrameUpdate == 'Past 3 Periods') {
updateThreeMonthPeriodChart(data1, data2, measureData);
}
HighCharts Graph:
function updateThreeMonthPeriodChart(data1, data2, measureData) {
var measureValue = data1["graph"];
var measureValuePrev = data2["graphPrev"];
var changeValue = new Array();
for (i = 0; i < 3; i++) {
measureValue[i] = parseInt(measureValue[i]);
changeValue[i] = (parseInt(measureValue[i]) - parseInt(measureValuePrev[i])) / parseInt(measureValuePrev[i])
}
var chart1; // globally available
$(document).ready(function() {
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'myChart',
},
title: {
text: 'Sales and Percent Change vs. Last Year - Past 3 Periods'
},
xAxis: {
categories: [1, 2, 3],
title: {
text: 'Period'
},
},
yAxis: [{
labels: { //Right y-axis
formatter: function() {
return Highcharts.numberFormat(this.value, 1, '.', ',') + '%';
}
},
title: {
text: '% Change'
},
opposite: true
},
{ //Left y-axis
labels: {
formatter: function() {
return '$' + Highcharts.numberFormat(this.value, 0, '', ',');
}
},
title: {
text: 'Sales ($)'
}
},
],
series: [{
name: 'Sales',
data: [measureValue[0], measureValue[1], measureValue[2]],
color: '#363534',
//Charcoal
yAxis: 1,
type: 'column'
},
{
name: '% Change',
data: [changeValue[0], changeValue[1], changeValue[2]],
color: '#E17000',
//Pumpkin
//yAxis: 2,
type: 'spline'
}]
});
});
}

It might be cause of your ajax request, it didn't complete at first click.in the next click it get the result from the catch and runs faster.
try this :
function updateTime3Period() {
timeFrameUpdate = 'Past 3 Periods';
displayParam();
$.ajax({
url : 'PHP/getValues.php',
type : 'post',
data : {
type : "A",
type2 : B,
type3 : C,
type4 : D,
type5 : E,
type6 : F,
type7 : "getChartCurr"
},
success : function (response2) {
obj2 = JSON.parse(response2);
$.ajax({
url : 'PHP/getValues.php',
type : 'post',
data : {
type : "A",
type2 : B,
type3 : C,
type4 : D,
type5 : E,
type6 : F,
type7 : "getChartPrev"
},
success : function (response3) {
obj3 = JSON.parse(response3);
updateCharts(obj2,obj3,measureUpdate);
}
});
}
});
}