Multiseries column charts

[Priya]

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

[Indranil]

@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

[Priya]

Thanks for your answer sir you solve my problem

[ElToredo]

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 7 years, 4 months ago by ElToredo.

[ElToredo]

(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.

[ElToredo]

May I up the topic please sir?

[Indranil]

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 7 years, 4 months ago by Indranil.

[ElToredo]

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

[Indranil]

Tanguy,

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

___________
Indranil Deo,
Team CanvasJS

[ElToredo]

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.

[Indranil]

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

• This reply was modified 7 years, 3 months ago by Indranil.

[ElToredo]

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 7 years, 3 months ago by ElToredo.

[ElToredo]

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.

[Indranil]

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

• This reply was modified 7 years, 3 months ago by Indranil.
• This reply was modified 7 years, 3 months ago by Indranil.

[ElToredo]

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 7 years, 3 months ago by ElToredo.
• This reply was modified 7 years, 3 months ago by Vishwas R.