Chart based on month, date, hour and minutes. #114

happytm · 2024-01-07T07:42:43Z

I would like to create sunburst chart for front end of home automation system with following requirement.

The inner most ring is of 12 children named 1 to 12 for months all equal size.
The next rings consists of 31 children named 1-31 representing dates of each month mentioned above (total of 372 children
of same size for this ring).
The next rings consists of 24 children named 1-24 representing hours of each date mentioned above (total of 8928 children
of same size for this ring).
The next rings consists of 60 children named 1-60 representing minutes for each hour mentioned above (total of 535680 children of same size for this ring).

Is this possible? if so can you show me example code to create this chart?

Thanks.

vasturiano · 2024-01-07T23:06:25Z

@happytm all you should need to do is to define the data structure with the architecture you've described above.

As for the slice sizes, you just need to add size to the very last children of the tree (the minutes in your case). If you want all the minutes to be of equal angular size, you can just define each as 1, so everything is proportional.

happytm · 2024-01-08T05:08:20Z

@vasturiano I am sorry I am not good in javascript. Is there any example function you can provide which automatically create this graph like you show it with random math in couple of your examples. Here I do not need random but fixed number of children of same size in each ring?

Thanks.

happytm · 2024-06-11T02:35:31Z

@vasturiano Is there any easy way to define data structure without manually defining 545000 data points ?

I tried to do it manually but gave up due to huge data.

 "name": "Home",
 
 "children": [
  {
   "name": "Outdoor",
   "children": [
    {
     "name": "Battery V",
     "children": [
      {"name": "1", "size": 1},
      {"name": "2", "size": 1},
      {"name": "3", "size": 1},
      {"name": "4", "size": 1},
      {"name": "5", "size": 1},
      {"name": "6", "size": 1},
	  {"name": "7", "size": 1},
      {"name": "8", "size": 1},
      {"name": "9", "size": 1},
      {"name": "10", "size": 1},
      {"name": "11", "size": 1},
      {"name": "12", "size": 1},
      
     ]
    },
	
	{
     "name": "Temperature F",
     "children": [
      {"name": "1", "size": 3000},
      {"name": "2", "size": 3000},
      {"name": "3", "size": 3000},
      {"name": "4", "size": 3000},
      {"name": "5", "size": 3000},
      {"name": "6", "size": 3000},
	  {"name": "7", "size": 3000},
      {"name": "8", "size": 3000},
      {"name": "9", "size": 3000},
      {"name": "10", "size": 3000},
      {"name": "11", "size": 3000},
      {"name": "12", "size": 3000},
      
     ]
    },
	
	{
     "name": "Light Lux",
     "children": [
      {"name": "1", "size": 3000},
      {"name": "2", "size": 3000},
      {"name": "3", "size": 3000},
      {"name": "4", "size": 3000},
      {"name": "5", "size": 3000},
      {"name": "6", "size": 3000},
	  {"name": "7", "size": 3000},
      {"name": "8", "size": 3000},
      {"name": "9", "size": 3000},
      {"name": "10", "size": 3000},
      {"name": "11", "size": 3000},
      {"name": "12", "size": 3000},
      
     ]
    },
	
	
   ]
  },  
 
 {
   "name": "Livingroom",
   "children": [
    {
     "name": "Battery V",
     "children": [
      {"name": "1", "size": 3000},
      {"name": "2", "size": 3000},
      {"name": "3", "size": 3000},
      {"name": "4", "size": 3000},
      {"name": "5", "size": 3000},
      {"name": "6", "size": 3000},
	  {"name": "7", "size": 3000},
      {"name": "8", "size": 3000},
      {"name": "9", "size": 3000},
      {"name": "10", "size": 3000},
      {"name": "11", "size": 3000},
      {"name": "12", "size": 3000},
      
     ]
    },
	
	{
     "name": "Temperature F",
     "children": [
      {"name": "1", "size": 3000},
      {"name": "2", "size": 3000},
      {"name": "3", "size": 3000},
      {"name": "4", "size": 3000},
      {"name": "5", "size": 3000},
      {"name": "6", "size": 3000},
	  {"name": "7", "size": 3000},
      {"name": "8", "size": 3000},
      {"name": "9", "size": 3000},
      {"name": "10", "size": 3000},
      {"name": "11", "size": 3000},
      {"name": "12", "size": 3000},
      
     ]
    },
	
	{
     "name": "Light Lux",
     "children": [
      {"name": "1", "size": 3000},
      {"name": "2", "size": 3000},
      {"name": "3", "size": 3000},
      {"name": "4", "size": 3000},
      {"name": "5", "size": 3000},
      {"name": "6", "size": 3000},
	  {"name": "7", "size": 3000},
      {"name": "8", "size": 3000},
      {"name": "9", "size": 3000},
      {"name": "10", "size": 3000},
      {"name": "11", "size": 3000},
      {"name": "12", "size": 3000},
      
     ]
    },
	
	
   ]
  },  
  
 
 {
   "name": "Kitchen",
   "children": [
    {
     "name": "Battery V",
     "children": [
      {"name": "1", "size": 3000},
      {"name": "2", "size": 3000},
      {"name": "3", "size": 3000},
      {"name": "4", "size": 3000},
      {"name": "5", "size": 3000},
      {"name": "6", "size": 3000},
	  {"name": "7", "size": 3000},
      {"name": "8", "size": 3000},
      {"name": "9", "size": 3000},
      {"name": "10", "size": 3000},
      {"name": "11", "size": 3000},
      {"name": "12", "size": 3000},
      
     ]
    },
	
	{
     "name": "Temperature F",
     "children": [
      {"name": "1", "size": 3000},
      {"name": "2", "size": 3000},
      {"name": "3", "size": 3000},
      {"name": "4", "size": 3000},
      {"name": "5", "size": 3000},
      {"name": "6", "size": 3000},
	  {"name": "7", "size": 3000},
      {"name": "8", "size": 3000},
      {"name": "9", "size": 3000},
      {"name": "10", "size": 3000},
      {"name": "11", "size": 3000},
      {"name": "12", "size": 3000},
      
     ]
    },
	
	{
     "name": "Light Lux",
     "children": [
      {"name": "1", "size": 3000},
      {"name": "2", "size": 3000},
      {"name": "3", "size": 3000},
      {"name": "4", "size": 3000},
      {"name": "5", "size": 3000},
      {"name": "6", "size": 3000},
	  {"name": "7", "size": 3000},
      {"name": "8", "size": 3000},
      {"name": "9", "size": 3000},
      {"name": "10", "size": 3000},
      {"name": "11", "size": 3000},
      {"name": "12", "size": 3000},
      
     ]
    },
	
	
   ]
  },  
  
{
   "name": "Bedroom",
   "children": [
    {
     "name": "Battery V",
     "children": [
      {"name": "1", "size": 3000},
      {"name": "2", "size": 3000},
      {"name": "3", "size": 3000},
      {"name": "4", "size": 3000},
      {"name": "5", "size": 3000},
      {"name": "6", "size": 3000},
	  {"name": "7", "size": 3000},
      {"name": "8", "size": 3000},
      {"name": "9", "size": 3000},
      {"name": "10", "size": 3000},
      {"name": "11", "size": 3000},
      {"name": "12", "size": 3000},
      
     ]
    },
	
	{
     "name": "Temperature F",
     "children": [
      {"name": "1", "size": 3000},
      {"name": "2", "size": 3000},
      {"name": "3", "size": 3000},
      {"name": "4", "size": 3000},
      {"name": "5", "size": 3000},
      {"name": "6", "size": 3000},
	  {"name": "7", "size": 3000},
      {"name": "8", "size": 3000},
      {"name": "9", "size": 3000},
      {"name": "10", "size": 3000},
      {"name": "11", "size": 3000},
      {"name": "12", "size": 3000},
      
     ]
    },
	
	{
     "name": "Light Lux",
     "children": [
      {"name": "1", "size": 3000},
      {"name": "2", "size": 3000},
      {"name": "3", "size": 3000},
      {"name": "4", "size": 3000},
      {"name": "5", "size": 3000},
      {"name": "6", "size": 3000},
	  {"name": "7", "size": 3000},
      {"name": "8", "size": 3000},
      {"name": "9", "size": 3000},
      {"name": "10", "size": 3000},
      {"name": "11", "size": 3000},
      {"name": "12", "size": 3000},
      
     ]
    },
	
	
   ]
  },  
  
  
  
 ]

Thanks.

mattsgreen · 2024-06-12T18:28:36Z

Something like this? Takes a while to run, though!

function genNode() {
  return {
    name: "Clock",
    children: [...Array(12)].map((_, i) => ({
      name: "Months " + ++i,
      children: [...Array(31)].map((_, i) => ({
        name: "Days " + ++i,
        children: [...Array(24)].map((_, i) => ({
          name: "Hours " + ++i,
          children: [...Array(60)].map((_, i) => ({
            name: "Minutes " + ++i,
            value: 1
          }))
        }))
      }))
    }))
  }
}

console.log(genNode());

happytm · 2024-06-12T18:53:01Z

@mattsgreen Thank you for help. Console log show it is working but how do I implement in chart ? I tried to do this but did not work.

  <script src="https://unpkg.com/d3@7.8.5/dist/d3.min.js"></script>
  <script src="https://unpkg.com/sunburst-chart@1.19.2/dist/sunburst-chart.min.js"></script>

  <style>body { margin: 0 }</style>
</head>
<body>
  <div id="chart"></div>

  <script>
  
  function genNode() {
  return {
    name: "Clock",
    children: [...Array(12)].map((_, i) => ({
      name: "Months " + ++i,
      children: [...Array(31)].map((_, i) => ({
        name: "Days " + ++i,
        children: [...Array(24)].map((_, i) => ({
          name: "Hours " + ++i,
          children: [...Array(60)].map((_, i) => ({
            name: "Minutes " + ++i,
            value: 1
          }))
        }))
      }))
    }))
  }
}
console.log(genNode());

const data =  genNode();


const color = d3.scaleOrdinal(d3.schemePaired);

    Sunburst()
     .data(data)
        .label('name')
        .size('size')
		.excludeRoot("true")
		
        .color((d, parent) => color(parent ? parent.data.name : null))
        .tooltipContent((d, node) => `Size: <i>${node.value}</i>`)
        (document.getElementById('chart'));
  </script>
</body>

mattsgreen · 2024-06-12T19:18:07Z

Call the function within the data parameter:

Sunburst()
.data(genNode())

You can remove the console.log line, too 😊

const color = d3.scaleOrdinal(d3.schemePaired); Sunburst() .data(data .excludeRoot("true") .color((d, parent) => color(parent ? parent.data.name : null)) .tooltipContent((d, node) => Size: ${node.value}) (document.getElementById('chart'));

happytm · 2024-06-12T19:46:45Z

@mattsgreen I did following and no error in console log but still no chart showing up.

  <script src="https://unpkg.com/d3@7.8.5/dist/d3.min.js"></script>
  <script src="https://unpkg.com/sunburst-chart@1.19.2/dist/sunburst-chart.min.js"></script>

  <style>body { margin: 0 }</style>
</head>
<body>
  <div id="chart"></div>

  <script>
  
  function genNode() {
  return {
    name: "Clock",
    children: [...Array(12)].map((_, i) => ({
      name: "Months " + ++i,
      children: [...Array(31)].map((_, i) => ({
        name: "Days " + ++i,
        children: [...Array(24)].map((_, i) => ({
          name: "Hours " + ++i,
          children: [...Array(60)].map((_, i) => ({
            name: "Minutes " + ++i,
            value: 1
          }))
        }))
      }))
    }))
  }
}
console.log(genNode());

const data =  genNode();
console.log(data);

const color = d3.scaleOrdinal(d3.schemePaired);

    Sunburst()
     .data(data)
        .label('name')
        .size('size')
		.excludeRoot("true")
		
        .color((d, parent) => color(parent ? parent.data.name : null))
        .tooltipContent((d, node) => `Size: <i>${node.value}</i>`)
        (document.getElementById('chart'));
  </script>
</body>

mattsgreen · 2024-06-12T20:00:39Z

Remove

.label('name')
.size('size')

happytm · 2024-06-12T20:02:41Z

@mattsgreen It works ! Thank you very much.

happytm · 2024-06-12T21:02:11Z

@mattsgreen I have created simple home automation dashboard using uPlot but like to use sunburst-chart. I am not very good with javascript as you can see above. Can you please look at my repository linked below and help me?

https://github.com/happytm/BatteryNode

Thanks.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Chart based on month, date, hour and minutes. #114

Chart based on month, date, hour and minutes. #114

happytm commented Jan 7, 2024 •

edited

Loading

vasturiano commented Jan 7, 2024

happytm commented Jan 8, 2024

happytm commented Jun 11, 2024

mattsgreen commented Jun 12, 2024

happytm commented Jun 12, 2024

mattsgreen commented Jun 12, 2024 •

edited

Loading

happytm commented Jun 12, 2024

mattsgreen commented Jun 12, 2024

happytm commented Jun 12, 2024 •

edited

Loading

happytm commented Jun 12, 2024

Chart based on month, date, hour and minutes. #114

Chart based on month, date, hour and minutes. #114

Comments

happytm commented Jan 7, 2024 • edited Loading

vasturiano commented Jan 7, 2024

happytm commented Jan 8, 2024

happytm commented Jun 11, 2024

mattsgreen commented Jun 12, 2024

happytm commented Jun 12, 2024

mattsgreen commented Jun 12, 2024 • edited Loading

happytm commented Jun 12, 2024

mattsgreen commented Jun 12, 2024

happytm commented Jun 12, 2024 • edited Loading

happytm commented Jun 12, 2024

happytm commented Jan 7, 2024 •

edited

Loading

mattsgreen commented Jun 12, 2024 •

edited

Loading

happytm commented Jun 12, 2024 •

edited

Loading