Home › Forums › Chart Support › Line Chart Not is Displaying

Line Chart Not is Displaying

Viewing 4 posts - 1 through 4 (of 4 total)
  • September 5, 2019 at 12:31 pm #26663

    RabbitWolf

    Hi,

    I am evaluating the canvasJS product. I am using a Web Service and AJAX to retrieve data from a database to use for the chart. Here is my client side code:

    <style type=”text/css”>

    .div-chart
    {
    margin: 0px auto;
    width: 1024px;
    height: 768px;
    }

    </style>
    <script type=”text/javascript” src=”/Wisard/Scripts/jquery.min.js”></script>
    <script type=”text/javascript” src=”/Wisard/Scripts/canvasjs.min.js”></script>
    <script type=”text/javascript”>

    function onLoad() {
    var queryString = “NumberIds=” + numberIds +
    “&PointIds=” + pointIds +
    “&Interval=” + interval +
    “&Hours=” + hours;
    $.ajax({
    url: “RealtimeChartWebService.asmx/GetInitialData?” + queryString,
    type: “POST”,
    data: {},
    contentType: “application/json”,
    datatype: “json”,
    success: OnSuccess,
    error: OnError
    });
    }

    function OnSuccess(result) {
    var resultData = JSON.parse(result.d);
    for (var i = 0; i < resultData.length; i++) {
    dataPoints = [];
    for (var j = 0; j < resultData[i].Results.length; j++) {
    dataPoints.push({ x: resultData[i].Results[j].Time, y: resultData[i].Results[j].Value });
    }
    chart.options.data.push({
    type: “line”,
    xValueType: “dateTime”,
    yValueFormatString: “0.###”,
    xValueFormatString: “HH:mm/nMM/DD”,
    showInLegend: true,
    name: resultData[i].Lengend,
    dataPoints: dataPoints
    });
    }
    chart.render();
    }

    function OnError(error) {
    var err = eval(“(” + error.responseText + “)”);
    alert(err.Message);
    }

    var dataPoints = [];

    var numberIds;
    var pointIds;
    var interval;
    var hours;

    numberIds = <%= NumberIds %> ;
    pointIds = “<%= PointIds %>”;
    interval = <%= Interval %> ;
    hours = <%= Hours %> ;

    chart = new CanvasJS.Chart(“chartContainer”, {
    animationEnabled: true,
    theme: “light2”,
    title: {
    text: “Real-time WISARD Data Chart”
    },
    toolTip: {
    shared: true
    },
    legend: {
    cursor: “pointer”,
    verticalAlign: “top”,
    fontSize: 16,
    fontColor: “dimGrey”,
    },
    axisY: {
    titleFontSize: 18,
    includeZero: false,
    crosshair: {
    enabled: true,
    valueFormatString: “0.###”,
    snapToDataPoint: true
    }
    },
    axisX: {
    crosshair: {
    enabled: true,
    snapToDataPoint: true
    }
    },
    data: []
    });

    document.addEventListener(“DOMContentLoaded”, onLoad);

    </script>
    </head>
    <body>
    <div id=”chartContainer” class=”div-chart”>
    </div>
    </body>

    The data is being returned, but no chart is displayed. I am using jquery v3.4.1.

    Thank You,
    Tracy

    September 6, 2019 at 10:40 pm #26691

    Shashi Ranjan

    @rabbitwolf,

    Can you kindly share sample project reproducing the issue along with sample JSON over Google-Drive or Onedrive so that we can look into code, run it locally to understand the scenario better and help you resolve?

    —
    Shashi Ranjan
    Team CanvasJS

    September 8, 2019 at 4:06 pm #26704

    RabbitWolf

    Hi Shashi,

    I was able to figure out the problem and got it working.

    Thank You,
    Tracy

    September 9, 2019 at 11:44 pm #26715

    Shashi Ranjan

    @rabbitwolf,

    Glad you figured it out :)

    —
    Shashi Ranjan
    Team CanvasJS

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

You must be logged in to reply to this topic.