Home forums Using CanvasJS I cannot retrieve data from json data to show in chart?

This topic contains 1 reply, has 2 voices, and was last updated by  Priyanka M S 3 weeks, 2 days ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #22699

    miktat
    Member

    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>result screen

    #22721

    Priyanka M S
    Member

    @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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.