I cannot retrieve data from json data to show in chart?

[miktat]

Hi Dear,

I’m trying to retrieve data from database in json format with respect to selected item then show in chart. When I change datapoints which have default values to json array. all graph get unvisible. Please help me to understand where I have made mistake. Codes are below.

`<script type=”text/javascript”>
$(function () {
$(‘#reservation’).daterangepicker({
locale: {
format: ‘MM-DD-YYYY’
}
})

$(‘.slider’).slider()

//Initialize Select2 Elements
})
@{
ViewBag.Title = “Bar Chart”;
}
//chart canvas
function ListData() {

var dp = [];
var selecteditem = $(‘select#multipleselect’).val()

var chart = new CanvasJS.Chart(“chartContainer”, {
title: {
text: “GTC DATA ANALAYSIS”
},
subtitles: [
{
text: $(‘#reservation’).val().slice(0, 10) +’—‘+ $(‘#reservation’).val().slice(12, 23)
}
],
animationEnabled: true,
legend: {
cursor: “pointer”,
itemclick: function (e) {
if (typeof (e.dataSeries.visible) === “undefined” || e.dataSeries.visible) {
e.dataSeries.visible = false;
debugger;
}
else {
debugger;

var date_first = $(‘#reservation’).val().slice(0, 10);
var date_last = $(‘#reservation’).val().slice(12, 23);
var funcname = e.dataSeries.name;

$.ajax({
type: “POST”,
url: “/Solaredge/Showchart”,
contentType: “application/json; charset=utf-8”,
data: JSON.stringify({ date_first: date_first, date_last: date_last,funcname:funcname}),
dataType: “json”,
success: function (res) {
var datapoints = JSON.parse(res);
var slc = “”;
$(“select option:selected”).each(function () {
slc = $(this).text();
dp.push({ label: slc, y: datapoints[0][slc] });
});

alert(dp);

}
})
e.dataSeries.visible = true;
}
chart.render();
}
},
axisY: {
title: “Values”
},
toolTip: {
shared: true,
content: function (e) {
var str = ”;
var total = 0;
var str3;
var str2;
debugger;
for (var i = 0; i < e.entries.length; i++) {
var str1 = “<span style= ‘color:” + e.entries[i].dataSeries.color + “‘> ” + e.entries[i].dataSeries.name + “</span>: ” + e.entries[i].dataPoint.y + “ <br/>”;
total = e.entries[i].dataPoint.y + total;
str = str.concat(str1);
}
str2 = “<span style = ‘color:DodgerBlue; ‘>” + e.entries[0].dataPoint.label + “</span><br/>”;
str3 = “<span style = ‘color:Tomato ‘>Average: </span>” + total /e.entries.length + “<br/>”;

return (str2.concat(str)).concat(str3);
}

},

data: [
{
type: “column”,
showInLegend: true,
name: “DC Power(MT,POA)”,
color: “gold”,
visible: false,
dataPoints: dp,

},
{
type: “line”,
showInLegend: true,
name: “Activity Hour(MT,POA)”,
color: “silver”,
visible: false,
dataPoints: [
{ y: 272, label: “France” },
{ y: 299, label: “Great Britain” },
{ y: 419, label: “Soviet Union” },
{ y: 896, label: “USA” }
],

//You can add dynamic data from the controller as shown below. Check the controller and uncomment the line which generates dataPoints.
//dataPoints: @Html.Raw(ViewBag.DataPoints),
},
{
type: “column”,
showInLegend: true,
name: “DC Energy(MT,POA)”,
color: “#E9967A”,
visible: false,
dataPoints: [
{ y: 307, label: “France” },
{ y: 301, label: “Great Britain” },
{ y: 392, label: “Soviet Union” },
{ y: 788, label: “USA” }
],

//You can add dynamic data from the controller as shown below. Check the controller and uncomment the line which generates dataPoints.
//dataPoints: @Html.Raw(ViewBag.DataPoints),
},
{
type: “column”,
showInLegend: true,
name: “Wh/Wp(MT,POA)”,
color: “#A57164”,
visible: false,
dataPoints: [
{ y: 307, label: “France” },
{ y: 301, label: “Great Britain” },
{ y: 392, label: “Soviet Union” },
{ y: 788, label: “USA” }
],

//You can add dynamic data from the controller as shown below. Check the controller and uncomment the line which generates dataPoints.
//dataPoints: @Html.Raw(ViewBag.DataPoints),
},
{
type: “column”,
showInLegend: true,
name: “Module Temp(POA)”,
color: “#A57164”,
visible: false,
datapoints: [
{ y: 307, label: “france” },
{ y: 301, label: “great britain” },
{ y: 392, label: “soviet union” },
{ y: 788, label: “usa” }
],

//You can add dynamic data from the controller as shown below. Check the controller and uncomment the line which generates dataPoints.
//dataPoints: @Html.Raw(ViewBag.DataPoints),
},
{
type: “column”,
showInLegend: true,
name: “Wh/Wp”,
color: “#a1ee33”,
visible: false,
dataPoints: [
{ y: 307, label: “France” },
{ y: 301, label: “Great Britain” },
{ y: 392, label: “Soviet Union” },
{ y: 788, label: “USA” }
],

//You can add dynamic data from the controller as shown below. Check the controller and uncomment the line which generates dataPoints.
//dataPoints: @Html.Raw(ViewBag.DataPoints),
},
{
type: “column”,
showInLegend: true,
name: “Dc Power”,
color: “#A57164”,
visible: false,
dataPoints: [
{ y: 307, label: “France” },
{ y: 301, label: “Great Britain” },
{ y: 392, label: “Soviet Union” },
{ y: 788, label: “USA” }
],

//You can add dynamic data from the controller as shown below. Check the controller and uncomment the line which generates dataPoints.
//dataPoints: @Html.Raw(ViewBag.DataPoints),
},
{
type: “column”,
showInLegend: true,
name: “Dc Energy”,
color: “#cb3f68”,
visible: false,
dataPoints: [
{ y: 307, label: “France” },
{ y: 301, label: “Great Britain” },
{ y: 392, label: “Soviet Union” },
{ y: 788, label: “USA” }
],

//You can add dynamic data from the controller as shown below. Check the controller and uncomment the line which generates dataPoints.
//dataPoints: @Html.Raw(ViewBag.DataPoints),
}

]
});

chart.render();
};
</script>

[Priyanka M S]

@miktat,

Can you please share a sample project over google-drive or one-drive reproducing the issue you are facing, so that we can look into your code, understand it better and help you out?

__
Priyanka M S
Team CanvasJS