Home forums Using CanvasJS send json to datapoint

Tagged: , , ,

This topic contains 14 replies, has 2 voices, and was last updated by  tekit0 4 months, 1 week ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #21348

    tekit0
    Member

    Hi, I’m Antonio, i’m, new to this, and I’m trying to send via json_encode, data to make a bar chart but I think it does not interpret the json well.
    This is the simple array inside of php code:
    ***
    $dataPoints = array(
    array(“label”=> “TPV 1”, “y”=> $f_1[0]),
    array(“label”=> “TPV 2”, “y”=> $f_2[0]),
    array(“label”=> “TPV 3”, “y”=> $f_3[0]),
    array(“label”=> “TPV 4”, “y”=> $f_4[0])
    );

    ***

    This is the echo json_encode($dataPoints, JSON_NUMERIC_CHECK); result: [{“label”:”TPV 1″,”y”:75},{“label”:”TPV 2″,”y”:657},{“label”:”TPV 3″,”y”:119},{“label”:”TPV 4″,”y”:92}] (I think it’s right, if i put this code in the script function, work perfectly)

    ***

    Code in head:

    <script>
    window.onload = function () {

    var chart = new CanvasJS.Chart(“chartContainer”, {
    animationEnabled: true,
    theme: “light2”, // “light1”, “light2”, “dark1”, “dark2”
    title:{
    text: “Datos de Ventas”
    },
    axisY: {
    title: “Cantidad”
    },
    data: [{
    type: “column”,
    showInLegend: true,
    legendMarkerColor: “grey”,
    legendText: “leyenda”,
    dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
    }]
    });
    chart.render();

    }
    </script>

    *****

    And the code of the body:
    <div id=”chartContainer” style=”height: 370px; max-width: 920px; margin: 0px auto;”></div>
    <script src=”js/canvasjs.min.js”></script>

    *******

    can someone tell me why the error is caused?
    if I use the json_encode it does not draw the data. Legends appear but do not interpret the data

    Thanks to all, and sorry for my bad english

    #21349

    tekit0
    Member

    I try this example : https://canvasjs.com/php-charts/chart-index-data-label/

    but is similar, don’t draw the data.
    I use xampp and i have enable the json
    json version 1.6.0

    #21351

    Priyanka M S
    Member

    @tekit0,

    The above code seems to be working fine (along with XAMPP), if Y values – $f_1[0] are defined. Please take a look at this sample code.
    If this doesn’t solve your requirement, kindly share a sample project along with sample data over google-drive or onedrive so that we can understand your requirement better and help you out.

    __
    Priyanka M S
    Team CanvasJS

    #21352

    tekit0
    Member

    Can the problem of how do I get the variable come?

    $f_1 = mysqli_fetch_row($result_f1)

    and then I echo the variable $f_1[0]

    #21355

    Priyanka M S
    Member

    @tekit0,

    Can you kindly share a sample project along with sample database over Onedrive or Google-Drive, so that we can look into your code, understand it better and help you out?

    __
    Priyanka M S
    Team CanvasJS

    #21357

    tekit0
    Member

    ok, I try to reduce the code by removing unnecessary information

    #21358

    tekit0
    Member

    Onedrive

    The sql and the php file.

    #21369

    Priyanka M S
    Member

    @tekit0,

    We are looking into it, and will get back to you at the earliest.

    __
    Priyanka M S
    Team CanvasJS

    #21371

    tekit0
    Member

    Thank you very much for your interest in my problem

    #21386

    Priyanka M S
    Member

    @tekit0,

    Please take a look at this updated sample project.

    Here are the few changes made to your project:
    1. The variables DE TAQUILLA 4 was not defined with any values. Now it’s defined.
    2. Make sure the dataPoints are available before the chart is rendered. The PHP code for SQL is written before the script for rendering chart.
    3. Used JSON_NUMERIC_CHECK as parameter in json_encode() method in order to convert string value of dataPoint(PHP variable) to it’s corresponding numeric value.

    __
    Priyanka M S
    Team CanvasJS

    #21574

    tekit0
    Member

    Ok. I try this weekend.
    Thanks

    #21579

    tekit0
    Member

    It does not work for me.
    The purpose of the web is to select a date in a form, and in that same web, to show the queries that are made to the database and that canvasjs draw the graph with the sales data.

    I check that the data enters the array:

    array in json with numeric check:
    [{“label”:”TPV 1″,”y”:2},{“label”:”TPV 2″,”y”:2},{“label”:”TPV 3″,”y”:2},{“label”:”TPV 4″,”y”:482}]

    which I do not know why canvasjs does not draw it :(

    —-
    I think canvasjs has no data because it runs in head.
    – first: canvas draws the graph (but no have data).
    – second: I request the date in the form.
    – third: I make operations with data, variables, I draw the html table …
    – 4: in the end, I call the chartcontainer, but this has no information, because it has not returned to the head.

    #21749

    Priyanka M S
    Member

    @tekit0,
    The sample project that we have provided is working fine at our end. Please try to follow the above-mentioned instructions and it should work fine for you.

    in the end, I call the chartcontainer, but this has no information, because it has not returned to the head.

    Please make sure that the dataPoints are defined before rendering the chart.

    __
    Priyanka M S
    Team CanvasJS

    #21750

    tekit0
    Member

    I try again…

    #21756

    tekit0
    Member

    Now work really fine! thank u so much Priyanka !!!!!!
    my problem was that the date selector kept appearing, but in the end what I did is that I send the date from the form with get and I show all the data in a second web.

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

You must be logged in to reply to this topic.