Home forums Using CanvasJS Multiseries column charts

Tagged: , ,

This topic contains 33 replies, has 5 voices, and was last updated by  ElToredo 2 months, 3 weeks ago.

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

    Priya
    Member

    hello sir i want the example of multiseries column chart with sql data

    #15479

    Indranil Deo
    Member

    @priya,

    Please download the sample project.

    1.Database.sql is the database file you need to import it in database.
    2.index.php creates Charts using JSON Data from an external source(service.php).
    3.service.php extracts data from database, uses JSON to parse the data and send it to index.php.

    ___
    Indranil Deo
    Team CanvasJS

    #15490

    Priya
    Member

    Thanks for your answer sir you solve my problem

    #15828

    ElToredo
    Member

    Hello,

    I must say that I’m kind of lost in the code. I have like 2000 values and for each one of them, a date associated and I would like to put them into my graph, in the following way for which I put the points myself :

    data: [
          {        
            type: "line",
            color: "rgb(85, 118, 180)",
            showInLegend: true,
            markerSize: 0,
            legendMarkerType: "line",
            legendText: "FONDS",
            lineThickness: 2,
            dataPoints: [
            { x: new Date(2006, 00, 05), y: 0.00 },
            { x: new Date(2006, 00, 07), y: 0.08 },
            { x: new Date(2006, 00, 08), y: 0.07 },
            { x: new Date(2006, 00, 09), y: 0.09 },
            { x: new Date(2006, 00, 11), y: 0.12 },
            { x: new Date(2006, 00, 13), y: 0.16 },
            { x: new Date(2006, 00, 14), y: 0.11 },
            { x: new Date(2006, 00, 15), y: 0.12 },
            { x: new Date(2006, 00, 17), y: 0.14 },
            { x: new Date(2006, 00, 19), y: 0.22 },
            { x: new Date(2006, 00, 20), y: 0.24 },
            { x: new Date(2006, 00, 21), y: 0.26 },
            { x: new Date(2006, 00, 22), y: -0.05 },
            { x: new Date(2006, 00, 24), y: 0.08 },
            { x: new Date(2006, 00, 25), y: 0.15 },
            { x: new Date(2006, 00, 26), y: 0.36 },
            { x: new Date(2006, 00, 28), y: 0.34 },
            { x: new Date(2006, 00, 30), y: 0.33 },
            { x: new Date(2006, 01, 01), y: 0.33 },
            { x: new Date(2006, 01, 02), y: 0.45 },
            { x: new Date(2006, 01, 03), y: 0.25 },
            { x: new Date(2006, 01, 05), y: 0.60 },
            { x: new Date(2006, 01, 06), y: 0.62 },
            { x: new Date(2006, 01, 07), y: 0.67 },
            { x: new Date(2006, 01, 09), y: 0.50 },
            { x: new Date(2006, 01, 11), y: 0.85 },
            { x: new Date(2006, 01, 12), y: 1.20 },
            { x: new Date(2006, 01, 13), y: 0.78 },
            { x: new Date(2006, 01, 14), y: 0.92 },
            { x: new Date(2006, 01, 16), y: 0.95 },
            { x: new Date(2006, 01, 17), y: 1.36 },
            { x: new Date(2006, 01, 18), y: 1.32 },
            { x: new Date(2006, 01, 20), y: 1.36 },
            { x: new Date(2006, 01, 22), y: 1.23 },
            { x: new Date(2006, 01, 23), y: 1.52 },
            { x: new Date(2006, 01, 24), y: 1.60 }
            ]
          }
          ]

    I would like to understand how to use this sample project to be able to extract those points in my database, which are written in this way : YYYY-MM-DD for the dates (like 2017-08-16) and XXX.XX for the values (like 952.25).

    Could you help me please? I’m using SQL Server and Microsoft SQL Server Management to handle my database.

    Thanks!
    Tanguy.

    • This reply was modified 3 months, 1 week ago by  ElToredo.
    #15830

    ElToredo
    Member

    (My post must have vanished)

    Hello,

    I must say that I’m kind of lost in the code. I have like 2000 values and for each one of them, a date associated and I would like to put them into my graph, in the following way for which I put the points myself :

    data: [
          {        
            type: "line",
            color: "rgb(85, 118, 180)",
            showInLegend: true,
            markerSize: 0,
            legendMarkerType: "line",
            legendText: "FONDS",
            lineThickness: 2,
            dataPoints: [
            { x: new Date(2006, 00, 05), y: 0.00 },
            { x: new Date(2006, 00, 07), y: 0.08 },
            { x: new Date(2006, 00, 08), y: 0.07 },
            { x: new Date(2006, 00, 09), y: 0.09 },
            { x: new Date(2006, 00, 11), y: 0.12 },
            { x: new Date(2006, 00, 13), y: 0.16 },
            { x: new Date(2006, 00, 14), y: 0.11 },
            { x: new Date(2006, 00, 15), y: 0.12 },
            { x: new Date(2006, 00, 17), y: 0.14 },
            { x: new Date(2006, 00, 19), y: 0.22 },
            { x: new Date(2006, 00, 20), y: 0.24 },
            { x: new Date(2006, 00, 21), y: 0.26 },
            { x: new Date(2006, 00, 22), y: -0.05 },
            { x: new Date(2006, 00, 24), y: 0.08 },
            { x: new Date(2006, 00, 25), y: 0.15 },
            { x: new Date(2006, 00, 26), y: 0.36 },
            { x: new Date(2006, 00, 28), y: 0.34 },
            { x: new Date(2006, 00, 30), y: 0.33 },
            { x: new Date(2006, 01, 01), y: 0.33 },
            { x: new Date(2006, 01, 02), y: 0.45 },
            { x: new Date(2006, 01, 03), y: 0.25 },
            { x: new Date(2006, 01, 05), y: 0.60 },
            { x: new Date(2006, 01, 06), y: 0.62 },
            { x: new Date(2006, 01, 07), y: 0.67 },
            { x: new Date(2006, 01, 09), y: 0.50 },
            { x: new Date(2006, 01, 11), y: 0.85 },
            { x: new Date(2006, 01, 12), y: 1.20 },
            { x: new Date(2006, 01, 13), y: 0.78 },
            { x: new Date(2006, 01, 14), y: 0.92 },
            { x: new Date(2006, 01, 16), y: 0.95 },
            { x: new Date(2006, 01, 17), y: 1.36 },
            { x: new Date(2006, 01, 18), y: 1.32 },
            { x: new Date(2006, 01, 20), y: 1.36 },
            { x: new Date(2006, 01, 22), y: 1.23 },
            { x: new Date(2006, 01, 23), y: 1.52 },
            { x: new Date(2006, 01, 24), y: 1.60 }
            ]
          }
          ]

    I would like to understand how to use this sample project to be able to extract those points in my database, which are written in this way : YYYY-MM-DD for the dates (like 2017-08-16) and XXX.XX for the values (like 952.25).

    Could you help me please? I’m using SQL Server and Microsoft SQL Server Management to handle my database.

    Thanks!
    Tanguy.

    #15843

    ElToredo
    Member

    May I up the topic please sir?

    #15845

    Indranil Deo
    Member

    Tanguy,

    Please download the code from the following link.

    Create a database named chart, then replace the chart.mdf and chart_log.ldf with the files present in the database folder.

    Also, please go through this link for converting datetime from SQL-server in javascript.

    ___________
    Indranil Deo,
    Team CanvasJS

    • This reply was modified 3 months, 1 week ago by  Indranil Deo.
    #15847

    ElToredo
    Member

    It’s okay, what’s next?
    Thanks for the answer!

    #15848

    Indranil Deo
    Member

    Tanguy,

    You are welcome. Please let me know if you have any more queries.

    ___________
    Indranil Deo,
    Team CanvasJS

    #15849

    ElToredo
    Member

    Indeed, my question is: How to solve the problem that I posted above with the database files that you gave me? How will it help me to extract the points et fill the graph with them automatically?

    I’m not a total beginner in code but I may have difficulties to understand sometimes.

    #15854

    Indranil Deo
    Member

    Tanguy,

    The CanvasJSDate directory contains the FetchDateFromDatabase.aspx, FetchDateFromDatabase.aspx.cs, Web.config, and Web.Debug.config files.

    The FetchDateFromDatabase.aspx.cs will have server-side coding in C#(it will extract the dataPoints from the database) and the ASPX contains the page visualization declaration.

    Please add these files in visual studio. Then create the database and connect with it.

    ____________
    Indranil Deo,
    Team CanvasJS

    #15856

    ElToredo
    Member

    So I’m going to do this in C# with Visual Studio and not in PHP as my webpage with the graphe is?
    I added the two files in Visual Studio, what should I do now please? I don’t know the C# language unfortunately.

    Tanguy.

    • This reply was modified 3 months ago by  ElToredo.
    #15858

    ElToredo
    Member

    Can’t I just make a for which will generate the values into the JS? I just don’t know how to do that simple thing so I don’t really understand how all of this will help me, I’m sorry.

    #15869

    Indranil Deo
    Member

    Tanguy,

    You can do this with PHP as well. Since you are using Microsoft SQL Server with PHP, please go through this link to create dynamic web pages using PHP and SQL Server.

    And also, download the sample project from this thread for creating chart using PHP and MySQL.

    ____________
    Indranil Deo,
    Team CanvasJS

    #15871

    ElToredo
    Member

    I do not have the permission to look for the first link and I already downloaded the sample project that is on this webpage, the one on which I just said I didn’t understand the sample project.

    The graph is displayed but I have no points on it and I have 0%, 30% and 60%, even if nothing appears, no dates on the x side.

    Any ideas?

    Thanks,
    Tanguy.

    • This reply was modified 3 months ago by  ElToredo.
    • This reply was modified 3 months ago by  Vishwas R.
Viewing 15 posts - 1 through 15 (of 34 total)

You must be logged in to reply to this topic.