I am using bubble chart and gotta hide the y axis line. I&#39;ve tried the following but it doesn&#39;t work.

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    yAxes: [{
      angleLines: {
        display: false
      }
    }]

&lt;!-- end snippet --&gt;



How to hide y axis line in ChartJs?

What I&#39;ve done
=============

I&#39;ve added Google chart to the head of my page. This returns an image of a chart.

What I need to do
=================

I simply need to add a second chart to the same page.

The problem
===========

The code for the second chart is ignored. I largely suspect this is due to me incorrectly combining the code for each chart.

The code
========

**First chart (line):**

        &lt;!--Load the AJAX API--&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;https://www.google.com/jsapi&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;

      // Load the Visualization API and the piechart package.
      google.load(&#39;visualization&#39;, &#39;1.0&#39;, {&#39;packages&#39;:[&#39;corechart&#39;]});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        var data = new google.visualization.DataTable();
        data.addColumn(&#39;string&#39;, &#39;Month&#39;);
        data.addColumn(&#39;number&#39;, &#39;Apples&#39;);
        data.addColumn(&#39;number&#39;, &#39;Oranges&#39;);
        data.addRows([
          [&#39;Oct 11&#39;, 20, 0],
          [&#39;Nov 11&#39;, 0, 0],
          [&#39;Dec 12&#39;,  0, 20],
          [&#39;Jan 12&#39;, 0, 10],
          [&#39;Feb 12&#39;, 0, 10],
          [&#39;March 12&#39;, 10, 10]
        ]);

        // Set chart options
        var options = {&#39;width&#39;:960,
                       &#39;height&#39;:300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.LineChart(document.getElementById(&#39;line_chart&#39;));
        chart.draw(data, options);
      }

    &lt;/script&gt;

**Second chart (pie):**

        &lt;!--Load the AJAX API--&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;https://www.google.com/jsapi&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;

      // Load the Visualization API and the piechart package.
      google.load(&#39;visualization&#39;, &#39;1.0&#39;, {&#39;packages&#39;:[&#39;corechart&#39;]});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn(&#39;string&#39;, &#39;Topping&#39;);
        data.addColumn(&#39;number&#39;, &#39;Slices&#39;);
        data.addRows([
          [&#39;Mushrooms&#39;, 3],
          [&#39;Onions&#39;, 1],
          [&#39;Olives&#39;, 1],
          [&#39;Zucchini&#39;, 1],
          [&#39;Pepperoni&#39;, 2]
        ]);

        // Set chart options
        var options = {&#39;title&#39;:&#39;How Much Pizza I Ate Last Night&#39;,
                       &#39;width&#39;:400,
                       &#39;height&#39;:300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById(&#39;chart_div&#39;));
        chart.draw(data, options);
      }
    &lt;/script&gt;

Each of the charts are called in the body using a container div with a unique id:

    &lt;div id=&quot;chart_div&quot;&gt;&lt;/div&gt;

My question
===========

How do I stitch these two blocks of code together? I&#39;ve tried copying drawChart() and specifying unique function names and variables but to no avail.


How to add two Google charts on the one page?

i would like to ask is that possible using Chart.js http://www.chartjs.org/ to get Combined Bar and line charts?

Thanks for any advice. 



Chart.js how to get Combined Bar and line charts?

I am drawing a bar chart using `highchart.js`

**I do not want to show the x - axis data values.**

Can any one tell me which option does it?
&lt;br /&gt;
full config:

    var chart = new Highcharts.Chart({
                    chart: {
                        renderTo: container,
                        defaultSeriesType: &#39;bar&#39;
                    },
                    title: {
                        text: null
                    },
                    subtitle: {
                        text: null
                    },
                    xAxis: {
                        categories: [&#39;&#39;],
                        title: {
                            text: null
                        },
                        labels: {enabled:true,y : 20, rotation: -45, align: &#39;right&#39; }
    
                    },
                    yAxis: {
                        min: 0,
                        gridLineWidth: 0,
                        title: {
                            text: &#39;&#39;,
                            align: &#39;high&#39;
                        }
                    },
                    tooltip: {
                        formatter: function () {
                            return &#39;&#39;;
                        }
                    },
                    plotOptions: {
                        bar: {
                            dataLabels: {
                                enabled: true
                            },
                            pointWidth: 35,
                            color: &#39;#D9CDC1&#39;
                        }
                    },
                    legend: {
                        enabled: false
                    },
                    credits: {
                        enabled: false
                    },
                    series: [{
                        name: &#39;Year 1800&#39;,
                        data: [107]
                    }]
                });

how to hide highchart x - axis data values

Is it possible to get more than 9 subplots in matplotlib?

I am on the subplots command `pylab.subplot(449);` how can I get a `4410` to work?


Thank you very much. 

more than 9 subplots in matplotlib

I recently updated my charts.js library to the most updated version (2.5.0).
This version doesn&#39;t show the labels on the chart.

I have an example of working one on fiddler: http://jsfiddle.net/g6fajwg8 .

However, I defined my chart exactly as in the example but still can not see the labels on the chart.

Note: There are a lot of questions like this on Google and Stackoverflow but most of them are about previous versions which is working well on them.

    var config = {
        type: &#39;pie&#39;,
        data: {
            datasets: [{
                data: [
                  1200,
                  1112,
                  533,
                  202,
                  105,
                ],
                backgroundColor: [
                  &quot;#F7464A&quot;,
                  &quot;#46BFBD&quot;,
                  &quot;#FDB45C&quot;,
                  &quot;#949FB1&quot;,
                  &quot;#4D5360&quot;,
                ],
                label: &#39;Dataset 1&#39;
            }],
            labels: [
              &quot;Red&quot;,
              &quot;Green&quot;,
              &quot;Yellow&quot;,
              &quot;Grey&quot;,
              &quot;Dark Grey&quot;
            ]
        },
        options: {
            responsive: true,
            legend: {
                position: &#39;top&#39;,
            },
            title: {
                display: true,
                text: &#39;Chart.js Doughnut Chart&#39;
            },
            animation: {
                animateScale: true,
                animateRotate: true
            }
        }
    };

    window.pPercentage = new Chart(ChartContext, config);

[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/uyehv.png

Chart.js Show labels on Pie chart

Would anyone recommend a particular JavaScript charting library - specifically one that doesn&#39;t use flash at all?

JavaScript Chart Library

I am looking for a very simple WPF chart which should have a 2D graph and 
should have pan and zoom facilities . 






WPF chart controls

I created an basic bar chart using chartjs and it works fine. Now I want to update the values on a time based interval. My problem is that after I created the chart, I do not know how to update its values correctly...

My code:
 
    var ctx = $(&quot;#myChart&quot;).get(0).getContext(&quot;2d&quot;);

    var dts = [
        {
            fillColor: &quot;rgba(220,220,220,0.5)&quot;,
            strokeColor: &quot;rgba(220,220,220,1)&quot;,
            data: [0, 0, 0, 0, 0]
        }
    ];

    var data = {
        labels: [&quot;Core#1&quot;, &quot;Core#2&quot;, &quot;Core#3&quot;, &quot;Core#4&quot;, &quot;Total&quot;],
        datasets: dts
    };

    var chart = new Chart(ctx);
    chart.Bar(data);
                    
    //test code
    setInterval( function () {                        
        data.datasets[0].data = [random(), random(), random(), random(), random()];
        chart.Bar(data);

    },2000);


in the test code, I am updating the values with `datasets[0].data`- is this the right way to do it? The problem with this is that everytime I call `chart.Bar()`, the values are reset to 0 then animated to the random value (like I am recreating the chart). This way, all animations are always from 0 to value which looks strange. I would expect that if I update a value from 50 to 10 the bar would go down to 10 from 50 and not setted to 0 then animated to 10.

I did not found anything in the docs about this... am I doing something wrong or this is impossible with this library?


Dynamically update values of a chartjs chart

Is there a good command-line UNIX charting / graphing / plotting tool out there?  I&#39;m looking for something that will plot xy points on an ASCII graph.

Just to clarify, I&#39;m looking for something that will output a graph in ASCII (like ascii-art style), so I can use it over an interactive shell session without needing X.

Command-line Unix ASCII-based charting / plotting tool



&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    // Load the Visualization API and the piechart package.
    google.load(&#39;visualization&#39;, &#39;1.0&#39;, {&#39;packages&#39;:[&#39;corechart&#39;]});

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);

    // Callback that creates and populates a data table,
    // instantiates the pie chart, passes in the data and
    // draws it.
    function drawChart() {

      // Create the data table.
      var data = new google.visualization.DataTable();
      data.addColumn(&#39;string&#39;, &#39;Topping&#39;);
      data.addColumn(&#39;number&#39;, &#39;Slices&#39;);

      var myData = {
        &#39;Mushrooms&#39;: 3,
        &#39;Onions&#39;: 1,
        &#39;Olives&#39;: 1,
        &#39;Zucchini&#39;: 1,
        &#39;Pepperoni&#39;: 2
      };

      var rows = [];
      for (element in myData) {
          rows.push([element + &quot; (&quot; + myData[element] + &quot;)&quot;, myData[element]])
      }
      data.addRows(rows);

      // Set chart options
      var options = {&#39;title&#39;:&#39;How Much Pizza I Ate Last Night&#39;,
                     &#39;width&#39;:450,
                     &#39;height&#39;:300};

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById(&#39;chart_div&#39;));
      chart.draw(data, options);
    }

&lt;!-- language: lang-html --&gt;

    &lt;script type=&quot;text/javascript&quot; src=&quot;https://www.google.com/jsapi&quot;&gt;&lt;/script&gt;

    &lt;div id=&quot;chart_div&quot;&gt;&lt;/div&gt;

&lt;!-- end snippet --&gt;

[Example fiddle](http://jsfiddle.net/invernizzie/T4yWz/1/)

How do I remove padding or margins in this example?

Remove padding or margins from Google Charts

here is my code. i need to set initial value as &quot;0&quot; in both x and y axis     scales. I have tried latest version scales option.

    graphOptions = {               
                ///Boolean - Whether grid lines are shown across the chart
                scaleShowGridLines: false,    
                tooltipTitleTemplate: &quot;&lt;%= label%&gt;&quot;,
                //String - Colour of the grid lines
                scaleGridLineColor: &quot;rgba(0,0,0,.05)&quot;,
                //Number - Width of the grid lines
                scaleGridLineWidth: 1,
                //Boolean - Whether to show horizontal lines (except X axis)
                scaleShowHorizontalLines: true,
                //Boolean - Whether to show vertical lines (except Y axis)
                scaleShowVerticalLines: true,
                //Boolean - Whether the line is curved between points
                bezierCurve: true,
                //Number - Tension of the bezier curve between points
                bezierCurveTension: 0.4,
                //Boolean - Whether to show a dot for each point
                pointDot: true,
                //Number - Radius of each point dot in pixels
                pointDotRadius: 4,
                //Number - Pixel width of point dot stroke
                pointDotStrokeWidth: 1,               
                pointHitDetectionRadius: 20,               
                datasetStroke: true,
                datasetStrokeWidth: 2,
                datasetFill: true,               
                legendTemplate: &quot;&lt;ul class=\&quot;&lt;%=name.toLowerCase()%&gt;-legend\&quot;&gt;&lt;% for (var i=0; i&lt;datasets.length; i++){%&gt;&lt;li&gt;&lt;span style=\&quot;background-color:&lt;%=datasets[i].strokeColor%&gt;\&quot;&gt;&lt;/span&gt;&lt;%if(datasets[i].label){%&gt;&lt;%=datasets[i].label%&gt;&lt;%}%&gt;&lt;/li&gt;&lt;%}%&gt;&lt;/ul&gt;&quot;
            };
            var LineChart = new Chart(ctx).Line(graphData, graphOptions);
       }     

how to set start value as &quot;0&quot; in chartjs?

I have searched a lot to find a good example for generating a Google Chart using MySQL table data as the data source. I searched for a couple of days and realised that there are few examples available for generating a Google Chart (pie, bar, column, table) using a combination of PHP and MySQL. I finally managed to get one example working.

I have previously received a lot of help from StackOverflow, so this time I will return some.

I have two examples; one uses Ajax and the other does not. Today, I will only show the non-Ajax example.

**Usage:**
&lt;pre&gt;
    Requirements: PHP, Apache and MySQL
    
    Installation:
    
      --- Create a database by using phpMyAdmin and name it &quot;chart&quot;
      --- Create a table by using phpMyAdmin and name it &quot;googlechart&quot; and make 
          sure table has only two columns as I have used two columns. However, 
          you can use more than 2 columns if you like but you have to change the 
          code a little bit for that
      --- Specify column names as follows: &quot;weekly_task&quot; and &quot;percentage&quot;
      --- Insert some data into the table
      --- For the percentage column only use a number
    
          ---------------------------------
          example data: Table (googlechart)
          ---------------------------------
    
          weekly_task     percentage
          -----------     ----------
          Sleep           30
          Watching Movie  10
          job             40
          Exercise        20    
 
&lt;/pre&gt;

&lt;br/&gt;

**PHP-MySQL-JSON-Google Chart  Example:** 

        &lt;?php
    $con=mysql_connect(&quot;localhost&quot;,&quot;Username&quot;,&quot;Password&quot;) or die(&quot;Failed to connect with database!!!!&quot;);
    mysql_select_db(&quot;Database Name&quot;, $con); 
    // The Chart table contains two fields: weekly_task and percentage
    // This example will display a pie chart. If you need other charts such as a Bar chart, you will need to modify the code a little to make it work with bar chart and other charts
    $sth = mysql_query(&quot;SELECT * FROM chart&quot;);
    
    /*
    ---------------------------
    example data: Table (Chart)
    --------------------------
    weekly_task		percentage
    Sleep			30
    Watching Movie	40
    work			44
    */

    //flag is not needed
    $flag = true;
    $table = array();
    $table[&#39;cols&#39;] = array(
        
    	// Labels for your chart, these represent the column titles
    	// Note that one column is in &quot;string&quot; format and another one is in &quot;number&quot; format as pie chart only required &quot;numbers&quot; for calculating percentage and string will be used for column title
    	array(&#39;label&#39; =&gt; &#39;Weekly Task&#39;, &#39;type&#39; =&gt; &#39;string&#39;),
    	array(&#39;label&#39; =&gt; &#39;Percentage&#39;, &#39;type&#39; =&gt; &#39;number&#39;)
    	
    );
    
    $rows = array();
    while($r = mysql_fetch_assoc($sth)) {
        $temp = array();
    	// the following line will be used to slice the Pie chart
    	$temp[] = array(&#39;v&#39; =&gt; (string) $r[&#39;Weekly_task&#39;]); 
    	
    	// Values of each slice
    	$temp[] = array(&#39;v&#39; =&gt; (int) $r[&#39;percentage&#39;]); 
    	$rows[] = array(&#39;c&#39; =&gt; $temp);
    }
    
    $table[&#39;rows&#39;] = $rows;
    $jsonTable = json_encode($table);
    //echo $jsonTable;
    ?&gt;

    &lt;html&gt;
      &lt;head&gt;
        &lt;!--Load the Ajax API--&gt;
        &lt;script type=&quot;text/javascript&quot; src=&quot;https://www.google.com/jsapi&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
        
        // Load the Visualization API and the piechart package.
        google.load(&#39;visualization&#39;, &#39;1&#39;, {&#39;packages&#39;:[&#39;corechart&#39;]});
          
        // Set a callback to run when the Google Visualization API is loaded.
        google.setOnLoadCallback(drawChart);
          
        function drawChart() {
          
          // Create our data table out of JSON data loaded from server.
          var data = new google.visualization.DataTable(&lt;?=$jsonTable?&gt;);
    	  var options = {
               title: &#39;My Weekly Plan&#39;,
    		  is3D: &#39;true&#39;,
    		  width: 800,
    		  height: 600
            };
          // Instantiate and draw our chart, passing in some options.
    	  // Do not forget to check your div ID
          var chart = new google.visualization.PieChart(document.getElementById(&#39;chart_div&#39;));
          chart.draw(data, options);
        }
        &lt;/script&gt;
      &lt;/head&gt;
    
      &lt;body&gt;
        &lt;!--this is the div that will hold the pie chart--&gt;
        &lt;div id=&quot;chart_div&quot;&gt;&lt;/div&gt;
      &lt;/body&gt;
    &lt;/html&gt;

&lt;br/&gt;
**PHP-PDO-JSON-MySQL-Google Chart Example:**

        
    &lt;?php
        /*
        Script  : PHP-PDO-JSON-mysql-googlechart
        Author  : Enam Hossain
        version : 1.0
        
        */
        
        /*
        --------------------------------------------------------------------
        Usage:
        --------------------------------------------------------------------
        
        Requirements: PHP, Apache and MySQL
        
        Installation:
        
          --- Create a database by using phpMyAdmin and name it &quot;chart&quot;
          --- Create a table by using phpMyAdmin and name it &quot;googlechart&quot; and make sure table has only two columns as I have used two columns. However, you can use more than 2 columns if you like but you have to change the code a little bit for that
          --- Specify column names as follows: &quot;weekly_task&quot; and &quot;percentage&quot;
          --- Insert some data into the table
          --- For the percentage column only use a number
        
              ---------------------------------
              example data: Table (googlechart)
              ---------------------------------
        
              weekly_task     percentage
              -----------     ----------
              
              Sleep           30
              Watching Movie  10
              job             40
              Exercise        20     
        
        
        */
        
        /* Your Database Name */
        $dbname = &#39;chart&#39;;
        
        /* Your Database User Name and Passowrd */
        $username = &#39;root&#39;;
        $password = &#39;123456&#39;;
        
        try {
          /* Establish the database connection */
          $conn = new PDO(&quot;mysql:host=localhost;dbname=$dbname&quot;, $username, $password);
          $conn-&gt;setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
          
          /* select all the weekly tasks from the table googlechart */
          $result = $conn-&gt;query(&#39;SELECT * FROM googlechart&#39;);
        
          /*
              ---------------------------
              example data: Table (googlechart)
              --------------------------
              weekly_task     percentage
              Sleep           30
              Watching Movie  10
              job             40
              Exercise        20       
          */
         
        
        
          $rows = array();
          $table = array();
          $table[&#39;cols&#39;] = array(
        
            // Labels for your chart, these represent the column titles.
            /* 
                note that one column is in &quot;string&quot; format and another one is in &quot;number&quot; format 
                as pie chart only required &quot;numbers&quot; for calculating percentage 
                and string will be used for Slice title
            */
        
            array(&#39;label&#39; =&gt; &#39;Weekly Task&#39;, &#39;type&#39; =&gt; &#39;string&#39;),
            array(&#39;label&#39; =&gt; &#39;Percentage&#39;, &#39;type&#39; =&gt; &#39;number&#39;)
        
        );
            /* Extract the information from $result */
            foreach($result as $r) {
              
              $temp = array();
             
              // the following line will be used to slice the Pie chart
              
              $temp[] = array(&#39;v&#39; =&gt; (string) $r[&#39;weekly_task&#39;]); 
        
              // Values of each slice
              
              $temp[] = array(&#39;v&#39; =&gt; (int) $r[&#39;percentage&#39;]); 
              $rows[] = array(&#39;c&#39; =&gt; $temp);
            }
        
        $table[&#39;rows&#39;] = $rows;
        
        // convert data into JSON format
        $jsonTable = json_encode($table);
        //echo $jsonTable;
        } catch(PDOException $e) {
            echo &#39;ERROR: &#39; . $e-&gt;getMessage();
        }
        
        ?&gt;
        
        
        &lt;html&gt;
          &lt;head&gt;
            &lt;!--Load the Ajax API--&gt;
            &lt;script type=&quot;text/javascript&quot; src=&quot;https://www.google.com/jsapi&quot;&gt;&lt;/script&gt;
            &lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js&quot;&gt;&lt;/script&gt;
            &lt;script type=&quot;text/javascript&quot;&gt;
        
            // Load the Visualization API and the piechart package.
            google.load(&#39;visualization&#39;, &#39;1&#39;, {&#39;packages&#39;:[&#39;corechart&#39;]});
        
            // Set a callback to run when the Google Visualization API is loaded.
            google.setOnLoadCallback(drawChart);
        
            function drawChart() {
        
              // Create our data table out of JSON data loaded from server.
              var data = new google.visualization.DataTable(&lt;?=$jsonTable?&gt;);
              var options = {
                   title: &#39;My Weekly Plan&#39;,
                  is3D: &#39;true&#39;,
                  width: 800,
                  height: 600
                };
              // Instantiate and draw our chart, passing in some options.
              // Do not forget to check your div ID
              var chart = new google.visualization.PieChart(document.getElementById(&#39;chart_div&#39;));
              chart.draw(data, options);
            }
            &lt;/script&gt;
          &lt;/head&gt;
        
          &lt;body&gt;
            &lt;!--this is the div that will hold the pie chart--&gt;
            &lt;div id=&quot;chart_div&quot;&gt;&lt;/div&gt;
          &lt;/body&gt;
        &lt;/html&gt;

&lt;br/&gt;
**PHP-MySQLi-JSON-Google Chart Example**

    &lt;?php
    /*
    Script  : PHP-JSON-MySQLi-GoogleChart
    Author  : Enam Hossain
    version : 1.0
    
    */
    
    /*
    --------------------------------------------------------------------
    Usage:
    --------------------------------------------------------------------
    
    Requirements: PHP, Apache and MySQL
    
    Installation:
    
      --- Create a database by using phpMyAdmin and name it &quot;chart&quot;
      --- Create a table by using phpMyAdmin and name it &quot;googlechart&quot; and make sure table has only two columns as I have used two columns. However, you can use more than 2 columns if you like but you have to change the code a little bit for that
      --- Specify column names as follows: &quot;weekly_task&quot; and &quot;percentage&quot;
      --- Insert some data into the table
      --- For the percentage column only use a number
    
          ---------------------------------
          example data: Table (googlechart)
          ---------------------------------
    
          weekly_task     percentage
          -----------     ----------
          
          Sleep           30
          Watching Movie  10
          job             40
          Exercise        20     
    
    
    */
    
    /* Your Database Name */
    
    $DB_NAME = &#39;chart&#39;;
    
    /* Database Host */
    $DB_HOST = &#39;localhost&#39;;
    
    /* Your Database User Name and Passowrd */
    $DB_USER = &#39;root&#39;;
    $DB_PASS = &#39;123456&#39;;
    
    
    
    
    
      /* Establish the database connection */
      $mysqli = new mysqli($DB_HOST, $DB_USER, $DB_PASS, $DB_NAME);
      
      if (mysqli_connect_errno()) {
        printf(&quot;Connect failed: %s\n&quot;, mysqli_connect_error());
        exit();
      }
      
       /* select all the weekly tasks from the table googlechart */
      $result = $mysqli-&gt;query(&#39;SELECT * FROM googlechart&#39;);
    
      /*
          ---------------------------
          example data: Table (googlechart)
          --------------------------
          Weekly_Task     percentage
          Sleep           30
          Watching Movie  10
          job             40
          Exercise        20       
      */
     
    
    
      $rows = array();
      $table = array();
      $table[&#39;cols&#39;] = array(
    
        // Labels for your chart, these represent the column titles.
        /* 
            note that one column is in &quot;string&quot; format and another one is in &quot;number&quot; format 
            as pie chart only required &quot;numbers&quot; for calculating percentage 
            and string will be used for Slice title
        */
    
        array(&#39;label&#39; =&gt; &#39;Weekly Task&#39;, &#39;type&#39; =&gt; &#39;string&#39;),
        array(&#39;label&#39; =&gt; &#39;Percentage&#39;, &#39;type&#39; =&gt; &#39;number&#39;)
    
    );
        /* Extract the information from $result */
        foreach($result as $r) {
          
          $temp = array();
         
          // The following line will be used to slice the Pie chart
          
          $temp[] = array(&#39;v&#39; =&gt; (string) $r[&#39;weekly_task&#39;]); 
    
          // Values of the each slice
          
          $temp[] = array(&#39;v&#39; =&gt; (int) $r[&#39;percentage&#39;]); 
          $rows[] = array(&#39;c&#39; =&gt; $temp);
        }
    
    $table[&#39;rows&#39;] = $rows;
    
    // convert data into JSON format
    $jsonTable = json_encode($table);
    //echo $jsonTable;
    
    
    ?&gt;
    
    
    &lt;html&gt;
      &lt;head&gt;
        &lt;!--Load the Ajax API--&gt;
        &lt;script type=&quot;text/javascript&quot; src=&quot;https://www.google.com/jsapi&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
    
        // Load the Visualization API and the piechart package.
        google.load(&#39;visualization&#39;, &#39;1&#39;, {&#39;packages&#39;:[&#39;corechart&#39;]});
    
        // Set a callback to run when the Google Visualization API is loaded.
        google.setOnLoadCallback(drawChart);
    
        function drawChart() {
    
          // Create our data table out of JSON data loaded from server.
          var data = new google.visualization.DataTable(&lt;?=$jsonTable?&gt;);
          var options = {
               title: &#39;My Weekly Plan&#39;,
              is3D: &#39;true&#39;,
              width: 800,
              height: 600
            };
          // Instantiate and draw our chart, passing in some options.
          // Do not forget to check your div ID
          var chart = new google.visualization.PieChart(document.getElementById(&#39;chart_div&#39;));
          chart.draw(data, options);
        }
        &lt;/script&gt;
      &lt;/head&gt;
    
      &lt;body&gt;
        &lt;!--this is the div that will hold the pie chart--&gt;
        &lt;div id=&quot;chart_div&quot;&gt;&lt;/div&gt;
      &lt;/body&gt;
    &lt;/html&gt;

PHP MySQL Google Chart JSON - Complete Example

Why are there not more opensource easy to use charting libraries for Java?. The only successful opensource project in this area seems to be jfreechart, and it doesn&#39;t even have any documentation or examples available.

What is the best open-source java charting library? (other than jfreechart)

I&#39;m making a homepage using, Bootstrap, JQuery and Chart.js (v2). I had my implementation working using v1, but recently just got into Bower and downloaded v2 using that.

I&#39;m making a grid of 4 columns each containing a pie chart, however the scaling in v2 is sort of confusing for me to get working. I want the charts to be responsive so they scale properly with the smaller devices such as tablets and smartphones, and one of my problems is getting rid of the legend of the charts as well as the hover information when hovering the mouse over the sections of my chart.

#index.html

    &lt;body&gt;
        &lt;div class=&quot;container&quot;&gt;
            &lt;div class=&quot;row&quot;&gt;
                &lt;div class=&quot;col-xs-3&quot;&gt;
                    &lt;canvas id=&quot;chart1&quot;&gt;&lt;/canvas&gt;
                &lt;/div&gt;
                &lt;div class=&quot;col-xs-3&quot;&gt;
                    &lt;canvas id=&quot;chart1&quot;&gt;&lt;/canvas&gt;
                &lt;/div&gt;
                &lt;div class=&quot;col-xs-3&quot;&gt;
                    &lt;canvas id=&quot;chart1&quot;&gt;&lt;/canvas&gt;
                &lt;/div&gt;
                &lt;div class=&quot;col-xs-3&quot;&gt;
                    &lt;canvas id=&quot;chart1&quot;&gt;&lt;/canvas&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/body&gt;

#functions.js

    $(document).ready(function(){
        var canvas = $(&quot;#chart1&quot;);
        var data = {
            labels: [],
            datasets: [{
                data: [10, 10],
                backgroundColor: [&quot;#F7464A&quot;, &quot;#FDB45C&quot;],
                hoverBackgroundColor: [&quot;#FF5A5E&quot;, &quot;#FFC870&quot;]
            }]
        };

        var chart1 = new Chart(canvas, {
            type: &quot;pie&quot;,
            data: data,
        });
    });

If I remove the empty &quot;labels&quot; field the chart doesn&#39;t work anymore. And by the looks of it there is a small spacing at the top of the chart which could indicate that the headers are written, but they are just empty strings.

Does anyone have an idea of how to remove the legend, and the hover description? I simply can&#39;t get my head around how this is used

I will get my hands around a jsfiddle as soon as I get time!

EDIT: Link to the docs: [https://nnnick.github.io/Chart.js/docs-v2/#getting-started][1]


  [1]: https://nnnick.github.io/Chart.js/docs-v2/#getting-started

Removing legend on charts with chart.js v2

In Matplotlib, it&#39;s not too tough to make a legend (`example_legend()`, below), but I think it&#39;s better style to put labels right on the curves being plotted (as in `example_inline()`, below). This can be very fiddly, because I have to specify coordinates by hand, and, if I re-format the plot, I probably have to reposition the labels. Is there a way to automatically generate labels on curves in Matplotlib? Bonus points for being able to orient the text at an angle corresponding to the angle of the curve.

    import numpy as np
    import matplotlib.pyplot as plt

    def example_legend():
        plt.clf()
        x = np.linspace(0, 1, 101)
        y1 = np.sin(x * np.pi / 2)
        y2 = np.cos(x * np.pi / 2)
        plt.plot(x, y1, label=&#39;sin&#39;)
        plt.plot(x, y2, label=&#39;cos&#39;)
        plt.legend()

![Figure with legend][1]

    def example_inline():
        plt.clf()
        x = np.linspace(0, 1, 101)
        y1 = np.sin(x * np.pi / 2)
        y2 = np.cos(x * np.pi / 2)
        plt.plot(x, y1, label=&#39;sin&#39;)
        plt.plot(x, y2, label=&#39;cos&#39;)
        plt.text(0.08, 0.2, &#39;sin&#39;)
        plt.text(0.9, 0.2, &#39;cos&#39;)

![Figure with inline labels][2]


  [1]: http://i.stack.imgur.com/l50U7.png
  [2]: http://i.stack.imgur.com/wDyVf.png

Inline labels in Matplotlib

I&#39;m using Chartjs to display a Line Chart and this works fine:

    // get line chart canvas
    var targetCanvas = document.getElementById(&#39;chartCanvas&#39;).getContext(&#39;2d&#39;);

    // draw line chart
    var chart = new Chart(targetCanvas).Line(chartData);

But the problem occurs when I try to change the data for the Chart.  I update the graph by creating a new instance of a Chart with the new data points, and thus reinitializing the canvas. 

This works fine. However, when I hover over the new chart, if I happen to go over specific locations corresponding to points displayed on the old chart, the hover/label is still triggered and suddenly the old chart is visible.  It remains visible while my mouse is at this location and disappears when move off that point.  I don&#39;t want the old chart to display. I want to remove it completely.

I&#39;ve tried to clear both the canvas and the existing chart before loading the new one.  Like:

    targetCanvas.clearRect(0,0, targetCanvas.canvas.width, targetCanvas.canvas.height);
and

    chart.clear();

But none of these have worked so far.  Any ideas about how I can stop this from happening?


How to clear a chart from a canvas so that hover events cannot be triggered?

I have a need to render and display charts (bar charts for now, but more types may be needed later) in an iPhone app I&#39;m working on. I&#39;ve done some looking around and it doesn&#39;t look like there are any really good, mature charting libraries for iPhone yet. I&#39;ve also looked for something written for Cocoa on the Mac that can be adapted, but haven&#39;t found anything great yet.

Anybody dealt with this before? Any recommendations? 

I did find [Core Plot][1], but it seems to be in the early stages of development.

Edit to add some details of requirements (as they currently stand ;) )

 - Bar Charts
 - Horizontal bar charts
 - Double stacked bar charts
 - Axis labels (including rotated 90 degrees on the y axis)
 - Labels above each bar on the chart
 - Shaded or custom backgrounds

  [1]: https://github.com/core-plot/core-plot

Is there a good charting library for iPhone?

My SSRS report does not show all the labels on the horizontal axis. Please see below. 

&lt;a href=&quot;http://www.flickr.com/photos/76579226@N04/6980282675/&quot; title=&quot;Capture by ____________BOb, on Flickr&quot;&gt;&lt;img src=&quot;https://farm8.staticflickr.com/7210/6980282675_7cfed1edbc.jpg&quot; width=&quot;500&quot; height=&quot;322&quot; alt=&quot;Capture&quot;&gt;&lt;/a&gt;

Note how the red arrows point to the few that do show. So my question is, where are the rest of the labels? Each bar should have one. 

For the chart I&#39;m adding number data for the bars, and another field for the Category Groups. That field in Category Group is for the labels.

Does anyone know why some are missing?

Also, a second but less important question, why is the order of the bars not the same order as the dataset?

SSRS chart does not show all labels on Horizontal axis

Does Chart.js ([documentation][1]) have option for datasets to set name (title) of chart (e.g. Temperature in my City), name of x axis (e.g. Days) and name of y axis (e.g. Temperature). Or I should solve this with css?


	var lineChartData = {
		labels : [&quot;January&quot;,&quot;February&quot;,&quot;March&quot;,&quot;April&quot;,&quot;May&quot;,&quot;June&quot;,&quot;July&quot;],
		datasets : [
			{
				fillColor : &quot;rgba(220,220,220,0.2)&quot;,
				strokeColor : &quot;rgba(220,220,220,1)&quot;,
				pointColor : &quot;rgba(220,220,220,1)&quot;,
				pointStrokeColor : &quot;#fff&quot;,
				pointHighlightFill : &quot;#fff&quot;,
				pointHighlightStroke : &quot;rgba(220,220,220,1)&quot;,
				data : [data]
			}
		]

	}

Realy thanks for help.

  [1]: http://www.chartjs.org/docs/

In Chart.js set chart title, name of x axis and y axis?

I am trying to find a fast and reliable charting library. After some searching, I found 4 libraries: [AChartEngine][1] [warning! official website is down and redirects to virus filled website!], [WilliamChart][2], [HelloCharts][3] and [AndroidPlot][4]. I need some up to date feedback about the performance and the stability of these libraries because all the information I could find was outdated.

  [1]: https://github.com/ddanny/achartengine
  [2]: https://github.com/diogobernardino/WilliamChart
  [3]: https://github.com/lecho/hellocharts-android
  [4]: http://androidplot.com/

Android charting libraries

I want to display all of the points on my chart from the data I get, but I don&#39;t want to display all the labels for them, because then the chart is not very readable. I was looking for it in the docs, but couldn&#39;t find any parameter that would limit this.

I don&#39;t want to take only three labels for example, because then the chart is also limited to three points. Is it possible?

I have something like that right now:

[![enter image description here][1]][1]

  [1]: http://i.stack.imgur.com/SF2HZ.png

If I could just leave every third-fourth label, it would be great. But I found absolutely nothing about labels options.

Limit labels number on Chart.js line chart

I am working on a project which have some charts (graphs), tick chart, candlestick chart and range chart. But the problem is, there is no library for that charts. I have got Google chart API for candlestick chart. But I don&#39;t want graph/chart in a webview.

Example: [Android Candlestick Chart with Google Chart API][1]

  [1]: http://rpiesnikowski.blogspot.in/2011/03/android-candlestick-chart-with-google.html

Charts for Android

How do you plot bar charts in gnuplot with text labels?

How do you plot bar charts in gnuplot?

How do I create a [Gantt chart][1] in R?

I&#39;m looking for something sophisticated (looking more or less like this):
![this][2]

P.S. I could live without the dependency arrows.

  [1]: http://en.wikipedia.org/wiki/Gantt_chart
  [2]: https://web.archive.org/web/20110227163953/https://upload.wikimedia.org/wikipedia/en/7/73/Pert_example_gantt_chart.gif


Gantt charts with R

I&#39;m having some trouble turning off the animation with charts.js.

This is my code:
    &lt;script&gt;
    
    var pieData = [
        {
            value: 30,
            color:&quot;#F38630&quot;
        },
        {
            value : 50,
            color : &quot;#E0E4CC&quot;
        },
        {
            value : 100,
            color : &quot;#69D2E7&quot;
        }    
    ];
    
    var myPie = new Chart(document.getElementById(&quot;canvas&quot;).getContext(&quot;2d&quot;)).Pie(pieData);
    


Can anyone provide an example?

Disable Animation with Charts.js

I have used chart.js in my projects several times but I have never used d3.js. A lot of people say that d3.js is the best javascript framework for charts but none of them is able to explain why, especially when I want a comparison to chart.js.

I have found this: http://www.fusioncharts.com/javascript-charting-comparison/
but it is not what I was looking for.

Does anyone know about a comparison of these frameworks in terms of usability and performance (only for charts)?

Comparison between d3.js and chart.js (only for charts)

I&#39;m using matplotlib to generate a (vertical) barchart. The problem is my labels are rather long. Is there any way to display them vertically, either in the bar or above it or below it?


Barchart with vertical labels in python/matplotlib

I am trying to hide the axis and gridlines of my Highcharts chart entirely.
So far I have tried to set the width of the lines to 0, but it didn&#39;t work out.

    
    xAxis: {
      lineWidth: 0,
      minorGridLineWidth: 0,
      lineColor: &#39;transparent&#39;
    }

Is it possible to just globally disable the axis lines/ticks and gridlines to create a &quot;plain&quot; plot?

Hide axis and gridlines Highcharts

How do I hide the x-axis label/text that is displayed in chart.js ?

Setting `scaleShowLabels:false` only removes the y-axis labels.

    &lt;script&gt;
		var options = {
			scaleFontColor: &quot;#fa0&quot;,
			datasetStrokeWidth: 1,
			scaleShowLabels : false,
			animation : false,
			bezierCurve : true,
			scaleStartValue: 0,
		};
		var lineChartData = {
			labels : [&quot;1&quot;,&quot;2&quot;,&quot;3&quot;,&quot;4&quot;,&quot;5&quot;,&quot;6&quot;,&quot;7&quot;],
			datasets : [
				{
					fillColor : &quot;rgba(151,187,205,0.5)&quot;,
					strokeColor : &quot;rgba(151,187,205,1)&quot;,
					pointColor : &quot;rgba(151,187,205,1)&quot;,
					pointStrokeColor : &quot;#fff&quot;,
					data : [1,3,0,0,6,2,10]
				}
			]
			
		}

	var myLine = new Chart(document.getElementById(&quot;canvas&quot;).getContext(&quot;2d&quot;)).Line(lineChartData,options);
	
	&lt;/script&gt;

Remove x-axis label/text in chart.js

I&#39;ve got a question regard Chart.js. 

I&#39;ve drawn multiple piecharts using the documentation provided. I was wondering if on click of a certain slice of one of the charts, I can make an ajax call depending on the value of that slice? 

For example, if this is my `data`

    var data = [
        {
            value: 300,
            color:&quot;#F7464A&quot;,
            highlight: &quot;#FF5A5E&quot;,
            label: &quot;Red&quot;
        },
        {
            value: 50,
            color: &quot;#46BFBD&quot;,
            highlight: &quot;#5AD3D1&quot;,
            label: &quot;Green&quot;
        },
        {
            value: 100,
            color: &quot;#FDB45C&quot;,
            highlight: &quot;#FFC870&quot;,
            label: &quot;Yellow&quot;
        }
    ], 

is it possible for me to click on the `Red` labelled slice and call a url of the following form:
`example.com?label=red&amp;value=300`? If yes, how do I go about this?

Click events on Pie Charts in Chart.js

I&#39;d like to add some pie, bar and scatter charts to my Ruby on Rails web application. I want want them to be atractive, easy to add and not introduce much overhead. 

What charting solution would you recommend?  
What are its drawbacks (requires Javascript, Flash, expensive, etc)?

What is your preferred way to produce charts in a Ruby on Rails web application?

Scott Gu just posted about a new set of charting controls being distributed by the .NET team. They look incredible: http://weblogs.asp.net/scottgu/archive/2008/11/24/new-asp-net-charting-control-lt-asp-chart-runat-quot-server-quot-gt.aspx

The million dollar question is ... will they work with MVC, and if so, when?

New asp.net charting controls - will they work with MVC (eventually)?

I have a chart that I want to include in my website using [Chart.js][1]. In the Y-axis, it gives me real numbers instead of integers. How can I change the number to integers?

Here&#39;s a picture of what I have now: 

[![current chart with real numbers][2]][2]


And this is the code:

	var lineChartData = {
                        
		labels : [&quot;2013/04/01&quot;,&quot;2013/03/31&quot;, &quot;2013/03/30&quot;, &quot;2013/03/29&quot;, &quot;2013/03/28&quot;,&quot;2013/03/27&quot;, &quot;2013/03/26&quot;],
      
		datasets : [
			{
				fillColor : &quot;rgba(151,187,205,0.5)&quot;,
				strokeColor : &quot;rgba(151,187,205,1)&quot;,
				pointColor : &quot;rgba(151,187,205,1)&quot;,
				pointStrokeColor : &quot;#fff&quot;,
				data : [&quot;0&quot;, &quot;2&quot;,&quot;1&quot;, &quot;0&quot;, &quot;1&quot;,&quot;0&quot;,&quot;1&quot;]
			}
		]
			
	}

	var myLine = new Chart(document.getElementById(&quot;canvas&quot;).getContext(&quot;2d&quot;)).Bar(lineChartData);


  [1]: http://www.chartjs.org/
  [2]: http://i.stack.imgur.com/F9nUW.png

Change the Y-axis values from real numbers to integers in Chart.js

I need a reasonably smart algorithm to come up with &quot;nice&quot; grid lines for a graph (chart).

For example, assume a bar chart with values of 10, 30, 72 and 60.  You know:

Min value: 10
Max value: 72
Range: 62

The first question is: what do you start from?  In this case, 0 would be the intuitive value but this won&#39;t hold up on other data sets so I&#39;m guessing:

Grid min value should be either 0 or a &quot;nice&quot; value lower than the min value of the data in range.  Alternatively, it can be specified.

Grid max value should be a &quot;nice&quot; value above the max value in the range.  Alternatively, it can be specified (eg you might want 0 to 100 if you&#39;re showing percentages, irrespective of the actual values).

The number of grid lines (ticks) in the range should be either specified or a number within a given range (eg 3-8) such that the values are &quot;nice&quot; (ie round numbers) and you maximise use of the chart area.  In our example, 80 would be a sensible max as that would use 90% of the chart height (72/80) whereas 100 would create more wasted space.

Anyone know of a good algorithm for this?  Language is irrelevant as I&#39;ll implement it in what I need to.



Algorithm for &quot;nice&quot; grid line intervals on a graph

I&#39;m trying to make a graph with Charts.js (current one is just a really simple example I&#39;m trying to get working, somewhat taken from the Chart.js documentation) and the graph isn&#39;t scaling to the size of the canvas I&#39;m giving it. Here is all the relevant code. 

To import it:

    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js&quot;&gt;&lt;/script&gt;


Then, I connect it to a javascript file as follows: 

    &lt;script type=&quot;text/javascript&quot; src=&quot;js/stats_tab.js&quot;&gt;&lt;/script&gt;

I have my canvas set up: 

            &lt;div id=&quot;graph_2015&quot; class =&quot;stats_box&quot;&gt;
                &lt;h4&gt;Graph 2015&lt;/h4&gt;
                Text
                &lt;canvas id=&quot;myChart&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;&lt;/canvas&gt;
            &lt;/div&gt;

And then finally in stats_tab.js, I have the following code:


    window.onload=function(){
        var ctx = document.getElementById(&quot;myChart&quot;).getContext(&quot;2d&quot;);
        var myChart = new Chart(ctx, {
            type: &#39;line&#39;,
            data: {
                labels: [1,2,3,4,5,6,7,8,9,10],
                datasets: [
                    {
                        label: &quot;My First dataset&quot;,
                        data: [1,2,3,2,1,2,3,4,5,4]
                    }
                ]
            },
            options: {
            }
        });
    }

The graph displays nicely, but it refuses to scale to the size of the canvas I gave it. There is also no css relevant to any of the divs involved. The inspect feature on chrome lets me know that the final graph is 676 by 676 instead of the 200 by 200 I specified. Not really sure what&#39;s going on.

Thanks!

Charts.js graph not scaling to canvas size

UPDATE: Here&#39;s a jsfiddle that shows the problem: http://jsfiddle.net/pynju/1/

Click on the blue column on Monday. When the detail-view loads, notice that 01-07 have 3 columns (expected 2). Click on the tallest bar to go back to the original view. Notice that the labels on the xAxis aren&#39;t being removed.


===============



I have a bar chart that has 2 series, displayed as pairs of bars, side by side.

    series: [{
             showInLegend: false,
             data: dowChartData
          },{
             showInLegend: false,
             data: avgUserDowChartData
          }],


.

    dowChartData = [                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   {
                    y: 98.74,
                    color: &#39;#0072ff&#39;,
                    drilldown: {
                       name: &#39;Category Engagement - Sunday&#39;,
                       categories: [&#39;00&#39;,&#39;01&#39;,&#39;02&#39;,&#39;03&#39;,&#39;04&#39;,&#39;05&#39;,&#39;06&#39;,&#39;07&#39;,&#39;08&#39;,&#39;09&#39;,&#39;10&#39;,&#39;11&#39;,&#39;12&#39;,&#39;13&#39;,&#39;14&#39;,&#39;15&#39;,&#39;16&#39;,&#39;17&#39;,&#39;18&#39;,&#39;19&#39;,&#39;20&#39;,&#39;21&#39;,&#39;22&#39;,&#39;23&#39;],
                       data: [0,637,0,0,0,173,48.54,48.54,0,0,0,0,0,0,102.24,166.36,706.59,699.18,298.32,184.14,97.08,1539,0,1224.56],
                       color: &#39;#0072ff&#39;,
                       data2: [506.80686467275,354.56354558498,333.25158689567,234.19283190879,234.82132336088,220.03247578171,222.86420797556,218.14034615202,170.42559544164,171.54776353196,249.24788461442,345.14915669555,206.65543589797,243.38811965637,367.02593304906,378.83677778129,467.45739743621,424.26264387522,639.60922934374,679.71299714907,373.26353846375,480.94380626458,551.82326068362,466.77469230724],
                       color2: &#39;#C00&#39;
                    }
                 }
    AND SIMILAR

.

    avgUserDowChartData = [                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         {
                    y: 142.35,
                    color: &#39;#C00&#39;
                 },
    AND SIMILAR



The initial data is day of week data with the X-axis being: Sunday - Monday - Tues - Wed - Thurs - Fri - Saturday

The initial series has a drilldown element with a new data &amp; data2
(see above)


Using the drilldown demo code as an example, I have this code in place:

    column: {
    	          borderWidth: 0,
                cursor: &#39;pointer&#39;,
                point: {
                   events: {
                      click: function(event) {
                         var drilldown = this.drilldown;
                         if (drilldown) { // drill down
                            setChart(dowChart, drilldown.name, drilldown.categories, drilldown.data, drilldown.color, drilldown.data2, drilldown.color2);
                         } else { // restore
                            setChart(dowChart, &#39;&#39;, dowCategories, dowChartData);
                         }
                      }
                   }
                },

Set chart handler:

    function setChart(chart, name, categories, data, color, data2, color2) {
          chart.xAxis[0].setCategories(categories);
    //      chart.series[0].remove();
          for (var i = 0; i &lt; chart.series.length; i++) {
              chart.series[i].remove();
          }
          chart.addSeries({
             showInLegend: false,
             name: name,
             data: data,
             color: color || &#39;white&#39;
          });
          if (typeof(data2) != undefined &amp;&amp; data2.length &gt; 0) {
              chart.addSeries({
                 showInLegend: false,
                 name: name,
                 data: data2,
                 color: color2 || &#39;white&#39;
              });
          }
       }


The initial chart display perfectly fine:
![initial display][1]

When you click on any of the blue bars (the data set that has the drilldown), things get wonky for the first 7 x-axis items:
![drill down - broken display][2]

It&#39;s as if the initial data sets aren&#39;t being removed by the code:

    for (var i = 0; i &lt; chart.series.length; i++) {
              chart.series[i].remove();
          }

When you click on any of the bars with the intention of resetting to the original data set/series:
![reset data to original set - broken display][3]

So... it&#39;s clear that the remove series code I&#39;m using isn&#39;t working. What&#39;s the best way to completely remove the data on the chart and the 2 series I need to display each time depending on what is clicked?


  [1]: http://i.stack.imgur.com/DipQG.png
  [2]: http://i.stack.imgur.com/pbNJg.png
  [3]: http://i.stack.imgur.com/htvk6.png

Proper way to remove all series data from a highcharts chart?

I have several different `NVD3` charts that I call upon in the same svg.
I use buttons to call functions, each containing a new chart that uses its own data.

Is there a way to clear my single svg without deleting it?
I wish to press a button to call my chart, but clear the svg before the new chart is loaded.

It&#39;s not an issue when using the kind of chart... calling two `multibarhorizontal` charts, for example, just updates the shapes, which is fine.
The problem is loading two different charts, like a line and a bar.

Thanks in advance

**EDIT** - The answers must be something like d`3.select(&quot;svg&quot;).remove()` but that just deletes the svg. I only want to clear it.


NVD3, Clear svg before loading new chart

I&#39;m currently working on a small genealogy experiment and would like to implement a simple family tree like in the picture below.

The best search results so far for this only yielded examples where a child can only have a parent node. But what I need is the ability to create links between entities (from father to mother) and links between nodes and other links (from child to the father-mother link).
Currently I don&#39;t have a fixed data schema for this.

I&#39;ve chosen [d3.js][1] for this [because it looks like would be capable of doing the job][2]. I just don&#39;t know how or even where to start. Tutorials about d3.js only cover standard charts like bar charts.

I hope someone can help me with this.

![This is how the result should look like][3]


  [1]: http://d3js.org/
  [2]: https://github.com/mbostock/d3/wiki/Gallery
  [3]: http://i.stack.imgur.com/MUE4z.png

How do you create a family tree in d3.js?

I am using [Chartjs](http://www.chartjs.org) for showing diagrams and I need to set title of y axis, but there are no information about it in documentation. 

I need y axis to be set like on picture, or on top of y axis so someone could now what is that parameter

![](https://js.devexpress.com/Content/images/doc/15_1/ChartJS/fullStackedSplineArea.png)

I have looked on official website but there was no information about it

How to set ChartJS Y axis title?

I am trying to use the basic example of NG2-Charts (http://valor-software.com/ng2-charts/)

I copy pasted the HTML part

      &lt;div style=&quot;display: block&quot;&gt;
        &lt;canvas baseChart
            [datasets]=&quot;barChartData&quot;
            [labels]=&quot;barChartLabels&quot;
            [options]=&quot;barChartOptions&quot;
            [legend]=&quot;barChartLegend&quot;
            [chartType]=&quot;barChartType&quot;
            (chartHover)=&quot;chartHovered($event)&quot;
            (chartClick)=&quot;chartClicked($event)&quot;&gt;&lt;/canvas&gt;
      &lt;/div&gt;

and the TypeScript part

      private barChartOptions: any = {
        scaleShowVerticalLines: false,
        responsive: true
      };
      private barChartLabels: string[] = [&#39;2006&#39;, &#39;2007&#39;, &#39;2008&#39;, &#39;2009&#39;, &#39;2010&#39;, &#39;2011&#39;, &#39;2012&#39;];
      private barChartType: string = &#39;bar&#39;;
      private barChartLegend: boolean = true;

      private barChartData: any[] = [
        { data: [65, 59, 80, 81, 56, 55, 40], label: &#39;Series A&#39; },
        { data: [28, 48, 40, 19, 86, 27, 90], label: &#39;Series B&#39; }
      ];

      // events
      private chartClicked(e: any): void {
          console.log(e);
      }

      private chartHovered(e: any): void {
          console.log(e);
      }

I run `npm install ng2-charts --save`, `npm install chart.js --save` and `typings install dt~chart.js --save --global`

I also imported chart.js in my vendor.ts file

    import &#39;chart.js&#39;;

My dependencies: 

    {
        &quot;@angular/common&quot;: &quot;^2.0.0&quot;,
        &quot;@angular/compiler&quot;: &quot;2.0.0&quot;,
        &quot;@angular/core&quot;: &quot;2.0.0&quot;,
        &quot;@angular/forms&quot;: &quot;2.0.0&quot;,
        &quot;@angular/http&quot;: &quot;2.0.0&quot;,
        &quot;@angular/platform-browser&quot;: &quot;2.0.0&quot;,
        &quot;@angular/platform-browser-dynamic&quot;: &quot;2.0.0&quot;,
        &quot;@angular/router&quot;: &quot;3.0.0&quot;,
        &quot;angular2-jwt&quot;: &quot;^0.1.18&quot;,
        &quot;chart.js&quot;: &quot;^2.3.0&quot;,
        &quot;core-js&quot;: &quot;^2.4.0&quot;,
        &quot;json-loader&quot;: &quot;^0.5.4&quot;,
        &quot;moment&quot;: &quot;^2.14.1&quot;,
        &quot;ng2-charts&quot;: &quot;^1.4.0&quot;,
        &quot;reflect-metadata&quot;: &quot;0.1.2&quot;,
        &quot;rxjs&quot;: &quot;5.0.0-beta.11&quot;,
        &quot;zone.js&quot;: &quot;^0.6.23&quot;
      }

Here is the Error

    Unhandled Promise rejection: Template parse errors:
    Can&#39;t bind to &#39;datasets&#39; since it isn&#39;t a known property of &#39;canvas&#39;. (&quot;iuminfooneoptionsTwo&quot;&gt;
                &lt;div style=&quot;display: block&quot;&gt;
                    &lt;canvas baseChart [ERROR -&gt;][datasets]=&quot;barChartData&quot; [labels]=&quot;barChartLabels&quot; [options]=&quot;barChartOptions&quot; [legend]=&quot;barChartLeg&quot;): PlayerprofileComponent@39:34
    Can&#39;t bind to &#39;labels&#39; since it isn&#39;t a known property of &#39;canvas&#39;. (&quot;          &lt;div style=&quot;display: block&quot;&gt;
                    &lt;canvas baseChart [datasets]=&quot;barChartData&quot; [ERROR -&gt;][labels]=&quot;barChartLabels&quot; [options]=&quot;barChartOptions&quot; [legend]=&quot;barChartLegend&quot; [chartType]=&quot;barChart&quot;): PlayerprofileComponent@39:60
    Can&#39;t bind to &#39;options&#39; since it isn&#39;t a known property of &#39;canvas&#39;. (&quot;lay: block&quot;&gt;
                    &lt;canvas baseChart [datasets]=&quot;barChartData&quot; [labels]=&quot;barChartLabels&quot; [ERROR -&gt;][options]=&quot;barChartOptions&quot; [legend]=&quot;barChartLegend&quot; [chartType]=&quot;barChartType&quot; (chartHover)=&quot;chartH&quot;): PlayerprofileComponent@39:86
    Can&#39;t bind to &#39;legend&#39; since it isn&#39;t a known property of &#39;canvas&#39;. (&quot;  &lt;canvas baseChart [datasets]=&quot;barChartData&quot; [labels]=&quot;barChartLabels&quot; [options]=&quot;barChartOptions&quot; [ERROR -&gt;][legend]=&quot;barChartLegend&quot; [chartType]=&quot;barChartType&quot; (chartHover)=&quot;chartHovered($event)&quot; (chartClick)&quot;): PlayerprofileComponent@39:114
    Can&#39;t bind to &#39;chartType&#39; since it isn&#39;t a known property of &#39;canvas&#39;. (&quot;ets]=&quot;barChartData&quot; [labels]=&quot;barChartLabels&quot; [options]=&quot;barChartOptions&quot; [legend]=&quot;barChartLegend&quot; [ERROR -&gt;][chartType]=&quot;barChartType&quot; (chartHover)=&quot;chartHovered($event)&quot; (chartClick)=&quot;chartClicked($event)&quot;&gt;
    &quot;): PlayerprofileComponent@39:140 ; Zone: &lt;root&gt; ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
    Can&#39;t bind to &#39;datasets&#39; since it isn&#39;t a known property of &#39;canvas&#39;. (&quot;iuminfooneoptionsTwo&quot;&gt;
                &lt;div style=&quot;display: block&quot;&gt;
                    &lt;canvas baseChart [ERROR -&gt;][datasets]=&quot;barChartData&quot; [labels]=&quot;barChartLabels&quot; [options]=&quot;barChartOptions&quot; [legend]=&quot;barChartLeg&quot;): PlayerprofileComponent@39:34
    Can&#39;t bind to &#39;labels&#39; since it isn&#39;t a known property of &#39;canvas&#39;. (&quot;          &lt;div style=&quot;display: block&quot;&gt;
                    &lt;canvas baseChart [datasets]=&quot;barChartData&quot; [ERROR -&gt;][labels]=&quot;barChartLabels&quot; [options]=&quot;barChartOptions&quot; [legend]=&quot;barChartLegend&quot; [chartType]=&quot;barChart&quot;): PlayerprofileComponent@39:60
    Can&#39;t bind to &#39;options&#39; since it isn&#39;t a known property of &#39;canvas&#39;. (&quot;lay: block&quot;&gt;
                    &lt;canvas baseChart [datasets]=&quot;barChartData&quot; [labels]=&quot;barChartLabels&quot; [ERROR -&gt;][options]=&quot;barChartOptions&quot; [legend]=&quot;barChartLegend&quot; [chartType]=&quot;barChartType&quot; (chartHover)=&quot;chartH&quot;): PlayerprofileComponent@39:86
    Can&#39;t bind to &#39;legend&#39; since it isn&#39;t a known property of &#39;canvas&#39;. (&quot;  &lt;canvas baseChart [datasets]=&quot;barChartData&quot; [labels]=&quot;barChartLabels&quot; [options]=&quot;barChartOptions&quot; [ERROR -&gt;][legend]=&quot;barChartLegend&quot; [chartType]=&quot;barChartType&quot; (chartHover)=&quot;chartHovered($event)&quot; (chartClick)&quot;): PlayerprofileComponent@39:114
    Can&#39;t bind to &#39;chartType&#39; since it isn&#39;t a known property of &#39;canvas&#39;. (&quot;ets]=&quot;barChartData&quot; [labels]=&quot;barChartLabels&quot; [options]=&quot;barChartOptions&quot; [legend]=&quot;barChartLegend&quot; [ERROR -&gt;][chartType]=&quot;barChartType&quot; (chartHover)=&quot;chartHovered($event)&quot; (chartClick)=&quot;chartClicked($event)&quot;&gt;
    &quot;): PlayerprofileComponent@39:140
        at TemplateParser.parse (eval at &lt;anonymous&gt; (http://localhost:8080/vendor.js:623:1), &lt;anonymous&gt;:133:19)
        at RuntimeCompiler._compileTemplate (eval at &lt;anonymous&gt; (http://localhost:8080/vendor.js:2103:1), &lt;anonymous&gt;:244:51)
        at eval (eval at &lt;anonymous&gt; (http://localhost:8080/vendor.js:2103:1), &lt;anonymous&gt;:167:83)
        at Set.forEach (native)
        at compile (eval at &lt;anonymous&gt; (http://localhost:8080/vendor.js:2103:1), &lt;anonymous&gt;:167:47)
        at ZoneDelegate.invoke (eval at &lt;anonymous&gt; (http://localhost:8080/polyfills.js:4105:1), &lt;anonymous&gt;:192:28)
        at Zone.run (eval at &lt;anonymous&gt; (http://localhost:8080/polyfills.js:4105:1), &lt;anonymous&gt;:85:43)
        at eval (eval at &lt;anonymous&gt; (http://localhost:8080/polyfills.js:4105:1), &lt;anonymous&gt;:451:57)
        at ZoneDelegate.invokeTask (eval at &lt;anonymous&gt; (http://localhost:8080/polyfills.js:4105:1), &lt;anonymous&gt;:225:37)
        at Zone.runTask (eval at &lt;anonymous&gt; (http://localhost:8080/polyfills.js:4105:1), &lt;anonymous&gt;:125:47)
        at drainMicroTaskQueue (eval at &lt;anonymous&gt; (http://localhost:8080/polyfills.js:4105:1), &lt;anonymous&gt;:357:35)

The NG2-Charts website says I need to include this in the HTML

    &lt;script src=&quot;node_modules/chart.js/src/chart.js&quot;&gt;&lt;/script&gt;

But I think thats not correct because how would that statement work in a productive minified / built app? I also thought my webpack import statement would already take care of that? 
I googled around but sadly only found stuff for some Angular 2 Beta version on NG2 Charts. 

Does anyone has an idea on how to fix that? 

Thanks and Cheers, 
Raphael Hippe

NG2-Charts Can&#39;t bind to &#39;datasets&#39; since it isn&#39;t a known property of &#39;canvas&#39;

Consider the following worksheet:

         A       B        C        D
    1 COMPANY  XVALUE   YVALUE   GROUP
    2 Apple     45       35       red
    3 Xerox     45       38       red
    4 KMart     63       50       orange
    5 Exxon     53       59       green

I have used the scatterplot function in Excel to create the following chart:

![enter image description here][1]


  [1]: http://i.stack.imgur.com/pHAEp.png

However, each point in the chart has an additional property: `GROUP`. There are four groups: `red`, `orange`, `black` and `green`. I would like to color each dot accordingly, so that I could perhaps see a pattern (group `green`being almost always on the left side of the chart, for instance). Because my list is 500 rows long, I cannot do this manually. How can I do this automatically?

How can I color dots in a xy scatterplot according to column value?

When drawing a dot plot using `matplotlib`, I would like to offset overlapping datapoints to keep them all visible.  For example, if I have:  

    CategoryA: 0,0,3,0,5  
    CategoryB: 5,10,5,5,10  

I want each of the `CategoryA` &quot;0&quot; datapoints to be set side by side, rather than right on top of each other, while still remaining distinct from `CategoryB`.

In R (`ggplot2`) there is a `&quot;jitter&quot;` option that does this. Is there a similar option in matplotlib, or is there another approach that would lead to a similar result?

***Edit:*** to clarify, [the `&quot;beeswarm&quot;` plot in R](http://www.cbs.dtu.dk/~eklund/beeswarm/) is essentially what I have in mind, and [`pybeeswarm`](https://github.com/mgymrek/pybeeswarm) is an early but useful start at a matplotlib/Python version.  

***Edit:*** to add that Seaborn&#39;s [Swarmplot](http://seaborn.pydata.org/generated/seaborn.swarmplot.html?highlight=swarmplot#seaborn.swarmplot), introduced in version 0.7, is an excellent implementation of what I wanted.

All Charts Solutions on Gang of Coders

Total of 43 Charts Solutions