Documentation for Charts

Topic: Documentation for Charts

waynefulcher pro asked 5 years ago

I would like to know where I can get any documentation for the Chart Options. I don't know how to customize the charts without knowing what all the options are. For example I may want to do any of the follow:

Hide labels above Pie Chart but allow tooltip to popover when hovering.
Since I have an area where I need to make my Pie Chart really small the tooltip popovers when hovering are being paritally hidden because it is wider than the frame the chart is in. So I need to either make the z-index for the tooltip higher or turn them off.

In any case I don't know how to attempt to fix these issues since I don't have a complete reference to the chart options.

Add comment

Piotr Glejzer staff answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

Hi Ward, It's hard to explain exactly It depends what you need. Here is a working example with ajax.

Snippets charts ajax

I suggest for you to work with what you like :). jQuery is a basic version of bootstrap and has a plenty of examples with different components and I very like it and I'm working with jQuery every day and sometimes with React.js at home and I recommend to use React if you don't want to use jQuery. Best, Piotr

Add comment

Piotr Glejzer staff answered 5 years ago

0 0 Best answer

Hi, yes, we are using static data from HTML if you want to use a dynamical data you have to use ajax or/with PHP / SQL. Do you have PHP files like getData.php what you pasted ? Your function drawChart() is connected with PHP file, not with URL address. You have to connect you chart with adress URL. Best, Piotr

Ward Y free commented 5 years ago

Hi Piotr, "You have to connect you chart with adress URL." That's what I've been asking. The examples were just to answer a question you placed to me. I would like to issue a https REST based query to fetch the data, including the column names. If it has to be SQL that's perfectly fine. Please tell me the syntax or at least reply with an example(s), because it's not documented and there's no example. I am sure other people would like to know this because it's quite necessary to deploy any application that uses your charts. Also, I am new to your product line, and I would have to say my real interest is in Bootstrap not JQuery. Will your suggestion work for the Bootstrap implementation? Can you make your example/sample be for Bootstrap, if it's different than JQuery. Thanks, Ward

Please insert min. 15 characters.

Add comment

Ward Y free answered 5 years ago

0 0 Best answer

I guess you don't have an answer for this. Too bad. Is there any way to populate the charts other than copy/pasting in data to a static page? What am I missing here?

Add comment

Ward Y free answered 5 years ago

0 0 Best answer

<div class="devsite-code-button-wrapper">
<div class="devsite-code-button gc-analytics-event material-icons devsite-click-to-copy-button" data-category="Site-Wide Custom Events" data-label="Click To Copy" data-tooltip-align="b,c" data-tooltip="Click to copy" aria-label="Click to copy" data-title="Click to copy"></div>
</div>
<pre class="devsite-code-button-clone"><html>
  <head>
    
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    
    // Load the Visualization API and the piechart package.
    google.charts.load('current', {'packages':['corechart']});
      
    // Set a callback to run when the Google Visualization API is loaded.
    google.charts.setOnLoadCallback(drawChart);
      
    function drawChart() {
      var jsonData = $.ajax({
          url: "getData.php",
          dataType: "json",
          async: false
          }).responseText;
          
      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(jsonData);

// Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, {width: 400, height: 240});
    }

</script>
  </head>

Please insert min. 20 characters.

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    
    // Load the Visualization API and the piechart package.
    google.charts.load('current', {'packages':['corechart']});
      
    // Set a callback to run when the Google Visualization API is loaded.
    google.charts.setOnLoadCallback(drawChart);
      
    function drawChart() {
      var jsonData = $.ajax({
          url: "getData.php",
          dataType: "json",
          async: false
          }).responseText;
          
      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(jsonData);

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, {width: 400, height: 240});
    }

    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

Add comment

Ward Y free answered 5 years ago

0 0 Best answer

To answer *your* question, I looked for an example of something simple on the internet. I located another product which does what I think is desirable for people producing charts that have up to date information in them. See: https://docs.telerik.com/kendo-ui/framework/datasource/overview

More specifically, n.b. the url parameter.
<pre class="code-toolbar grey lighten-2 p-3 mb-3">var dataSource = new kendo.data.DataSource({
 transport: {
 read: {
 // the remote service url
 url: "http://api.openweathermap.org/data/2.5/find",

// the request type
 type: "get",

// the data type of the returned result
 dataType: "json",

// additional custom parameters sent to the remote service
 data: {
 lat: 42.42,
 lon: 23.20,
 cnt: 10
 }
 }
 },
 // describe the result format
 schema: {
 // the data, which the data source will be bound to is in the "list" field of the response
 data: "list"
 }
});

If you can explain how to get up to date (real-time) information into mdbootstrap charts, that'd be very useful to me and I will become a PRO customer because that's really necessary and, yet, it seems like your charts examples are all using static data that's hard coded in the html page. Am I wrong? Am I missing something fundamental?

Thanks and best regards,
Ward</pre>

Please insert min. 20 characters.

To answer *your* question, I looked for an example of something simple on the internet. I located another product which does what I think is desirable for people producing charts that have up to date information in them. See: https://docs.telerik.com/kendo-ui/framework/datasource/overview More specifically, n.b. the url parameter.

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            // the remote service url
            url: "http://api.openweathermap.org/data/2.5/find",

            // the request type
            type: "get",

            // the data type of the returned result
            dataType: "json",

            // additional custom parameters sent to the remote service
            data: {
                lat: 42.42,
                lon: 23.20,
                cnt: 10
            }
        }
    },
    // describe the result format
    schema: {
        // the data, which the data source will be bound to is in the "list" field of the response
        data: "list"
    }
});

If you can explain how to get up to date (real-time) information into mdbootstrap charts, that'd be very useful to me and I will become a PRO customer because that's really necessary and, yet, it seems like your charts examples are all using static data that's hard coded in the html page. Am I wrong? Am I missing something fundamental? 

Thanks and best regards,
Ward

Add comment

Ward Y free answered 5 years ago

0 0 Best answer

Are there any other options for supply the data element, or even the whole chart spec? For example, can we supply a url to a rest endpoint that returns back a properly formatted string?

Piotr Glejzer staff commented 5 years ago

Hi, do you mean specific data from data from a server to change for the chart? Best, Piotr

Add comment

Piotr Glejzer staff answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

Hi, we are very sorry about our documentation. We will try to write more about that in the future. About your problems: 1.

options: {

responsive:true,

legend:false

}

options: {

responsive:true,

legend:false,

tooltips:{

bodyFontSize:12 //default

}

}

Is that what you need? We are sorry again.

Best,

Piotr

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: 4.5.9
Device: PC
Browser: all
OS: Windows 10
Provided sample code: No
Provided link: No

waynefulcher

Pro User 101Support score
11Questions 4Answers 0Snippets