Grid + Chart

alfa · January 22, 2014, 5:46pm

Newbie here, so be gentle with me.

Trying to put a grid and line chart on a html page.
Followed this guide:
docs.dhtmlx.com/doku.php?id=dhtm … ntegration
Am using a connector to a MySQL database.

So far the grid table with data is displaying fine. But can’t seem to get a table.
The only image on the page so far is a little bit of the y-axis numbers only.

My problem is that I don’t understand how to use the template function to get the x-axis
set up right. I studied the examples and tried, but no result.
The goal is to show a line chart, with the y-axis the value column ‘Temp1’ and ‘Temp2’ and at the x-axis the column ‘Time’.

Maybe somebody can give a few pointers or examples so that I have a starting pint.

Thanks!

Alfa

(Table grid picture enclosed)

the html code is:

 <script>
    window.onload = function()
 {

   var chart = new dhtmlXChart(
     {
      view: "line",
      origin:0,
      container: "chart1",
      value: "#CDATA#",
      label: "##",
      yAxis:{
             start:0,
             end:50,
             step:5,
             title:"Celsius"
             },
      xAxis:{
             template: "#CDATA#"
             }
    }
                            );
    
    var mygrid = new dhtmlXGridObject("gridbox1");		
    mygrid.setImagePath("codebase/imgs/");				
    mygrid.setHeader("Id,Temp1,Temp2,Time,Date");			
    mygrid.setInitWidths("50,80,80,70,70");				
    mygrid.setColTypes("ro,ro,ro,ro,ro");				
    mygrid.setSkin("dhx_skyblue");					
    mygrid.init();
    mygrid.loadXML("/scripts/connector.php");

    chart.parse(mygrid,"dhtmlxgrid");


 }
  </script>

The data from the connector.php:

. . . etc

Darya · January 23, 2014, 3:09pm

If you need to display chart data from column “Temp1” you need to use property -value: “#data1#”, if from “Temp2” - value: “#data2#”, not value: “#CDATA#”
About label: “##” - if you don’t need label - just miss this property

alfa · January 23, 2014, 7:13pm

Thanks, tried that already, but no chart.
The CDATA was the last thing I tried, that’s why it’s in the example.

Darya · January 24, 2014, 12:45pm

So, could you please attach your HTML file and XML grid structure?
Also you can provide us a direct link or completed demo on support@dhtmlx.com with a link to this topic.
docs.dhtmlx.com/doku.php?id=othe … leted_demo

Darya · January 27, 2014, 3:09pm

First of all this issue can arise because of incorrect call of parse method. Try use aftercall:

mygrid.loadXML("grid.xml", function(){ chart.parse(mygrid,"dhtmlxgrid"); });
Second is XML syntax:
dhtmlx.com/docs/products/doc … index.html
You need to use data in ONE line:
first column data

Made some changes in your demo - now it works
chart+grid.rar (535 KB)

alfa · January 27, 2014, 9:50pm

Thanks for your suggestions!

Now I have only two questions:

How do I change connector.php so that the xml data is generated on one line.
I used this example code for the connector.php script:

<?php require_once("/var/www/scripts/dhtmlxConnector/codebase/grid_connector.php"); $conn = mysql_connect("localhost", "login", "password"); mysql_select_db("DBname"); $grid = new GridConnector($conn, "MySQL"); $grid->render_table("Temp","id","id,Temp1,Temp2,Tijd,Date"); //render table by colom name from Database ?>

Your adjusted code, with the fixed XML file, works ok in Firefox. In Chrome it spawns a pop up with error:

Error type:LoadXML
Description:Incorrect XML

alfa · January 27, 2014, 10:29pm

Some more info.

I adapted the code as per instructions:

mygrid.loadXML("/scripts/connector.php", function(){
chart.parse(mygrid,“dhtmlxgrid”);
});

This does nothing for the result, still no chart. Not in Chrome, not in FF.

If I call the connector.php in FF it displays:

- 1 21.25 21.62 18:57:50 26-1-2014 - . . . etc.

In Chrome it displays:

. . . etc.

It seems the XML file (cell)rendering by grid_connector.php is all on one line, but Chrome just displays it otherwise.
But if the XML is ok, why is it working with a static file, but not with the connector scripts?

Alexandra · January 28, 2014, 9:39am

Hello,

The demo that was attached by Darya works in Chrome. There are no errors. Grid demos from Connector package also work in this browser.

It seems that connector script also works in your app. In the other case you would see data in grid. So, please attach a complete demo where we could reproduce the problem.

alfa · January 28, 2014, 10:13am

I already sent the Complete-Demo package. In that e-mail I explained that the data source is an internal MySQL server which not reachable through the net. I did add the XML output of the PHP connector. The grid table is filled with the correct data, so it seems that the connector works.

If I open the index.html in the Chart+grid folder from Darya in Firefox with the static XML file, the chart is there. If I open it in Chrome (all extentions OFF, version 32.0.1700.102 m) I get the error I mentioned.

When I put the suggestions (value: #data1#, template: #data2#, mygrid.loadXML() ) from Darya in the online version. The chart is not there, not in Chrome, not in FF and Explorer.

Alexandra · January 28, 2014, 11:02am

Hello,

Locally the demo works in the same Chrome version.

The chart is not there, not in Chrome, not in FF and Explorer.

Did you put chart.parse call into loading end handler as Darya recommended ?

[code]mygrid.loadXML("/scripts/connector.php", loadChartData);

function loadChartData(){
chart.parse(mygrid,“dhtmlxgrid”);
}); [/code]

If the problem is not solved, please provide a link to the problematic page.

alfa · January 28, 2014, 1:20pm

Yes I did and like I said earlier I can confirm that it works, but only locally, with the static XML file in FF. However exactly the same code does not work when used together with the connector.php code which gets the XML data from the MySQL server.

Unfortunately I can’t supply a link to the server. Both the webserver and the MySQL server are on a testnetwork, which is not connected to the Internet.

So this is the code which does work locally, but does not work dynamically:

  <h3>content 2</h3>

  <script>
    window.onload = function()
 {

   var chart = new dhtmlXChart(
     {
      view: "line",
      origin:0,
      container: "chart1",
      value: "#data1#",
      label: "",
      yAxis:{
             start:0,
             end:50,
             step:5,
             title:"Celsius"
             },
      xAxis:{
             template: "#data2#"
             }
    }
                            );
    
    var mygrid = new dhtmlXGridObject("gridbox1");			//Container id for grid
    mygrid.setImagePath("codebase/imgs/");				//Path yo table images
    mygrid.setHeader("Id,Temp1,Temp2,Time,Date");			//Colom names
    mygrid.setInitWidths("50,80,80,70,70");				//Table Colom width
    mygrid.setColTypes("ro,ro,ro,ro,ro");				//Set coloms to READ ONLY
    mygrid.setSkin("dhx_skyblue");					//Set skin
    mygrid.init();
    mygrid.loadXML("grid.xml", function(){
		chart.parse(mygrid,"dhtmlxgrid");

	});
 }

  </script>

   <div id="gridbox1" style="width:350px; height:600px;"></div>	<!-- Gridbox temp -->
   <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/>
   <div id="chart1" style="width:600px; height:400px;"></div>	<!-- Chart temp -->
</div>		<!------------------------------ End Tab2 -------------------------->

Darya · January 28, 2014, 5:23pm

As we understand you have solved your issue locally after “chart.parse” replace. May be the issue is incorrect path to the dhtmlxchart.css file on your chart page (directly in your app.
If you have correct path to this file, grid loads data but chart doesn’t render we need any sample where we can reproduce such issue. It can be completed demo or url to the page.

alfa · January 29, 2014, 10:22am

Yes I did, and can confirm that it works here locally with a static XML file in FF.
The same code does not work with the connector and the dynamically generated XML file.

I appreciate the help, but both the web server and the MySQL server are on a test network which is not connected to the Internet. Every bit of code I use is in the above posts and in the demo file I send. Since the grid table is ok, I think the connector is not the problem.

alfa · January 29, 2014, 10:37am

Sorry, disregard my previous post, it was posted double.

I checked the path to the dhtmlcchart.css, it was correct.
Moved the css file to the /codebase root and adapted the link in de head of the page, same result.

Firebug does not generate any errors. Tried a deliberate misspelled path to the css file and Firebug throws an error, so path must be ok.

alfa · January 29, 2014, 10:45am

And I checked all user rights on the files, there all 644 with the correct user and group ID

alfa · January 30, 2014, 11:55am

So, no more thoughts about this problem?

Darya · January 30, 2014, 12:54pm

We can’t reproduce this issue without a demo. On our side everything works fine. So unfortunately yes, no more thoughts on this problem

alfa · January 30, 2014, 3:18pm

Did you try it with a dynamic data source? It also works here with a static XML file, the problem occurs with a dynamic XML source.

Darya · January 31, 2014, 2:47pm

Yes, we did. It works locally.

alfa · February 1, 2014, 9:32pm

So what code want you to send me?
I already send all the code in the demo. The only change I made since where your suggestions.