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

@monty_b, Glad that you were able to make it work with the help of examples in our website :) -- Vishwas R Team CanvasJS

Hello, finally I have been able to make it work, I was reviewing and adapting examples from your website and it works for me. Thank you so much for everything. Regards.

@monty_b, The sample shared seems to be working fine. Can you kindly share sample project reproducing the issue you are facing over Google-Drive or Onedrive so that we can run it locally at our end, understand the scenario better and help you resolve? -- Vishwas R Team CanvasJS

Hi thanks for the example but I have tried but it doesn't work... :( The chart doesn't appear

@monty_b, Parsing data read from database before passing it to chart options should work fine in your case. Please take a look at this updated sample project. -- Vishwas R Team CanvasJS

Multiseries column charts

This topic has 46 replies, 9 voices, and was last updated 3 years, 11 months ago by Vishwas R.

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

1 2 3 4 →

Tagged: Charts, database, php

July 1, 2017 at 11:44 am #15469

Priya

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

July 4, 2017 at 11:37 am #15479

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

July 6, 2017 at 12:00 pm #15490

Priya

Thanks for your answer sir you solve my problem

August 16, 2017 at 1:11 pm #15828
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 6 years, 8 months ago by ElToredo.
August 16, 2017 at 1:12 pm #15830
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.
August 18, 2017 at 12:23 pm #15843

ElToredo

May I up the topic please sir?

August 18, 2017 at 5:42 pm #15845
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 6 years, 8 months ago by Indranil.
August 18, 2017 at 6:27 pm #15847

ElToredo

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

August 18, 2017 at 8:20 pm #15848

Indranil

Tanguy,

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

___________
Indranil Deo,
Team CanvasJS

August 18, 2017 at 8:24 pm #15849

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.

August 21, 2017 at 11:09 am #15854
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 6 years, 8 months ago by Indranil.
August 21, 2017 at 2:08 pm #15856
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 6 years, 8 months ago by ElToredo.
August 21, 2017 at 4:02 pm #15858

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.

August 22, 2017 at 7:41 pm #15869
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 6 years, 8 months ago by Indranil.
- This reply was modified 6 years, 8 months ago by Indranil.
August 22, 2017 at 7:53 pm #15871
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 6 years, 8 months ago by ElToredo.
- This reply was modified 6 years, 8 months ago by Vishwas R.