Pie chart in panel

Hi,

Is it possible to create a pie chart in a panel?

Tagged:

Comments

  • Hello Ward,


    Thank you for your question. Yes, it is possible to create a pie chart in a panel. You can do that with HTML and Java Script. There are multiple libraries were you can find examples that can be used for your own panel.

    @lindaklein ,@Boing and @Jaap van Boheemen , I know you have created a pie chart in your project. May be (one of) you can comment on this post as well and give some tips?

    Kind regards,
    Hansje
    Tygron support team

  • We did that indeed. We used a chart from the following javascript library: https://canvasjs.com/docs/charts/chart-types/html5-pie-chart/

    To use these scripts in a panel, you have to build an Excel in which you use TQL to get the labels and the variables for the chart. Then you use other cells in the Excel to build up the html and javascript. After that you combine the variables and the scripts in the EXPLANATION field, which is used by Tygron to visualise the panel.

    Below is an example of a panel we created. If you are creative with the way you build the script within the Excel, it becomes a dynamic chart which adapts to newly build categories for example. We used this example in a dashboard to monitor progress in multiple parallel sessions (combined with some bar charts which you can find in the same library).



  • Hi Boing,

    It looks really nice. Thank you for the help!

  • Hi Boing,

    Thank you again for your tip. The website  https://canvasjs.com/docs/charts/chart-types/ is really usefull. I am trying to make a bar chart, but it seems not all features of the canvasjs work. Did you experience the same, or do I have to change some settings.

    For example, the axis and titles don't show. I tried changing the colors, but that doens't work.


    And here is my code:

    <html>

    <head> 

    <script>

    window.onload = function () {


    CanvasJS.addColorSet("greenShades",

            [//colorSet Array

            "rgba(255,0,0,0.667)",

            "rgba(30,144,255,0.667)",

    "rgba(255,165,0,0.667)",

    "rgba(139,62,47,0.667)"

            ]);


    var chart = new CanvasJS.Chart("chartContainer", {

    animationEnabled: true,

     backgroundColor: "white",

    colorSet: "greenShades",

    title:{

    text: "Droogteschade",

       fontColor: "white"

    },

     axisX:{

      lineColor:"white",

      tickColor: "white",

      labelFontColor: "white"

     },

      

    axisY:{

    interval: 0.5,

       lineColor: "white",

       tickColor: "white",

      labelFontColor: "white"

    },

    toolTip:{

    shared: true

    },

      legend : {

      fontColor: "white",

     },

    data:[{

    type: "stackedBar",

    toolTipContent: "{label}<br><b>{name}:</b> {y}%",

    showInLegend: true, 

    indexLabel: "{y}",

       indexLabelFontColor: "white",

    name: "Droogte",

    dataPoints: [

    { label: "Indirect" },

    { label: "Zout" },

    { label: "Zuurstof" },

    { y: 0.4, label: "Droogte" },

    { y: 0.4, label: "Totaal" }

    ]

    },

    {

    type: "stackedBar",

    toolTipContent: "<b>{name}:</b> {y}%",

    showInLegend: true, 

    name: "Zuurstof",

         indexLabel: "{y}",

         indexLabelFontColor: "white",

    dataPoints: [

    { label: "Indirect" },

    { label: "Zout" },

    { y: 0.5, label: "Zuurstof" },

    { label: "Droogte" },

    { y: 0.5, label: "Totaal" }

    ]

    }, 

    {

    type: "stackedBar",

    toolTipContent: "<b>{name}:</b> {y}%",

    showInLegend: true, 

         indexLabel: "{y}",

         indexLabelFontColor: "white",

    name: "Zout",

    dataPoints: [

    { label: "Indirect" },

    { y: 0.4, label: "Zout" },

    { label: "Zuurstof" },

    { label: "Droogte" },

    { y: 0.4, label: "Totaal" }

    ]

    }, 

    {

    type: "stackedBar",

    toolTipContent: "<b>{name}:</b> {y}%",

    showInLegend: true, 

         indexLabel: "{y}",

         indexLabelFontColor: "white",

    name: "Indirect",

    dataPoints: [

    { y: 1.6, label: "Indirect" },

    { label: "Zout" },

    { label: "Zuurstof" },

    { label: "Droogte" },

    { y: 1.6, label: "Totaal" }

    ]

    }

         ]

    });

    chart.render();


    }

    </script>

    </head>

    <body>

    <div id="chartContainer" style="height: 280px; width: 100%;"></div>

    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

    </body>

    </html>

  • Sorry, I forgot to add @Boing in my question.

  • Hi @Ward,


    I've tried to find what the problem in your code is, but i can't find it. It's weird because your code does work in the editor on the canvas js website. Unfortunately I'm to busy at the moment to really dive into it. But it should be possible to have a title in your graph, because in ours it does work (see below). Good luck anyways.



  • Here is the code for the "parkeerplaatsen" chart (I've excluded the code for the other charts to keep it clear). Maybe it's useful to you.


    Ps. I'm not sure if this should work right away, since some variable parts of the code are filled in by excel.


    <!DOCTYPE HTML>

    <html>

    <head>

    <style>

    table {

    cellspacing= 10px;

    }

    th {

    background-color: #414141;

    }

    td {

    background-color: #414141;

    width: 33.3%;

    }

    </style>

    <meta http-equiv="refresh" content="60">

    <script>

    window.onload = function () {

    var chart1 = new CanvasJS.Chart("chartContainer1", {

    backgroundColor: "transparent", animationEnabled: false,

    theme: "light2",

    title: {

    text: "Parkeerplaatsen",

    fontColor: "#c7c7c7",

    },

    axisY:{

    interval: 100,

    lineThickness: 0,

    gridThickness: 0,

    gridColor: "grey",

    gridDashType: "dash",

    tickThickness: 0,

    labelFontColor: "transparent",

    },

    axisX:{

    lineThickness: 0,

    gridThickness: 0,

    tickThickness: 0,

    labelFontColor: "white",

    },

    toolTip:{

    shared: true

    },

    data:[

    {

    type: "stackedBar",

    toolTipContent: "{label}<br><b>{name}:</b> {y} (#percent%)",

    showInLegend: false, 

    name: "Gerealiseerd",

    color: "blue",

    dataPoints: [

    { y: 1, label: 'Overig', indexLabel: '1/20', indexLabelFontColor: "white"},

      { y: 1, label: 'Station', indexLabel:'1/20', indexLabelFontColor: "white"}

      ] 

    },

      { 

    type: "stackedBar",

    toolTipContent: "{name}: {y} (#percent%)",

    showInLegend: false,

    name: "Te realiseren",

    color: "#595959",

    dataPoints: [

    { y:19, label: 'Overig' },

    { y:19, label: 'Station' }]

    }

    ]

    });

    chart1.render();



    }

    </script>

    </head>

    <body bgcolor="#666666">

    <div style="height:105vh">

    <table height=99% width=100%">

    <tr height=97% valign="top">

    <td><div id="chartContainer1" style="height:100%"></div></td>

    </tr>

    </table>

    </div>

    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

    </body>

    </html>

Sign In or Register to comment.